slidev-theme-tud-db 0.0.0

package/layouts/section-num.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+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'
+
+// The large glyph in the blue area can be overridden per slide via the `num`
+// frontmatter, e.g.
+//   layout: section-num
+//   num: IV
+// By default it is the slide's position in the table of contents: its 1-based
+// index among its siblings at its own TOC level. Slides missing from the TOC
+// (no title, or `hideInToc`) show no glyph.
+const props = defineProps({
+  num: { type: [String, Number], default: '' },
+})
+
+const { $nav, $page } = useSlideContext()
+
+interface TocEntry { no: number, children: TocEntry[] }
+
+// 1-based index of the slide numbered `no` among its siblings, or 0 if absent
+function tocIndexOf(items: TocEntry[], no: number): number {
+  for (const [i, item] of items.entries()) {
+    if (item.no === no)
+      return i + 1
+    const nested = tocIndexOf(item.children, no)
+    if (nested)
+      return nested
+  }
+  return 0
+}
+
+const num = computed(() => {
+  if (String(props.num) !== '')
+    return props.num
+  return tocIndexOf($nav.value?.tocTree ?? [], $page.value) || ''
+})
+</script>
+
+<template>
+  <div class="slidev-layout db-cover p-0">
+    <div class="relative w-full h-[345px] bg-[#2f57b2]">
+      <!-- glyph is painted using bg-clip to circumvent firefox' font scaling limit -->
+      <!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=1677551 -->
+      <div
+        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) -->
+    <div class="db-cover__title relative m-[30px]">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.db-cover__title :deep(h1) {
+  @apply text-4xl! font-700 text-[var(--db-heading-blue)];
+}
+.db-cover__title :deep(p) {
+  @apply absolute top-[95px] m-0 text-md;
+  color: var(--db-text-soft);
+}
+</style>

package/layouts/section.vue

