background results from the CPAN

App-SlideServer
## 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

<div style="padding: 0 20%; font-size: 150%">
  <pre><code>
    ## Heading 2
    
      * Item 1
      * Item 2
      * Item 3
    
    &lt;pre class=notes>
       ...
    &lt;/pre>
    
  </code></pre>
</div>

## A Complete Example

<iframe style="width: 700px; height: 600px; background-color: white;"
  src="slides.txt">
</iframe>

## Deploying to a Server

<pre><code data-step="1-1">
 # Build the Image
 $ docker build -t slideserver -f share/Dockerfile .
</code></pre>

<pre><code data-step="2-2">
 # Build the Image
 $ docker build -t slideserver -f share/Dockerfile .
 
 # Create a Container
 $ docker create --name myslides -v $PWD:$PWD -w $PWD -p 80 .
</code></pre>

<pre><code data-step="3">
 # 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
</code></pre>

<pre class=notes>
  makes docker image 'slideserver'
  uses current App::SlideServer on cpan
  makes docker container 'myslides'
  uses current dir slides.md or .html
</pre>

## Deploying under Traefik

<pre><code data-step=1-1>
 $ docker create --name=slideserver --restart=always \
    app-slideserver:latest
</code></pre>

<pre><code data-step=2-2>
 $ 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
</code></pre>

<hr>

```
$ docker create --name=slideserver --restart=always\
  --hostname=nrdvana.net --net=traefik-net --ip=172.18.0.36 \
  -e APP_SLIDESERVER_PRESENTER_KEY=REDACTED \
( run in 1.188 second using v1.01-cache-2.11-cpan-0d23b851a93 )