What is your favorite number?

• I want about 3 answers.
• Privacy: none
• You are allowed to fib.

How the trick works

• Markdown and Mermaid
• Pandoc and a little Makefile
• Gitlab CI

Makefile

# .SUFFIXES: .html .md
SRCS := $(wildcard markdown/*.md)
HTML := $(SRCS:markdown/%.md=%.html)
vpath %.md markdown
vpath %.html html

NODE_PATH ?= node_modules
PUPPETEER_CONFIG ?= .puppeteerrc.json
DIAGRAMS_SRCS := $(wildcard mermaid/*.mmd)
DIAGRAMS := $(DIAGRAMS_SRCS:mermaid/%.mmd=%.svg)
vpath %.mmd mermaid
vpath %.svg images/mermaid

%.html: %.md
    pandoc --standalone -t revealjs -o html/$@ $< snippets/license.md

%.svg: %.mmd
    $(NODE_PATH)/.bin/mmdc -p $(PUPPETEER_CONFIG) -o images/mermaid/$@ -i $<

diagrams: $(DIAGRAMS)

default: example.html

index.md: $(SRCS)
    node scripts/generate-index.js

build: diagrams $(HTML) index.md
    pandoc --standalone -o html/index.html index.md
    cp -R images reveal.js html
    cp theme/*.css html/reveal.js/css/theme/.

clean:
    rm -rf html/*.html html/images html/reveal.js images/mermaid/*.svg index.md

GitLab CI

variables:
  GIT_SUBMODULE_STRATEGY: recursive

stages:
  - build
  - deploy

diagrams:
  stage: build
  image:
    name: registry.gitlab.com/benjifisher/slide-decks/mermaid-cli
    entrypoint: [""]
  variables:
    NODE_PATH: /home/mermaidcli/node_modules
    PUPPETEER_CONFIG: /puppeteer-config.json
  before_script:
    - $NODE_PATH/.bin/mmdc --version
  script:
    - make diagrams
    - make index.md
  artifacts:
    paths:
      - images/mermaid/
      - index.md

pages:
  stage: deploy
  image:
    name: pandoc/core
    entrypoint: [""]
  before_script:
    - apk add --no-cache make
    - pandoc --version
    # Git does not preserve file timestamps, so the .mmd sources appear newer
    # than the artifact .svg files. Touch the .svg files to prevent make from
    # trying to rebuild them.
    - touch images/mermaid/*.svg
    - touch index.md
  script:
    - make build
    - ls html
    - cp -R html public
    - ls public
  artifacts:
    paths:
      - public

The result

Remember to refresh!

Copyleft

This slide deck by Benji Fisher is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Based on a work at https://gitlab.com/benjifisher/slide-decks.