jandot/docker-presentation repository overview

1. Create a new directory for your presentation
2. Add 3 subdirectories:
   1. images/
   2. slides/
   3. scripts/
3. In the slides/ directory, create 2 files:
   1. slides.md - This will hold your slides
   2. config.tsv - This will hold information that will be imported into the index.html file

The slides.md file contains all your slides. To switch to the next horizontal or vertical slide, use --NEWH or --NEWV, respectively. For example:

--NEWH
## The Design Process

![get-to-know](../images/get-to-know-user-data-design.png)

--NEWH
## The User

--NEWV
## Find the **why**

The config.tsv file contains key-values, like this:

CONF_TITLE         Visual Design - Exercise
CONF_AUTHOR        Jan Aerts
CONF_DESCRIPTION    Visual Design - Exercise

This information will be imported into the index.html file when you run the image.

To use, run:

docker run \
	-p 8000:8000 -p 35729:35729 \
	--name docker_presentation \
	-v YOUR_DIRECTORY/images:/opt/presentation/images \
	-v YOUR_DIRECTORY/slides:/opt/presentation/slides \
	-v YOUR_DIRECTORY/scripts:/opt/presentation/scripts \
	-d jandot/docker-presentation

⁠Adding visualizations

This docker image automatically picks up any .js file in the scripts directory. To include visualizations, do the following:

• Put the javascript code itself into the scripts file (1 script per visualization). An example code block:

var viz_function = function(p) {
  p.setup = function() {
    var myCanvas = p.createCanvas(100,100)
    myCanvas.parent('viz1')
    p.noStroke()
    p.noLoop()
  }

  p.draw = function() {
    p.background(255,255,255)
    p.fill(0,255,0)
    p.ellipse(p.mouseX,50,20,20)
  }

    p.mouseMoved = function() {
        p.redraw()
    }
}
var viz = new p5(viz_function)

• In your slides.md, add the div where the visualization should be inserted.

## My slide
Here's an interactive visualization
<div id="viz1"></div>

The id of this div should be the same as the one mentioned in myCanvas.parent() in the script. It should be unique.

⁠The footer

I've added a footer to the slides to show the progress. See TOC-progress⁠ for more info and customization. To know how titles are selected for this footer, see the Presentable plugin⁠.

Basically, each new horizontal slide becomes a new entry in the left column. Any h1, h2 or h3 headers in that section of vertical slides become entries in the right column.

• To hide/show the footer, use q.
• To remove a header from the footer (e.g. the title of your presentation), you'll have to use plain html instead of markdown, because you have to add a class to it. For example: use <h2 class="no-toc-progress">My title</h2> instead of ## My title.