@miragon/slidev-toolkit 1.2.1 → 1.4.0

package/components/CardGrid.vue

@@ -42,5 +42,6 @@ const GAPS: Record<string, string> = {
   gap: var(--mg-gap);
   align-items: stretch;
   margin-top: 0.5rem;
+  margin-bottom: 1rem;
 }
 </style>

package/components/CodeBlock.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+/**
+ * CodeBlock — beschriftetes Code-„Fenster" in Miragon-CI.
+ *
+ * Rahmt einen Markdown-Code-Fence (im Default-Slot) mit einer weißen Brand-Card
+ * (wie <Card>: weiß, dünne Border, weicher blauer Schatten) und einer Kopfzeile
+ * aus optionalem Dateinamen (links, Geist Mono, gedämpft) und optionalem
+ * Sprach-Badge (rechts, blau — der einzige Brand-Akzent). Der eingebettete Fence
+ * behält Shikis Syntax-Highlighting in Reinform; sein Rahmen und jeglicher
+ * Zeilen-Hintergrund werden hier zurückgesetzt, damit die Komponente den Rahmen
+ * besitzt und der Code klar auf Weiß steht.
+ *
+ * Props:
+ *   file        Dateiname/Pfad in der Kopfzeile (optional).
+ *   lang        Sprach-Badge rechts in der Kopfzeile (optional, z. B. "md").
+ *   size        CSS-Schriftgröße des Codes (z. B. "0.9rem", "14px"); ohne
+ *               Angabe die Standardgröße.
+ *   hideHeader  Kopfzeile ausblenden, auch wenn file/lang gesetzt sind
+ *               (Standard: sichtbar).
+ *
+ * Nutzung (Fence auf eigenen Zeilen, Leerzeilen drumherum, damit er als
+ * Markdown geparst wird — wie die Bullet-Regel bei <SplitView>):
+ *
+ *   <CodeBlock file="deck/slides.md" lang="md">
+ *
+ *   ```md
+ *   # Build decks like **code**
+ *   ```
+ *
+ *   </CodeBlock>
+ */
+const props = defineProps<{
+  file?: string
+  lang?: string
+  size?: string
+  hideHeader?: boolean
+}>()
+
+const showHeader = () => Boolean((props.file || props.lang) && !props.hideHeader)
+</script>
+
+<template>
+  <div class="mg-code" :class="{ 'mg-code--sized': size }" :style="size ? { '--mg-code-size': size } : undefined">
+    <div v-if="showHeader()" class="mg-code__bar">
+      <span v-if="file" class="mg-code__file">{{ file }}</span>
+      <span v-if="lang" class="mg-code__lang">{{ lang }}</span>
+    </div>
+    <div class="mg-code__body"><slot /></div>
+  </div>
+</template>
+
+<style scoped>
+.mg-code {
+  border-radius: 0.6rem;
+  border: 1px solid #e5e7eb;
+  background: var(--miragon-white);
+  box-shadow: 0 8px 20px rgba(51, 93, 229, 0.08);
+  overflow: hidden;
+}
+.mg-code__bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.55rem 0.9rem;
+  background: var(--miragon-gray-light);
+  border-bottom: 1px solid #e5e7eb;
+}
+.mg-code__file {
+  font-family: var(--miragon-font-mono, ui-monospace, monospace);
+  font-size: 0.78rem;
+  color: var(--miragon-text-muted);
+}
+.mg-code__lang {
+  font-family: var(--miragon-font-mono, ui-monospace, monospace);
+  font-size: 0.68rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--miragon-blue-dark);
+  background: var(--miragon-blue-light);
+  border-radius: 0.35rem;
+  padding: 0.1rem 0.45rem;
+}
+.mg-code__body {
+  padding: 0.4rem 0.5rem;
+}
+/* The nested Shiki fence keeps its highlighting but drops the bare-fence frame
+   from code.css — the component owns the border, radius and shadow. The inner
+   <code> reset guards against any layout that tints inline code: fenced code
+   must stay a clean, unhighlighted-background block. */
+.mg-code__body :deep(.slidev-code) {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  margin: 0;
+  padding: 0.5rem 0.6rem;
+  background: transparent;
+}
+.mg-code__body :deep(.slidev-code code) {
+  background: transparent;
+  padding: 0;
+}
+/* Optional per-instance font size. Slidev pins .slidev-code font-size with
+   !important, so the override needs it too. Only emitted when `size` is set,
+   leaving the default untouched otherwise. */
+.mg-code--sized :deep(.slidev-code) {
+  font-size: var(--mg-code-size) !important;
+}
+</style>

