Presentato

A Zola site that serves markdown-backed reveal.js presentations, themed to match neiam.co.

Deployed at https://pr.gmp.io. Every push to master builds the image (.forgejo/workflows/image.yml) into the forge’s registry as ggr.neiam.co/gabe/presentato-mf:master; keel rolls it out from there. The Argo app is presentato-mf/ in argo-01-bos.

Running

zola serve     # http://127.0.0.1:1111
zola build     # static output in public/

Adding a presentation

Drop a markdown file into content/presentations/. That’s the whole workflow — the section’s page_template sends every page in it to templates/presentation.html, which hands the raw markdown to reveal.js.

+++
title = "My Talk"
description = "Shown on the index page"
date = 2026-09-01

[extra]
theme = "forest"                     # starting color scheme, see below
reveal_transition = "fade"           # none | fade | slide | convex | concave | zoom
reveal_highlight_theme = "zenburn"   # monokai | zenburn
stylesheet = "my-talk.css"           # optional, path under static/
+++

# First slide

---

## Second slide

Slide syntax:

Markdown	Effect
`---` on its own line	next horizontal slide
`--` on its own line	next vertical (stacked) slide
`Note:`	everything after it is a speaker note (press S)
`<!-- .slide: data-background-color="#123" -->`	attributes on the containing slide
`<!-- .element: class="fragment" -->`	attributes on the preceding element

Images

Assets go in static/ and are referenced with an absolute path (![x](/img/x.png)). Zola copies static/ to the site root, so the static/ prefix is not part of the URL — and a relative path would resolve against the deck’s own directory and 404.

Images are capped at --img-height (460px by default, against reveal’s 960x700 logical slide), so a full-resolution screenshot drops in without being resized first.

Side by side

<div class="cols"> lays its direct children out as equal columns. The markdown plugin does parse markdown inside a div, provided there are blank lines around it:

<div class="cols">

![left](/img/a.png)

![right](/img/b.png)

</div>

Each image becomes its own paragraph, hence its own column — so this scales to any number of images. When a column needs more than one block, nest a <div>:

<div class="cols">
<div>

![before](/img/a.png)

**Before**

</div>
<div>

![after](/img/b.png)

**After**

</div>
</div>

Overrides, as inline styles on the cols div:

Style	Effect
`grid-template-columns: 2fr 1fr`	uneven split
`--img-height: 620px`	taller images (default in columns is 560px)
`class="cols cols--top"`	top-align columns instead of centering

Add ?print-pdf to a deck’s URL and print to PDF for handouts.

Color schemes

The six neiam.co schemes — her, afterdark, forest, sky, clays, stones — are ported verbatim from ../neiam-co/sass/main.scss into sass/_tokens.scss, as [data-theme="…"] blocks of oklch custom properties.

Alongside them are light (🤍) and dark (🖤), copied from Diogramos’ own pair in ../Diogramos/assets/css/app.css. light is the only light scheme.

Both the site chrome and the decks read those same tokens, so switching is a single attribute change on <html> — no stylesheet swap, no reload:

Site pages — the emoji button in the footer cycles schemes.
Decks — the swatch row in the top-right corner picks one directly, or T cycles. It sits at low opacity until hovered, and is hidden in the PDF export.

The choice is persisted to localStorage under "theme" — the same key neiam.co uses, so a visitor’s pick carries across both sites. default_theme in zola.toml (or theme in a deck’s [extra]) only sets the starting point; a saved choice always wins.

Embedded Diogramos diagrams follow the deck: it posts {type: "diogramos:set-theme", theme} to every iframe when the scheme changes, and to each embed that reports diogramos:ready on load. All eight scheme names exist in Diogramos too, so the diagram’s palette matches the slide’s.

Decks are styled by loading reveal’s black.css for structure and then reveal-neiam.css, which re-points every --r-* variable at the active palette. Per-deck reveal_theme is not a thing here — use theme instead.

Layout

zola.toml                       site config, default scheme + reveal options
content/_index.md               home page
content/presentations/          one markdown file per deck
templates/presentation.html     the reveal.js shell
templates/base.html             site chrome + footer scheme toggle
templates/_theme_head.html      pre-paint scheme script + webfonts
sass/_tokens.scss               the six neiam.co palettes
sass/site.scss                  styling for the non-slide pages
sass/reveal-neiam.scss          reveal.js theme wired to those tokens
static/themes.js                shared scheme registry (cycle / set / persist)
static/reveal/                  vendored reveal.js 6.0.1 (dist + plugins)

reveal.js is vendored rather than pulled from a CDN so the site is self-contained. To upgrade: npm pack reveal.js, then replace static/reveal/ with the tarball’s package/dist/.