SUSE-themed reveal.js presentation template

This repo provides a template for presentation slide decks which aims to be virtually identical to the SUSE corporate style template provided in LibreOffice Impress format. It is based on a template by Florian Haas which uses reveal.js (by Hakim El-Hattab and contributors) as the underlying presentation technology.

You can view the template slides online here; press Space or n (not the right arrow) to advance 1 slide at a time.

Building slides with reveal.js has a number of significant advantages over LibreOffice Impress:

• Write slides in Markdown!

• Develop your slide content with git!

  • Collaborate on content via pull requests!

  • Compare versions with git diff!

  • Use branches when creating a new presentation on an existing one, and use tags to mark every "release" version which you use for a public presentation. No more having to hoard many slightly different versions of the same file!

  • For slides which get copied from deck to deck many times over several years, track the source and development history via git blame.

• Since the browser is the renderer, you can view the slide-deck on any device, anywhere. Want to show it to someone when you're out at lunch? No problem - just use your phone.

• The content is just HTML, CSS, and Javascript, so the sky is the limit for how it can be extended. Want to switch slides by waving your hands around in the air, or poll the audience and display a slide with a dynamically updating graph of the poll results, or get a tele-prompter via Google Glass? No problem!

• Dynamically generate QR codes for any URL.

• (Optionally) publish your presentations via GitHub Pages hosting, or any other web server. In large lecture halls, people far away or with poor eyesight can follow along on their laptops (and even have their slides automatically advance when yours do!)

• Many keyboard shortcuts for navigation (press ? to see them).

• Aspect ratio can be easily switched between 16x9 and 4x3, since it's just HTML and CSS.

• Many cool plugins and other tricks to play around with, e.g.

  • chalkboard - turn your slides into a chalkboard for real-time drawing

  • asciinema - play recorded demos from within a slide

  • shellinabox - do live demos from within a shell embedded in a slide

• Automatic code syntax-highlighting via highlight.js, themed in SUSE colours.

• Navigation menu to easily jump around between slides

• Zoom to 1,000 feet above your presentation to see the whole thing laid out in two dimensions (one column per section), then swoop back in to the slide you want.

It also has feature parity with LibreOffice Impress in many respects, e.g.:

• Presentation mode where you can view speaker notes, timings, and the next slide, in a separate window.

• Export to PDF

• Incorporate LibreOffice diagrams

For more information on reveal.js, watch Florian's OSCON 2014 presentation:

Of course, the slides for that talk use this same approach, so they are hosted here on GitHub Pages, and you can also examine the source code for them.

How to use

Simple: just fork this repo and drop Markdown files into markdown and images into images. Then, fix up index.html to include your Markdown-authored sections.

This repo has two branches, one named master and one gh-pages. Make sure you do your regular work in master, then run ./bin/update-gh-pages.sh. Alternatively merge into gh-pages and push both branches. Your presentation will then be rendered to GitHub Pages at a URL of the form:

• http://username.github.io/presentation-repo-name

You can share the URL immediately, and GitHub will host it for you, indefinitely, for free.

Theming

The theme is defined in css/reveal-override.scss using Sass; if you update this, you will need to re-compile into css/reveal-override.css via:

$ sass --sourcemap css

If you are doing continual development on the file, then run this in the background to automatically re-compile every time the .scss file is changed:

$ sass --watch --sourcemap css

If you are using GitHub Pages, make sure that the latest versions of the generated .css files are committed and pushed to the remote gh-pages branch.

Running things locally

If you want to run your slides locally, rather than on GitHub Pages, just drop them into the DocumentRoot of a web server, like Apache or lighttpd.

For lighttpd, you may also want to set the following options:

dir-listing.encoding = "utf-8"
server.dir-listing   = "enable"
server.modules      += ( "mod_userdir" )
userdir.path         = "public_html"

Use the provided .gitmodules file to automatically clone local copies of reveal.js, qrcodejs, and reveal.js-menu:

git submodule init
git submodule update

Generate the reveal-override.css file:

sass --update css/reveal-override.scss

Then, create a symlink to your Git checkout in ~/public_html, such as:

ln -s ~/git/my-presentation ~/public_html/

... and access your presentation from http://localhost/~yourusername/my-presentation/

Feedback

If you find the content in this repo useful, it would be great if you could let Florian and Adam know. You could either star this repo, or even better, send us happiness packets :-)

Also, if you notice any areas for improvement, please submit issues and pull requests via this repository.

Thanks!