@miragon/slidev-toolkit 1.0.0 → 1.1.0

package/global/ChapterFooter.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+/**
+ * ChapterFooter — dezenter Footer: Kapitel + Fortschritt, optional Datum links
+ * (globales Chrome).
+ *
+ * Implementierung, die vom globalen Layer `global-bottom.vue` (Theme-Root) auf
+ * jeder Slide gerendert wird. Liegt bewusst in `global/` (nicht `components/`):
+ * `components/` sind autoren-aufrufbare Tags, dies ist Chrome, das Slidev
+ * automatisch injiziert.
+ *
+ * Zeigt ein kleines Label unten links, z. B.:
+ *   "21 July 2026 · 01 · Welcome · 2 / 5"
+ *
+ * Kapitel-Erkennung (identisch zur Agenda.vue): jede `layout: section`-Slide
+ * öffnet ein Kapitel; die Slides bis zur nächsten section gehören dazu. Die
+ * Position zählt nur Content-Slides — die section-Slide selbst ist Position 0,
+ * sodass die erste Content-Slide "1 / N" statt "2 / N" liest.
+ *
+ * Regeln:
+ *   - Rein visuelles Overlay: transparenter Hintergrund, `pointer-events: none`,
+ *     verdeckt niemals Slide-Inhalt (malt nur das kleine Text-Label).
+ *   - Ausgeblendet auf cover/closing/section und überall, wo (noch) kein
+ *     Kapitel aktiv ist (Cover, Agenda vor der ersten section).
+ *   - Aktuelles Layout MUSS über useNav() gelesen werden — `$frontmatter` aus
+ *     useSlideContext() ist in globalen Komponenten NICHT reaktiv.
+ */
+import { computed } from 'vue'
+import { useNav } from '@slidev/client'
+
+const { currentPage, total, slides } = useNav()
+
+// Markdown-Bold (** **) überlebt in den auto-extrahierten Titel; entfernen.
+function clean(s?: string): string {
+  return (s ?? '').replace(/\*\*/g, '').trim()
+}
+
+interface Chapter {
+  no: number // 1-basierte Seitennummer der section-Slide
+  index: string // Kapitelnummer (aus frontmatter `index`, sonst Ordinalzahl)
+  title: string // Kapiteltitel (h1 der section-Slide)
+}
+
+// Deck einmal durchlaufen: jede section-Slide startet ein Kapitel.
+const chapters = computed<Chapter[]>(() => {
+  const out: Chapter[] = []
+  for (const route of slides.value as any[]) {
+    const fm = route.meta?.slide?.frontmatter ?? {}
+    if (fm.layout === 'section') {
+      const n = out.length + 1
+      out.push({
+        no: route.no,
+        index: clean(fm.index) || String(n).padStart(2, '0'),
+        title:
+          clean(route.meta?.slide?.title) || clean(fm.eyebrow) || `Chapter ${n}`,
+      })
+    }
+  }
+  return out
+})
+
+// Das Kapitel, in dem die aktuelle Slide liegt (mit Startseite der nächsten
+// section als obere Grenze; für das letzte Kapitel ist die Grenze total + 1).
+const current = computed(() => {
+  const chs = chapters.value
+  const page = currentPage.value
+  for (let i = 0; i < chs.length; i++) {
+    const next = i < chs.length - 1 ? chs[i + 1].no : total.value + 1
+    if (page >= chs[i].no && page < next) {
+      return { ...chs[i], next }
+    }
+  }
+  return null
+})
+
+// "position / total" innerhalb des Kapitels; section-Slide selbst zählt nicht.
+const chapterProgress = computed(() => {
+  const c = current.value
+  if (!c) return ''
+  const position = currentPage.value - c.no
+  const totalInChapter = c.next - 1 - c.no
+  if (position < 1 || totalInChapter < 1) return ''
+  return `${position} / ${totalInChapter}`
+})
+
+// Optionales Datum: Feld `eventDate` im Deck-Headmatter (erster Frontmatter-
+// Block = Frontmatter der ersten Slide). Fehlt es, bleibt das Segment leer.
+const dateLabel = computed(() => {
+  const raw = (slides.value?.[0] as any)?.meta?.slide?.frontmatter?.eventDate
+  if (!raw) return ''
+  const d = new Date(raw)
+  if (isNaN(d.getTime())) return ''
+  return new Intl.DateTimeFormat('en-GB', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  }).format(d)
+})
+
+// Segmente in gewünschter Reihenfolge zusammensetzen: Datum · NN · Titel · n/N.
+const footerText = computed(() => {
+  const c = current.value
+  if (!c) return ''
+  const parts: string[] = []
+  if (dateLabel.value) parts.push(dateLabel.value)
+  if (c.index) parts.push(c.index)
+  if (c.title) parts.push(c.title)
+  if (chapterProgress.value) parts.push(chapterProgress.value)
+  return parts.join(' · ')
+})
+
+// Auf den Voll-Bild-Slides ausblenden (gleiche Menge wie ProgressBar.vue).
+const HIDDEN_LAYOUTS = ['cover', 'closing', 'section']
+const isHidden = computed(() => {
+  const layout = (slides.value?.[currentPage.value - 1] as any)?.meta?.slide
+    ?.frontmatter?.layout
+  return HIDDEN_LAYOUTS.includes(layout)
+})
+</script>
+
+<template>
+  <div v-if="!isHidden && footerText" class="miragon-footer" aria-hidden="true">
+    <span class="miragon-footer-text">{{ footerText }}</span>
+  </div>
+</template>
+
+<style scoped>
+.miragon-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  padding: 0 2rem 0.75rem;
+  background: transparent;
+  pointer-events: none;
+}
+.miragon-footer-text {
+  font-size: 0.6rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  color: var(--miragon-text-muted);
+}
+</style>

