mdeck 2.3.0

package/assets/base.css

@@ -0,0 +1,196 @@
+/* ─────────────────────────────────────────────
+   BASE — shared structural skeleton
+   Loaded before tokens.css and templates.css so themes
+   can override anything here. Only universally-identical
+   rules live here; visual styling belongs in each theme.
+   ───────────────────────────────────────────── */
+
+/* ── Reset ───────────────────────────────────────────────────────────────── */
+html, body {
+  margin: 0;
+  padding: 0;
+  background: #000;
+  font-family: var(--font-body);
+  color: var(--ink);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+deck-stage { background: #000; }
+
+/* ── Slide shell ─────────────────────────────────────────────────────────── */
+.slide {
+  background: var(--bg);
+  color: var(--ink);
+  padding: var(--pad-y) var(--pad-x);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+
+/* ── Ink: saved annotations, above the slide's content ─────────────────── */
+.slide-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; overflow: visible; }
+deck-stage[data-ink-hidden] .slide-ink { display: none; }
+
+/* ── Header / footer rails ───────────────────────────────────────────────── */
+/* Flex skeleton only — typography (font-weight, letter-spacing, etc.) is theme-specific */
+.slide-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: var(--font-body);
+  font-size: var(--fs-eyebrow);
+  color: var(--muted);
+}
+.slide-header > span { white-space: nowrap; flex-shrink: 0; }
+
+.slide-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 40px;
+}
+.slide-footer > span { white-space: nowrap; flex-shrink: 0; }
+
+/* ── Slide body ──────────────────────────────────────────────────────────── */
+/* `safe center`: centred while the content fits; content that is too tall
+   starts at the top instead of growing over the heading (see fit.js). */
+.slide-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: safe center;
+  min-height: 0;
+  font-family: var(--font-body);
+  font-size: var(--fs-body);
+  line-height: 1.45;
+  color: var(--ink-soft);
+}
+
+/* ── Image + text layout ─────────────────────────────────────────────────── */
+/* Gap default 100px — FHNW and editorial override to 96px in their templates.css */
+.slide--image-text .slide-body {
+  flex-direction: row;
+  gap: 100px;
+  align-items: stretch;
+  justify-content: stretch;
+}
+.image-pane img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.image-pane .themed-picture { width: 100%; height: 100%; }
+.themed-picture:not(.themed-picture--inline) > svg { width: 100%; height: 100%; display: block; overflow: visible; }
+.slide-bg .slide-bg-picture { position: absolute; inset: 0; }
+.themed-picture--inline { display: inline-block; max-width: 100%; vertical-align: middle; }
+.themed-picture--inline > svg { display: block; max-width: 100%; height: auto; }
+/* Structural skeleton for placeholder — visual (background, colors) stays in theme */
+.image-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
+.text-pane {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: safe center;
+  gap: var(--gap-item);
+}
+
+/* ── Split layout ────────────────────────────────────────────────────────── */
+/* The shared heading above, then the two columns side by side. */
+.split-heading { flex: none; margin-bottom: var(--gap-item); }
+.split-columns { flex: 1; min-height: 0; display: flex; flex-direction: row; align-items: stretch; gap: 100px; }
+.split-left  { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: safe center; --code-size: 20px; }
+.split-right { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: safe center; gap: var(--gap-item); }
+
+/* ── List containers ─────────────────────────────────────────────────────── */
+.slide-body :is(ul, ol) + :is(ul, ol) { margin-top: var(--gap-item); }
+/* Markers (::before), padding, and font styling are visual — defined per theme */
+.slide-body ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-item);
+}
+.slide-body ul li { position: relative; }
+.slide-body ol {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  counter-reset: slide-ol;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-item);
+}
+.slide-body ol li { counter-increment: slide-ol; position: relative; }
+
+/* ── Full-bleed image ────────────────────────────────────────────────────── */
+.slide--full-bleed-image { padding: 0; }
+.slide--full-bleed-image .slide-bg {
+  position: absolute;
+  inset: 0;
+  background: var(--ink);      /* dark fallback before image loads */
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+/* Default body: content at bottom with standard padding — FHNW overrides padding: 0 */
+.slide--full-bleed-image .slide-body {
+  position: relative;
+  z-index: 1;
+  padding: var(--pad-y) var(--pad-x);
+  justify-content: flex-end;
+}
+
+/* ── Footnotes ───────────────────────────────────────────────────────────── */
+/* FHNW and editorial override padding-top and add font-weight/style in their templates.css */
+.slide-footnotes {
+  font-size: var(--fs-small);
+  color: var(--muted);
+  border-top: 1px solid var(--rule);
+  padding-top: 20px;
+  margin-top: auto;
+}
+.slide-footnotes ol { margin: 0; padding-left: 1.5em; display: flex; flex-direction: column; gap: 4px; }
+.slide-footnotes li { line-height: 1.4; }
+.slide-footnotes p { margin: 0; }
+.slide-footnotes .footnote-backref { display: none; }
+
+/* ── Code blocks ─────────────────────────────────────────────────────────── */
+.code-block { white-space: pre-wrap; overflow-x: hidden; }
+
+/* ── Tables ──────────────────────────────────────────────────────────────── */
+.slide-body table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: var(--fs-body);
+}
+.slide-body th,
+.slide-body td {
+  text-align: left;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--rule);
+}
+.slide-body th {
+  font-weight: 600;
+  border-bottom: 2px solid var(--ink);
+  color: var(--ink);
+}
+.slide-body td { color: var(--ink-soft); }
+
+/* ── Step reveals ────────────────────────────────────────────────────────── */
+[data-step] {
+  opacity: 0;
+  transition: opacity 200ms ease;
+}
+[data-step][data-step-visible] {
+  opacity: 1;
+}
+
+/* ── Print ───────────────────────────────────────────────────────────────── */
+@media print {
+  html, body, deck-stage { background: #fff !important; }
+  [data-step] { opacity: 1 !important; }
+  /* Pages are captured right after print mode reveals everything. */
+  *, *::before, *::after { transition: none !important; }
+}

package/assets/extensions/layouts/chapter/extension.toml

@@ -0,0 +1,26 @@
+schema = 1
+kind = "layout"
+id = "chapter"
+title = "Chapter divider"
+description = "Section divider with a number, label and short description."
+frame = "chapter"
+
+[regions.body]
+description = "Chapter heading and a short description"
+
+[properties.image]
+type = "string"
+description = "Image path"
+
+[properties.alt]
+type = "string"
+default = ""
+
+[properties.fit]
+type = "string"
+enum = ["cover", "contain"]
+default = "cover"
+
+[properties.position]
+type = "string"
+default = "center"

package/assets/extensions/layouts/chapter/layout.jsx

@@ -0,0 +1,21 @@
+import { h } from 'preact'
+import { extractContent, HtmlContent, Picture, t } from 'mdeck/layout'
+
+export default function ChapterLayout({ meta, content, props }) {
+  const { headings, paragraphs, bodyHtml } = extractContent(content, { headingLevels: [1], paragraph: meta.description == null })
+  // As written: 2 shows as 2; write "02" for a leading zero. A whole number
+  // is also given to themes as --chapter-number, for counters in another
+  // style (editorial shows it in Roman numerals).
+  const num = meta.number != null ? String(meta.number) : null
+  const desc = meta.description ?? paragraphs[0]
+  return <div class="slide-body">
+    <div class="chapter-content">
+      {num && <div class="chapter-num" style={/^\d+$/.test(num) ? { '--chapter-number': Number(num) } : undefined}>{num}</div>}
+      <div class="chapter-meta">{meta.label ?? t('slide.chapter')}</div>
+      {headings[1] && <h2 class="chapter-title" dangerouslySetInnerHTML={{ __html: headings[1] }} />}
+      {desc && <p class="chapter-desc" dangerouslySetInnerHTML={{ __html: desc }} />}
+      {bodyHtml && <HtmlContent html={bodyHtml} />}
+    </div>
+    {props.image && <Picture class="chapter-image" src={props.image} alt={props.alt} fit={props.fit} position={props.position} />}
+  </div>
+}

package/assets/extensions/layouts/chapter/starter.md

@@ -0,0 +1,8 @@
+:::meta
+layout: chapter
+number: 1
+part: Part One
+:::
+# Chapter title
+
+What this chapter covers.

package/assets/extensions/layouts/focus/extension.toml

@@ -0,0 +1,8 @@
+schema = 1
+kind = "layout"
+id = "focus"
+title = "Big statement"
+description = "One strong idea, quote or conclusion in large type."
+
+[regions.body]
+description = "The statement"

package/assets/extensions/layouts/focus/layout.jsx

@@ -0,0 +1,10 @@
+import { h } from 'preact'
+import { MarkdownRegion } from 'mdeck/layout'
+
+export default function FocusLayout({ meta, regions }) {
+  return <div class="slide-body">
+    {meta.eyebrow && <div class="focus-eyebrow">{meta.eyebrow}</div>}
+    <MarkdownRegion class="focus-content" region={regions.body} />
+    {meta.attribution && <div class="focus-attribution">— {meta.attribution}</div>}
+  </div>
+}

package/assets/extensions/layouts/focus/starter.md

@@ -0,0 +1,4 @@
+:::meta
+layout: focus
+:::
+# One strong idea.

package/assets/extensions/layouts/full-bleed-image/extension.toml

@@ -0,0 +1,31 @@
+schema = 1
+kind = "layout"
+id = "full-bleed-image"
+title = "Full-bleed image"
+description = "A picture filling the whole slide with an optional overlay title."
+frame = "none"
+
+[regions.body]
+description = "Overlay heading and text"
+
+[properties.image]
+type = "string"
+description = "Image path"
+
+[properties.alt]
+type = "string"
+default = ""
+
+[properties.fit]
+type = "string"
+enum = ["cover", "contain"]
+default = "cover"
+
+[properties.position]
+type = "string"
+default = "center"
+
+[properties.overlay]
+type = "boolean"
+description = "Darken the picture behind the text"
+default = false

package/assets/extensions/layouts/full-bleed-image/layout.jsx

@@ -0,0 +1,19 @@
+import { h } from 'preact'
+import { extractContent, HtmlContent, Picture, themedSvg } from 'mdeck/layout'
+
+export default function FullBleedLayout({ content, props }) {
+  const { headings, bodyHtml } = extractContent(content, { headingLevels: [1] })
+  // A drawing in the theme's colours is drawn inside the background box;
+  // other pictures are its CSS background.
+  const drawing = props.image && themedSvg(props.image)
+  return <>
+    <div class="slide-bg" style={{ backgroundImage: props.image && !drawing ? `url(${JSON.stringify(props.image)})` : undefined,
+      backgroundSize: props.fit, backgroundPosition: props.position }}>
+      {drawing && <Picture class="slide-bg-picture" src={props.image} alt={props.alt} fit={props.fit ?? 'cover'} />}
+    </div>
+    <div class="slide-body">
+      {headings[1] && <h2 class="overlay-title" dangerouslySetInnerHTML={{ __html: headings[1] }} />}
+      {bodyHtml && <HtmlContent html={bodyHtml} />}
+    </div>
+  </>
+}

package/assets/extensions/layouts/full-bleed-image/starter.md

@@ -0,0 +1,6 @@
+:::meta
+layout: full-bleed-image
+props:
+  overlay: true
+:::
+# Add an image using props.image

package/assets/extensions/layouts/generic/extension.toml

@@ -0,0 +1,8 @@
+schema = 1
+kind = "layout"
+id = "generic"
+title = "Content slide"
+description = "Ordinary slide: heading, text, lists, tables, code or pictures."
+
+[regions.body]
+description = "Markdown content"

package/assets/extensions/layouts/generic/layout.jsx

@@ -0,0 +1,8 @@
+import { h } from 'preact'
+import { MarkdownRegion } from 'mdeck/layout'
+
+export default function GenericLayout({ regions }) {
+  if (Object.keys(regions).length === 1 && regions.body) return <MarkdownRegion class="slide-body" region={regions.body} />
+  // Unknown legacy layouts retain every region in source order.
+  return <div class="slide-body">{Object.values(regions).map(region => <MarkdownRegion key={region.name} region={region} />)}</div>
+}

package/assets/extensions/layouts/generic/starter.md

@@ -0,0 +1,4 @@
+# Heading
+
+- First point
+- Second point

package/assets/extensions/layouts/image-text/extension.toml

@@ -0,0 +1,25 @@
+schema = 1
+kind = "layout"
+id = "image-text"
+title = "Image + text"
+description = "A picture beside a heading and text."
+
+[regions.body]
+description = "Heading, eyebrow and text beside the image"
+
+[properties.image]
+type = "string"
+description = "Image path"
+
+[properties.alt]
+type = "string"
+default = ""
+
+[properties.fit]
+type = "string"
+enum = ["cover", "contain"]
+default = "cover"
+
+[properties.position]
+type = "string"
+default = "center"

package/assets/extensions/layouts/image-text/layout.jsx

@@ -0,0 +1,17 @@
+import { h } from 'preact'
+import { extractContent, HtmlContent, Picture } from 'mdeck/layout'
+
+export default function ImageTextLayout({ meta, content, props }) {
+  const { headings, bodyHtml } = extractContent(content, { headingLevels: [1, 2] })
+  return <div class="slide-body">
+    <div class="image-pane">
+      {props.image ? <Picture src={props.image} alt={props.alt} fit={props.fit} position={props.position} />
+        : <div class="image-placeholder"><span>Image placeholder</span></div>}
+    </div>
+    <div class="text-pane">
+      {(headings[2] ?? meta.eyebrow) && <div class="eyebrow" dangerouslySetInnerHTML={{ __html: headings[2] ?? meta.eyebrow }} />}
+      {headings[1] && <h2 class="title" dangerouslySetInnerHTML={{ __html: headings[1] }} />}
+      <HtmlContent class="text-content" html={bodyHtml.replace(/<p>/g, '<p class="body-text">')} />
+    </div>
+  </div>
+}

package/assets/extensions/layouts/image-text/starter.md

@@ -0,0 +1,6 @@
+:::meta
+layout: image-text
+:::
+# Visual context
+
+Add an image using props.image.

package/assets/extensions/layouts/split/extension.toml

@@ -0,0 +1,25 @@
+schema = 1
+kind = "layout"
+id = "split"
+title = "Split content"
+description = "Two columns, with an optional shared heading above them."
+
+[regions.body]
+description = "Shared heading; without slots the first block goes left and the rest right"
+
+[regions.left]
+description = "Left column"
+
+[regions.right]
+description = "Right column"
+
+[properties.ratio]
+type = "array"
+description = "Relative widths of the two columns"
+minItems = 2
+maxItems = 2
+default = [1, 1]
+
+[properties.ratio.items]
+type = "number"
+minimum = 0.01

package/assets/extensions/layouts/split/layout.jsx

@@ -0,0 +1,19 @@
+import { h } from 'preact'
+import { marked } from 'marked'
+import { HtmlContent, MarkdownRegion } from 'mdeck/layout'
+
+export default function SplitLayout({ content, regions, props }) {
+  const tokens = marked.lexer(content)
+  const [first, ...rest] = tokens.filter(token => token.type !== 'space')
+  const named = regions.left || regions.right
+  const left = named ? marked.parse(regions.left?.content ?? '') : marked.parser(Object.assign(first ? [first] : [], { links: tokens.links }))
+  const right = named ? marked.parse(regions.right?.content ?? '') : marked.parser(Object.assign(rest, { links: tokens.links }))
+  // The shared heading sits in the slide body, where themes style headings.
+  return <div class="slide-body">
+    {named && content && <MarkdownRegion class="split-heading" region={regions.body} />}
+    <div class="split-columns">
+      <div class="split-left" data-region="left" style={{ flex: props.ratio[0] }}><HtmlContent html={left} /></div>
+      <div class="split-right" data-region="right" style={{ flex: props.ratio[1] }}><HtmlContent html={right} /></div>
+    </div>
+  </div>
+}

package/assets/extensions/layouts/split/starter.md

@@ -0,0 +1,14 @@
+:::meta
+layout: split
+props:
+  ratio: [1, 1]
+:::
+# Compare
+
+:::slot left
+Left content
+:::
+
+:::slot right
+Right content
+:::

package/assets/extensions/layouts/title/extension.toml

@@ -0,0 +1,26 @@
+schema = 1
+kind = "layout"
+id = "title"
+title = "Title slide"
+description = "Opening slide with a headline, subtitle and optional picture."
+frame = "title"
+
+[regions.body]
+description = "Headline, subtitle and any introduction"
+
+[properties.image]
+type = "string"
+description = "Image path"
+
+[properties.alt]
+type = "string"
+default = ""
+
+[properties.fit]
+type = "string"
+enum = ["cover", "contain"]
+default = "cover"
+
+[properties.position]
+type = "string"
+default = "center"

package/assets/extensions/layouts/title/layout.jsx

@@ -0,0 +1,14 @@
+import { h } from 'preact'
+import { extractContent, HtmlContent, Picture } from 'mdeck/layout'
+
+export default function TitleLayout({ content, props }) {
+  const { headings, paragraphs, bodyHtml } = extractContent(content, { headingLevels: [1, 2], paragraph: !/^##\s/m.test(content) })
+  return <div class="slide-body">
+    <div class="title-text">
+      {headings[1] && <h1 class="display" dangerouslySetInnerHTML={{ __html: headings[1] }} />}
+      {(headings[2] || paragraphs[0]) && <p class="subtitle" dangerouslySetInnerHTML={{ __html: headings[2] ?? paragraphs[0] }} />}
+      {bodyHtml && <HtmlContent html={bodyHtml} />}
+    </div>
+    {props.image && <Picture class="title-image" src={props.image} alt={props.alt} fit={props.fit} position={props.position} />}
+  </div>
+}

package/assets/extensions/layouts/title/starter.md

@@ -0,0 +1,5 @@
+:::meta
+layout: title
+:::
+# My Talk
+## A clear subtitle

package/assets/extensions/palettes/brand/extension.toml

@@ -0,0 +1,29 @@
+schema = 1
+kind = "palette"
+id = "brand"
+title = "FHNW"
+description = "The FHNW corporate colours: black, white and FHNW yellow."
+# Only for the fhnw theme: its corporate colours.
+theme = "fhnw"
+
+[light]
+"--bg" = "#ffffff"
+"--surface" = "#f1f1ee"
+"--ink" = "#000000"
+"--ink-soft" = "#262626"
+"--muted" = "#6e6e6e"
+"--rule" = "#deded9"
+"--accent" = "#fde70e"
+"--accent-2" = "#000000"
+"--on-accent" = "#000000"
+
+[dark]
+"--bg" = "#000000"
+"--surface" = "#1c1c1c"
+"--ink" = "#ffffff"
+"--ink-soft" = "#dcdcdc"
+"--muted" = "#9a9a9a"
+"--rule" = "#333333"
+"--accent" = "#fde70e"
+"--accent-2" = "#ffffff"
+"--on-accent" = "#000000"

package/assets/extensions/palettes/cobalt/extension.toml

@@ -0,0 +1,27 @@
+schema = 1
+kind = "palette"
+id = "cobalt"
+title = "Cobalt"
+description = "Strong ultramarine on white, with vivid orange; bold and clear."
+
+[light]
+"--bg" = "#ffffff"
+"--surface" = "#eef1fb"
+"--ink" = "#0c1033"
+"--ink-soft" = "#2a2f55"
+"--muted" = "#5b6080"
+"--rule" = "#d5dbf0"
+"--accent" = "#1f3fd1"
+"--accent-2" = "#e8590c"
+"--on-accent" = "#ffffff"
+
+[dark]
+"--bg" = "#0a1030"
+"--surface" = "#121a44"
+"--ink" = "#eef1ff"
+"--ink-soft" = "#c9cff0"
+"--muted" = "#8e97c4"
+"--rule" = "#212b5e"
+"--accent" = "#6f8cff"
+"--accent-2" = "#ff922b"
+"--on-accent" = "#0a1030"

package/assets/extensions/palettes/ember/extension.toml

@@ -0,0 +1,27 @@
+schema = 1
+kind = "palette"
+id = "ember"
+title = "Ember"
+description = "Sand and espresso with a glowing orange."
+
+[light]
+"--bg" = "#fbf6ef"
+"--surface" = "#f1e7da"
+"--ink" = "#2a1a10"
+"--ink-soft" = "#4a3324"
+"--muted" = "#7a6656"
+"--rule" = "#e6d6c3"
+"--accent" = "#c2410c"
+"--accent-2" = "#8f5a3c"
+"--on-accent" = "#ffffff"
+
+[dark]
+"--bg" = "#121005"
+"--surface" = "#1f1e19"
+"--ink" = "#eae0d5"
+"--ink-soft" = "#c6ac8f"
+"--muted" = "#9a8a77"
+"--rule" = "#2b2a29"
+"--accent" = "#eb5e28"
+"--accent-2" = "#c98b6b"
+"--on-accent" = "#0d0a05"

package/assets/extensions/palettes/forest/extension.toml

@@ -0,0 +1,27 @@
+schema = 1
+kind = "palette"
+id = "forest"
+title = "Forest"
+description = "Deep green with moss and ochre; calm, with contrast."
+
+[light]
+"--bg" = "#f6f5ef"
+"--surface" = "#e9eadf"
+"--ink" = "#12261c"
+"--ink-soft" = "#2c4436"
+"--muted" = "#5a6c60"
+"--rule" = "#d3d8c8"
+"--accent" = "#2e7d32"
+"--accent-2" = "#9a6b00"
+"--on-accent" = "#ffffff"
+
+[dark]
+"--bg" = "#0e1a14"
+"--surface" = "#16261d"
+"--ink" = "#e9f1e6"
+"--ink-soft" = "#c4d3c0"
+"--muted" = "#8ea493"
+"--rule" = "#24382c"
+"--accent" = "#7bd389"
+"--accent-2" = "#e6c35c"
+"--on-accent" = "#0e1a14"