{"id":13426776,"url":"https://github.com/jdan/cleaver","last_synced_at":"2025-05-14T09:08:32.980Z","repository":{"id":4951938,"uuid":"6109274","full_name":"jdan/cleaver","owner":"jdan","description":"30-second slideshows for hackers","archived":false,"fork":false,"pushed_at":"2021-10-19T12:36:46.000Z","size":5267,"stargazers_count":4039,"open_issues_count":17,"forks_count":306,"subscribers_count":85,"default_branch":"master","last_synced_at":"2025-04-13T00:39:26.031Z","etag":null,"topics":["markdown","slideshow"],"latest_commit_sha":null,"homepage":"http://jdan.github.io/cleaver","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"zulip/zulip","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jdan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-10-07T04:12:01.000Z","updated_at":"2025-04-12T07:40:15.000Z","dependencies_parsed_at":"2022-08-30T05:41:02.746Z","dependency_job_id":null,"html_url":"https://github.com/jdan/cleaver","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdan%2Fcleaver","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdan%2Fcleaver/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdan%2Fcleaver/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jdan%2Fcleaver/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jdan","download_url":"https://codeload.github.com/jdan/cleaver/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253856739,"owners_count":21974590,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["markdown","slideshow"],"created_at":"2024-07-31T00:01:44.283Z","updated_at":"2025-05-14T09:08:27.970Z","avatar_url":"https://github.com/jdan.png","language":"JavaScript","readme":"# Cleaver\n\n30-second Slideshows for Hackers. http://jdan.github.io/cleaver/\n\n[![Travis Build](https://travis-ci.org/jdan/cleaver.svg)](https://travis-ci.org/jdan/cleaver)\n[![NPM version](https://badge.fury.io/js/cleaver.svg)](http://badge.fury.io/js/cleaver)\n\n## Intro\n\nCleaver turns this:\n\n    title: Basic Example\n    author:\n      name: Jordan Scales\n      twitter: jdan\n      url: http://jordanscales.com\n    output: basic.html\n    controls: true\n\n    --\n\n    # Cleaver 101\n    ## A first look at quick HTML presentations\n\n    --\n\n    ### A textual example\n\n    Content can be written in **Markdown!** New lines no longer need two angle brackets.\n\n    This will be in a separate paragraph\n\n    --\n\n    ### A list of things\n\n    * Item 1\n    * Item B\n    * Item gamma\n\n    No need for multiple templates!\n\nInto this:\n\n![output](https://i.cloudup.com/cIssKFjcB6.gif)\n\n## Quick Start\n\nGet it [on NPM](https://npmjs.org/package/cleaver):\n\n```sh\nnpm install -g cleaver\n# To update: npm update -g cleaver\n```\n\nAnd run it like so:\n\n```bash\ncleaver path/to/something.md\n```\n\nYou can also watch for changes on a file and automatically recompile with:\n\n```bash\ncleaver watch path/to/something-changing.md\n\n# Watching for changes on presentation.md. Ctrl-C to abort.\n# Rebuilding: Thu Nov 07 2013 00:15:03 GMT-0500 (EST)\n# Rebuilding: Thu Nov 07 2013 00:15:21 GMT-0500 (EST)\n# Rebuilding: Thu Nov 07 2013 00:16:01 GMT-0500 (EST)\n# Rebuilding: Thu Nov 07 2013 00:16:09 GMT-0500 (EST)\n```\n\nUse the `--debug` flag to display debug information:\n\n```bash\n$ cleaver --debug examples/basic.md\n  cleaver loaded input document +0ms\n  helper read /Users/jordan/Projects/cleaver/templates/layout.mustache +0ms\n  helper read /Users/jordan/Projects/cleaver/templates/author.mustache +0ms\n  helper read /Users/jordan/Projects/cleaver/templates/default.mustache +0ms\n  cleaver loaded templates +3ms\n  cleaver parsed metadata +4ms\n  helper read /Users/jordan/Projects/cleaver/resources/default.css +13ms\n  helper read /Users/jordan/Projects/cleaver/resources/github.css +0ms\n  helper read /Users/jordan/Projects/cleaver/resources/script.js +0ms\n  cleaver loaded static assets +9ms\n  cleaver rendered slides +1ms\n  cleaver rendered presentation +1ms\n```\n\n## More Info\n\n**Cleaver** is a one-stop shop for generating HTML presentations in\nrecord time. Using some spiced up markdown, you can produce\ngood-looking, interactive presentations with a just a few lines of text.\n\nSlides are written in [Markdown](http://daringfireball.net/projects/markdown/),\nand are separated by two dashes (`--`).\n\n## Options\n\n    title: Basic Example\n    author:\n      name: Jordan Scales\n      twitter: jdan\n      url: http://jordanscales.com\n    style: basic-style.css\n    output: basic.html\n\nCleaver supports several basic options that allow you to further customize the\nlook and feel of your presentation, including author info, stylesheets, and\ncustom templates.\n\nSee the documentation on\n[options](https://github.com/jdan/cleaver/blob/master/docs/options.md) for more\ninformation.\n\nBe sure to check out the [wiki](https://github.com/jdan/cleaver/wiki) as well.\n\n## Themes\n\nCheck out the [themes](https://github.com/jdan/cleaver/wiki/Theme-Index)\npage on our [wiki](http://github.com/jdan/cleaver/wiki).\n\n    title: Theme Example\n    output: theme.html\n    theme: jdan/cleaver-retro\n\nCleaver has substantial theme support to give you more fine-grained control\nover your presentation, similar to [options](#options). Instead of manually\nspecifying a stylesheet, template, layout, and others, you can specify a single\ntheme containing each of these assets. More specifically, a theme may contain:\n\n* style.css - styles for your presentation\n* template.mustache - a template used to render the slides in your presentation\n* layout.mustache - a template used to render the entire document of your\npresentation\n* script.js - javascript to be included in your slideshow\n\nA theme does not need to contain all of these files, only the ones present\nwill be loaded into your slideshow.\n\n### Examples\n\n* [jdan/cleaver-retro](http://github.com/jdan/cleaver-retro)\n\n![cleaver-retro](https://i.cloudup.com/HLtcPJWJJl-1200x1200.png)\n\n* [matmuchrapna/cleaver-ribbon](http://github.com/matmuchrapna/cleaver-ribbon)\n– [Shower](http://shwr.me/) implemented in cleaver.\n\n![cleaver-ribbon](https://i.cloudup.com/GECEx5BmxI-1200x1200.png)\n\n* [sudodoki/reveal-cleaver-theme](http://github.com/sudodoki/reveal-cleaver-theme)\n– cleaver meets [reveal.js](http://lab.hakim.se/reveal-js/#/).\n\n![reveal-cleaver-theme](https://i.cloudup.com/wlzisDLe32-1200x1200.png)\n\n### Specifying Themes\n\nThemes may be specified by one of the following options:\n\n* An absolute or relative path to a directory\n* A URL to a directory\n* A github repository in the form of *username/reponame*\n\n### Overriding Themes\n\nBy default, *style.css* and *script.js* will be **appended** to the default\nstylesheets and javascripts included in cleaver presentations. If you wish to\ncompletely override these defaults, you must include another file in your\ntheme - settings.json - corresponding to the following:\n\n```json\n{\n  \"override\": true\n}\n```\n\nTemplate files will automatically override the default templates.\n\n### More Info\n\nFor more information on themes, check out\n[our documentation](https://github.com/jdan/cleaver/blob/master/docs/themes.md).\n\n## Markup\n\nCleaver slides are rendered using the following template:\n\n```handlebars\n{{#slides}}\n  \u003cdiv class=\"slide{{#hidden}} hidden{{/hidden}} {{classList}}\" id=\"slide-{{id}}\"\u003e\n    \u003csection class=\"slide-content\"\u003e{{{content}}}\u003c/section\u003e\n  \u003c/div\u003e\n{{/slides}}\n```\n\nAnd produce the following markup:\n\n```\n+-------------------------------+\n| #slide-N                      |\n|     +-------------------+     |\n|     | .slide-content    |     |\n|     |                   |     |\n|     |                   |     |\n|     |                   |     |\n|     |                   |     |\n|     +-------------------+     |\n|                               |\n|                               |\n| (navigation)                  |\n+-------------------------------+\n```\n\n**#slide-N** (for example, *#slide-3*) allows you to identify a particular\nfull-bleed slide by its position in the slideshow. It extends to the bounds of\nthe page.\n\n**.slide-content** is a smaller window which holds the actual content of the\nslide.\n\n### Class List\n\nA class list can be placed after each \"slice\" (denoted `--`) to help you\nstyle individual slides without worrying about their index.\n\n```\n-- bg\n\nThis slide will have a class \"bg\" associated with it\n\n-- bg blink\n\nThis one, too, but it will also have the class \"blink\"\n```\n\n## Slide Types\n\n### Title slide\n\n    # Cleaver 101\n    ## A first look at quick HTML presentations\n\n**h1** and **h2** elements (prefaced with *#* and *##* respectively), will\nautomatically include padding to render a title slide.\n\n### Other slides\n\n    ### A list of things\n\n    * Item 1\n    * Item B\n    * Item gamma\n\n    No need for multiple templates!\n\nSince slides are written in [Markdown](http://daringfireball.net/projects/markdown/),\nyou can include things like lists, images, and arbitrary HTML.\n\n**h3** tags (prefaced `###`) are automatically given a bottom border to\nrepresent a slide title.\n\n## Navigation\n\nCleaver supports keyboard navigation for switching between slides.\nAlternatively, click the control buttons located below the presentation.\n\nTo navigate the slideshow:\n\n* **forward**: K, L, UP, RIGHT, PgDn, and Space\n* **reverse**: H, J, LEFT, DOWN, PgUp, and Backspace\n\nThe toggle fullscreen mode, press the **ENTER** key.\n\n## Contributing\n\n* Fork it\n* Clone it\n* Install dependencies (`npm install`)\n* Checkout a release branch (`git checkout -b feature/cool-wordart`)\n* Make changes, commit, and push (`npm test` and make sure it passes)\n* Open a pull request!\n\nWith \u0026lt;3,\u003cbr/\u003e[@jdan](http://jordanscales.com)\n\n--\n\n[MIT Licensed](https://github.com/jdan/cleaver/blob/master/LICENSE)\n","funding_links":[],"categories":["JavaScript","Presentation"],"sub_categories":["React Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdan%2Fcleaver","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjdan%2Fcleaver","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjdan%2Fcleaver/lists"}