Open gquintana opened 5 years ago
I just did a setup that does just that using Visual Studio Code. You need to have the Live Server and the Run on Save extensions installed first.
After that follow these steps:
create-presentation.sh
script containing (And make is executable):
node asciidoctor-to-revealjs.js
"emeraldwalk.runonsave": {
"commands": [
{
"match": "presentation\\.adoc",
"cmd": "./create-presentation.sh"
},
{
"match": "presentation\\.css",
"cmd": "./create-presentation.sh"
}
]
}
If you now edit your asciidoc or CSS file, the browser should reload automatically.
Note that you can append #/5
manually to the URL if you want to directly jump to slide 5 after reloading. This is convenient to avoid having to navigate after each reload to the slide you are working on.
ruby guard + live reload extension in firefox
guard will rebuild the html when the adoc file is changing, and had also the possibility to notify the browser (with the live reload extension)
some browsers, like GNOME/epiphany, will reload a page that has changed on disk, if you open the html site as file, not via a web server, than live reload is not required
An option which uses "node.js" as originally request is browser-sync:
//preview.js
const asciidoctor = require('@asciidoctor/core')();
const asciidoctorRevealjs = require('@asciidoctor/reveal.js');
asciidoctorRevealjs.register();
const browserSync = require("browser-sync"); const bs = browserSync.create();
const adocFile = process.argv[2]; if (!adocFile) { console.error( "You must specify an asciidoctor file to be previewed! Example:\n", "node preview.js test\test.adoc" ); return; }
function convertFile(cause) {
asciidoctor.convertFile(adocFile, { safe: 'safe', backend: 'revealjs' });
console.log(Converted file: '${adocFile}' (${cause})
);
}
function watchCallback(filename) {
if (!filename.endsWith(".html") && !filename.startsWith(".")) {
convertFile('${filename}' changed
);
bs.reload();
}
}
convertFile("startup"); bs.watch(".").on("change", watchCallback);
bs.init({ server: true, startPath: adocFile.replace(".adoc", ".html") });
- install all dependencies and run the script for an "adoc" file. This shows the generated HTML file in your registered browser with hot reload (currently watching for all "change" events in the current workspace and ignoring filenames starting with "." and ending with ".html")
```sh
npm i --save-dev @asciidoctor/reveal.js asciidoctor browser-sync
node preview.js test/test.adoc
Another option, for those generating with the docker image in a shell script.
It works with any editor and any browser.
inotifywait
in shell to wait for file changespython3 -m http.server
live.js
in your generated files, using docinfo-header.html
in generation, with this additional line : <script type="text/javascript" src="http://livejs.com/live.js"></script>
All these approaches are very interesting. Thanks for taking the time to document them here. I'll start experimenting and post here about which one I feel we should officially support.
the docker image
Which docker image? We don't have an official one yet. However, it could be interesting to build an official one.
There is something which seems official, having all backends : https://github.com/asciidoctor/docker-asciidoctor.
Generating myself HTML5 / Reveal.js / PDF both locally and in CI, I found that way more efficient. I went tired maintaining my Maven stack, and don't mind waiting for features while having a guaranteed compatibility !
It works with any editor and any browser.
* use `inotifywait` in shell to wait for file changes
For me :revealjs_hash: true
and this script together work well:
# sudo apt-get install inotify-tools
input=index.adoc
while inotifywait -e close_write $input;
do npx asciidoctor-revealjs $input;
done
We should probably document the various workflow in the documentation.
I found another option if you use the Maven plugin:
1) Add a docinfo-revealjs.html
with:
<script type="text/javascript" src="http://livejs.com/live.js"></script>
2) Add :docinfo: shared
to your adoc file of your presentation.
3) Add the fizzed-watcher-maven-plugin
to your pom.xml
:
<plugin>
<groupId>com.fizzed</groupId>
<artifactId>fizzed-watcher-maven-plugin</artifactId>
<version>1.0.6</version>
<configuration>
<watches>
<watch>
<directory>src/docs/asciidoc</directory>
</watch>
</watches>
<goals>
<goal>process-resources</goal>
</goals>
</configuration>
</plugin>
4) Run mvn fizzed-watcher:run
in a separate terminal.
5) Use npm install -g livereload
to install livereload and start it with livereload target/generated-slides/
in a separate terminal
6) Create your presentation normally via Maven 1 time (e.g. mvn process-resources
)
7) Serve the presentation on a simple webserver. I use python3 -m http.server -d target/generated-slides/
in a 3rd terminal.
8) Open http://localhost:8000 in your browser and enable the livereload browser extension.
About https://github.com/asciidoctor/asciidoctor-reveal.js/issues/248#issuecomment-579277817:
- add
live.js
in your generated files, usingdocinfo-header.html
in generation, with this additional line :<script type="text/javascript" src="http://livejs.com/live.js"></script>
You need to use docinfo-revealjs.html
now instead of docinfo-header.html
.
Is possible to have browser hot reload: when an AsciiDoc file is changed, HTML is rebuilt and browser reloads new page?
Does someone have some nodejs or anything else do that?