Cleaver

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:

Quick Start

Get it on NPM:

npm install -g cleaver
# To update: npm update -g cleaver

And run it like so:

cleaver path/to/something.md

You can also watch for changes on a file and automatically recompile with:

cleaver watch path/to/something-changing.md

# Watching for changes on presentation.md. Ctrl-C to abort.
# Rebuilding: Thu Nov 07 2013 00:15:03 GMT-0500 (EST)
# Rebuilding: Thu Nov 07 2013 00:15:21 GMT-0500 (EST)
# Rebuilding: Thu Nov 07 2013 00:16:01 GMT-0500 (EST)
# Rebuilding: Thu Nov 07 2013 00:16:09 GMT-0500 (EST)

Use the --debug flag to display debug information:

$ cleaver --debug examples/basic.md
  cleaver loaded input document +0ms
  helper read /Users/jordan/Projects/cleaver/templates/layout.mustache +0ms
  helper read /Users/jordan/Projects/cleaver/templates/author.mustache +0ms
  helper read /Users/jordan/Projects/cleaver/templates/default.mustache +0ms
  cleaver loaded templates +3ms
  cleaver parsed metadata +4ms
  helper read /Users/jordan/Projects/cleaver/resources/default.css +13ms
  helper read /Users/jordan/Projects/cleaver/resources/github.css +0ms
  helper read /Users/jordan/Projects/cleaver/resources/script.js +0ms
  cleaver loaded static assets +9ms
  cleaver rendered slides +1ms
  cleaver rendered presentation +1ms

More Info

Cleaver is a one-stop shop for generating HTML presentations in record time. Using some spiced up markdown, you can produce good-looking, interactive presentations with a just a few lines of text.

Slides are written in Markdown, and are separated by two dashes (--).

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.

Specifying Themes

Themes may be specified by one of the following options:

• An absolute or relative path to a directory
• A URL to a directory
• A github repository in the form of username/reponame

Overriding Themes

By default, style.css and script.js will be appended to the default stylesheets and javascripts included in cleaver presentations. If you wish to completely override these defaults, you must include another file in your theme - options.json - corresponding to the following:

{
  "override": true
}

Template files will automatically override the default templates.

More Info

For more information on themes, check out our documentation.

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.

Contributing

• Fork it
• Clone it
• Install dependencies (npm install)
• Checkout a release branch (git checkout -b feature/cool-wordart)
• Make changes, commit, and push (npm test and make sure it passes)
• Open a pull request!

With <3,@jdan

--

MIT Licensed