App::SlideServer

Follow Along at:
nrdvana.net/slides/app-slideserver

Source:
github.com/nrdvana/perl-App-SlideServer

Michael Conrad
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


 # Build the Image
 $ docker build -t slideserver -f share/Dockerfile .


 # Build the Image
 $ docker build -t slideserver -f share/Dockerfile .
 
 # Create a Container
 $ docker create --name myslides -v $PWD:$PWD -w $PWD -p 80 .


 # Build the Image
 $ docker build -t slideserver -f share/Dockerfile .
 
 # Create a Container
 $ docker create --name myslides -v $PWD:$PWD -w $PWD -p 80 .
 
 # Run it
 $ 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


 $ docker create --name=slideserver --restart=always \
    app-slideserver:latest


 $ docker create --name=slideserver --restart=always \
    --restart=always \
    -e APP_SLIDESERVER_PRESENTER_KEY=REDACTED \
    -w /app \
    -v $PWD/slides.md:/app/slides.md \
    -v $PWD/public:/app/public \
    app-slideserver:latest

$ docker create --name=slideserver --restart=always\
  --hostname=nrdvana.net --net=traefik-net --ip=172.18.0.36 \
  -e APP_SLIDESERVER_PRESENTER_KEY=REDACTED \
  -w /app -v $PWD/slides.md:/app/slides.md -v $PWD/public:/app/public \
  --label 'traefik.enable=true' \
  --label 'traefik.http.middlewares.slideserver1.redirectScheme.scheme=https' \
  --label 'traefik.http.middlewares.slideserver2.redirectRegex.regex=(.*)/slides/app-slideserver$' \
  --label 'traefik.http.middlewares.slideserver2.redirectRegex.replacement=${1}/slides/app-slideserver/' \
  --label 'traefik.http.middlewares.slideserver3.stripprefix.prefixes=/slides/app-slideserver' \
  --label 'traefik.http.routers.slideserver.entryPoints=https' \
  --label 'traefik.http.routers.slideserver.rule=(Host(`nrdvana.net`,`www.nrdvana.net`) && PathPrefix(`/slides/app-slideserver`))' \
  --label 'traefik.http.routers.slideserver.middlewares=slideserver1@docker,slideserver2@docker,slideserver3@docker' \
  --label 'traefik.http.routers.slideserver.priority=15' \
  --label 'traefik.http.routers.slideserver.tls=true' \
  --label 'traefik.http.routers.slideserver.tls.certresolver=le' \
  --label 'traefik.http.routers.slideserver.tls.domains[0].main=nrdvana.net' \
  --label 'traefik.http.routers.slideserver.tls.domains[0].sans=www.nrdvana.net' \
  --label 'traefik.http.routers.slideserver_http.entryPoints=http' \
  --label 'traefik.http.routers.slideserver_http.rule=(Host(`nrdvana.net`,`www.nrdvana.net`) && PathPrefix(`/slides/app-slideserver`))' \
  --label 'traefik.http.routers.slideserver_http.middlewares=slideserver1@docker,slideserver2@docker,slideserver3@docker' \
  --label 'traefik.http.routers.slideserver_http.priority=15' \
  --label 'traefik.http.services.slideserver.loadbalancer.server.port=80' \
  --label 'traefik.http.services.slideserver.loadbalancer.server.scheme=http' \
  app-slideserver:latest

make useful things with perl

Future Work

Better width/height automatic layout
Better mix of Markdown and HTML
Color scheme controls in UI
GNU Screen integration
More robust auto-update
More options for static page rendering

  static pages - inline images and js for local
  presenter should choose color scheme, users override
  live terminal to screen session