package/components/SplitView.vue

@@ -62,6 +62,7 @@ const columns = computed(() => {
 .mg-split {
   display: grid;
   margin-top: 0.5rem;
+  margin-bottom: 1rem;
 }
 /* min-width:0 verhindert, dass breite Grafiken die Spalte über fr sprengen. */
 .mg-split__visual,

package/layouts/bpmn.vue

@@ -151,7 +151,7 @@ const diagramSrc = computed(() => withBase(props.diagram))
   margin: 0;
   line-height: 1.5;
 }
-.bpmn-caption :deep(code) {
+.bpmn-caption :deep(:not(pre) > code) {
   font-family: var(--miragon-font-mono);
   font-size: 0.9em;
   background: var(--miragon-blue-light);

package/layouts/content.vue

@@ -175,7 +175,8 @@ const accentVar = computed(() =>
   text-decoration: none;
   border-bottom: 1px solid currentColor;
 }
-.content-body :deep(code) {
+
+.content-body :deep(:not(pre) > code) {
   font-family: var(--miragon-font-mono);
   font-size: 0.9em;
   background: var(--miragon-blue-light);

package/layouts/dmn.vue

@@ -165,7 +165,7 @@ const diagramSrc = computed(() => withBase(props.diagram))
   margin: 0;
   line-height: 1.5;
 }
-.dmn-caption :deep(code) {
+.dmn-caption :deep(:not(pre) > code) {
   font-family: var(--miragon-font-mono);
   font-size: 0.9em;
   background: var(--miragon-blue-light);

package/layouts/goodbad.vue

@@ -265,7 +265,8 @@ const rightVerdictClass = computed(() => (props.leftIsGood ? 'verdict-bad' : 've
   border-radius: 0.18rem;
   background: var(--gb-grad);
 }
-.panel-body :deep(code) {
+
+.panel-body :deep(:not(pre) > code) {
   font-family: var(--miragon-font-mono);
   font-size: 0.9em;
   background: var(--miragon-blue-light);
@@ -276,10 +277,6 @@ const rightVerdictClass = computed(() => (props.leftIsGood ? 'verdict-bad' : 've
 .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;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miragon/slidev-toolkit",
-  "version": "1.2.1",
+  "version": "1.4.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/styles/code.css

@@ -0,0 +1,33 @@
+/* Code blocks — Miragon CI frame for every Shiki fence.
+ *
+ * Slidev renders a Markdown ```lang fence to <pre class="slidev-code shiki …">.
+ * By default that is a bare, unframed block. Here we give every fence the same
+ * white-card treatment the <Card> component uses (white background, thin grey
+ * border, soft blue brand shadow, rounded corners) so code reads as part of the
+ * design system. Font is already Geist Mono via --slidev-code-font-family
+ * (index.css). Colours come from theme.css — no hardcoded hex except the shared
+ * border/scrollbar neutrals already used across the toolkit.
+ *
+ * The <CodeBlock> component wraps a fence in a titled window; it strips this
+ * bare frame from the nested fence itself (see CodeBlock.vue) and supplies its
+ * own header + frame instead.
+ */
+
+/* Every Shiki fence carries both `.shiki` and `.slidev-code`. Targeting both
+   (specificity 0,2,0) frames code in EVERY layout — including custom ones like
+   `goodbad` whose panels sit outside `.slidev-layout` — while staying low enough
+   that the <CodeBlock> component's :deep rules (0,3,0) can still reset it. */
+.shiki.slidev-code {
+  background: var(--miragon-white);
+  border: 1px solid #e5e7eb;
+  border-radius: 0.6rem;
+  box-shadow: 0 8px 20px rgba(51, 93, 229, 0.06);
+  overflow-x: auto;
+}
+
+/* A caption line under a fence (a following *italic* line) reads as a muted
+   label, not body text. Kept subtle. */
+.shiki.slidev-code + p em:only-child {
+  color: var(--miragon-text-muted);
+  font-size: 0.8rem;
+}

package/styles/index.css

@@ -6,6 +6,8 @@
    als in 0.49). */
 @import './theme.css';
 @import './fonts.css';
+@import './code.css';
+@import './table.css';
 
 /* Brand typography: Geist for everything, Geist Mono for code. Set on the app
    root so it cascades into every layout; redirect Slidev's code-font variable

package/styles/table.css

@@ -0,0 +1,62 @@
+/* Tables — Miragon CI frame for native Markdown tables.
+ *
+ * A Markdown table (`| a | b |`) is plain markdown, so it needs no component and
+ * keeps the slide source clean (it passes the no-raw-html check). This file gives
+ * every rendered `<table>` the same white-card treatment the <Card> component and
+ * code fences use: white surface, thin grey border, soft blue brand shadow,
+ * rounded corners. Header text stays BLACK (the heading rule); the single
+ * restrained accent is the blue rule under the header row. Body text is Geist
+ * Mono, matching the "Geist Mono for code and tables" CI invariant.
+ *
+ * Anchor: `#slideshow` is the single container that wraps EVERY slide page
+ * (`#slideshow > .slidev-page > <layout root>`), so this reaches tables in every
+ * layout — including the custom ones (`content`, `compare`, …) whose root is NOT
+ * `.slidev-layout`. Slidev's own defaults live on `.slidev-layout table`
+ * (specificity 0,1,1); anchoring on the `#slideshow` id (1,0,1) wins the cascade
+ * regardless of load order, without needing `!important`. Column alignment
+ * (`:---`, `---:`, `:--:`) is emitted by markdown-it as an inline `text-align`
+ * style, so it keeps working on top of these rules with no extra selectors.
+ *
+ * Colours come from theme.css; the only literal hex are the shared border/row
+ * neutrals already used across the toolkit (see code.css).
+ */
+
+#slideshow table {
+  border-collapse: separate;
+  border-spacing: 0;
+  width: auto;
+  margin: 0.5rem 0 1.25rem;
+  font-family: var(--miragon-font-mono);
+  font-size: 0.95rem;
+  line-height: 1.5;
+  background: var(--miragon-white);
+  border: 1px solid #e5e7eb;
+  border-radius: 0.6rem;
+  overflow: hidden;
+  box-shadow: 0 8px 20px rgba(51, 93, 229, 0.06);
+}
+
+/* Header row: black label, restrained blue accent rule underneath. */
+#slideshow thead th {
+  color: var(--miragon-text-primary);
+  font-weight: 700;
+  background: var(--miragon-blue-light);
+  border-bottom: 2px solid var(--miragon-blue);
+}
+
+#slideshow th,
+#slideshow td {
+  padding: 0.55rem 1.1rem;
+  text-align: left;
+  color: var(--miragon-text-secondary);
+  border-bottom: 1px solid #eef1f5;
+  vertical-align: top;
+}
+
+/* Subtle zebra striping for scannability; last row carries no divider. */
+#slideshow tbody tr:nth-child(even) td {
+  background: var(--miragon-gray-light);
+}
+#slideshow tbody tr:last-child td {
+  border-bottom: none;
+}