@miragon/slidev-toolkit 1.7.1 → 1.8.0

package/components/Agenda.vue

@@ -8,7 +8,14 @@
  * Past six the rail WRAPS into balanced rows and drops the previews, becoming a
  * static, top-aligned overview.
  *
- * Props: eyebrow (kicker, default "Agenda"), title (h2), accent (blue|green|mixed).
+ * `layout: subsection` slides do NOT open a chapter (they divide a chapter
+ * internally); they are collected onto the enclosing chapter's `subsections`.
+ * With `preview="subsections"` the previews show just those sub-chapter dividers
+ * instead of every slide — a sparse overview for chapters with many slides.
+ * Chapters without any subsection fall back to their full slide list.
+ *
+ * Props: eyebrow (kicker, default "Agenda"), title (h2), accent (blue|green|mixed),
+ * preview ("slides" | "subsections", default "slides").
  */
 import { computed, ref, watch } from 'vue'
 import { useElementSize } from '@vueuse/core'
@@ -27,8 +34,9 @@ const props = withDefaults(
     eyebrow?: string
     title?: string
     accent?: 'blue' | 'green' | 'mixed'
+    preview?: 'slides' | 'subsections'
   }>(),
-  { eyebrow: 'Agenda', accent: 'mixed' },
+  { eyebrow: 'Agenda', accent: 'mixed', preview: 'slides' },
 )
 
 const { slides, go, currentPage } = useNav()
@@ -48,6 +56,7 @@ interface Chapter {
   eyebrow: string
   title: string
   routes: any[]
+  subsections: any[]
 }
 
 const chapters = computed<Chapter[]>(() => {
@@ -61,9 +70,13 @@ const chapters = computed<Chapter[]>(() => {
         eyebrow: clean(fm.eyebrow) || `Chapter ${n}`,
         title: clean(route.meta?.slide?.title) || clean(fm.eyebrow) || `Chapter ${n}`,
         routes: [route],
+        subsections: [],
       })
     } else if (out.length) {
-      out[out.length - 1].routes.push(route)
+      const chapter = out[out.length - 1]
+      chapter.routes.push(route)
+      // Sub-chapter dividers structure a chapter without opening a new one.
+      if (fm.layout === 'subsection') chapter.subsections.push(route)
     }
   }
   return out
