mdeck 3.1.0 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 3.2.0 — 2026-10-07
+
+- Pictures written in the text fit on the slide in every theme: a paragraph of nothing but pictures shrinks into the room below the heading instead of running off the slide, keeping its proportions (small pictures keep their size), and several pictures in one paragraph sit side by side. Such paragraphs have the class `pictures`, for themes that set them their own way; a picture in a sentence is left alone.
+- Tables have room below them in every theme, so a sentence after a table no longer sits right against it.
+- `mdeck themes build` also renders an icon for each theme: its title slide at 96×54 (drawn at twice that, about 3 KB), listed as `icon` in `catalogue.json` and `looks.json`. The theme repository's gallery shows it in its list instead of the palette's colours, which said little about a theme.
+
 ## 3.1.0 — 2026-10-07
 
 - Packs are gone: every theme and palette is installed on its own. `mdeck themes install duet` installs the theme with its default palette (`cobalt`), and `mdeck palettes install solarized` a palette; both have `search`, `remove`, `update` and `list`. A palette made for one theme (FHNW's `brand`) brings that theme along and goes with it. A palette an installed theme uses by default is not removed while that theme is there. Installs go into `themes/<id>/` and `palettes/<id>/` of the extensions folder, so a theme and a palette may share a name.

package/assets/base.css

@@ -162,11 +162,35 @@ deck-stage[data-ink-hidden] .slide-ink { display: none; }
 /* ── Code blocks ─────────────────────────────────────────────────────────── */
 .code-block { white-space: pre-wrap; overflow-x: hidden; }
 
+/* ── Pictures written in the text ───────────────────────────────────────── */
+/* A paragraph of nothing but pictures (marked in markedSetup.js) fits into
+   the room the slide has left: a large picture shrinks, keeping its
+   proportions, and never runs off the slide; a small one keeps its size.
+   Several sit side by side. Themes may set them differently (a grid, cropped
+   to fill); a picture in a sentence is left alone. */
+.slide-body p.pictures {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex: 0 1 auto;
+  min-height: 0;
+}
+.slide-body p.pictures > :is(img, .themed-picture) {
+  flex: 0 1 auto;
+  min-width: 0;
+  min-height: 0;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
 /* ── Tables ──────────────────────────────────────────────────────────────── */
 .slide-body table {
   border-collapse: collapse;
   width: 100%;
   font-size: var(--fs-body);
+  /* Room before what follows, such as a sentence about the numbers. */
+  margin-bottom: calc(var(--gap-item, 24px) * 1.5);
 }
 .slide-body th,
 .slide-body td {

package/docs/reference/authoring.md

@@ -594,6 +594,19 @@ Reference images with standard Markdown syntax or the `image:` frontmatter field
 ![Alt text](./img/diagram.png)
 ```
 
+A paragraph of nothing but pictures fits into the room the slide has left: a
+large picture shrinks, keeping its proportions, and a small one keeps its
+size. Several pictures in one paragraph sit side by side:
+
+```markdown
+# Three mornings
+
+![Fjord](./img/fjord.jpg) ![Mountains](./img/mountains.jpg) ![Snow](./img/snow.jpg)
+```
+
+A picture inside a sentence stays in the sentence. Themes may set picture
+paragraphs their own way (Lightbox fills a grid edge to edge).
+
 A local SVG whose source contains `var(--…)` is drawn inline instead of as an
 `<img>`, both in slide text (`![…](./img/drawing.svg)` or `<img src>`) and as a
 layout's `image` (`title`, `chapter`, `image-text`, `full-bleed-image`, and

package/docs/reference/extensions.md

@@ -246,7 +246,9 @@ touch files changed since then unless given `--force`.
 
 The repository serves `catalogue.json` (`{ schema: 2, themes: [...],
 palettes: [...] }`, each with its id, version, default palette or theme,
-`url`, `sha256`, `preview`, and `builtIn` for those that come with mdeck) and
+`url`, `sha256`, `preview`, for a theme an `icon` (its title slide at
+96×54, drawn at twice that for sharp screens), and `builtIn` for those that
+come with mdeck) and
 one JSON file per version holding the text of its files.
 `mdeck themes build <repository> -o <out> [--check]` writes both from a
 folder with `themes/` and `palettes/`; `MDECK_THEMES_URL` points mdeck at

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdeck",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "type": "module",
   "description": "Write slides as a plain text file, present them in the browser, share them as one HTML file or PDF.",
   "license": "MIT",

package/src/build/themeCheck.js

@@ -147,15 +147,25 @@ export function checkLooks(looks, { extensions = {} } = {}) {
   })
 }
 
+// The size of a theme's icon in lists, in CSS pixels; drawn at twice that
+// for sharp screens.
+export const ICON = { width: 96, height: 54, scale: 2 }
+
 // Pictures of looks on the sample deck, as WebP: { file, theme, palette,
-// slide } each, slide counting from 1.
+// slide, icon } each, slide counting from 1. `icon`, if given, is a second
+// file with the same slide at icon size: small enough for a list, and still
+// showing the theme's type, colours and shapes.
 export function renderPreviews(shots, { extensions = {}, width = 960, height = 540 } = {}) {
   return withSampleDeck({ extensions }, async ({ open }) => {
-    for (const { file, theme, palette = '', slide = 1 } of shots) {
+    for (const { file, theme, palette = '', slide = 1, icon = null } of shots) {
       const page = await open({ theme, palette })
       if (slide > 1) { await page.evaluate(`document.querySelector('deck-stage').goTo(${slide - 1})`); await settle(page) }
       mkdirSync(resolve(file, '..'), { recursive: true })
       writeFileSync(file, await page.screenshot({ width, height, format: 'webp' }))
+      if (icon) {
+        mkdirSync(resolve(icon, '..'), { recursive: true })
+        writeFileSync(icon, await page.screenshot({ ...ICON, format: 'webp' }))
+      }
       await page.close()
     }
   })

package/src/cli/themes.js

@@ -25,11 +25,14 @@ const usage = kind => `search [words] | install <${kind}> | remove <${kind}> | u
 function looksOf(registry, catalogue) {
   const builtIn = new Set([...catalogue.themes, ...catalogue.palettes].filter(entry => entry.builtIn).map(entry => entry.id + (catalogue.themes.includes(entry) ? ':t' : ':p')))
   const palettes = manifestsOf(registry, 'palette')
+  // Each theme's icon for the gallery's list (see renderPreviews).
+  const icons = new Map(catalogue.themes.map(entry => [entry.id, entry.icon]))
   const colours = tokens => Object.fromEntries(['--bg', '--surface', '--ink', '--accent', '--accent-2'].map(key => [key, tokens?.[key] ?? null]))
   return {
     mdeck: VERSION,
     themes: Object.values(manifestsOf(registry, 'theme')).map(theme => ({ id: theme.id, title: theme.title, description: theme.description ?? '', builtIn: builtIn.has(theme.id + ':t'),
-      palette: theme.palette, appearance: theme.appearance ?? 'light', palettes: palettesFor(theme, palettes).map(p => p.id) })),
+      palette: theme.palette, appearance: theme.appearance ?? 'light', palettes: palettesFor(theme, palettes).map(p => p.id),
+      ...(icons.get(theme.id) ? { icon: icons.get(theme.id) } : {}) })),
     palettes: Object.values(palettes).map(palette => ({ id: palette.id, title: palette.title, description: palette.description ?? '', builtIn: builtIn.has(palette.id + ':p'),
       ...(palette.theme ? { theme: palette.theme } : {}), light: colours(palette.light), dark: colours(palette.dark) })),
   }
@@ -148,8 +151,11 @@ export async function runPackages({ kind, positionals, flag, output, ui: { ok, e
         ok(`Checked ${catalogue.themes.length} themes and ${catalogue.palettes.length} palettes, light and dark, on every kind of slide`)
       }
       // Themes on the title slide, palettes on the chapter slide (the third).
-      await renderPreviews(looks.map(look => ({ file: resolve(out, 'previews', `${look.key}.webp`), theme: look.theme, palette: look.palette ?? '', slide: look.palette ? 3 : 1 })), { extensions })
-      for (const entry of catalogue.themes) entry.preview = `previews/themes/${entry.id}.webp`
+      // Themes also get an icon of their title slide for lists; a palette's
+      // colours are its icon.
+      await renderPreviews(looks.map(look => ({ file: resolve(out, 'previews', `${look.key}.webp`), theme: look.theme, palette: look.palette ?? '', slide: look.palette ? 3 : 1,
+        ...(look.palette ? {} : { icon: resolve(out, 'previews', `${look.key}-icon.webp`) }) })), { extensions })
+      for (const entry of catalogue.themes) Object.assign(entry, { preview: `previews/themes/${entry.id}.webp`, icon: `previews/themes/${entry.id}-icon.webp` })
       for (const entry of catalogue.palettes) entry.preview = `previews/palettes/${entry.id}.webp`
       writeFileSync(resolve(out, 'catalogue.json'), JSON.stringify(catalogue, null, 2) + '\n')
       // For the repository's theme browser: the sample deck with every theme

package/src/runtime/markedSetup.js

@@ -143,5 +143,12 @@ marked.use({
         .replace(/>/g, '>')
       return `<codeblock lang="${lang}"${attrs ? ' ' + attrs : ''}>${encoded}</codeblock>`
     },
+    // A paragraph of nothing but pictures (one, or several side by side) is
+    // marked, so themes can fit it into the slide or set it as a row; a
+    // sentence with an icon in it stays a sentence.
+    paragraph({ tokens }) {
+      const pictures = tokens.some(t => t.type === 'image') && tokens.every(t => t.type === 'image' || t.type === 'br' || (t.type === 'text' && !t.raw.trim()))
+      return `<p${pictures ? ' class="pictures"' : ''}>${this.parser.parseInline(tokens)}</p>\n`
+    },
   },
 })