kbariotis / presentador

πŸ“½ An opinionated presentation framework. Just write what you want to present and it will do the rest.
https://www.presentador.dev
MIT License
25 stars 1 forks source link
javascript presentation slides

πŸ“½ Presentador

An opinionated presentation framework. Just write what you want to present and it will do the rest.

![Workflow state](https://github.com/kbariotis/presentador/workflows/Release/badge.svg) ![npm downloads](https://img.shields.io/npm/dw/presentador?label=npm%20downloads) ![npm downloads](https://img.shields.io/npm/v/presentador?label=npm%20version)

Presentador Demo

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