slidev-theme-tud-db 0.0.2 → 0.0.4

package/components/Takeaway.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+// F1-style callout: a coloured left rule + a small uppercase eyebrow label, no
+// fill, no symbol, upright (non-italic) body text. Knobs:
+//   label  the eyebrow text ("Key Takeaway", "Question", "Problem"…); label=""
+//          hides it and leaves a bare ruled aside.
+//   color  the rule + label colour: a brand keyword (below) or any CSS colour,
+//          so e.g. problems read red while takeaways stay blue.
+//   size   optional overall scale — body text matches the slide's default text
+//          size by default; set e.g. size="1.1em" (or a bare number "1.1") to
+//          enlarge the whole callout. All spacing is em-based, so it stays
+//          vertically balanced at any size.
+// Authoring (MDC block, needs `mdc: true`):
+//   ::takeaway{label="Problem" color="red"}
+//   A question can hide the fact that nothing was proven.
+//   ::
+const props = defineProps({
+  label: { type: String, default: 'Key Takeaway' },
+  color: { type: String, default: 'blue' },
+  size: { type: String, default: '' },
+})
+
+// Brand-colour keywords -> theme tokens; anything else is used as a raw CSS colour.
+const TOKENS: Record<string, string> = {
+  blue: 'var(--db-heading-blue)',
+  navy: 'var(--db-navy)',
+  teal: 'var(--db-accent3)',
+  green: 'var(--db-accent1)',
+  yellow: 'var(--db-accent4)',
+  red: 'var(--db-accent5)',
+  orange: 'var(--db-accent5)',
+  purple: 'var(--db-accent6)',
+}
+const accent = computed(() => TOKENS[props.color?.toLowerCase()] ?? props.color)
+
+// A bare number ("1.1") is treated as an em multiplier; otherwise used verbatim.
+const fontSize = computed(() =>
+  !props.size ? undefined : /^[\d.]+$/.test(props.size) ? `${props.size}em` : props.size,
+)
+</script>
+
+<template>
+  <div class="db-takeaway" :style="{ '--tk-accent': accent, fontSize }">
+    <div v-if="label" class="db-takeaway__label">{{ label }}</div>
+    <div class="db-takeaway__body"><slot /></div>
+  </div>
+</template>

package/global-bottom.vue

@@ -1,23 +1,45 @@
 <script setup lang="ts">
 import { useSlideContext } from '@slidev/client'
 import { computed } from 'vue'
+import { slideLogos } from './scripts/logo'
 
 import ddrgColor from './assets/ddrg-color.svg'
+import ddrgWhite from './assets/ddrg-white.svg'
+import tudWhite from './assets/tud-white.svg'
 import tudBlack from './assets/tud-black.svg'
 
 const { $nav } = useSlideContext()
-const showChrome = computed(() => $nav.value?.currentLayout !== 'cover' &&  $nav.value?.currentLayout !== 'section-num')
+const logos = computed(() => slideLogos[$nav.value.currentPage] ?? {})
 </script>
 
 <template>
-  <div
-    :class="{ 'opacity-0': !showChrome }"
-    class="db-global-chrome absolute inset-0 z-100 pointer-events-none transition-opacity duration-500"
-  >
-    <img class="absolute top-[25px] right-[35px] h-[45px]" :src="ddrgColor" alt="Dresden Database Research Group" />
+  <div class="absolute inset-0 z-100 pointer-events-none">
+    <div class="absolute flex flex-row-reverse items-start gap-[45px] top-[25px] right-[35px]">
+      <div class="relative h-[45px]">
+        <img
+          :class="{ 'opacity-0': logos.ddrg !== 'color' }"
+          class="h-full transition-opacity duration-500"
+          :src="ddrgColor"
+          alt="Dresden Database Research Group"
+        />
+        <img
+          :class="{ 'opacity-0': logos.ddrg !== 'white' }"
+          class="absolute inset-0 h-full transition-opacity duration-500"
+          :src="ddrgWhite"
+          alt="Dresden Database Research Group"
+        />
+      </div>
+      <img
+        :class="{ 'opacity-0': !logos.tud }"
+        class="h-[45px] transition-opacity duration-500"
+        :src="tudWhite"
+        alt="TU Dresden"
+      />
+    </div>
 
     <footer
