Skip to content

Commit

Permalink
README :shipit:
Browse files Browse the repository at this point in the history
  • Loading branch information
jdan committed Aug 28, 2013
1 parent e4aa1bb commit 7049d52
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 22 deletions.
4 changes: 2 additions & 2 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
Copyright (c) 2012 Jordan Scales
Copyright (c) 2013 Jordan Scales

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
Expand All @@ -19,4 +19,4 @@ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
OTHER DEALINGS IN THE SOFTWARE.
127 changes: 107 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,52 +1,139 @@
# Cleaver

a command-line tool for generating HTML slideshows with JSON
30-second slideshows for hackers

---
## Intro

## Quick Setup
Cleaver turns this:

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

--

# 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 mutliple templates!

Into this:

![output](https://dsz91cxz97a03.cloudfront.net/hHBVUtbREK.gif)

## Quick Start

Get it on NPM.

```
npm install -g cleaver
```

And use it like so (with an optional `--debug` parameter)
Run it.

```
cleaver --file=path/to/something.json
cleaver path/to/something.md
```

## About

See it in action [here](http://prezjordan.github.io/cleaver).
## More Info

**Cleaver** is a one-stop shop for generating HTML presentations in
record time. Using only an intuitive JSON format, you can produce
record time. Using some spiced up markdown, you can produce
good-looking, interactive presentations without writing any code
or placing a measly textbox.

## Development
All you need to do is write some blocks of markdown, separated by `--`
on its own line and include metadata at the top.

Let's walk through the above example piece by piece.

**Cleaver** uses [node](http://nodejs.org) for development. Once you are
all set up and have cloned your fork, you can begin making
changes to the code base. The outline is described below.
### Metadata

##
title: Basic Example
author:
name: "Jordan Scales"
twitter: "@jdan"
url: "http://jordanscales.com"
output: basic.html

## Further Information
The first section of any cleaver document is the metadata. Currently cleaver supports
the following fields.

**Cleaver** produces a *single* document, `output.html` containg CSS and JavaScript (jQuery) code. Everything is
rendered from `templates/layout.mustache`.
* **title**: The title of the slideshow
* **author**
* **name**: Your full name
* **url**: A url to your website
* **twitter**: Your twitter handle
* **style**: An optional stylesheet to load
* **output**: A location to save the rendered document (default: *output.html*)
* **controls**: A boolean representing whether or not arrow buttons should be included (default: *true*)

`styles/default.css` is always rendered first. If an additional
stylesheet is specified with the `--style` flag, that will be rendered
*after* so you can override the default style. Watch out for specificity.
Title is the only required field. If author is included, the following slide will
be automatically inserted at the end of your presentation:

![author slide](https://dsz91cxz97a03.cloudfront.net/YxgwvqVZNg-1200x1200.png)

### 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 mutliple templates!

Since slides are written in [Markdown](http://daringfireball.net/projects/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

To navigate the slideshow:

* **reverse**: H, J, LEFT, DOWN, and Backspace
* **forward**: K, L, ENTER, UP, RIGHT, and Space

Or click the buttons

## Contributing

* Fork it
* Clone it
* Checkout a release branch (`git checkout -b feature/cool-wordart`)
* Open a pull request!

With <3,

Jordan

[MIT Licensed](https://github.com/prezjordan/cleaver/blob/master/LICENSE)

0 comments on commit 7049d52

Please sign in to comment.