How long does it take you to create a RevealJS presentation ?

After a couple of months, I finally found a topic to write the very first post in my new Hubpress.io blog.

Today, we are going to talk about Asciidoctor and RevealJS. As you might know, you can use Asciidoctor to write and create RevealJS presentations. Therefore, if you are not familiar with Asciidoctor creating the first presentation can be tricky, especially if you plan to use diagrams (or other external modules).

Recently thanks to Andres Almiray (@aalmiray), I discovered Lazybones. A very simple template generator for Gradle projects. With Lazybones you can start a Gradle projects such as Spring boot, Groovy or even AsciidoctorJ using only 1 command. Therefore you still had to customize the generated project to be able to generate a RevealJS slideshow.

That’s why I have created the Asciidoctor-RevealJS template for Lazybones.

Long story short

Let’s play

Once you installed everything (GVM and Lazybones) all you need to do is:

$ lazybones create asciidoctor-revealjs 1.0.0 myAwesomePresentation

Then answer the questions (title for your presentation, who you are and the revealjs theme to use) and you are good to go.

If you look in your current directory you’ll find something like:

gscheibel@~/labs/adocs/blog/myAwesomePresentation $ tree
├── README.md
├── build.gradle
└── src
    └── docs
        └── asciidoc
            ├── images
            ├── slides
            ├── slides.adoc
            ├── snippets
            └── styles

All you need is under src/docs/asciidoc/, by default the main slide is slides.adoc. Remember the questions asked during the presentation setup, those information (title and author) are reused here. The theme can be found in the build.gradle file.

= How to write an HTML5 presentation with Asciidoctor and RevealJS ?
Guillaume Scheibel <guillaume.scheibel@gmail.com>

:imagesdir: images
:sourcedir: snippets

Let’s write

A way to create your presentation is one slide one file, it means every time you want to create a slide, you create a file (in slides/ for instance) and then include it in slides.adoc using the include directive (eg: include::slides/coolSlides.adoc[])

Let’s create

To create your presentation, all you need is the asciidoctor gradle task

$ gradle asciidoctor

Then you’ll find your presentation under build/asciidoc/html5.

Interested by hot-relaod while you’re writing ? $ gradle watch is going to become your best friend.

Let’s start

As usual, the fastest way to start is to use the docker container available here and via the $ docker pull asciidoctor/docker-asciidoctor command.

Finally

To answer the question in the title, it only takes few seconds to create an RevealJS presentation thanks to Asciidoctor and Lazybones. The template sources are available on Github and the binaries on Bintray.