package/global/ProgressBar.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+/**
+ * ProgressBar — dünne Fortschritts-Stepper-Bar (globales Chrome).
+ *
+ * Implementierung, die vom globalen Layer `global-top.vue` (Theme-Root) auf
+ * jeder Slide gerendert wird. Liegt bewusst in `global/` (nicht `components/`):
+ * `components/` sind autoren-aufrufbare Tags (<Card> …), dies ist Chrome, das
+ * Slidev automatisch injiziert.
+ *
+ * Rendert einen schmalen Gradient-Balken am oberen Rand, dessen Breite dem
+ * Deck-Fortschritt (currentPage / total) entspricht.
+ *
+ * Regeln:
+ *   - Rein visuelles Overlay: transparenter Rest, `pointer-events: none`,
+ *     verdeckt niemals Slide-Inhalt (nur der Verlauf malt Pixel).
+ *   - Ausgeblendet auf den animierten Brand-Momenten (cover/closing) und dem
+ *     Kapiteltrenner (section), damit diese Voll-Bild-Slides ruhig bleiben.
+ *   - Das aktuelle Layout MUSS über useNav() gelesen werden — `$frontmatter`
+ *     aus useSlideContext() ist in globalen Komponenten NICHT reaktiv und
+ *     liefert veraltete Werte.
+ */
+import { computed } from 'vue'
+import { useNav } from '@slidev/client'
+
+const { currentPage, total, slides } = useNav()
+
+// Deck-Fortschritt in Prozent (0..100).
+const progress = computed(() =>
+  total.value ? (currentPage.value / total.value) * 100 : 0,
+)
+
+// Layouts, auf denen die Bar ausgeblendet wird (siehe ChapterFooter.vue —
+// bewusst dieselbe Menge, damit Chrome konsistent verschwindet).
+const HIDDEN_LAYOUTS = ['cover', 'closing', 'section']
+const isHidden = computed(() => {
+  const layout = (slides.value?.[currentPage.value - 1] as any)?.meta?.slide
+    ?.frontmatter?.layout
+  return HIDDEN_LAYOUTS.includes(layout)
+})
+</script>
+
+<template>
+  <div
+    v-if="!isHidden"
+    class="miragon-progress"
+    :style="{ width: progress + '%' }"
+    aria-hidden="true"
+  ></div>
+</template>
+
+<style scoped>
+.miragon-progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 4px;
+  z-index: 50;
+  /* Verlauf aus Brand-Tokens (Blau -> Grün), keine hardcoded Hex. */
+  background: linear-gradient(
+    90deg,
+    var(--miragon-blue) 0%,
+    var(--miragon-green) 100%
+  );
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+  pointer-events: none;
+  transition: width 0.3s ease;
+}
+</style>

package/global-bottom.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+/**
+ * global-bottom — Slidev-Einhängepunkt für den unteren globalen Layer.
+ *
+ * Slidev injiziert per Namenskonvention NUR Dateien namens `global-bottom.*`
+ * aus dem Theme-Root (Unterordner werden nicht gescannt). Diese Datei ist daher
+ * ein schlanker Shim; die eigentliche Logik liegt aufgeräumt in `global/`.
+ */
+import ChapterFooter from './global/ChapterFooter.vue'
+</script>
+
+<template>
+  <ChapterFooter></ChapterFooter>
+</template>

package/global-top.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+/**
+ * global-top — Slidev-Einhängepunkt für den oberen globalen Layer.
+ *
+ * Slidev injiziert per Namenskonvention NUR Dateien namens `global-top.*` aus
+ * dem Theme-Root (Unterordner werden nicht gescannt). Diese Datei ist daher ein
+ * schlanker Shim; die eigentliche Logik liegt aufgeräumt in `global/`.
+ */
+import ProgressBar from './global/ProgressBar.vue'
+</script>
+
+<template>
+  <ProgressBar></ProgressBar>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miragon/slidev-toolkit",
-  "version": "1.0.0",
+  "version": "1.1.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",
@@ -23,13 +23,16 @@
     "@paper-design/shaders": "0.0.77"
   },
   "peerDependencies": {
-    "vue": "^3.5"
+    "vue": "3.5.40"
   },
   "files": [
     "layouts",
     "components",
     "styles",
-    "assets"
+    "assets",
+    "global",
+    "global-top.vue",
+    "global-bottom.vue"
   ],
   "publishConfig": {
     "access": "public",