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)
Ships a default presentation:
docker run --rm -p 8080:8080 cloudogu/reveal.jsPresentation is served at http://localhost:8080
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/slidesand - start container (see bellow)
- there is also a variant with live-reloading for efficient slide creation.
See also examples.
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
/resourcesslides.html➡️ Customize slides fromdocs/slides(example).
Useful if you want to hide slides from printing.additional.js- script executed before initializing reveal.jsbody-end.html-htmlinjected at the end of HTML<body>footer.html- rendered at the footer (lower left corner) for now only works with cloudogu Themes
- Optional Env vars:
TITLETHEME_CSScloudogu.csscloudogu-black.css- reveal.js themes
SHOW_NOTES_FOR_PRINTING- print speaker notes - defaults tofalse.ADDITIONAL_REVEAL_OPTIONS- additional reveal.js optionsADDITIONAL_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>' - External plugins have to be mounted or copied to the
/revealfolder, e.g. here
-v $(pwd)/plugin/tagcloud:/reveal/plugin/tagcloud
- e.g.
SKIP_TEMPLATINGignores all of the above elements and just launches with theindex.htmlpresent.
Useful when mounting your ownindex.html.
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.jsYou 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 /revealYou can then start your container like so
docker run --rm -u 1000000:1000000 --read-only -v someTempFileImage:/tmp yourImageNameSee index.html
Real Life:
Build Docker Images, from repo root
docker build -t prod .
docker build -t 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 See this issue
Build (as described here) and run container as described here.
Test script locally (manually for now 😬)
# For now manually
CAT_INDEX_HTML='true' RESOURCE_FOLDER='scripts/test' WEB_FOLDER='.' scripts/src/templateIndexHtml
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent