Skip to content

Docker images providing easier to use, opinionated reveal.js web apps - web-based slides/presentations

License

Notifications You must be signed in to change notification settings

cloudogu/reveal.js-docker

 
 

Repository files navigation

reveal.js-docker

Build Status

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)

Table of contents

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.

See also examples.

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
    • 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

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

About

Docker images providing easier to use, opinionated reveal.js web apps - web-based slides/presentations

Resources

License

Stars

Watchers

Forks

Languages

  • JavaScript 58.3%
  • HTML 24.2%
  • SCSS 16.0%
  • Other 1.5%