gist-reveal

Gist-reveal is a slideshow templating service that makes it possible to view and share reveal.js presentations using github's gist service as a datastore.

Reveal.js CSS and Javascript includes are automatically provided in each page request.

Try it out at: https://gist-reveal.it

Gist-powered reveal.js presentations

Store revealjs HTML or Markdown <section>s in a gist, then append your resulting gist id to any gist-reveal site url to view your slides:

https://gist-reveal.it/YOUR_GIST_ID

For example, the slide sources at https://gist.github.com/af84d40e58c5c2a908dd can be viewed here:

https://gist-reveal.it/af84d40e58c5c2a908dd

Use bit.ly or another url shortener to make these long urls easier to share, and to make enagement rates easier to track.

Broadcast slide transitions

Presenters can visit /login to configure their browser as a presentation device:

https://gist-reveal.it/login

WARNING: Only the gist owner is allowed to broadcast slide transitions to viewers. If needed, fork the slide deck and present using the new gist ID. See the web console output for additional details.

Visit /logout to exit presentation mode:

https://gist-reveal.it/logout

Gist-powered themes

Use the "?theme=" querystring parameter to access site themes. Available CSS themes include the default list of revealjs themes:

• revealjs black theme
• revealjs simple theme
• revealjs league theme
• revealjs sky theme

It is also possible to load a custom theme using another gist. For example:

• a dark winter theme

Nicer presentation paths

Creating a bit.ly shortname for your longer gist-reveal/gist_id deck urls will also make your presentations available at an alternate presentation path:

http://gist-reveal.it/bit.ly/SHORTNAME

Example:

http://gist-reveal.it/bit.ly/k8s-workshops

Much nicer! Make sure to continue sending traffic to the shorter bit.ly/shortname url for metrics collection purposes.

Export to PDF

Add "print-pdf" to the querystring to render a printer-friendly version of your slides:

http://gist-reveal.it/YOUR_GIST_ID?print-pdf

Then, print to file to generate the PDF

Running gist-reveal

Run your own Gist-powered reveal.js slideshow service with gist-reveal

Application Config

The following environment variables can be used to configure gist-reveal:

Variable Name	Contents	Default Value
DEFAULT_GIST	The default gist id content for the site	af84d40e58c5c2a908dd
REVEAL_THEME	The site's default theme. Can be a locally bundled theme name, or a remote gist_id	450836bbaebcf4c4ae08b331343a7886
GH_API_TOKEN	GitHub API token	unset
CLIENT_ID	GitHub OAuth Client ID. Required for Websocket connections	unset
CLIENT_SECRET	GitHub OAuth Client Secret. Required for Websocket connections	unset
PRIVATE_KEY	TLS private key provided as Env var or file: private.key	unset
PUBLIC_CRT	Public TLS certificate as Env var or as file: public.crt	unset
PORT	the server port	8080
GA_TRACKER	Google Analytics tracker token	unset
GIST_THEMES	Allow reveal.js CSS themes to be installed dynamically via querystring "?theme=gist_id"	"true"
SANITIZE_INPUT	Sanitize gist input. Strip script tags and iframes	"false"
GIST_PATH	Load slides from a local gist repo (Disable API and Websockets)	unset
GIST_FILENAME	Load slides from a local gist repo (Disable API and Websockets)	unset

To enable websocket connections, provide an OAuth CLIENT_ID and CLIENT_SECRET with a redirect url configured to: YOUR_SITE/github/callback

Local Development

Install dependencies:

npm install

Start the app:

npm start

Optionally generate a localhost certificate for testing https+wss connections:

openssl req -x509 -out public.crt -keyout private.key \
  -newkey rsa:2048 -nodes -sha256 \
  -subj '/CN=localhost' -extensions EXT -config <( \
   printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

Local Dev with Local Slides

Prefer to develop slides using your own editor? Or, plan to make a lot of changes to your presentation sources? Try loading a local clone of your gist repo!

1. Make a local clone of your gist repo in another folder:

git clone git@gist.github.com:af84d40e58c5c2a908dd ../example-slides

2. Use the GIST_PATH and GIST_FILENAME parameters to load local slides:

GIST_PATH=../example-slides GIST_FILENAME=gist-reveal.it-slides.html npm start

When you are done editing, add and commit your changes then git push to deploy.

Containers

Run the container image locally on port 8080 using podman or docker:

docker run --rm -p 8080:8080 ryanj/gist-reveal

Environment variables can be passed into the container to configure the default theme, or to change the default slideshow content:

docker run --rm -p 8080:8080 -e "DEFAULT_GIST=YOUR_DEFAULT_GIST_ID" ryanj/gist-reveal

Kubernetes

Create a kubernetes pod and service, both named gist-reveal:

kubectl run gist-reveal --image=ryanj/gist-reveal --expose --port=8080 \
--env="DEFAULT_GIST=YOUR_DEFAULT_GIST_ID" \
--env="GH_API_TOKEN=YOUR_GH_API_TOKEN" \
--env="CLIENT_SECRET=YOUR_GH_CLIENT_SECRET" \
--env="CLIENT_ID=YOUR_CLIENT_ID_VALUE"

License

gist-reveal was created at the first DockerCon Hackathon by @ryanj and @fkautz.

Reveal.js is MIT licensed Copyright (C) 2014 Hakim El Hattab, http://hakim.se