App::SlideServer
Follow Along at:
nrdvana.net/presentations/app-slideserver
Source:
github.com/nrdvana/perl-App-SlideServer
nrdvana.net/presentations/app-slideserver
Source:
github.com/nrdvana/perl-App-SlideServer
mike@nrdvana.net
CPAN: NERDVANA
Features
- Write markdown, present as a slide show
- Multiple connections, synchronized
- Multiple control connections
- Run locally or from Internet
- Live updates as you edit
- Simple design
- Slides can operate without server
If all you know is markdown, that's enough Cool presentation mode Multiple device control, like Keynote low complexity, high flexibility easy to publish slides without a server
Design
- Tech Stack - Mojo, jQuery, HTML, CSS
- Single Perl Module, easy to subclass
- ES5 JavaScript, no tooling needed
- Perl backend serves slides
- JavaScript frontend renders slides
Design, Backend
- Commandline "bin/slide-server"
- Mojolicious App::SlideServer
- Load slides.md or slides.html
- Fix sloppy html shorthands
- Serve page and slides to frontend
- Relay websocket events
Design, Frontend
- Page initiates websocket
- Presenter navigation relays messages through websocket
- Viewers receive events from presenter
- Viewers load slide HTML
- Viewers resize the HTML to fit the viewport
HTML Structure
<body>
<div class="slides">
<div class="slide">
<ul class="auto-step">
<li>...
<li>...
</ul>
<pre class="notes"> ... </pre>
</div>
</div>
</body>
Markdown Structure
## Heading 2
* Item 1
* Item 2
* Item 3
<pre class=notes>
...
</pre>
A complete Example
Deploying to a Server
$ docker build -t slideserver -f share/Dockerfile .
$ docker create --name myslides -v $PWD:$PWD -w $PWD -p 80 .
$ docker start myslides && docker logs --follow myslides
makes docker image 'slideserver' uses current App::SlideServer on cpan makes docker container 'myslides' uses current dir slides.md or .html
Deploying under Traefik
Future Work
- More options for static page rendering
- Color scheme controls in UI
- GNU Screen integration
- More robust auto-update
- Better width/height automatic layout
static pages - inline images and js for local
presenter should choose color scheme, users override
live terminal to screen session