All Projects → kbariotis → presentador

kbariotis / presentador

Licence: MIT license
📽 An opinionated presentation framework. Just write what you want to present and it will do the rest.

Programming Languages

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

Projects that are alternatives of or similar to presentador

Kittik
Create slides in TypeScript and present them in the terminal using ASCII only!
Stars: ✭ 147 (+488%)
Mutual labels:  presentation, slides
Marp
The entrance repository of Markdown presentation ecosystem
Stars: ✭ 3,378 (+13412%)
Mutual labels:  presentation, slides
Presa
🎞 Make stylish presentations in React, powered by styled-components
Stars: ✭ 169 (+576%)
Mutual labels:  presentation, slides
Patat
Terminal-based presentations using Pandoc
Stars: ✭ 1,725 (+6800%)
Mutual labels:  presentation, slides
s6
S6 Blank - Slideshow templates using HTML 5, CSS 3 'n' JavaScript 2017+ w/ Bespoke.js-compatible "microkernel"
Stars: ✭ 91 (+264%)
Mutual labels:  presentation, slides
Remarker
▶️ Remark cli
Stars: ✭ 132 (+428%)
Mutual labels:  presentation, slides
Reveal Ck
Create slides with ruby (and usually in markdown)
Stars: ✭ 202 (+708%)
Mutual labels:  presentation, slides
Spectacle
ReactJS based Presentation Library
Stars: ✭ 9,106 (+36324%)
Mutual labels:  presentation, slides
bs-spectacle
No description or website provided.
Stars: ✭ 15 (-40%)
Mutual labels:  presentation, slides
Libreoffice Impress Templates
Freely-licensed LibreOffice Impress templates
Stars: ✭ 238 (+852%)
Mutual labels:  presentation, slides
Mdx Deck
♠️ React MDX-based presentation decks
Stars: ✭ 10,487 (+41848%)
Mutual labels:  presentation, slides
dekk
👁 A presentation tool written in react.js
Stars: ✭ 33 (+32%)
Mutual labels:  presentation, slides
What I Have Read
Paper Lists, Notes and Slides, Focus on NLP. For summarization, please refer to https://github.com/xcfcode/Summarization-Papers
Stars: ✭ 110 (+340%)
Mutual labels:  presentation, slides
markdown-slides
Using markdown, write simple but beautiful presentations with math, animations and media.
Stars: ✭ 64 (+156%)
Mutual labels:  presentation, slides
Nodeppt
This is probably the best web presentation tool so far!
Stars: ✭ 9,589 (+38256%)
Mutual labels:  presentation, slides
Tslide
Terminal SlideDeck, supporting markdown.
Stars: ✭ 198 (+692%)
Mutual labels:  presentation, slides
Beamerpresenter
Simple dual screen pdf presentation software
Stars: ✭ 30 (+20%)
Mutual labels:  presentation, slides
Cppcon2015
Repository for the slides and the code of my CppCon 2015 talks.
Stars: ✭ 77 (+208%)
Mutual labels:  presentation, slides
Marp Core
The core of Marp converter
Stars: ✭ 224 (+796%)
Mutual labels:  presentation, slides
slidev
Presentation Slides for Developers
Stars: ✭ 25,925 (+103600%)
Mutual labels:  presentation, slides

📽 Presentador

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

Workflow state npm downloads npm downloads

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