GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → jdan → Cleaver

jdan / Cleaver

Licence: mit
30-second slideshows for hackers

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Labels

markdownslideshow

Projects that are alternatives of or similar to Cleaver

Backslide
💦 CLI tool for making HTML presentations with Remark.js using Markdown
Stars: ✭ 679 (-82.71%)
Mutual labels:  slideshow, markdown
Remark Boilerplate
A boilerplate to create presentations using remark, Gulp, Stylus and more.
Stars: ✭ 41 (-98.96%)
Mutual labels:  slideshow, markdown
Gatsby Starter Deck
🗣 Create presentations using Gatsby, React & Markdown.
Stars: ✭ 522 (-86.71%)
Mutual labels:  slideshow, markdown
Xaringan
Presentation Ninja 幻灯忍者 · 写轮眼
Stars: ✭ 1,129 (-71.25%)
Mutual labels:  slideshow, markdown
Remark
A simple, in-browser, markdown-driven slideshow tool.
Stars: ✭ 11,709 (+198.17%)
Mutual labels:  slideshow, markdown
Press
Minimalist Markdown Publishing for Nuxt.js
Stars: ✭ 181 (-95.39%)
Mutual labels:  slideshow, markdown
Showoff
Don't just present; interact with your audience!
Stars: ✭ 879 (-77.62%)
Mutual labels:  slideshow, markdown
Nodeppt
This is probably the best web presentation tool so far!
Stars: ✭ 9,589 (+144.18%)
Mutual labels:  slideshow, markdown
Patat
Terminal-based presentations using Pandoc
Stars: ✭ 1,725 (-56.07%)
Mutual labels:  slideshow, markdown
Slideshow
slideshow gems - write your slides / talks / presentations in plain text with markdown formatting conventions
Stars: ✭ 173 (-95.59%)
Mutual labels:  slideshow, markdown
Hacker Slides
A small UI for building presentation slides from markdown markup
Stars: ✭ 316 (-91.95%)
Mutual labels:  slideshow, markdown
Crowbook
Converts books written in Markdown to HTML, LaTeX/PDF and EPUB
Stars: ✭ 399 (-89.84%)
Mutual labels:  markdown
React Native Simple Markdown
📜 React Native Markdown component (iOS & Android).
Stars: ✭ 389 (-90.09%)
Mutual labels:  markdown
Mark Mind
MarkMind — a mind map and outliner editor for Windows, Mac, Linux, andriod and ios ,it support markdown in node.
Stars: ✭ 385 (-90.2%)
Mutual labels:  markdown
Gostatic
Fast static site generator
Stars: ✭ 387 (-90.15%)
Mutual labels:  markdown
Remark
remark is a popular tool that transforms markdown with plugins. These plugins can inspect and change your markup. You can use remark on the server, the client, CLIs, deno, etc.
Stars: ✭ 4,746 (+20.86%)
Mutual labels:  markdown
Lookatme
An interactive, terminal-based markdown presenter
Stars: ✭ 392 (-90.02%)
Mutual labels:  markdown
Github Markdown Toc.go
Easy TOC creation for GitHub README.md (in go)
Stars: ✭ 387 (-90.15%)
Mutual labels:  markdown
Forum Java
一款用 Java（spring boot） 实现的现代化社区（论坛/问答/BBS/社交网络/博客）系统平台。A modern community (forum/Q&A/BBS/SNS/blog) system platform implemented in Java（spring boot）.
Stars: ✭ 380 (-90.32%)
Mutual labels:  markdown
Commonmarkattributedstring
Create NSAttributedStrings from Markdown Text
Stars: ✭ 382 (-90.27%)
Mutual labels:  markdown
View All Similar Projects ➔

Cleaver

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

Travis Build NPM version

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:

output

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

cleaver-retro

cleaver-ribbon

reveal-cleaver-theme

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 - settings.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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].