Slidrr

Entering the world of presentations you have a lot of tools to your disposal. The most popular must be Powerpoint (windows) and Keynote (mac).

Both are awesome but will cost you money and generate lock-in. These tools are popular with non-developers.

Developers like something simple to get the message across. And open-source. And freedom of which tool to use. That's why html presentation tools like reveal.js and cleaver are popular with developers. You can share your presentation online (github or own website). Modify the presentation with tools you already use. And if you want: version controle.

If you combine html with easy writing with Markdown you focus on writing and getting the message across.

There are enough tools that work like that (see previously mentioned html tools), but I think I can do better!

But why another html tool?

I was curios if I could build a presentation tool with Haxe. And I wanted features that I could find in some, but not in all.

Till it's finished, you should consider this an experiment / a WIP repos.

Extra added to Markdown

To use standard Markdown for presentations, I need to add some extra "rules" to Markdown. They shouldn't be to difficult to learn but they will show up in a standard Markdown editor (like MacDown) because they are not part of Markdown. I concider the additions simple and not intrucive.

To add a slide: -- (2 dashes) but you can changes that into something that you find easier to use To add speaker notes: ?? (2 questionmarks) but you can changes that into something that you find easier to use

To create a fullscreen image: use the default way to create an image ![](path/to/image) and it should be the first markdown you write after creating a slide.
To create a fullscreen image but don't crop the image: use the default way to create an image ![](path/to/image?) and it should be the first markdown you write after creating a slide. Notice the ? at the end of the image, this will make sure the image is as big as possible but won't be cropped.
To create a slide with an different background color: it works the same as an fullscreen image, but you add the hex value to the alt text of the image and leave the image source empty ![#ff3333]()
This works also with fullscreen images with text over it, it will help to change the color (use black background, get white text and vice versa)

Summary

first slide
--
second slide with speaker notes
??
something important
--
![](path/to/image)
fullscreen image
--
![#ff3333]()
background color is red

You need help with the basics of Markdown, check out this cheatsheet

Features in Slidrr

Write your presentation with Markdown
Split into chapters using --
Add speaker-notes with ??
Keyboard navigation
Default changes via quarystrings ?md=haxe.md&css=foobar.css&author=Matthijs Kamstra aka [mck]&time=45
- md
- author
- css
- time (in minutes)
Easy to use fullscreen images
Change background color of slide, change font color automaticly to black or white

Features that need more love (still working on them)

~~Default changes via quarystrings~~
~~Change background color~~
- ~~change font color based upon background color~~
- ~~enhance contrast with glow~~
Speaker notes
- time
- layout
- notes
- progress
- time per slide
Default styling
- ~~code~~
- lists
- help
- typo
~~Code hightlight~~

Features I want in Slidrr

use config file (first work with default settings)
simple but nice design
- nice transition
- default styling
- code highlighting
- ..
ready for offline use
clean, simple, one file
default styling / no web-fonts (see #6)
simple styling (see #6)
Speaker-note help:
- time
- total time
- current slide
- previous slide
- speaker notes

Navigation

Slidrr uses keyboard navigation

action	shortcut
forward	`cursor right` , `.` , `space`
reverse	`cursor left` , `,`
toggle fullscreen	`f`
toggle help	`h`
toggle focus screen	`b`
reverse fullscreen	`esc`
speaker notes	`s`

Custom css

You can change the html and add a new css, you can modify the existing slidrr.css or you can test by adding the path to the css to the url like ?css=test.css

http://localhost:2000/?css=css/test.css#/13

Fullscreen images

Create a slide with fullscreen images

![](path/to/image)
fullscreen image

first the image then text

Create a slide with a image as-big-as-possible without cropping

![](path/to/image?)
fullscreen image without cropping

first the image then text

Change background color

Create a slide with a different colored background

![#ff3333]()
background color is red

use the image Markdown, but don't add an image-path

Hightlight code

I use highlight.js for language code highlighting. But I don't use the complete set supported by highlight.js.

Included in this presentation is

CSS
HTML, XML
JavaScript
JSON
Markdown
Haxe

And default I use monokai-sublime styling.

You know what to do if you don't agree!

existing examples

Build

You need Haxe!

Install via haxelib

haxelib install markdown

Build, open Google Chrome and start Neko server

cd 'to/this/folder' (replace with your own path)
haxe build.hxml
cd 'to/this/folder/bin' (use previous path and add /bin)
open -a Google\ Chrome http://localhost:2000/
nekotools server

Use NPM for automated build

cd 'to/this/folder'
npm run watch

Testing

http://localhost:2000/?md=slidrrtest.md&author=mck

Markdown

Markdown, created by John Gruber, author of the Daring Fireball blog. The original source of Markdown can be found at Daring Fireball - Markdown.

andreabotti / slidrr