-      class="db-footer absolute inset-x-0 bottom-0 h-[40px] px-[30px] flex items-center justify-between bg-[var(--db-footer-bg)] pointer-events-auto"
+      :class="{ 'opacity-0': !logos.footer }"
+      class="db-footer absolute inset-x-0 bottom-0 h-[40px] px-[30px] flex items-center justify-between bg-[var(--db-footer-bg)] pointer-events-auto transition-opacity duration-500"
     >
       <img class="h-[25px]" :src="tudBlack" alt="TU Dresden" />
       <span class="text-[12px] text-[var(--db-text)]">

package/layouts/cover.vue

@@ -1,32 +1,15 @@
 <script setup lang="ts">
-// "Titelfolie" — navy band (top, with the DDRG mosaic + both logos) + white
-// title area below. Reconstructed as pure vector: the navy is a CSS fill, the
-// corner mosaic is `cover-mosaic.svg` (rebuilt from the original DB_template.potx
-// title-slide tiles), and the logos are the theme's own white SVGs. No raster.
-// Geometry (positions/sizes in pt == px on the 720-wide canvas) is taken from
-// slideLayout1.xml ("Titelfolie") so it matches the source template.
+import { useLogo } from '../scripts/logo'
 import mosaic from '../assets/mosaic.svg'
-import tudWhite from '../assets/tud-white.svg'
-import ddrgWhite from '../assets/ddrg-white.svg'
+
+useLogo({ ddrg: 'white', tud: true })
 </script>
 
 <template>
   <div class="slidev-layout db-cover p-0">
-    <!-- navy band: solid fill + vector mosaic + logos, all overlaid -->
+    <!-- navy band: solid fill + vector mosaic, logos handled by global-bottom -->
     <div class="relative w-full h-[345px] bg-[var(--db-navy)] overflow-hidden">
       <img class="absolute h-full scale-[1.01]" :src="mosaic" alt="" />
