Presentations with reveal.js

reveal.js is an open source HTML presentation framework. It’s a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

Instead of creating your reveal.js presentations in HTML markup (or markdown) you may prefer to use AsciiDoc instead.

docToolchain uses Asciidoctor reveal.js to transform your AsciiDoc document into an HTML5 presentation designed to be executed by the reveal.js presentation framework.

This tutorial shows how easy it is to create a reveal.js slide deck with docToolchain. It was written for a Bash environment (Linux or macOS). The adoption to MS Powershell should be trivial.

Precondition

To follow the tutorial you either need to have docToolchain installed locally or a running docker environment. In the later case the first call to docToolchain will pull the container image which may take some time.

Create the Slide Deck Repository

  • Create a project directory

$ mkdir my-presentation
$ cd my-presentation

  • Download the docToolchain wrapper and set the executable permissions

$ curl -sLo dtcw doctoolchain.github.io/dtc
$ chmod +x dtcw

  • Initialize the git repository with the minimal files

$ git init

# Ignore generated files in your git repository
$ echo ".gradle" > .gitignore
$ echo "build" >> .gitignore
$ git add .gitignore

$ git commit -m "Initial commit for my reveal.js slide deck"

Create a minmal AsciiDoctor Reveal.js Presentation

  • Create a presentation.adoc file with an image

$ mkdir -p src/images
$ cat << EOF >> src/presentation.adoc
= Title Slide

== Slide 1

* This is the first slide

== Slide 2

* This is the second slide

== Slide with Image

* The Debian Logo

image::debian.svg[]
EOF

$ curl -Lo src/images/debian-logo.svg https://www.debian.org/logos/openlogo.svg

  • Create the docToolchain configuration file docToolchainConfig.groovy

$ cat << EOF >> docToolchainConfig.groovy
// Path where docToolchain creates its artifacts.
outputPath = 'build'

// Path where the docToolchain will search for the input files.
inputPath = 'src';

// Define which formats should be processed.
inputFiles = [
    [file: 'presentation.adoc', formats: ['revealjs']],
]
EOF

As alternative we could create the configuration by invoking ./dtcw tasks. If docToolchain doesn’t find a configuration file it will ask to create a new one. The generated configuration file contains the configuration for all tasks provided by docToolchain, which may be overwhelming.

  • Generate the slide deck

$ ./dtcw generateDeck

  • Find your slide deck at build/decks/presentation.html and open it in your browser.

  • Add the newly created files to you git project

$ git add docToolchainConfig.groovy src
$ git commit -m "Add my first reveal.js slide deck"

Congratulations for creating your first reaveal.js slide deck.

References