@@ -0,0 +1,37 @@
+<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 mosaic from '../assets/section-mosaic.svg'
+import tudWhite from '../assets/tud-white.svg'
+import ddrgWhite from '../assets/ddrg-white.svg'
+</script>
+
+<template>
+  <div class="slidev-layout db-cover p-0">
+    <!-- navy band: solid fill + vector mosaic + logos, all overlaid -->
+    <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>
+
+    <!-- white area: title (#) + subtitle (following text) -->
+    <div class="db-cover__title relative m-[30px]">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.db-cover__title :deep(h1) {
+  @apply text-4xl! font-700 text-[var(--db-heading-blue)];
+}
+.db-cover__title :deep(p) {
+  @apply absolute top-[95px] m-0 text-md;
+  /* margin: 16px 0 0; */
+  /* font-size: 15px; */
+  color: var(--db-text-soft);
+}
+</style>

package/layouts/two-cols-grid.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// 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
+// heading on the left and one on the right) line up automatically and stay
+// aligned when content changes.
+//
+//   ---
+//   layout: two-cols-grid
+//   columns: 55fr 45fr        # optional ratio (default 1fr 1fr)
+//   ---
+//   # Title
+//   ::grid::
+//   <div> … left of row 1 … </div>
+//   <div> … right of row 1 … </div>
+//   <div> … left of row 2 … </div>
+//   <div> … right of row 2 … </div>
+const props = defineProps({
+  columns: { type: String, default: '1fr 1fr' },
+  codeSize: { type: String, default: '' },
+})
+</script>
+
+<template>
+  <DbFrame :code-size="props.codeSize">
+    <div class="db-header"><slot /></div>
+
+    <div class="db-rowgrid" :style="{ gridTemplateColumns: props.columns }">
+      <slot name="grid" />
+    </div>
+  </DbFrame>
+</template>
+
+<style scoped>
+.db-rowgrid {
+  display: grid;
+  column-gap: 28px;
+  row-gap: 12px;
+  align-items: start;   /* each cell starts at the top of its row */
+}
+</style>

package/layouts/two-cols-header.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+// "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
+//   columns: 3fr 2fr      # 60/40   (default is 1fr 1fr = 50/50)
+const props = defineProps({
+  columns: { type: String, default: '1fr 1fr' },
+  codeSize: { type: String, default: '' },
+})
+</script>
+
+<template>
+  <DbFrame :code-size="props.codeSize">
+    <div class="db-header"><slot /></div>
+
+    <div class="db-grid" :style="{ gridTemplateColumns: props.columns }">
+      <div class="db-grid__col"><slot name="left" /></div>
+      <div class="db-grid__col"><slot name="right" /></div>
+    </div>
+  </DbFrame>
+</template>
+
+<style scoped>
+.db-grid {
+  display: grid;
+  column-gap: 28px;
+}
+</style>

package/markdown.ts

@@ -0,0 +1,197 @@
+import type { MarkdownExit } from 'markdown-exit'
+import { readFileSync, statSync } from 'node:fs'
+import { parseSync } from '@slidev/parser'
+
+// Slidev runs markdown through `markdown-exit` (a markdown-it fork), so the
+// `md` passed to markdownSetup is a MarkdownExit instance, not a markdown-it one.
+
+// Custom markdown-it customizations for the theme, wired up from
+// `slidev.markdown.markdownSetup` in vite.config.ts:
+//   - footnotes teleported into a <Footnotes> component
+//   - LaTeX-style figure captions (`![alt](img){.caption}`)
+//   - LaTeX-style table captions (a `{.caption}` paragraph after a table)
+//   - deck-wide "Figure N:" / "Table N:" numbering
+
+// --- Global figure/table numbering -----------------------------------------
+// Figures and tables are numbered across the whole deck, not per slide. CSS
+// counters can't do this: Slidev hides off-screen slides with `display: none`,
+// and `counter-increment` is ignored on display:none elements — so a slide
+// never "sees" the figures on other slides. Instead we bake the numbers in at
+// build time. `env.id` (".../deck.md__slidev_<N>.md") tells us which slide is
+// rendering; we parse the full deck once (cached by mtime), count the numbered
+// `{.caption .numbered}` figures/tables on every earlier slide, and use those
+// running totals as the starting offset for this slide.
+
+interface DeckCounts { mtimeMs: number, fig: number[], tab: number[] }
+const deckCountsCache = new Map<string, DeckCounts>()
+
+// Count `{.caption .numbered}` figures (image) and tables (standalone
+// paragraph) in one slide's raw markdown. Code spans/fences are stripped first
+// so a `{.caption .numbered}` shown as example code is never miscounted.
+function countNumbered(content: string): { fig: number, tab: number } {
+  const stripped = content
+    .replace(/```[\s\S]*?```/g, '')
+    .replace(/`[^`]*`/g, '')
+  let fig = 0
+  let tab = 0
+  const attrBlock = /\{([^{}]*)\}/g
+  let match: RegExpExecArray | null
+  while ((match = attrBlock.exec(stripped))) {
+    const classes = (match[1].match(/\.[\w-]+/g) ?? []).map((c) => c.slice(1))
+    if (!classes.includes('numbered')) continue
+    if (!classes.includes('table-caption') && !classes.includes('table-footer') && !classes.includes('caption'))
+      continue
+    if (/!\[[^\]]*\]\([^)]*\)\s*$/.test(stripped.slice(0, match.index)))
+      fig++
+    else
+      tab++
+  }
+  return { fig, tab }
+}
+
+function deckCounts(entryPath: string): DeckCounts | null {
+  let stat
+  try {
+    stat = statSync(entryPath)
+  }
+  catch {
+    return null
+  }
+  const cached = deckCountsCache.get(entryPath)
+  if (cached && cached.mtimeMs === stat.mtimeMs)
+    return cached
+  const parsed = parseSync(readFileSync(entryPath, 'utf-8'), entryPath)
+  const counts: DeckCounts = { mtimeMs: stat.mtimeMs, fig: [], tab: [] }
+  for (const slide of parsed.slides) {
+    const { fig, tab } = countNumbered(slide.content ?? '')
+    counts.fig.push(fig)
+    counts.tab.push(tab)
+  }
+  deckCountsCache.set(entryPath, counts)
+  return counts
+}
+
+// How many numbered figures/tables appear on slides *before* the one rendering
+// now — i.e. the offset this slide's numbering should start from.
+function numberingOffset(env: any): { fig: number, tab: number } {
+  const id = /^(.*)__slidev_(\d+)\.md$/.exec(env?.id ?? '')
+  if (!id)
+    return { fig: 0, tab: 0 }
+  const counts = deckCounts(id[1])
+  if (!counts)
+    return { fig: 0, tab: 0 }
+  const slideIndex = Number(id[2]) - 1
+  let fig = 0
+  let tab = 0
+  for (let i = 0; i < slideIndex && i < counts.fig.length; i++) {
+    fig += counts.fig[i]
+    tab += counts.tab[i]
+  }
+  return { fig, tab }
+}
+
+// Gather every class on a token, coping with both markdown-it-attrs (one
+// space-separated `class` attr) and Slidev's MDC (a separate `class` attr per
+// class, e.g. [["class","caption"],["class","numbered"]]).
+function classesOf(token: { attrs?: [string, string][] | null }): string[] {
+  return (token.attrs ?? [])
+    .filter(([name]) => name === 'class')
+    .flatMap(([, value]) => value.split(/\s+/))
+    .filter(Boolean)
+}
+
+// Footnotes: wrap the rendered footnotes block in a <Footnotes> component (see
+// components/Footnotes.vue) instead of emitting it inline in the slide. The
+// component teleports it into global-bottom, so footnotes live in the
+// persistent layer: they don't animate with slide transitions and sit next to
+// the footer. The inline footnote refs ([^1] markers) are produced by other
+// rules and stay in the slide body.
+export function setupFootnotes(md: MarkdownExit): void {
+  md.renderer.rules.footnote_block_open = () =>
+    '<Footnotes>\n<section class="footnotes">\n<ol class="footnotes-list">\n'
+  md.renderer.rules.footnote_block_close = () =>
+    '</ol>\n</section>\n</Footnotes>\n'
+}
+
+// LaTeX-style figure captions: an image marked with `{.caption}` gets its alt
+// text rendered as a caption below it. Add `{.numbered}` too for a "Figure N:"
+// prefix (numbered deck-wide — see numberingOffset). We wrap the <img> and the
+// caption in inline <span>s (not a <figure>) so the markup stays valid inside
+// the <p> that markdown puts a standalone image in. Styling lives in
+// styles/layout.css.
+export function setupFigureCaptions(md: MarkdownExit): void {
+  const defaultImage = md.renderer.rules.image
+    ?? ((tokens, idx, options, env, self) => self.renderToken(tokens, idx, options))
+  md.renderer.rules.image = (tokens, idx, options, env, self) => {
+    const token = tokens[idx]
+    const img = defaultImage(tokens, idx, options, env, self)
+    const cls = token.attrGet('class') ?? ''
+    if (!/(^|\s)caption(\s|$)/.test(cls))
+      return img
+    // `token.content` is the image's alt text.
+    const alt = md.utils.escapeHtml(token.content ?? '')
+    let label = ''
+    if (/(^|\s)numbered(\s|$)/.test(cls)) {
+      // Continue the figure count from earlier slides; images render in
+      // document order, so a per-render running tally stays correct.
+      const e = env as { __figureNo?: number }
+      e.__figureNo ??= numberingOffset(env).fig
+      label = `<span class="caption-label">Figure ${++e.__figureNo}: </span>`
+    }
+    return `<span class="caption-figure">${img}<span class="caption-text">${label}${alt}</span></span>`
+  }
+}
+
+// LaTeX-style table captions, the table analogue of the figure captions above.
+// A paragraph marked `{.caption}` placed directly after a table becomes that
+// table's caption; add `{.numbered}` for a "Table N:" prefix. We wrap the
+// <table> and the caption in a `display: table` container (.caption-table) —
+// the exact trick the figure captions use — so the caption wraps to the
+// table's width instead of stretching it. Styling lives in styles/layout.css
+// and reuses `.caption-text`.
+export function setupTableCaptions(md: MarkdownExit): void {
+  md.core.ruler.push('table_caption', (state) => {
+    const tokens = state.tokens
+    const Token = state.Token
+
+    // First pass: find every paragraph that has .table-caption or .table-footer
+    const captions: { pInlineIdx: number, numbered: boolean, num?: number }[] = []
+    for (let i = 2; i < tokens.length; i++) {
+      if (tokens[i].type !== 'paragraph_close') continue
+      const pInline = tokens[i - 1]
+      const pOpen = tokens[i - 2]
+      if (pInline.type !== 'inline' || pOpen.type !== 'paragraph_open') continue
+
+      const classes = [pOpen, ...(pInline.children ?? [])].flatMap(classesOf)
+      if (classes.includes('table-caption') || classes.includes('table-footer')) {
+        captions.push({ pInlineIdx: i - 1, numbered: classes.includes('numbered') })
+      }
+    }
+    
+    if (captions.length === 0) return
+
+    let tableNo = numberingOffset(state.env).tab
+    for (const caption of captions) {
+      if (caption.numbered) caption.num = ++tableNo
+    }
+
+    // Second pass: inject Tab N:
+    for (let k = captions.length - 1; k >= 0; k--) {
+      const { pInlineIdx, numbered, num } = captions[k]
+      const pInline = tokens[pInlineIdx]
+
+      // Remove the .numbered marker so it doesn't bleed
+      for (const token of [tokens[pInlineIdx - 1], ...(pInline.children ?? [])]) {
+        if (token.attrs) {
+          token.attrs = token.attrs.filter(([name, value]) => !(name === 'class' && value === 'numbered'))
+        }
+      }
+
+      if (numbered) {
+        const label = new Token('html_inline', '', 0)
+        label.content = `<span class="caption-label">Tab. ${num}: </span>`
+        ;(pInline.children ??= []).unshift(label)
+      }
+    }
+  })
+}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "slidev-theme-tud-db",
+  "version": "0.0.0",
+  "type": "module",
+  "description": "Slidev theme cloning the TU Dresden / Dresden Database Research Group PowerPoint template",
+  "license": "GPL-3.0-or-later",
+  "keywords": [
+    "slidev-theme",
+    "slidev"
+  ],
+  "homepage": "https://github.com/vmelisch/slidev-theme-db",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vmelisch/slidev-theme-db.git"
+  },
+  "bugs": {
+    "url": "https://github.com/vmelisch/slidev-theme-db/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "assets",
+    "components",
+    "global-bottom.vue",
+    "layouts",
+    "markdown.ts",
+    "setup",
+    "styles",
+    "vite.config.ts",
+    "README.md"
+  ],
+  "engines": {
+    "slidev": ">=0.48.0",
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "shiki": "^4.2.0",
+    "slidev-addon-gsap": "^0.0.4"
+  },
+  "devDependencies": {
+    "@slidev/cli": "^52.16.0",
+    "@slidev/parser": "^52.16.0",
+    "vue": "^3.5.38"
+  },
+  "slidev": {
+    "defaults": {
+      "addons": [
+        "gsap"
+      ],
+      "aspectRatio": "16/9",
+      "canvasWidth": 960,
+      "colorSchema": "light",
+      "mdc": true,
+      "comark": true,
+      "presenter": true,
+      "titleTemplate": "%s",
+      "transition": "slide-fade-left | slide-fade-right",
+      "fonts": {
+        "sans": "NotoSans",
+        "mono": "FiraCode",
+        "provider": null
+      }
+    }
+  },
+  "scripts": {
+    "build": "slidev build examples/slides.md",
+    "dev": "slidev examples/slides.md --remote",
+    "export": "slidev export examples/slides.md"
+  }
+}

package/setup/shiki.ts

@@ -0,0 +1,13 @@
+// Default Shiki color scheme for fenced code blocks (```lang ... ```).
+// Matches the inline-code highlighter (see vite.config.ts) and the chair's
+// template, so inline and fenced code look the same.
+//
+// NB: no `import { defineShikiSetup } from '@slidev/types'` on purpose — it's
+// only a type helper, and Slidev calls this default export as `setup(ctx)`.
+// catppuccin-latte / -mocha are bundled with Shiki, so no extra deps needed.
+export default () => ({
+  themes: {
+    light: 'catppuccin-latte',
+    dark: 'catppuccin-mocha',
+  },
+})