fb-slides 0.1.2 → 0.3.0

package/README.md

@@ -151,6 +151,8 @@ export default {
   decks: 'decks',                // folder of .md
   demos: 'demo',                 // folder behind a bare `<!-- demo: name -->`
   static: ['assets', 'demo'],    // served and published; auto-detected when omitted
+  revealTheme: 'dracula',        // one of reveal.js's own themes; omit for this one
+  webfonts: false,               // let the reveal themes fetch their Google fonts
   theme: 'theme.css',            // loaded after the base theme; auto when it exists
   favicon: 'assets/favicon.png',
 
@@ -193,6 +195,34 @@ rather than replaces. Almost everything hangs off the tokens in `:root`:
 }
 ```
 
+### reveal.js themes
+
+The fifteen themes from [revealjs.com/themes](https://revealjs.com/themes/) are all in the
+box — pick one by name and nothing else changes:
+
+```js
+export default { revealTheme: 'dracula' };
+```
+
+`beige` · `black` · `black-contrast` · `blood` · `dracula` · `league` · `moon` · `night` ·
+`serif` · `simple` · `sky` · `solarized` · `white` · `white-contrast`
+
+Only the chosen one is ever loaded — one `<link>`, ~7 KB — and the build copies that file
+and nothing else. Two things happen beyond the link:
+
+**It is served from the deck, not from a CDN.** Six of the themes open with
+`@import url(https://fonts.googleapis.com/…)`. Those lines are stripped, so a talk still
+renders with the wifi off; the theme falls back to the next font in its own stack. Pass
+`webfonts: true` to let them through and get the typography of the previews exactly. The
+font folders reveal ships itself — league-gothic, source-sans-pro — are copied into
+`dist/` when the theme asks for them.
+
+**The chrome follows the theme.** The navigator, the badge and the signature are not
+`.reveal` elements, so a borrowed theme would leave a black panel down the side of a white
+deck. Every reveal 5 theme declares its palette as `--r-*` custom properties, and the base
+theme points its own tokens at them, so the whole page moves together. A `theme.css` in the
+project still has the last word over both.
+
 ## Publishing
 
 ```bash

package/bin/fb-slides.mjs

@@ -69,11 +69,12 @@ const run = async () => {
 
   const { loadConfig } = await import('../lib/config.mjs');
   const root = process.cwd();
-  const config = await loadConfig(root, overrides());
+  const reload = () => loadConfig(root, overrides());
+  const config = await reload();
 
   if (command === 'dev') {
     const { dev } = await import('../lib/dev.mjs');
-    return void (await dev(config, RUNTIME));
+    return void (await dev(config, RUNTIME, reload));
   }
 
   if (command === 'build') {

package/lib/build.mjs

@@ -14,6 +14,7 @@ import { basename, dirname, join, relative, resolve, sep } from 'node:path';
 import { assertUsable } from './config.mjs';
 import { listDecks } from './decks.mjs';
 import { renderIndex } from './render.mjs';
+import { REVEAL_THEME_URL, readRevealTheme } from './theme.mjs';
 import { VENDOR_FILES, VENDOR_MOUNTS, packageDir } from './vendor.mjs';
 
 const copyFile = async (from, to) => {
@@ -59,6 +60,18 @@ export const build = async (config, runtimeDir, { quiet = false } = {}) => {
     await cp(from, join(out, dir), { recursive: true, filter: (src) => !excluded(src) });
   }
 
+  // 3b. the reveal theme, rewritten, with the font folders it imports — and
+  //     only those: source-sans-pro is 1.8 MB and most themes never ask for it.
+  if (config.revealTheme) {
+    const { css, fonts, dir } = await readRevealTheme(config.revealTheme, { webfonts: config.webfonts });
+    await writeFile(join(out, REVEAL_THEME_URL), css);
+    for (const font of fonts) {
+      await cp(join(dir, 'fonts', font), join(out, 'vendor', VENDOR_MOUNTS['reveal.js'], 'dist/theme/fonts', font), {
+        recursive: true,
+      });
+    }
+  }
+
   // 4. loose root files the config names — a theme override, a favicon.
   for (const file of [config.theme, config.favicon].filter(Boolean)) {
     const from = resolve(config.root, file);
@@ -73,7 +86,8 @@ export const build = async (config, runtimeDir, { quiet = false } = {}) => {
   await writeFile(join(out, 'decks.json'), `${JSON.stringify(decks, null, 2)}\n`);
 
   if (!quiet) {
-    console.log(`  ${config.outDir}/ ← ${decks.length} decks · ${config.static.join(', ') || 'no static dirs'} · ${Date.now() - started}ms`);
+    const theme = config.revealTheme ? ` · theme ${config.revealTheme}` : '';
+    console.log(`  ${config.outDir}/ ← ${decks.length} decks · ${config.static.join(', ') || 'no static dirs'}${theme} · ${Date.now() - started}ms`);
   }
   return { decks, out };
 };

package/lib/config.mjs

@@ -6,10 +6,12 @@
 // needs running. A project that follows the default shape needs no config at all.
 // ---------------------------------------------------------------------------
 
-import { existsSync } from 'node:fs';
+import { existsSync, statSync } from 'node:fs';
 import { basename, join, resolve } from 'node:path';
 import { pathToFileURL } from 'node:url';
 
+import { assertRevealTheme } from './theme.mjs';
+
 const CONFIG_FILES = ['slides.config.js', 'slides.config.mjs', 'slides.config.json'];
 
 // Directories a project gets served and published for free when it has them, so
@@ -22,7 +24,10 @@ export const ALWAYS_EXCLUDED = ['node_modules', '.git', '.angular', '.next', '.c
 export const findConfigFile = (root) => CONFIG_FILES.map((name) => join(root, name)).find(existsSync) ?? null;
 
 const importConfig = async (file) => {
-  const url = pathToFileURL(file).href;
+  // ESM caches a module by URL for the life of the process, so the dev server's
+  // second read of an edited config would be the first one again. The mtime in
+  // the query makes it a different URL exactly when the file has changed.
+  const url = `${pathToFileURL(file).href}?t=${statSync(file).mtimeMs}`;
   const module = file.endsWith('.json')
     ? await import(url, { with: { type: 'json' } })
     : await import(url);
@@ -53,6 +58,14 @@ export const loadConfig = async (root = process.cwd(), overrides = {}) => {
     decksDir,
     demosDir,
     static: statics,
+    // One of reveal's own fifteen — 'dracula', 'sky', 'white'. It lands after
+    // the base theme and takes the slides; the chrome follows it through the
+    // `--r-*` variables every reveal 5 theme declares. Null: this package's look.
+    revealTheme: user.revealTheme ?? null,
+    // Six of those themes pull their typefaces from fonts.googleapis.com. Off by
+    // default — the deck is served whole or not at all — at the cost of falling
+    // back to the theme's second-choice font stack.
+    webfonts: user.webfonts ?? false,
     // The project's own CSS, loaded *after* the base theme: an override, not a
     // replacement. `theme.css` at the root is picked up without being declared.
     theme: user.theme ?? (existsSync(join(root, 'theme.css')) ? 'theme.css' : null),
@@ -72,6 +85,10 @@ export const loadConfig = async (root = process.cwd(), overrides = {}) => {
     exclude: [...ALWAYS_EXCLUDED, overrides.outDir ?? user.outDir ?? 'dist', ...(user.exclude ?? [])],
   };
 
+  // Named early: a typo in the config should be a message, not a deck that
+  // silently wears the wrong clothes.
+  if (config.revealTheme) await assertRevealTheme(config.revealTheme);
+
   config.decksPath = resolve(root, config.decksDir);
   config.outPath = resolve(root, config.outDir);
   // What the browser asks for, as opposed to where it is on disk.

package/lib/dev.mjs

@@ -13,6 +13,7 @@ import { join, resolve } from 'node:path';
 import { assertUsable } from './config.mjs';
 import { createDeckServer, listen } from './server.mjs';
 import { renderIndex } from './render.mjs';
+import { REVEAL_THEME_URL, readRevealTheme } from './theme.mjs';
 import { VENDOR_MOUNTS, packageDir } from './vendor.mjs';
 
 const OPEN = { darwin: 'open', win32: 'start' };
@@ -52,8 +53,25 @@ const startSideServer = (spec, root, children) => {
   });
 };
 
-export const dev = async (config, runtimeDir) => {
+// What the page is built from, read again on every request. A config with a
+// syntax error in it — the state it is in halfway through an edit — leaves the
+// last good one standing rather than serving a broken deck.
+const reader = (config, reload) => {
+  let good = config;
+  return async () => {
+    if (!reload) return good;
+    try {
+      good = await reload();
+    } catch (error) {
+      console.warn(`  ⚠  slides.config: ${error.message}`);
+    }
+    return good;
+  };
+};
+
+export const dev = async (config, runtimeDir, reload) => {
   assertUsable(config);
+  const current = reader(config, reload);
 
   const mounts = [
     // The project first: a file next to the decks shadows the one this package
@@ -69,8 +87,18 @@ export const dev = async (config, runtimeDir) => {
   const server = createDeckServer({
     mounts,
     decksPath: config.decksPath,
-    // Rendered per request: editing slides.config.js and reloading is enough.
-    index: () => renderIndex(config, runtimeDir),
+    // Rendered per request from a config read per request: editing the title,
+    // the theme or the signature and reloading is enough. What was fixed when
+    // the server came up — the mounts, the port, the side processes — still
+    // needs a restart.
+    index: async () => renderIndex(await current(), runtimeDir),
+    generated: {
+      [`/${REVEAL_THEME_URL}`]: async () => {
+        const now = await current();
+        if (!now.revealTheme) return '/* no revealTheme in slides.config.js */';
+        return (await readRevealTheme(now.revealTheme, { webfonts: now.webfonts })).css;
+      },
+    },
   });
 
   await listen(server, config.port);

package/lib/render.mjs

@@ -7,6 +7,8 @@
 import { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
 
+import { REVEAL_THEME_URL } from './theme.mjs';
+
 const escapeHtml = (value) =>
   String(value).replace(/[&<>"']/g, (char) => `&#${char.charCodeAt(0)};`);
 
@@ -28,6 +30,9 @@ const signatureHtml = (signature) => {
 const headHtml = (config) => {
   const tags = [];
   if (config.favicon) tags.push(`<link rel="icon" href="${escapeHtml(config.favicon)}" />`);
+  // After the base theme, before the project's: reveal's theme dresses the
+  // slides, and whatever the project says still has the last word.
+  if (config.revealTheme) tags.push(`<link rel="stylesheet" href="${REVEAL_THEME_URL}" />`);
   // After the base theme on purpose: the project's CSS overrides, it does not replace.
   if (config.theme) tags.push(`<link rel="stylesheet" href="${escapeHtml(config.theme)}" />`);
   return tags.join('\n    ');
@@ -43,7 +48,12 @@ export const renderIndex = async (config, runtimeDir) => {
     fragmentLists: config.fragmentLists,
   };
 
+  // The chrome reads this to take its colours from the reveal theme instead of
+  // the base one — see the bridge at the top of theme.base.css.
+  const htmlAttrs = config.revealTheme ? ` data-reveal-theme="${escapeHtml(config.revealTheme)}"` : '';
+
   return template
+    .replaceAll('{{htmlAttrs}}', htmlAttrs)
     .replaceAll('{{lang}}', escapeHtml(config.lang))
     .replaceAll('{{title}}', escapeHtml(config.title))
     .replaceAll('{{head}}', headHtml(config))

package/lib/server.mjs

@@ -99,7 +99,9 @@ const sendFile = (req, res, path, size) => {
 };
 
 // mounts: [{ prefix: '/', dir }] — checked in order, first hit wins.
-export const createDeckServer = ({ mounts, index, decksPath }) => {
+// generated: { '/path.css': async () => body } — files this package rewrites
+// rather than serves, checked before any mount so node_modules cannot shadow one.
+export const createDeckServer = ({ mounts, index, decksPath, generated = {} }) => {
   const handler = async (req, res) => {
     if (req.method !== 'GET' && req.method !== 'HEAD') return send(res, 405, 'method not allowed');
 
@@ -120,6 +122,10 @@ export const createDeckServer = ({ mounts, index, decksPath }) => {
       return send(res, 200, body, { 'Content-Type': MIME['.json'] });
     }
 
+    if (generated[pathname]) {
+      return send(res, 200, await generated[pathname](), { 'Content-Type': mime(pathname) });
+    }
+
     if (DENIED.test(pathname)) return send(res, 403, 'forbidden', { 'Content-Type': MIME['.txt'] });
 
     for (const { prefix, dir } of mounts) {

package/lib/theme.mjs

@@ -0,0 +1,57 @@
+// ---------------------------------------------------------------------------
+// reveal.js ships fifteen themes; a deck wears one of them, or none.
+//
+// They are not linked straight out of node_modules. Six of the fifteen open with
+// `@import url(https://fonts.googleapis.com/…)`, which is a third-party request
+// on every load — and a talk that has to survive the conference wifi cannot rest
+// on one. The file is rewritten instead: the remote imports go, the font folders
+// reveal already ships locally stay, and what the browser gets is served from
+// this project like everything else.
+//
+// The rewritten file is generated per request in dev and written once by build,
+// at the same URL either way — index.html never learns which of the two it is.
+// ---------------------------------------------------------------------------
+
+import { readdir, readFile } from 'node:fs/promises';
+import { basename, join } from 'node:path';
+
+import { VENDOR_MOUNTS, packageDir } from './vendor.mjs';
+
+export const REVEAL_THEME_URL = 'reveal-theme.css';
+
+const themeDir = () => join(packageDir('reveal.js'), 'dist', 'theme');
+
+// The theme is served from the site root, so reveal's own `./fonts/…` would
+// resolve one folder too high: point it at the vendor mount instead.
+const FONT_BASE = `vendor/${VENDOR_MOUNTS['reveal.js']}/dist/theme/fonts/`;
+
+const REMOTE_IMPORT = /@import\s+url\(\s*['"]?https?:[^)]*\)\s*;?[ \t]*\n?/gi;
+const LOCAL_FONT_URL = /url\(\s*['"]?\.\/fonts\//gi;
+
+export const listRevealThemes = async () =>
+  (await readdir(themeDir()))
+    .filter((file) => file.endsWith('.css'))
+    .map((file) => basename(file, '.css'))
+    .sort();
+
+export const assertRevealTheme = async (name) => {
+  const themes = await listRevealThemes();
+  if (themes.includes(name)) return name;
+  throw new Error(
+    `unknown revealTheme: ${name}\n` +
+      `  reveal.js ships: ${themes.join(', ')}\n` +
+      `  drop the key for this package's own theme`,
+  );
+};
+
+// The font folders the chosen theme actually imports. build copies these and
+// nothing else: source-sans-pro alone is 1.8 MB, and most themes never ask for it.
+const fontDirs = (css) => [...new Set([...css.matchAll(/\.\/fonts\/([^/]+)\//g)].map((m) => m[1]))];
+
+// `webfonts: true` keeps the Google Fonts imports — the exact typography of
+// revealjs.com/themes, at the cost of the offline guarantee.
+export const readRevealTheme = async (name, { webfonts = false } = {}) => {
+  const source = await readFile(join(themeDir(), `${name}.css`), 'utf8');
+  const css = (webfonts ? source : source.replace(REMOTE_IMPORT, '')).replace(LOCAL_FONT_URL, `url(${FONT_BASE}`);
+  return { css, fonts: fontDirs(source), dir: themeDir() };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fb-slides",
-  "version": "0.1.2",
+  "version": "0.3.0",
   "type": "module",
   "description": "Markdown-driven reveal.js decks: live demo embeds, annotation, mermaid, and a zero-config dev server",
   "keywords": [

package/runtime/annotate.js

@@ -25,9 +25,11 @@ const COLOURS = [
   { label: 'Black', glow: '#000000', core: '#000000' },
 ];
 
-// A released stroke rubs itself out from its oldest point towards its newest.
-// FADE_MS is how long that takes end to end, FADE_TAIL how much of the stroke
-// the erase front softens as it passes — at 0 it would be a hard wipe.
+// A released stroke holds on screen for HOLD_MS, then rubs itself out from its
+// oldest point towards its newest. FADE_MS is how long the erase takes end to
+// end, FADE_TAIL how much of the stroke the erase front softens as it passes —
+// at 0 it would be a hard wipe.
+const HOLD_MS = 2000;
 const FADE_MS = 1600;
 const FADE_TAIL = 0.35;
 
@@ -210,6 +212,7 @@ const RevealAnnotate = () => ({
     const strokes = [];
     let drawing = null;
     let frame = 0;
+    let holdTimer = 0;
 
     const addPoint = (event) => {
       const points = drawing.points;
@@ -284,7 +287,12 @@ const RevealAnnotate = () => ({
 
     // Returns false once the stroke has faded out and can be dropped.
     const paint = (stroke, now) => {
-      const progress = stroke.releasedAt === null ? null : (now - stroke.releasedAt) / FADE_MS;
+      // Clamped at 0 through the hold: a stroke waiting its turn paints exactly
+      // like one still under the pen, only released.
+      const progress =
+        stroke.releasedAt === null
+          ? null
+          : Math.max(0, (now - stroke.releasedAt - HOLD_MS) / FADE_MS);
       if (progress !== null && progress >= 1) return false;
 
       const box = boundsOf(stroke.points);
@@ -334,18 +342,27 @@ const RevealAnnotate = () => ({
         if (!paint(strokes[i], now)) strokes.splice(i, 1);
       }
       // Only a fading stroke needs the next frame. A live one changes when a
-      // point is added and not before, so a pen held still costs nothing —
-      // without this the loop repaints a full-screen canvas forever.
-      if (strokes.some((stroke) => stroke.releasedAt !== null)) schedule();
+      // point is added and not before, and a released one sits untouched
+      // through its hold — for those a single timeout wakes the loop when the
+      // first fade is due, instead of repainting a full-screen canvas forever.
+      const waits = strokes
+        .filter((stroke) => stroke.releasedAt !== null)
+        .map((stroke) => stroke.releasedAt + HOLD_MS - now);
+      if (waits.some((wait) => wait <= 0)) schedule();
+      else if (waits.length) holdTimer = setTimeout(schedule, Math.min(...waits));
     };
 
     const schedule = () => {
+      clearTimeout(holdTimer);
+      holdTimer = 0;
       frame ||= requestAnimationFrame(render);
     };
 
     const clear = () => {
       drawing = null;
       strokes.length = 0;
+      clearTimeout(holdTimer);
+      holdTimer = 0;
       ctx.clearRect(0, 0, width, height);
     };
 
@@ -427,14 +444,21 @@ const RevealAnnotate = () => ({
     deck.addKeyBinding({ keyCode: KEY_CODE, key: 'P', description: 'Toggle the pen' }, () =>
       setPen(!penOn),
     );
-    // Escape is reveal's own overview toggle, and it binds before a plugin can.
-    // Capture phase gets there first — but only to take Escape back while the
-    // pen is armed, so the key still opens the overview the rest of the time.
+    // Keys the pen borrows only while it is armed, taken in capture phase so
+    // reveal's own bindings never see them: Escape (otherwise the overview
+    // toggle) disarms it, and the number row picks its ink — 1 to 6, in the
+    // order the swatches sit in the toolbar. The rest of the time both fall
+    // through untouched.
     document.addEventListener(
       'keydown',
       (event) => {
-        if (event.key !== 'Escape' || !penOn) return;
-        setPen(false);
+        if (!penOn || event.metaKey || event.ctrlKey || event.altKey) return;
+        if (event.key === 'Escape') setPen(false);
+        else {
+          const index = '123456'.indexOf(event.key);
+          if (index === -1 || index >= COLOURS.length) return;
+          setInk(COLOURS[index]);
+        }
         event.stopPropagation();
         event.preventDefault();
       },

package/runtime/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="{{lang}}">
+<html lang="{{lang}}"{{htmlAttrs}}>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />

package/runtime/theme.base.css

@@ -29,6 +29,39 @@
   --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 }
 
+/* --- wearing one of reveal's own themes ----------------------------------- */
+
+/* `revealTheme:` in slides.config.js loads reveal's theme after this file, where
+   it takes the slides. The chrome — the navigator, the badge, the signature —
+   is not `.reveal`-scoped, so it would sail past untouched and leave a black
+   panel down the side of a white deck.
+
+   Every reveal 5 theme declares its palette as `--r-*` custom properties, so
+   the fix is one indirection rather than fifteen stylesheets: point the tokens
+   above at reveal's, and the whole of the chrome follows whatever the deck
+   wears. The four reveal has no equivalent for are mixed from the two that
+   carry the theme, which keeps the panel's depth on a light theme as well as
+   a dark one. */
+html[data-reveal-theme] {
+  --bg: var(--r-background-color);
+  --text: var(--r-main-color);
+  --accent: var(--r-link-color);
+  --accent-2: var(--r-link-color-hover, var(--r-link-color));
+  --sans: var(--r-main-font);
+  --mono: var(--r-code-font);
+  --bg-2: color-mix(in srgb, var(--r-background-color) 92%, var(--r-main-color));
+  --card: color-mix(in srgb, var(--r-background-color) 86%, var(--r-main-color));
+  --line: color-mix(in srgb, var(--r-main-color) 20%, transparent);
+  --muted: color-mix(in srgb, var(--r-main-color) 62%, var(--r-background-color));
+}
+
+/* The base look paints two dark halos on <html>, below the deck. They are the
+   wrong atmosphere for a borrowed theme, and on a light one they show through
+   wherever the viewport does not reach — so the theme's own flat colour takes
+   over. <body> is left alone on purpose: reveal paints the deck's background
+   there, and that is the theme's job now. */
+html[data-reveal-theme] { background: var(--bg); }
+
 /* reveal.js 5 paints the page background on `.reveal-viewport` (the <html>
    element), so setting it on <body> would sit behind it and never show. */
 html,
@@ -111,6 +144,7 @@ body,
 /* Trailing margin would push centred content off-centre. */
 .reveal .slides section > :last-child { margin-bottom: 0; }
 .reveal strong { color: #fff; font-weight: 650; }
+html[data-reveal-theme] .reveal strong { color: var(--r-heading-color, var(--text)); }
 .reveal em { color: var(--accent-2); font-style: italic; }
 .reveal a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
 

package/templates/starter/slides.config.js

@@ -9,6 +9,18 @@ export default {
   // Folder behind a bare `<!-- demo: counter -->` marker in the Markdown.
   demos: 'demo',
 
+  // One of reveal.js's own themes, served from this project rather than from a
+  // CDN: beige, black, black-contrast, blood, dracula, league, moon, night,
+  // serif, simple, sky, solarized, white, white-contrast. Uncomment to wear one
+  // — the deck's chrome follows it. Leave it out for this package's own look.
+  // revealTheme: 'dracula',
+
+  // Six of those themes ask fonts.googleapis.com for their typefaces. Those
+  // requests are stripped out, so a deck never depends on the room's wifi; the
+  // theme falls back to the next font in its own stack. Set this to true to let
+  // them through and get the typography of revealjs.com/themes exactly.
+  // webfonts: true,
+
   // Port `fb-slides dev` serves the deck on (`preview` uses the next one up).
   // `--port n` on the command line wins over this.
   port: 4000,