reveal.js-docker

Docker images providing easier to use, opinionated reveal.js web apps - web-based slides/presentations. See example presentation for a showcase of all features.

Evolution of cloudogu/continuous-delivery-slides. Allows for

less cluttered Repos (more slides, less reveal.js)
faster startup / builds (don't have to build reveal.js over and over again)
easier updates (new version of docker image; no git merge necessary)

How to use
Development

How to use

Simplest start

Ships a default presentation:

docker run --rm -p 8080:8080 cloudogu/reveal.js

Presentation is served at http://localhost:8080

Ship your own slides

Have a look at the reveal.js-docker-example.

In a nutshell, just

mount your markdown slides to /reveal/docs/slides, e.g.
-v $(pwd)/docs/slides:/reveal/docs/slides and
start container (see bellow)
- there is also a variant with live-reloading for efficient slide creation.

More options

See index.html pseudo-template to see the effects of the options.

Mount additional folders to web server, e.g. like so:
-v $(pwd)/images:/reveal/images
Mount folder containing HTML fragment files (examples) to /resources
- slides.html ➡️ Customize slides from docs/slides (example).
  Useful if you want to hide slides from printing.
- additional.js - script executed before initializing reveal.js
- body-end.html - html injected at the end of HTML <body>
- footer.html, header-left.html, header-right.html - rendered at the footer (lower left corner) or header (upper left/right corner)
Optional Env vars: Note: Make sure to use single quotes, otherwise parsing in startPresentation.sh from example will fail
- TITLE='my title'
- THEME_CSS
  - cloudogu.css
  - cloudogu-black.css
  - reveal.js themes
- WIDTH, HEIGHT, MARGIN, MIN_SCALE, MAX_SCALE - presentation size
- SHOW_NOTES_FOR_PRINTING - print speaker notes - defaults to false.
- ADDITIONAL_REVEAL_OPTIONS - additional reveal.js options
- ADDITIONAL_PLUGINS - additional reveal.js plugins.
  - e.g. -e ADDITIONAL_PLUGINS="RevealMath"
  - Add the plugin script using ADDITIONAL_SCRIPT, e.g. -e ADDITIONAL_SCRIPT='<script src="plugin/math/math.js"></script>'
  - TODO legacy plugins
  - External plugins have to be mounted or copied to the /reveal folder, e.g. here
    -v $(pwd)/plugin/tagcloud:/reveal/plugin/tagcloud
- SKIP_TEMPLATING ignores all of the above elements and just launches with the index.html present.
  Useful when mounting your own index.html.

Running/Building containers

Note that reveal.js-docker-example also contains a convenient startup script.

# Development mode (with live reloading for editing the slides)
docker run --rm \
    -v $(pwd)/docs/slides:/reveal/docs/slides \
    -v $(pwd)/scripts/test:/resources \
    -e TITLE='my Title' -e THEME_CSS='cloudogu-black.css' \
    -p 8000:8000 -p 35729:35729 \
    cloudogu/reveal.js:dev

# Production Mode (smaller, more secure, just a static HTML site served by NGINX)
docker run --rm \
    -v $(pwd)/docs/slides:/reveal/docs/slides \
    -v $(pwd)/scripts/test:/resources \
    -e TITLE='my Title' -e THEME_CSS='cloudogu-black.css' \
    -p 8080:8080 \
    cloudogu/reveal.js

You can also build your own productive image:

FROM cloudogu/reveal.js:4.0.2-r3 as base

FROM base as aggregator
USER root
RUN mkdir -p /dist/reveal
COPY . /dist/reveal
RUN mv /dist/reveal/resources/ /dist

FROM base
ENV TITLE='my Title' \
    THEME_CSS='cloudogu-black.css'
COPY --from=aggregator --chown=nginx /dist /

Or if you want to run the container with --read-only file system, you can do the index.html rendering at build time, so no files need to be written at runtime:

FROM cloudogu/reveal.js:4.0.2-r3 as base

FROM base as aggregator
ENV TITLE='myTitle' \
    THEME_CSS='cloudogu-black.css'
USER root
COPY . /reveal
RUN mv /reveal/resources/ /
RUN /scripts/templateIndexHtml

FROM base
ENV SKIP_TEMPLATING='true'
COPY --from=aggregator --chown=nginx /reveal /reveal

You can then start your container like so

docker run --rm -u 1000000:1000000 --read-only -v someTempFileImage:/tmp yourImageName

Index.html pseudo-template

See index.html

Examples

cloudogu/reveal.js-docker-example

Real Life:

Development

Build Docker Images, from repo root

export DOCKER_BUILDKIT=false
docker build -t cloudogu/reveal.js:local .
docker build -t cloudogu/reveal.js:local-dev --build-arg ENV=dev .

Note: If only one build is required, buildkit would be more efficient. However, prod is failing with buildkit. Try it with export DOCKER_BUILDKIT=0 See this issue

Upgrading from upstream reveal.js

git remote add upstream https://github.com/hakimel/reveal.js
git pull upstream/tags/4.4.0 master
# Fix merge conflicts.
# Build Docker images and test both images variants (e.g. with cloudogu/reveal.js-docker-example)
git tag -s 4.4.0-r1
git push --follow-tags

Tests

Docker Image

Build (as described here) and run container as described here.

Script templateIndexHtml

Test script locally (manually for now 😬)

# For now manually
CAT_INDEX_HTML='true' RESOURCE_FOLDER='scripts/test' WEB_FOLDER='.' scripts/src/templateIndexHtml

cloudogu/reveal.js-docker