> fab show_ips  -H user@example_host
[example_host] Executing task 'ip_addresses'
[example_host] run: hostname -I
[example_host] out: 1.2.3.4

IPs of mobi12.uni.cx:
  1.2.3.4

  Done.  Disconnecting from example_host... done.

fabsetup

Collection of fabric tasks: * set up an owncloud server * set up an own android app repository (own F-Droid server) * set up a linux desktop: eg. configure vim, tmux, solarized colors (dotfiles on steroids!) * set up … * set up everything you need for a reveal.js presentation: sh fab setup.revealjs

3. fab setup.revealjs

A reveal.js Template

boilerplate for getting started on a nice reveal.js presentation: * reveal.js code installed (comes with built-in plugins) * Additional reveal.js plugins installed * index.html prepared accordingly * All slides are defined in slides.md

Set It Up

• install fabsetup: sh sudo apt-get install git fabric # mkdir -p ~/repos && cd ~/repos git clone https://github.com/theno/fabsetup

• run fabric task setup.revealjs: sh cd ~/repos/fabsetup fab setup.revealjs -H localhost

fab setup.revealjs

Asks for: * Presentation base directory * Title * Sub-title * Short description

fab setup.revealjs

Optionally: * Create github repo * Download npm libs

When running again (also optional): * Re-install reveal.js codebase

howto

Boilerplate File Structure

~/repos/my_presi> tree
.
├── .git/
├── .gitignore
│
├── README.md   <-- Short description and usage
│
├── slides.md   <-- All slides are defined here
├── index.html  <-- Configuration
├── img/
│   └── thanks.jpg  <-- good place for images
│
└── reveal.js/   <--.
    ├── css/         `-- reveal.js code "hidden" in a subdir
    ├── js/               (keeps the basedir clean)
    ├── plugin/
    ...
    ├── img -> ../img                \
    ├── reveal.js -> ../reveal.js     |_ symbolic links in order
    ├── slides.md -> ../slides.md     |   to run `npm start`
    └── index.html -> ../index.html  /

template features

Plugins Built-In

All the built-in plugins are enabled in the index.html: * marked.js, markdown.js: Markdown support * highlight.js: Code syntax highlighting * zoom.js: Zoom in and out with ALT+click * notes.js: Speaker notes * math.js: Formatting math expressions

Additional Plugins

This additional plugins will be installed and set up, too: * menu.js: Slideout menu (slide index, change theme and transition) * toc-progress.js: “LaTeX Beamer-like progress indicator” * title-footer.js: “Footer showing title of presentation”

Customizations in reveal.js

• Don’t Capitalize Titles (NO FULL UPPERCASE HEADINGS)
• Images are displayed without border

Special Markdown Slide dividers

Two dividers exist: * New horizontal slide: \n---- ----\n * New vertical slide: \n----\n

Win-win: * “Raw” slides.md: Easy to read and edit * Horizontal lines in rendered Markdown: Easy to read, too

Create PDF

cumbersome. * With decktape

cd ~/bin/decktape/active && \                                               #
./phantomjs decktape.js --size 1280x800 URL ~/repos/my_presi/my_presi.pdf

• Or just print the slides.md rendered by github into a PDF: https://github.com/theno/revealjs_template/blob/master/slides.md

• Printing with chromium (or chrome) does not work well: https://theno.github.io/revealjs_template/?print-pdf#/

Note: URL can be of: * localhost:8000 * github.io page

Shortcut

Checkout the template presentation repo: sh git clone https://github.com/theno/revealjs_template ~/repos/my_presi

Then: * Adjust <title>reveal.js template</title> in index.html * Edit slides.md * Add symbolic link: sh cd ~/repos/my_presi && ln -snf ../reveal.js reveal.js/reveal.js

4. Publishing at github.io

Publishing as github page

A github repo (with index.html) can be rendered into a github.io page

1. Add remote repo at github.com
   (automated in fabsetup task setup.revealjs)

2. Configure entry point for github.io page
   (manually, select “master branch”)

5. Conclusion and Outlook

Conclusion

• Presentations with reveal.js are fancy and nice
• Writing slides in Markdown is easy
• fabric is a framework for powerfull setup scripts
• fabsetup is a collection of fabric tasks

fab setup.revealjs (one of this tasks): Creates the boilerplate of your presentation: * Clean basedir (reveal.js codebase hidden in a subdir) * Slides are written in a Markdown file * Usefull plugins enabled (eg. footer, toc, menu) * Versioning with git * Publishing at github.io

>>just edit the slides.md<<

Outlook

• Publishing with own webserver
  • Implement restricted access
• Custom design
  • Create themes / corporate design
• Explore more plugins
• Customize fabsetup task setup.revealjs

Alternative:

prez – “Opiniated Reveal slideshow generator with nice PDF output and ability to treat notes as first-class content.”

References

• reveal.js: http://lab.hakim.se/reveal-js
  • at github: https://github.com/hakimel/reveal.js

• markdown: https://daringfireball.net/projects/markdown
  • cheatsheet: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

• fabric: http://www.fabfile.org
  • at github: https://github.com/fabric/fabric

• fabsetup: https://github.com/theno/fabsetup
  • revealjs howto

Thank You for Your attention!