Description

With Presentador, you describe the content of each of your slides using Markdown and it will produce a beautiful presentation ready to be hosted anywhere you want. Don't worry about how they're going to look, just focus on your presentation.

There is only a single layout depending on the elements of your slide. Presentador parses the elements in each slide and assigns a certain pre-defined layout to it.

See it in action. Presentadors' website is a presentation itself. 🙂

Installation

Quick start

Create a folder to put your slides. Create one file for each slide and give them a number which will be the order of that slide, e.g 1.md, 2.md...

Write common Markdown in each slide, add your headers, paragraphs, images, etc. See some examples in the fixtures/ folder.

Then run:

npx presentador develop -d FOLDER

A local server will start in development mode where you can start writing your presentation and changes will reflect immidiately in your browser.

When you're done, run:

npx presentador build -d FOLDER

And that will produce a static site with your presentation ready to be hosted anywhere.

Install locally

npm install presentador

or

yarn add presentador

Then add it to your package.jsons' scripts section:

"scripts": {
  "build": "presentador build -d slides/",
  "develop": "presentador develop -d slides/",
  "serve": "presentador serve -d slides/"
}

Usage

Commands

There are three commands currently:

> build

To build your presentation and output the final artifacts that you can host anywhere you want.

> serve

To serve your presentation from your own machine.

> develop

To develop locally your presentation.

Input

In all cases above, you need to pass a directory with a list of Markdown files.

> presentador build -d slides/

Contributing

We could use all the help we can get. So please feel free to go through our open issues or create one if thought of a new cool feature or found a bug.

Run locally

Running Presentador will be as easy as forking and cloning this repo, then running:

> yarn

> yarn dev

The local dev server will run against the website folder which contains Presentadors' website. You can also the fixtures folder for more examples and testing.

To run the playground:

> yarn playground

Compilation

The process of compiling a presentation is actually quite simple. For each Markdown file you supply, Presentador will parse it and make a list of some specific elements.

If then that list matches one of the below, it will pass them to the appropriate renderer and the renderer will decide how to lay them out and render them. If it doesn't matches any, the normal renderer will kick in.

| List | State Name | Renderer | | ------------------------------------ | ------------------------- | ------------------------------------------------------------------------- | | Header | singleHeader | singleHeader | | Header,Header | twoHeaders | twoHeaders | | Header,Paragraph | headerParagraph | headerParagraph | | Header,Paragraph,Image | headerParagraphImage | headerParagraphImage | | Header,Paragraph,Paragraph,... | headerManyParagraphs | headerManyParagraphs | | Header,Paragraph,Paragraph,...,Image | headerManyParagraphsImage | headerManyParagraphsImage | | Header,List | headerList | headerList | | Header,Image | headerImage | headerImage | | Blockquote | blockquote | blockquote | | Image | image | image | | Image,Image,... | manyImages | manyImages | | Header,Codeblock | headerCodeblock | headerCodeblock |