@miragon/slidev-toolkit 1.0.0

package/layouts/cover.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+/**
+ * cover — animierte Titelseite.
+ * Mesh-Shader als Vollbild-Hintergrund (z0), Content darüber (z2).
+ * Slots: default = Titel/Subtitle (aus Markdown). Frontmatter-Props:
+ *   eyebrow  — kleine Überzeile (z. B. "Q2 Review")
+ *   footer   — Footer-Text rechts (z. B. Name · Datum)
+ */
+defineProps<{
+  eyebrow?: string
+  footer?: string
+}>()
+
+// Brand-Asset reist mit dem Theme: statischer Import, von Vite gebundlet und
+// base-aware. Das Deck erbt das Logo aus dem Theme, ohne es selbst zu duplizieren.
+import logoSrc from '../assets/logo.svg'
+function onLogoError(e: Event) {
+  (e.target as HTMLImageElement).style.display = 'none'
+}
+</script>
+
+<template>
+  <div class="cover-layout">
+    <BrandMeshBackground />
+
+    <div class="cover-content">
+      <div v-if="eyebrow" class="cover-eyebrow">{{ eyebrow }}</div>
+      <div class="cover-body">
+        <slot />
+      </div>
+    </div>
+
+    <div class="cover-footer">
+      <img :src="logoSrc" alt="Miragon" class="cover-logo" @error="onLogoError" />
+      <span v-if="footer" class="cover-footer-text">{{ footer }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cover-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  color: var(--miragon-white);
+  /* Brand-Gradient als unterste Ebene: greift, falls BrandMeshBackground (WebGL) gar nicht
+     mountet (PDF/headless ohne GPU) — so nie Weiß, immer der Miragon-Verlauf.
+     BrandMeshBackground liegt mit position:absolute darüber und verdeckt ihn live. */
+  background: linear-gradient(125deg, #335DE5 0%, #1a1a4e 35%, #0d0d2b 55%, #00C853 100%);
+}
+
+.cover-content {
+  position: relative;
+  z-index: 2;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 4rem;
+  max-width: 56rem;
+}
+
+.cover-eyebrow {
+  font-size: 0.95rem;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--miragon-green);
+  margin-bottom: 1.25rem;
+}
+
+/* Titel: weiß, kursiv, sehr fett — Miragon-Charakter */
+.cover-body :deep(h1) {
+  font-size: 3.6rem;
+  line-height: 1.05;
+  font-weight: 900;
+  font-style: italic;
+  color: var(--miragon-white);
+  margin: 0;
+  text-shadow: 0 2px 24px rgba(13, 13, 43, 0.35);
+}
+
+.cover-body :deep(p) {
+  font-size: 1.4rem;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.88);
+  margin-top: 1.25rem;
+  max-width: 42rem;
+}
+
+.cover-body :deep(a) {
+  color: var(--miragon-green);
+  text-decoration: none;
+}
+
+.cover-footer {
+  position: absolute;
+  z-index: 2;
+  bottom: 2rem;
+  left: 4rem;
+  right: 4rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cover-logo { height: 1.75rem; opacity: 0.95; }
+
+.cover-footer-text {
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.7);
+}
+</style>

package/layouts/goodbad.vue