-      <div class="absolute flex gap-[45px] top-[25px] right-[35px]">
-        <img
-          class="h-[45px]"
-          :src="tudWhite"
-          alt="TU Dresden"
-        />
-        <img
-          class="h-[45px]"
-          :src="ddrgWhite"
-          alt="Dresden Database Research Group"
-        />
-      </div>
     </div>
 
     <!-- white area: title (#) + subtitle (following text) -->

package/layouts/default.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
+import { useLogo } from '../scripts/logo'
+
 // "Titel und Inhalt": title + single content column. Chrome via DbFrame.
 // `codeSize` frontmatter (optional) overrides the code font size for the slide.
 const props = defineProps({
   codeSize: { type: String, default: '' },
 })
+
+useLogo({ ddrg: 'color', footer: true })
 </script>
 
 <template>

package/layouts/section-num.vue

@@ -2,9 +2,9 @@
 import { useSlideContext } from '@slidev/client'
 import { computed } from 'vue'
 
-import mosaic from '../assets/section-mosaic.svg'
-import tudWhite from '../assets/tud-white.svg'
-import ddrgWhite from '../assets/ddrg-white.svg'
+import { useLogo } from '../scripts/logo'
+
+useLogo({ ddrg: 'white', tud: true })
 
 // The large glyph in the blue area can be overridden per slide via the `num`
 // frontmatter, e.g.
@@ -49,18 +49,6 @@ const num = computed(() => {
         v-if="num !== ''"
         class="absolute font-700 text-[24rem]/[24rem] pt-8 px-4 bg-white bg-clip-text text-transparent"
       >{{ num }}</div>
-      <div class="absolute flex gap-[45px] top-[25px] right-[35px]">
-        <img
-          class="h-[45px]"
-          :src="tudWhite"
-          alt="TU Dresden"
-        />
-        <img
-          class="h-[45px]"
-          :src="ddrgWhite"
-          alt="Dresden Database Research Group"
-        />
-      </div>
     </div>
 
     <!-- white area: title (#) + subtitle (following text) -->

package/layouts/section.vue

@@ -1,18 +1,13 @@
 <script setup lang="ts">
-// "Titelfolie" — navy band (top, with the DDRG mosaic + both logos) + white
-// title area below. Reconstructed as pure vector: the navy is a CSS fill, the
-// corner mosaic is `cover-mosaic.svg` (rebuilt from the original DB_template.potx
-// title-slide tiles), and the logos are the theme's own white SVGs. No raster.
-// Geometry (positions/sizes in pt == px on the 720-wide canvas) is taken from
-// slideLayout1.xml ("Titelfolie") so it matches the source template.
+import { useLogo } from '../scripts/logo'
 import mosaic from '../assets/section-mosaic.svg'
-import tudWhite from '../assets/tud-white.svg'
-import ddrgWhite from '../assets/ddrg-white.svg'
+
+useLogo({ ddrg: 'color', footer: true })
 </script>
 
 <template>
   <div class="slidev-layout db-cover p-0">
-    <!-- navy band: solid fill + vector mosaic + logos, all overlaid -->
+    <!-- blue band: solid fill + vector mosaic -->
     <div class="relative w-full mt-[95px] h-[250px] bg-[#97c6ff] overflow-hidden">
       <img class="absolute h-full scale-[1.01]" :src="mosaic" alt="" />
     </div>

package/layouts/two-cols-grid.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useLogo } from '../scripts/logo'
+
 // Like two-cols-header, but the two columns are laid out as a ROW GRID: every
 // top-level <div> in the `::grid::` slot becomes a cell, filling left, right,
 // left, right… Because CSS grid rows align across columns, paired items (e.g. a
@@ -19,6 +21,8 @@ const props = defineProps({
   columns: { type: String, default: '1fr 1fr' },
   codeSize: { type: String, default: '' },
 })
+
+useLogo({ ddrg: 'color', footer: true })
 </script>
 
 <template>

package/layouts/two-cols-header.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useLogo } from '../scripts/logo'
+
 // "Zwei Inhalte": full-width title (default slot) + two columns. Chrome via DbFrame.
 // Column ratio is configurable per slide via the `columns` frontmatter, e.g.
 //   layout: two-cols-header
@@ -7,6 +9,8 @@ const props = defineProps({
   columns: { type: String, default: '1fr 1fr' },
   codeSize: { type: String, default: '' },
 })
+
+useLogo({ ddrg: 'color', footer: true })
 </script>
 
 <template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-tud-db",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "description": "Slidev theme cloning the TU Dresden / Dresden Database Research Group PowerPoint template",
   "license": "GPL-3.0-or-later",
@@ -24,6 +24,7 @@
     "components",
     "global-bottom.vue",
     "layouts",
+    "scripts",
     "markdown.ts",
     "setup",
     "styles",

package/scripts/logo.ts

@@ -0,0 +1,29 @@
+import { reactive, toValue, watchEffect } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+import { useSlideContext } from '@slidev/client'
+
+function createRegistry<T>() {
+  const store = reactive<Record<number, T>>({})
+
+  function publish(value: MaybeRefOrGetter<T>) {
+    const page = toValue(useSlideContext().$page)
+    watchEffect(() => {
+      store[page] = toValue(value)
+    })
+  }
+
+  return { store, publish }
+}
+
+export interface SlideLogos {
+  ddrg?: 'color' | 'white'
+  tud?: boolean
+  footer?: boolean
+}
+
+const slideLogosReg = createRegistry<SlideLogos>()
+export const slideLogos = slideLogosReg.store
+
+export function useLogo(logos: MaybeRefOrGetter<SlideLogos>) {
+  slideLogosReg.publish(logos)
+}

package/styles/db-theme.css

@@ -160,6 +160,35 @@
   font-style: normal; /* keep inline code upright inside the italic aside */
 }
 
+/* Rhetorical-question / one-sentence-takeaway callout (<Takeaway> via ::takeaway).
+   "F1" style: a coloured left rule fitted to the text height + a small uppercase
+   eyebrow label, no fill, no symbol. The accent colour is driven by --tk-accent
+   (set inline by the component from its `color` prop), defaulting to brand blue. */
+.slidev-layout.db-default .db-takeaway {
+  margin: 0.6em 0;
+  /* em-based so the rule stays vertically balanced at any `size`. The tiny
+     top/bottom difference offsets the label cap-height vs body baseline insets. */
+  padding: 0.28em 0 0.11em 0.85em;
+  border-left: 3px solid var(--tk-accent, var(--db-heading-blue));
+}
+.slidev-layout.db-default .db-takeaway__label {
+  margin-bottom: 0.3em;
+  font-size: 0.72em;
+  font-weight: 700;
+  letter-spacing: 0.09em;
+  line-height: 1.1;
+  text-transform: uppercase;
+  color: var(--tk-accent, var(--db-heading-blue));
+}
+.slidev-layout.db-default .db-takeaway__body {
+  font-size: 1em;
+  line-height: 1.2;
+  color: var(--db-text-soft);
+}
+.slidev-layout.db-default .db-takeaway__body p { margin: 0; }
+.slidev-layout.db-default .db-takeaway__body strong { font-weight: 700; }
+.slidev-layout.db-default .db-takeaway__body code { font-weight: 500; }
+
 /* Fenced code blocks: box only as wide as its content, not full slide width.
    fit-content on the WRAPPER so an optional caption + the code share one width.
    max-width keeps long lines from overflowing the slide. */
@@ -187,9 +216,12 @@
    are a wide 24px gap between the number and the code, plus the block's 10px
    left padding before the number. Both are scoped to line-numbered blocks so
    plain code blocks keep their normal padding. */
-.slidev-layout.db-default .slidev-code-line-numbers .slidev-code {
+.slidev-layout.db-default .slidev-code-line-numbers .slidev-code,
+.slidev-layout.db-default .shiki-magic-move-container.slidev-code {
   /* override the padding *variable* (Slidev applies padding via it, which beats
-     a plain padding-left here). top right bottom left — only the left shrinks. */
+     a plain padding-left here). top right bottom left — only the left shrinks.
+     The Magic Move container isn't wrapped in .slidev-code-line-numbers, so it
+     needs the same override to keep its gutter rule aligned with plain blocks. */
   --slidev-code-padding: 4px 10px 4px 6px;   /* less space left of the numbers (was 10px) */
 }
 .slidev-layout.db-default .slidev-code-line-numbers .slidev-code code .line::before {
@@ -202,6 +234,32 @@
   margin-right: 7px;   /* separator → code (was a plain 8px gap) */
 }
 
+/* Magic Move (```md magic-move```) renders line numbers as real
+   .shiki-magic-move-line-number elements (each with opacity:0.3), not the
+   ::before pseudo the plain blocks use — so the gutter rule above never reaches
+   them and the separator was missing. Re-create the same gutter: recolour the
+   numbers to match plain line-numbered blocks (gray-400, gray-600 in dark) so
+   the border can sit at full opacity instead of the dimmed 0.3. */
+.slidev-layout.db-default .shiki-magic-move-line-number {
+  opacity: 1;
+  color: rgb(156 163 175);
+  /* Mirror the plain block's ::before geometry exactly: a fixed 1ch column,
+     right-aligned, so the digit is pinned against the padding instead of
+     shrink-wrapped and left-aligned. white-space:normal drops the literal
+     trailing spaces Magic Move pads numbers with (e.g. "1  "). */
+  box-sizing: border-box;
+  width: 1ch;
+  text-align: right;
+  overflow: visible;
+  white-space: normal;
+  padding-right: 10px; /* number → separator */
+  border-right: 1px solid var(--db-table-rule);
+  margin-right: 7px;   /* separator → code */
+}
+.dark .slidev-layout.db-default .shiki-magic-move-line-number {
+  color: rgb(75 85 99);
+}
+
 /* Optional caption above a code block.
    Authoring:  ```python [What this snippet does]  */
 .slidev-layout.db-default .slidev-code-block-title {