Robocup@home

30-second Slideshows for Hackers. http://jdan.github.io/cleaver/

Intro

Cleaver turns this:

title: Basic Example
author:
  name: Jordan Scales
  twitter: jdan
  url: http://jordanscales.com
output: basic.html
controls: true

--

# Cleaver 101
## A first look at quick HTML presentations

--

### A textual example

Content can be written in **Markdown!** New lines no longer need two angle brackets.

This will be in a separate paragraph

--

### A list of things

* Item 1
* Item B
* Item gamma

No need for multiple templates!

Into this:

Options

title: Basic Example
author:
  name: Jordan Scales
  twitter: jdan
  url: http://jordanscales.com
style: basic-style.css
output: basic.html

Cleaver supports several basic options that allow you to further customize the look and feel of your presentation, including author info, stylesheets, and custom templates.

See the documentation on options for more information.

Be sure to check out the wiki as well.

Themes

Check out the themes page on our wiki.

title: Theme Example
output: theme.html
theme: jdan/cleaver-retro

Cleaver has substantial theme support to give you more fine-grained control over your presentation, similar to options. Instead of manually specifying a stylesheet, template, layout, and others, you can specify a single theme containing each of these assets. More specifically, a theme may contain:

• style.css - styles for your presentation
• template.mustache - a template used to render the slides in your presentation
• layout.mustache - a template used to render the entire document of your presentation
• script.js - javascript to be included in your slideshow

A theme does not need to contain all of these files, only the ones present will be loaded into your slideshow.

Examples

• jdan/cleaver-retro

• matmuchrapna/cleaver-ribbon – Shower implemented in cleaver.

• sudodoki/reveal-cleaver-theme – cleaver meets reveal.js.

Markup

Cleaver slides are rendered using the following template:

{{#slides}}
  <div class="slide{{#hidden}} hidden{{/hidden}} {{classList}}" id="slide-{{id}}">
    <section class="slide-content">{{{content}}}</section>
  </div>
{{/slides}}

And produce the following markup:

+-------------------------------+
| #slide-N                      |
|     +-------------------+     |
|     | .slide-content    |     |
|     |                   |     |
|     |                   |     |
|     |                   |     |
|     |                   |     |
|     +-------------------+     |
|                               |
|                               |
| (navigation)                  |
+-------------------------------+

#slide-N (for example, #slide-3) allows you to identify a particular full-bleed slide by its position in the slideshow. It extends to the bounds of the page.

.slide-content is a smaller window which holds the actual content of the slide.

Class List

A class list can be placed after each "slice" (denoted --) to help you style individual slides without worrying about their index.

-- bg

This slide will have a class "bg" associated with it

-- bg blink

This one, too, but it will also have the class "blink"

Slide Types

Title slide

# Cleaver 101
## A first look at quick HTML presentations

h1 and h2 elements (prefaced with # and ## respectively), will automatically include padding to render a title slide.

Other slides

### A list of things

* Item 1
* Item B
* Item gamma

No need for multiple templates!

Since slides are written in Markdown, you can include things like lists, images, and arbitrary HTML.

h3 tags (prefaced ###) are automatically given a bottom border to represent a slide title.

Navigation

Cleaver supports keyboard navigation for switching between slides. Alternatively, click the control buttons located below the presentation.

To navigate the slideshow:

• forward: K, L, UP, RIGHT, PgDn, and Space
• reverse: H, J, LEFT, DOWN, PgUp, and Backspace

The toggle fullscreen mode, press the ENTER key.

--

MIT Licensed