@miragon/slidev-toolkit 1.0.0

package/layouts/person.vue

@@ -0,0 +1,287 @@
+<script setup lang="ts">
+/**
+ * person — Person(en) vorstellen (STATISCHE Welt, kein Mesh-Shader).
+ *
+ * Folgt der `hero`-Bildsprache: heller Grund, viel Weißraum, große Typografie,
+ * sparsamer Gradient-Akzent.
+ *
+ * Zwei Modi:
+ *   • Einzeln  — Porträt + Textblock (Name, Rolle, Bio als Slot).
+ *   • Duo      — sobald `name2` gesetzt ist: zwei Speaker nebeneinander.
+ *
+ * Porträt-Rahmen ist robust: zeigt `photo`, wenn gesetzt — sonst Initialen aus
+ * dem Namen auf einem Gradient-Rahmen (nie ein kaputtes Bild-Icon). Der Rahmen
+ * ist im Hochformat gehalten, passend zu freigestellten Brand-Fotos.
+ *
+ * Frontmatter-Props (keine Multi-Line-Props → 2. Person über *2-Felder):
+ *   name,  role,  photo   — erste Person
+ *   name2, role2, photo2  — zweite Person (aktiviert den Duo-Modus)
+ *   eyebrow  — kleine Überzeile (optional)
+ *   accent   — "blue" | "green" | "mixed" — Gradient-Akzent (default blue)
+ *   side     — "left" | "right" — Porträt-Seite im Einzel-Modus (default left)
+ * Slot: Kurzbio (einzeln) bzw. optionaler zentrierter Einleitungssatz (Duo).
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    name?: string
+    role?: string
+    photo?: string
+    name2?: string
+    role2?: string
+    photo2?: string
+    eyebrow?: string
+    accent?: 'blue' | 'green' | 'mixed'
+    side?: 'left' | 'right'
+  }>(),
+  { accent: 'blue', side: 'left' },
+)
+
+const isDuo = computed(() => !!props.name2)
+
+// Base-Pfad respektieren (GitHub Pages baut unter /<repo>/). Runtime-Strings
+// werden von Vite NICHT umgeschrieben — daher manuell mit BASE_URL auflösen.
+function withBase(path?: string) {
+  if (!path) return path
+  if (/^https?:\/\//.test(path)) return path
+  return import.meta.env.BASE_URL.replace(/\/$/, '') + '/' + path.replace(/^\//, '')
+}
+const photoSrc = computed(() => withBase(props.photo))
+const photo2Src = computed(() => withBase(props.photo2))
+
+// Token reaktiv (siehe hero.vue) — alle Werte aus theme.css, keine Hex.
+const gradientVar = computed(() => `var(--miragon-gradient-${props.accent})`)
+const roleVar = computed(() =>
+  props.accent === 'green' ? 'var(--miragon-green-deep)' : 'var(--miragon-blue)',
+)
+
+function toInitials(name?: string) {
+  const parts = (name ?? '').trim().split(/\s+/).filter(Boolean)
+  if (parts.length === 0) return '·'
+  const first = parts[0][0] ?? ''
+  const last = parts.length > 1 ? parts[parts.length - 1][0] ?? '' : ''
+  return (first + last).toUpperCase()
+}
+const initials = computed(() => toInitials(props.name))
+const initials2 = computed(() => toInitials(props.name2))
+
+function onPhotoError(e: Event) {
+  // Bild fehlt → Rahmen leeren, Initialen-Fallback übernimmt das Layout drumherum.
+  ;(e.target as HTMLImageElement).style.display = 'none'
+}
+</script>
+
+<template>
+  <div
+    class="person-layout"
+    :class="[isDuo ? 'is-duo' : `side-${side}`]"
+    :style="{ '--p-grad': gradientVar, '--p-role': roleVar }"
+  >
+    <!-- ────────── Einzel-Modus ────────── -->
+    <div v-if="!isDuo" class="person-content">
+      <figure class="person-figure">
+        <img v-if="photo" :src="photoSrc" :alt="name" class="person-photo" @error="onPhotoError" />
+        <span v-else class="person-initials">{{ initials }}</span>
+      </figure>
+
+      <div class="person-text">
+        <span class="person-bar" aria-hidden="true"></span>
+        <div v-if="eyebrow" class="person-eyebrow">{{ eyebrow }}</div>
+        <h1 v-if="name" class="person-name">{{ name }}</h1>
+        <div v-if="role" class="person-role">{{ role }}</div>
+        <div class="person-bio"><slot /></div>
+      </div>
+    </div>
+
+    <!-- ────────── Duo-Modus ────────── -->
+    <div v-else class="person-duo">
+      <span class="person-bar duo-bar" aria-hidden="true"></span>
+      <div v-if="eyebrow" class="person-eyebrow duo-eyebrow">{{ eyebrow }}</div>
+      <div class="duo-lead"><slot /></div>
+
+      <div class="duo-grid">
+        <figure class="duo-card">
+          <div class="person-figure">
+            <img v-if="photo" :src="photoSrc" :alt="name" class="person-photo" @error="onPhotoError" />
+            <span v-else class="person-initials">{{ initials }}</span>
+          </div>
+          <h2 class="duo-name">{{ name }}</h2>
+          <div v-if="role" class="duo-role">{{ role }}</div>
+        </figure>
+
+        <figure class="duo-card">
+          <div class="person-figure">
+            <img v-if="photo2" :src="photo2Src" :alt="name2" class="person-photo" @error="onPhotoError" />
+            <span v-else class="person-initials">{{ initials2 }}</span>
+          </div>
+          <h2 class="duo-name">{{ name2 }}</h2>
+          <div v-if="role2" class="duo-role">{{ role2 }}</div>
+        </figure>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.person-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--miragon-gray-bg);
+  color: var(--miragon-text-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* --- Porträt-Rahmen (geteilt: Einzel + Duo) ------------------------------- */
+.person-figure {
+  flex: 0 0 auto;
+  aspect-ratio: 4 / 5;
+  border-radius: 1.4rem;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--p-grad);
+  box-shadow: 0 18px 48px rgba(13, 13, 43, 0.18);
+}
+.person-photo {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top center;
+}
+.person-initials {
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--miragon-white);
+}
+
+/* --- Akzent-Balken & Eyebrow (geteilt) ------------------------------------ */
+.person-bar {
+  width: 3.5rem;
+  height: 0.35rem;
+  border-radius: 999px;
+  background: var(--p-grad);
+  margin-bottom: 1.5rem;
+}
+.person-eyebrow {
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--p-role);
+  margin-bottom: 0.9rem;
+}
+
+/* ═══════════ Einzel-Modus ═══════════ */
+.person-content {
+  display: flex;
+  align-items: center;
+  gap: 4.5rem;
+  width: 100%;
+  max-width: 64rem;
+  padding: 0 5rem;
+}
+.side-right .person-content {
+  flex-direction: row-reverse;
+}
+.person-content .person-figure {
+  width: clamp(12rem, 21vw, 16.5rem);
+}
+.person-content .person-initials {
+  font-size: clamp(3rem, 6vw, 4.75rem);
+}
+
+.person-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.person-name {
+  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
+  line-height: 1.05;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--miragon-text-primary);
+  margin: 0;
+}
+.person-role {
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: var(--p-role);
+  margin-top: 0.6rem;
+}
+.person-bio :deep(p) {
+  font-size: 1.15rem;
+  line-height: 1.6;
+  font-weight: 400;
+  color: var(--miragon-text-secondary);
+  margin: 1.5rem 0 0;
+  max-width: 34rem;
+}
+
+/* ═══════════ Duo-Modus ═══════════ */
+.person-duo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+  max-width: 60rem;
+  padding: 0 4rem;
+}
+.duo-bar {
+  margin-bottom: 1.25rem;
+}
+.duo-eyebrow {
+  margin-bottom: 0.5rem;
+}
+.duo-lead :deep(p) {
+  font-size: 1.15rem;
+  line-height: 1.55;
+  color: var(--miragon-text-secondary);
+  margin: 0 0 2.5rem;
+  max-width: 40rem;
+}
+.duo-lead :deep(p:only-child) {
+  margin-bottom: 2.5rem;
+}
+.duo-grid {
+  display: flex;
+  justify-content: center;
+  gap: 4rem;
+  width: 100%;
+}
+.duo-card {
+  flex: 1 1 0;
+  max-width: 20rem;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.duo-card .person-figure {
+  width: clamp(8.5rem, 15vw, 12rem);
+}
+.duo-card .person-initials {
+  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
+}
+.duo-name {
+  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
+  line-height: 1.1;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+  color: var(--miragon-text-primary);
+  margin: 1.4rem 0 0;
+}
+.duo-role {
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: var(--p-role);
+  margin-top: 0.4rem;
+}
+</style>

package/layouts/section.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+/**
+ * section — Kapiteltrenner (STATISCHE Welt, KEIN Mesh-Shader).
+ *
+ * Strukturiert das Deck: markiert den Beginn eines neuen Kapitels. Ruhig wie
+ * `hero`, aber mit einer großen, halbtransparenten Index-Ziffer als
+ * Orientierungsanker im Hintergrund. Heller Grund, viel Weißraum, ein einziger
+ * Gradient-Akzent.
+ *
+ * Slots: default = Kapiteltitel (h1) + optionaler Einzeiler (p) aus Markdown.
+ * Frontmatter-Props:
+ *   index    — Kapitelnummer als String (z. B. "01"); rendert als Ghost-Ziffer
+ *   eyebrow  — kleine Überzeile (z. B. "Chapter")
+ *   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 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)',
+)
+</script>
+
+<template>
+  <div
+    class="section-layout"
+    :style="{ '--s-grad': gradientVar, '--s-accent': accentVar }"
+  >
+    <span v-if="index" class="section-ghost" aria-hidden="true">{{ index }}</span>
+
+    <div class="section-content">
+      <span class="section-bar" aria-hidden="true"></span>
+      <div v-if="eyebrow" class="section-eyebrow">{{ eyebrow }}</div>
+      <div class="section-body">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.section-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--miragon-gray-bg);
+  color: var(--miragon-text-primary);
+  display: flex;
+  align-items: center;
+}
+
+/* Große Ghost-Ziffer als Hintergrund-Anker — rein dekorativ, sehr dezent.
+   BEWUSST kein background-clip:text-Gradient (headless Chromium beim PDF-Export
+   rendert clip-Schrift unsichtbar, vgl. hero.vue) — solide Akzentfarbe mit
+   geringer Deckkraft ist exportsicher. */
+.section-ghost {
+  position: absolute;
+  z-index: 0;
+  right: 4rem;
+  bottom: 1.5rem;
+  font-size: 24rem;
+  line-height: 1;
+  font-weight: 900;
+  letter-spacing: -0.04em;
+  color: var(--s-accent);
+  opacity: 0.07;
+  user-select: none;
+  pointer-events: none;
+}
+
+.section-content {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 60rem;
+  padding: 0 5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.section-bar {
+  width: 4.5rem;
+  height: 0.4rem;
+  border-radius: 999px;
+  background: var(--s-grad);
+  margin-bottom: 2rem;
+}
+.section-eyebrow {
+  font-size: 0.95rem;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--s-accent);
+  margin-bottom: 1.25rem;
+}
+
+.section-body :deep(h1) {
+  font-size: clamp(2.8rem, 5vw, 4.2rem);
+  line-height: 1.08;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: var(--miragon-text-primary);
+  margin: 0;
+}
+.section-body :deep(h1 strong) {
+  font-weight: 800;
+  color: var(--s-accent);
+}
+.section-body :deep(p) {
+  font-size: 1.2rem;
+  font-weight: 500;
+  color: var(--miragon-text-muted);
+  margin: 1.75rem 0 0;
+  max-width: 38rem;
+}
+</style>

package/layouts/showcase.vue

@@ -0,0 +1,244 @@
+<script setup lang="ts">
+/**
+ * showcase — interactive feature explorer (STATIC world, no shader).
+ *
+ * A row of clickable cards; one is active at a time. Click any card to switch
+ * the active item; the detail panel below cross-fades to the new content.
+ * Demonstrates Vue reactivity, CSS transitions, and Vue components living
+ * inside a slide — beyond static Markdown.
+ *
+ * Items are passed as a YAML array via frontmatter; the layout iterates and
+ * the user clicks to explore. Default state: first item active.
+ *
+ * Frontmatter props:
+ *   title    — slide title (h2-level)
+ *   eyebrow  — uppercase kicker
+ *   accent   — "blue" | "green" | "mixed" (default mixed)
+ *   items    — array of `{ label, body }` objects (recommended: 3–4 cards)
+ */
+import { computed, ref, watch } from 'vue'
+
+interface Item {
+  label: string
+  body: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    eyebrow?: string
+    accent?: 'blue' | 'green' | 'mixed'
+    items?: Item[]
+    frontmatter?: Record<string, unknown>
+  }>(),
+  { accent: 'mixed', items: () => [] },
+)
+
+const title = computed(() => props.frontmatter?.title as string | undefined)
+const gradientVar = computed(() => `var(--miragon-gradient-${props.accent})`)
+const accentVar = computed(() =>
+  props.accent === 'green' ? 'var(--miragon-green-deep)' : 'var(--miragon-blue)',
+)
+
+const selected = ref(0)
+const activeItem = computed(() => props.items[selected.value])
+
+// Defensive: clamp selection if the items list shrinks below the current
+// index (e.g. when the slide is re-entered with a different array).
+watch(
+  () => props.items.length,
+  (len) => {
+    if (selected.value >= len) selected.value = 0
+  },
+)
+</script>
+
+<template>
+  <div class="showcase-layout" :style="{ '--sc-grad': gradientVar, '--sc-accent': accentVar }">
+    <div class="showcase-inner">
+      <header v-if="title || eyebrow" class="showcase-head">
+        <span class="showcase-bar" aria-hidden="true"></span>
+        <div v-if="eyebrow" class="showcase-eyebrow">{{ eyebrow }}</div>
+        <h2 v-if="title" class="showcase-title">{{ title }}</h2>
+      </header>
+
+      <div class="showcase-grid" :class="`cols-${items.length}`">
+        <button
+          v-for="(item, i) in items"
+          :key="i"
+          type="button"
+          class="showcase-card"
+          :class="{ 'is-active': i === selected }"
+          @click="selected = i"
+        >
+          <span class="card-index">{{ String(i + 1).padStart(2, '0') }}</span>
+          <span class="card-label">{{ item.label }}</span>
+        </button>
+      </div>
+
+      <div class="showcase-detail">
+        <transition name="fade-detail" mode="out-in">
+          <p :key="selected" class="detail-body">{{ activeItem?.body }}</p>
+        </transition>
+      </div>
+
+      <p class="showcase-hint" aria-hidden="true">Click a card to switch.</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.showcase-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--miragon-gray-bg);
+  color: var(--miragon-text-primary);
+  display: flex;
+  align-items: stretch;
+}
+
+.showcase-inner {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 72rem;
+  margin: 0 auto;
+  padding: 3rem 4rem 2.5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.showcase-head {
+  flex: 0 0 auto;
+  margin-bottom: 2rem;
+}
+.showcase-bar {
+  display: block;
+  width: 3.5rem;
+  height: 0.35rem;
+  border-radius: 999px;
+  background: var(--sc-grad);
+  margin-bottom: 1rem;
+}
+.showcase-eyebrow {
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--sc-accent);
+  margin-bottom: 0.6rem;
+}
+.showcase-title {
+  font-size: clamp(1.7rem, 2.7vw, 2.2rem);
+  line-height: 1.15;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+
+.showcase-grid {
+  flex: 0 0 auto;
+  display: grid;
+  gap: 1rem;
+  margin-bottom: 1.75rem;
+}
+.showcase-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
+.showcase-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
+.showcase-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
+
+.showcase-card {
+  position: relative;
+  text-align: left;
+  cursor: pointer;
+  background: var(--miragon-white);
+  border: 1px solid #E5E7EB;
+  border-radius: 1rem;
+  padding: 1.1rem 1.2rem 1.2rem;
+  box-shadow: 0 8px 20px rgba(51, 93, 229, 0.08);
+  font: inherit;
+  color: inherit;
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+  transition:
+    transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    box-shadow 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    border-color 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
+    opacity 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+.showcase-card:focus-visible {
+  outline: 2px solid var(--sc-accent);
+  outline-offset: 3px;
+}
+.showcase-card:hover {
+  transform: translateY(-2px);
+}
+
+.card-index {
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--miragon-text-muted);
+  transition: color 320ms ease;
+}
+.card-label {
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--miragon-text-primary);
+  letter-spacing: -0.005em;
+}
+
+.showcase-card.is-active {
+  transform: translateY(-4px) scale(1.02);
+  border-color: var(--sc-accent);
+  box-shadow: 0 16px 36px rgba(51, 93, 229, 0.18);
+}
+.showcase-card.is-active .card-index {
+  color: var(--sc-accent);
+}
+.showcase-card:not(.is-active) {
+  opacity: 0.55;
+}
+
+.showcase-detail {
+  flex: 1 1 auto;
+  min-height: 5rem;
+  background: var(--miragon-white);
+  border: 1px solid #E5E7EB;
+  border-radius: 1rem;
+  padding: 1.25rem 1.5rem;
+  box-shadow: 0 8px 20px rgba(51, 93, 229, 0.08);
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.detail-body {
+  font-size: 1.1rem;
+  line-height: 1.55;
+  color: var(--miragon-text-secondary);
+  margin: 0;
+}
+
+/* Cross-fade for the detail panel content when the user picks another card. */
+.fade-detail-enter-active,
+.fade-detail-leave-active {
+  transition: opacity 220ms ease, transform 220ms ease;
+}
+.fade-detail-enter-from,
+.fade-detail-leave-to {
+  opacity: 0;
+  transform: translateY(6px);
+}
+
+.showcase-hint {
+  flex: 0 0 auto;
+  margin: 0.9rem 0 0;
+  font-size: 0.74rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--miragon-text-muted);
+  text-align: center;
+}
+</style>

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@miragon/slidev-toolkit",
+  "version": "1.0.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",
+    "slidev",
+    "miragon",
+    "toolkit"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Miragon/slidev-deck-template.git",
+    "directory": "packages/toolkit"
+  },
+  "homepage": "https://github.com/Miragon/slidev-deck-template/tree/main/packages/toolkit#readme",
+  "bugs": "https://github.com/Miragon/slidev-deck-template/issues",
+  "engines": {
+    "slidev": ">=0.48.0"
+  },
+  "dependencies": {
+    "@paper-design/shaders": "0.0.77"
+  },
+  "peerDependencies": {
+    "vue": "^3.5"
+  },
+  "files": [
+    "layouts",
+    "components",
+    "styles",
+    "assets"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  }
+}