ferrix/slides

Slides

A reveal.js deck structured like Matt Godbolt's newer talks (what-happens-beneath-accu-2026): no stock theme but a custom dark one, every slide on a rounded panel, IBM Plex Sans and Mono, monokai code with glowing stepped lines, 16:9 with fade transitions, and the content in one Markdown file per section.

What is ours: the palette, and the corner motif. His ring-and-thread became a chain of nodes and links, an AS path.

The talk

Section	File
About the speaker	sections/00-intro.md
Internet numbering resources: addresses, prefixes, registries, AS numbers	sections/01-resources.md
BGP and the bytes of an UPDATE	sections/03-bgp-update.md
IP transit and Internet exchanges	sections/04-transit-and-ix.md
The lab: the lab speaker, pr01.rue and its exchanges	sections/05-lab.md

The UPDATE in section 3 is 2a0d:d740::/48 as AS210036 announces it to the SwissIX route servers: next hop 2001:7f8:24::c9 (pr01's port on the peering LAN), MED 0 and the 210036:10:2 tag, which is what pr01's export filter puts on routes to peers. It was produced with the lab daemon's own encoder and parsed back to the same message, not captured off the wire; a capture from pr01 may differ in detail (BIRD can append a link-local next hop). The byte slides step through it one part at a time (press down), and every number on them was checked against the bytes when the slides were generated. To change the example, regenerate rather than edit the hex by hand.

The deck deliberately has no fragments or stepped code: a slide shows everything at once. Two code blocks keep a static highlight on one line.

File	Holds
theme.css	the look: palette, type, panels, motif, title slide
style.css	components used by slides: columns, boxes, bytes, notes
index.html	section list, reveal.js loader and options, bird highlighter
sections/*.md	the slides

Make it yours

Everything brand-like is a variable at the top of theme.css. To compare accents without editing, open ?accent=green, ?accent=amber or ?accent=magenta (blue is the default); copy the one you like into :root. The wordmark bottom-left is the <div class="wordmark"> in index.html. For a full-bleed title image, empty the title <section> and give it data-background="images/title.png".

Show it

The sections are loaded over HTTP, so open the deck through a server, not by double-clicking index.html. Opened from disk, browsers block reveal.js and the section files, and you would see a title and empty panels; the page now says so instead:

python3 slides/serve.py 8000

(python3 -m http.server works too, but it lets the browser cache the section files and the stylesheet, so edits may not show until a hard reload, Cmd+Shift+R. serve.py is the same server with caching turned off.)

Then http://localhost:8000. Keys: arrows to move, S speaker view with notes and a timer, O overview, F fullscreen, B blank the screen.

Offline

slides/vendor-reveal.sh

copies reveal.js into slides/reveal.js/ (ignored by git). The deck uses that copy when present and the CDN otherwise. Do this before presenting anywhere with uncertain Wi-Fi. IBM Plex still comes from Google Fonts; without a network the deck falls back to Helvetica/Arial and the system monospace, so install IBM Plex on the presenting machine if that matters.

Write slides

Edit the files in sections/; add a section by adding a file and a <section data-markdown=...> line in index.html.

-----        next slide
---          next vertical slide (detail you can skip)
Notes:       speaker notes from here to the end of the slide

Apply a class to the element above with <!-- .element: class="..." -->.

Class	Effect
big	one large statement on the slide
note	quiet italic aside
attribution	small credit under an image or quote
borders	table with visible borders
r-stretch	image or iframe fills the remaining height
blur-edges	soft edge for photos

Blocks: <div class="cols"> two columns, <div class="boxes"> labelled cards (us, ok, bad), <pre class="bytes"> BGP bytes in the colours of the lab page (add focus, and on to the spans to keep lit, to dim the rest), <table class="decode"> for the explanation under them, <svg class="diagram"> for diagrams drawn in the theme's colours (hot, fabric, link, bgp, traffic). Code fences take a language and optional line steps, e.g. ```bird [1-3|5-9]; bird is a small highlighter defined in index.html.

<!-- .slide: class="bare" --> drops the panel, the motif and the wordmark for one slide, e.g. a full-bleed image. The title slide does so by itself.

Publish as one file

slides/vendor-reveal.sh      # once, if slides/reveal.js is missing
python3 slides/build.py      # writes slides/dist/hands-on-bgp.html

build.py inlines everything the page would otherwise fetch: reveal.js and its plugins, the stylesheets, the favicon, our scripts and the Markdown sections. The one file (about 1.3 MB) can be uploaded anywhere and also opens straight from disk. It still uses the network for two things: the IBM Plex fonts from Google Fonts (without them the browser's fallback fonts are used) and the live DNS and RIPE lookups in section 1. Speaker view (S) works from the bundle too. slides/dist/ is not committed; rebuild after editing.

PDF

Open http://localhost:8000/?print-pdf in Chrome and print to PDF with background graphics on.