@@ -86,6 +99,17 @@ watch(
 
 const activeChapter = computed(() => chapters.value[selected.value])
 
+// The slides shown as previews for the selected chapter. In "subsections" mode
+// that is just the chapter's sub-chapter dividers (a sparse overview); chapters
+// without any subsection fall back to their full slide list so nothing vanishes.
+const previewRoutes = computed(() => {
+  const ch = activeChapter.value
+  if (!ch) return []
+  return props.preview === 'subsections' && ch.subsections.length
+    ? ch.subsections
+    : ch.routes
+})
+
 // Mini size is computed as if a chapter held at most this many slides, so the
 // frame never shrinks below the clean size; extra slides scroll below the fold.
 const MAX_MINIS = 21
@@ -146,7 +170,7 @@ const ASPECT = 16 / 9
 const MAX_W = 320
 
 const miniWidth = computed(() => {
-  const n = Math.min(activeChapter.value?.routes.length ?? 0, MAX_MINIS)
+  const n = Math.min(previewRoutes.value.length, MAX_MINIS)
   const W = stageW.value
   const H = stageH.value
   if (!n || W < 1 || H < 1) return 200
@@ -230,7 +254,7 @@ function openSlide(no: number, ev: MouseEvent) {
           <transition name="fade-preview" mode="out-in">
             <div :key="selected" class="preview-row">
               <button
-                v-for="route in activeChapter?.routes"
+                v-for="route in previewRoutes"
                 :key="route.no"
                 type="button"
                 class="mini"

package/components/StepList.vue

@@ -31,6 +31,7 @@
   margin: 0;
 }
 .step-list.step-list :deep(p + p) { margin-top: 0.4em; }
+.step-list.step-list :deep(.step__body > p) { display: inline; margin: 0; }
 .step-list.step-list :deep(strong) { font-weight: 700; color: var(--miragon-text-primary); }
 .step-list.step-list :deep(a) {
   color: var(--miragon-blue);

package/layouts/subsection.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+/**
+ * subsection — Unterkapitel-Trenner (STATISCHE Welt, KEIN Mesh-Shader).
+ *
+ * Der kleine Bruder von `section`: gliedert ein Kapitel INTERN, ohne im Agenda-
+ * Rail ein eigenes Kapitel zu eröffnen (die Agenda zählt nur `layout: section`).
+ * Optisch untergeordnet — kleinerer Titel, dezentere Ghost-Ziffer, eine
+ * optionale Kapitel-Rückreferenz als Überzeile — damit klar bleibt: dies ist
+ * eine Zwischenüberschrift, kein neues Kapitel.
+ *
+ * Die Agenda kann diese Trenner mit `<Agenda preview="subsections">` statt der
+ * Einzelfolien als Kapitel-Vorschau rendern.
+ *
+ * Slots: default = Unterkapiteltitel (h1) + optionaler Einzeiler (p) aus Markdown.
+ * Frontmatter-Props:
+ *   index    — Nummer als String (z. B. "2.1"); rendert als Ghost-Ziffer
+ *   eyebrow  — kleine Überzeile (z. B. das übergeordnete Kapitel)
+ *   accent   — "blue" | "green" | "mixed" — Gradient-Akzent (default blue)
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    index?: string
+    eyebrow?: string
+    accent?: 'blue' | 'green' | 'mixed'
+  }>(),
+  { accent: 'blue' },
+)
+
+// Token reaktiv (siehe section.vue) — alle Werte aus theme.css, keine Hex.
+const gradientVar = computed(() => `var(--miragon-gradient-${props.accent})`)
+const accentVar = computed(() =>
+  props.accent === 'green' ? 'var(--miragon-green-deep)' : 'var(--miragon-blue)',
+)
+</script>
+
+<template>
+  <div
+    class="subsection-layout"
+    :style="{ '--s-grad': gradientVar, '--s-accent': accentVar }"
+  >
+    <span v-if="index" class="subsection-ghost" aria-hidden="true">{{ index }}</span>
+
+    <div class="subsection-content">
+      <span class="subsection-bar" aria-hidden="true"></span>
+      <div v-if="eyebrow" class="subsection-eyebrow">{{ eyebrow }}</div>
+      <div class="subsection-body">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.subsection-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--miragon-gray-bg);
+  color: var(--miragon-text-primary);
+  display: flex;
+  align-items: center;
+}
+
+/* Ghost-Ziffer wie section, aber kleiner und dezenter — Unterkapitel ordnet sich
+   dem Kapitel unter. Solide Akzentfarbe (exportsicher, vgl. section.vue). */
+.subsection-ghost {
+  position: absolute;
+  z-index: 0;
+  right: 4.5rem;
+  bottom: 2rem;
+  font-size: 20rem;
+  line-height: 1;
+  font-weight: 900;
+  letter-spacing: -0.04em;
+  color: var(--s-accent);
+  opacity: 0.06;
+  user-select: none;
+  pointer-events: none;
+}
+
+.subsection-content {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 60rem;
+  padding: 0 5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.subsection-bar {
+  width: 3rem;
+  height: 0.3rem;
+  border-radius: 999px;
+  background: var(--s-grad);
+  margin-bottom: 1.5rem;
+}
+.subsection-eyebrow {
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--s-accent);
+  margin-bottom: 1rem;
+}
+
+.subsection-body :deep(h1) {
+  font-size: clamp(2rem, 3.6vw, 3rem);
+  line-height: 1.1;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--miragon-text-primary);
+  margin: 0;
+}
+.subsection-body :deep(h1 strong) {
+  font-weight: 800;
+  color: var(--s-accent);
+}
+.subsection-body :deep(p) {
+  font-size: 1.1rem;
+  font-weight: 500;
+  color: var(--miragon-text-muted);
+  margin: 1.5rem 0 0;
+  max-width: 38rem;
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miragon/slidev-toolkit",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "Miragon Slidev toolkit: the brand theme, the layout archetypes, the reusable components (Card, CardGrid, StepList, Figure, SplitView) and the BrandMeshBackground animation. Single source of design truth, consumed by the reference deck in this repo.",
   "keywords": [
     "slidev-theme",

package/setup/transformers.ts

@@ -0,0 +1,67 @@
+import { defineTransformersSetup, defineMarkdownTransformer } from '@slidev/types'
+
+/**
+ * Make inline Markdown render inside a component body, whatever the author wrote.
+ *
+ * Slidev only runs inline Markdown (`` `code` ``, **bold**, links) inside a
+ * component body when that body is its OWN Markdown block, i.e. separated from
+ * the opening/closing tags by blank lines. A body written on the tag line
+ * (`<Card title="X">`code`</Card>`) is handed through as raw HTML and the
+ * backticks/asterisks render literally. That is a silent footgun: the natural,
+ * one-line authoring form the deck otherwise mandates is exactly the form that
+ * breaks.
+ *
+ * This pre-transformer rewrites the single-line form into the blank-line form
+ * before the Markdown is parsed, so authors keep writing components on one line
+ * and inline Markdown just works:
+ *
+ *   <Step label="Handle">`@Autowired ProcessEngine`.</Step>
+ *
+ * becomes, only for the parser:
+ *
+ *   <Step label="Handle">
+ *
+ *   `@Autowired ProcessEngine`.
+ *
+ *   </Step>
+ *
+ * Paired with the `.step__body > p` rule in StepList.vue (which renders the
+ * resulting <p> inline) the step still reads as "Label: body" on one line.
+ *
+ * Scope is deliberately narrow: only the components whose default slot is a
+ * prose body, only when the whole `<Tag …>body</Tag>` sits on a single line
+ * (multi-line bodies are already blank-line blocks and are left untouched), and
+ * never inside fenced code blocks (so slides that *show* component source stay
+ * verbatim). Extend BODY_TAGS if another prose-body component is added.
+ */
+const BODY_TAGS = ['Card', 'Step']
+
+// <indent><Tag attrs>body</Tag> with body and close tag on the same line.
+const SINGLE_LINE = new RegExp(
+  String.raw`^([ \t]*)<(${BODY_TAGS.join('|')})\b([^>\n]*)>(.+?)</\2>[ \t]*$`,
+)
+const FENCE = /^\s*(```|~~~)/
+
+const wrapComponentBody = defineMarkdownTransformer((ctx) => {
+  const src = ctx.s.original
+  if (!src) return
+  const lines = src.split('\n')
+  let inFence = false
+  let changed = false
+  for (let i = 0; i < lines.length; i++) {
+    if (FENCE.test(lines[i])) {
+      inFence = !inFence
+      continue
+    }
+    if (inFence) continue
+    const m = lines[i].match(SINGLE_LINE)
+    if (!m) continue
+    const [, indent, tag, attrs, body] = m
+    if (!body.trim()) continue
+    lines[i] = `${indent}<${tag}${attrs}>\n\n${body.trim()}\n\n${indent}</${tag}>`
+    changed = true
+  }
+  if (changed) ctx.s.overwrite(0, src.length, lines.join('\n'))
+})
+
+export default defineTransformersSetup(() => ({ pre: [wrapComponentBody] }))