@@ -0,0 +1,308 @@
+<script setup lang="ts">
+/**
+ * goodbad — "Which one is right, and why?" (STATISCHE Welt, kein Mesh-Shader).
+ *
+ * Zwei neutrale weiße Panels nebeneinander, beschriftet "Model A" / "Model B".
+ * Beim ersten Klick erscheinen Verdict-Badges (Recommended / Avoid) UND eine
+ * kurze Regel-Legende — der Saal kann vorher selbst überlegen, welches Modell
+ * besser ist, bevor die Auflösung kommt.
+ *
+ * Bewusst WEISSE Panels (anders als `compare`, das links/rechts semantisch
+ * blau/grün einfärbt): das Modell-Verdict soll erst beim Reveal sichtbar
+ * werden, eine Farbe würde es vorab verraten.
+ *
+ * Folgt der hero/content/compare-Bildsprache: heller Grund, klarer Akzent-Balken,
+ * großzügige Typografie, ein einziger sparsamer Gradient-Akzent.
+ *
+ * Named Slots (in Markdown mit `::left::` / `::right::` / `::legend::`):
+ *   left    — Inhalt von Model A (Text, kleines Code-Snippet, inline-SVG)
+ *   right   — Inhalt von Model B
+ *   legend  — kurze Regel, beim Klick mit den Verdicts zusammen sichtbar
+ *
+ * Frontmatter-Props:
+ *   title       — Slide-Titel (optional)
+ *   eyebrow     — kleine Überzeile (optional)
+ *   prompt      — kursive Leitfrage als Subtitle (optional)
+ *   leftIsGood  — true  → A ist "Recommended", B ist "Avoid"
+ *                 false → A ist "Avoid",       B ist "Recommended" (default)
+ *                 Bewusst pro Slide variieren, sodass "Recommended" nicht
+ *                 immer auf derselben Seite landet.
+ *   accent      — "blue" | "green" | "mixed" — Balken-/Eyebrow-Akzent (default blue)
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    eyebrow?: string
+    prompt?: string
+    leftIsGood?: boolean
+    accent?: 'blue' | 'green' | 'mixed'
+    // Slidev reicht das volle Frontmatter-Objekt als `frontmatter`-Prop durch.
+    frontmatter?: Record<string, unknown>
+  }>(),
+  { accent: 'blue', leftIsGood: false },
+)
+
+// `title` ist ein RESERVIERTES Slidev-Frontmatter-Feld (TOC/Nav) und wird NICHT
+// als eigener Prop durchgereicht (FRONTMATTER_FIELDS). Daher aus dem
+// mitgelieferten `frontmatter`-Objekt lesen, damit `title:` in slides.md wie
+// dokumentiert funktioniert.
+const title = computed(() => props.frontmatter?.title as string | undefined)
+
+// Token reaktiv (siehe hero.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)',
+)
+
+// Verdict-Logik: leftIsGood entscheidet, welche Seite das grüne Recommended
+// und welche das graue Avoid bekommt.
+const leftVerdictLabel = computed(() => (props.leftIsGood ? 'Recommended' : 'Avoid'))
+const rightVerdictLabel = computed(() => (props.leftIsGood ? 'Avoid' : 'Recommended'))
+const leftVerdictClass = computed(() => (props.leftIsGood ? 'verdict-good' : 'verdict-bad'))
+const rightVerdictClass = computed(() => (props.leftIsGood ? 'verdict-bad' : 'verdict-good'))
+</script>
+
+<template>
+  <div
+    class="goodbad-layout"
+    :style="{ '--gb-grad': gradientVar, '--gb-accent': accentVar }"
+  >
+    <div class="goodbad-inner">
+      <header v-if="title || eyebrow || prompt" class="goodbad-head">
+        <span class="goodbad-bar" aria-hidden="true"></span>
+        <div v-if="eyebrow" class="goodbad-eyebrow">{{ eyebrow }}</div>
+        <h2 v-if="title" class="goodbad-title">{{ title }}</h2>
+        <p v-if="prompt" class="goodbad-prompt">{{ prompt }}</p>
+      </header>
+
+      <div class="goodbad-grid">
+        <section class="goodbad-panel">
+          <div class="panel-head">
+            <span class="model-label">Model A</span>
+            <v-click at="1">
+              <span class="verdict" :class="leftVerdictClass">
+                <span class="verdict-dot" aria-hidden="true"></span>
+                <span class="verdict-label">{{ leftVerdictLabel }}</span>
+              </span>
+            </v-click>
+          </div>
+          <div class="panel-body"><slot name="left" /></div>
+        </section>
+
+        <section class="goodbad-panel">
+          <div class="panel-head">
+            <span class="model-label">Model B</span>
+            <v-click at="1">
+              <span class="verdict" :class="rightVerdictClass">
+                <span class="verdict-dot" aria-hidden="true"></span>
+                <span class="verdict-label">{{ rightVerdictLabel }}</span>
+              </span>
+            </v-click>
+          </div>
+          <div class="panel-body"><slot name="right" /></div>
+        </section>
+      </div>
+
+      <v-click at="1">
+        <div class="goodbad-legend"><slot name="legend" /></div>
+      </v-click>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.goodbad-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--miragon-gray-bg);
+  color: var(--miragon-text-primary);
+  display: flex;
+  align-items: stretch;
+}
+
+.goodbad-inner {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 70rem;
+  margin: 0 auto;
+  padding: 3rem 5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+/* --- Kopf: Balken + Eyebrow + Titel + kursive Leitfrage ------------------ */
+.goodbad-head {
+  flex: 0 0 auto;
+  margin-bottom: 1.5rem;
+}
+.goodbad-bar {
+  display: block;
+  width: 3.5rem;
+  height: 0.35rem;
+  border-radius: 999px;
+  background: var(--gb-grad);
+  margin-bottom: 1.1rem;
+}
+.goodbad-eyebrow {
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--gb-accent);
+  margin-bottom: 0.6rem;
+}
+.goodbad-title {
+  font-size: clamp(1.7rem, 2.8vw, 2.2rem);
+  line-height: 1.15;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--miragon-text-primary);
+  margin: 0;
+}
+.goodbad-prompt {
+  font-size: 1.05rem;
+  font-style: italic;
+  color: var(--miragon-text-muted);
+  margin: 0.85rem 0 0;
+  max-width: 46rem;
+  line-height: 1.5;
+}
+
+/* --- Zwei weiße Panels (neutral; Verdict erscheint erst beim Klick) ------ */
+.goodbad-grid {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+}
+.goodbad-panel {
+  background: var(--miragon-white);
+  border: 1px solid #E5E7EB;
+  border-radius: 1.1rem;
+  padding: 1.25rem 1.5rem 1.5rem;
+  box-shadow: 0 8px 20px rgba(51, 93, 229, 0.08);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  min-height: 1.4rem;
+  margin-bottom: 1rem;
+}
+.model-label {
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--miragon-text-muted);
+}
+.verdict {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+.verdict-dot {
+  width: 0.6rem;
+  height: 0.6rem;
+  border-radius: 999px;
+  display: inline-block;
+}
+.verdict-label {
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+.verdict-good .verdict-dot { background: var(--miragon-green-dark); }
+.verdict-good .verdict-label { color: var(--miragon-green-deep); }
+.verdict-bad .verdict-dot { background: var(--miragon-text-muted); }
+.verdict-bad .verdict-label { color: var(--miragon-text-muted); }
+
+/* --- Panel-Body: Markdown-Inhalt (Text, Code, kleines inline-SVG) -------- */
+.panel-body {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.panel-body :deep(p) {
+  font-size: 1.05rem;
+  line-height: 1.5;
+  color: var(--miragon-text-secondary);
+  margin: 0 0 0.85rem;
+}
+.panel-body :deep(strong) {
+  font-weight: 700;
+  color: var(--miragon-text-primary);
+}
+.panel-body :deep(ul) {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.panel-body :deep(li) {
+  position: relative;
+  font-size: 1.02rem;
+  line-height: 1.45;
+  color: var(--miragon-text-secondary);
+  padding-left: 1.5rem;
+  margin: 0 0 0.65rem;
+}
+.panel-body :deep(li)::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.55em;
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 0.18rem;
+  background: var(--gb-grad);
+}
+.panel-body :deep(code) {
+  font-family: var(--miragon-font-mono);
+  font-size: 0.9em;
+  background: var(--miragon-blue-light);
+  color: var(--miragon-blue-darker);
+  padding: 0.1em 0.4em;
+  border-radius: 0.35rem;
+}
+.panel-body :deep(pre) {
+  font-family: var(--miragon-font-mono);
+  font-size: 0.9rem;
+  background: var(--miragon-blue-light);
+  color: var(--miragon-text-primary);
+  padding: 0.8rem 1rem;
+  border-radius: 0.5rem;
+  margin: 0.4rem 0 0;
+  overflow-x: auto;
+}
+
+/* --- Legende: kurze Regel unter den Panels, beim Klick mit eingeblendet -- */
+.goodbad-legend {
+  flex: 0 0 auto;
+  margin-top: 1.5rem;
+  padding: 0.9rem 1.2rem;
+  background: var(--miragon-white);
+  border: 1px solid #E5E7EB;
+  border-radius: 0.8rem;
+  box-shadow: 0 4px 12px rgba(51, 93, 229, 0.05);
+}
+.goodbad-legend :deep(p) {
+  font-size: 1.02rem;
+  line-height: 1.5;
+  color: var(--miragon-text-secondary);
+  margin: 0;
+  text-align: center;
+}
+.goodbad-legend :deep(strong) {
+  font-weight: 700;
+  color: var(--miragon-text-primary);
+}
+</style>

package/layouts/hero.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+/**
+ * hero — Hero-Statement (STATISCHE Welt, KEIN Mesh-Shader).
+ *
+ * Hebt EINE große Aussage hervor: einen Leitsatz, eine Kernthese, einen
+ * Schlüsselmoment. Anders als `cover` (animierte Titelseite) lebt `hero` von
+ * Ruhe: heller Grund, viel Weißraum, sehr große Typografie. Der einzige
+ * bewegte Brand-Akzent ist ein statischer Gradient-Balken (sparsam).
+ *
+ * Diese Slide definiert die visuelle Sprache der statischen Welt, an der sich
+ * person/content/compare später orientieren.
+ *
+ * Slots: default = Aussage (h1) + optionale Attribution/Quelle (p) aus Markdown.
+ * Frontmatter-Props:
+ *   eyebrow  — kleine Überzeile (optional)
+ *   accent   — "blue" | "green" | "mixed" — wählt den Gradient-Akzent (default blue)
+ *   align    — "left" | "center" — Ausrichtung (default left)
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    eyebrow?: string
+    accent?: 'blue' | 'green' | 'mixed'
+    align?: 'left' | 'center'
+  }>(),
+  { accent: 'blue', align: 'left' },
+)
+
+// Abgeleitete Token reaktiv halten (computed), falls Slidev die Layout-Instanz
+// über Slides hinweg wiederverwendet. Alle Werte zeigen auf theme.css-Variablen
+// — keine hardcoded Hex.
+//
+// Gradient (Balken + Attributions-Strich) je nach Akzent.
+const gradientVar = computed(() => `var(--miragon-gradient-${props.accent})`)
+// Eyebrow-Solidfarbe: Grün nur beim grünen Akzent (CI: Grün sparsam).
+const eyebrowVar = computed(() =>
+  props.accent === 'green' ? 'var(--miragon-green-deep)' : 'var(--miragon-blue)',
+)
+// Solidfarbe für das hervorgehobene Wort (**bold**). BEWUSST kein
+// background-clip:text-Gradient: headless Chromium (PDF-Export via `npm run
+// export`) kann die clip-Schrift unsichtbar rendern. Solide Akzentfarbe ist
+// immer sichtbar und exportsicher; der Gradient lebt im Balken/Strich.
+const emphasisVar = computed(() =>
+  props.accent === 'green' ? 'var(--miragon-green-deep)' : 'var(--miragon-blue)',
+)
+</script>
+
+<template>
+  <div
+    class="hero-layout"
+    :class="[`is-${align}`]"
+    :style="{
+      '--hero-grad': gradientVar,
+      '--hero-eyebrow': eyebrowVar,
+      '--hero-emphasis': emphasisVar,
+    }"
+  >
+    <div class="hero-content">
+      <span class="hero-bar" aria-hidden="true"></span>
+      <div v-if="eyebrow" class="hero-eyebrow">{{ eyebrow }}</div>
+      <div class="hero-body">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.hero-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--miragon-gray-bg);
+  color: var(--miragon-text-primary);
+  display: flex;
+  align-items: center;
+}
+
+.hero-content {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 64rem;
+  padding: 0 5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Gradient-Akzent: kurzer Balken über der Aussage (der einzige Brand-„Bewegungs"-Punkt). */
+.hero-bar {
+  width: 4.5rem;
+  height: 0.4rem;
+  border-radius: 999px;
+  background: var(--hero-grad);
+  margin-bottom: 2rem;
+}
+
+.hero-eyebrow {
+  font-size: 0.95rem;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--hero-eyebrow);
+  margin-bottom: 1.5rem;
+}
+
+/* Aussage dominiert die Slide: sehr groß, dunkel, fett. */
+.hero-body :deep(h1) {
+  font-size: clamp(3rem, 5.4vw, 4.6rem);
+  line-height: 1.08;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--miragon-text-primary);
+  margin: 0;
+}
+
+/* Attribution / Quelle: dezent, mit Gradient-Strich davor. */
+.hero-body :deep(p) {
+  position: relative;
+  font-size: 1.15rem;
+  font-weight: 500;
+  color: var(--miragon-text-muted);
+  margin: 2.25rem 0 0;
+  padding-left: 3rem;
+}
+
+.hero-body :deep(p)::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.7em;
+  width: 2rem;
+  height: 2px;
+  background: var(--hero-grad);
+}
+
+/* Optionaler Brand-Akzent auf einzelnen Wörtern: **bold** im Statement bekommt
+   die solide Akzentfarbe. Sparsam einsetzen (ein Schlüsselwort, nicht mehr). */
+.hero-body :deep(h1 strong) {
+  font-weight: 800;
+  color: var(--hero-emphasis);
+}
+
+/* --- Ausrichtung ---------------------------------------------------------- */
+.is-center {
+  justify-content: center;
+}
+.is-center .hero-content {
+  align-items: center;
+  text-align: center;
+  max-width: 56rem;
+}
+.is-center .hero-eyebrow {
+  margin-bottom: 1.75rem;
+}
+.is-center .hero-body :deep(p) {
+  padding-left: 0;
+  padding-top: 2rem;
+}
+.is-center .hero-body :deep(p)::before {
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+  width: 2.5rem;
+}
+</style>