slidev-theme-tud 0.0.0

package/markdown.ts

@@ -0,0 +1,196 @@
+import type { MarkdownExit } from 'markdown-exit'
+import { readFileSync, statSync } from 'node:fs'
+import { parseSync } from '@slidev/parser'
+
+// markdown customizations for the theme
+// - footnotes teleported into a <Footnotes> component
+// - figure captions (`![alt](img){.caption}`)
+// - table captions (a `{.caption}` paragraph after a table)
+// - deck-wide "Figure N:" / "Table N:" numbering
+
+// global figure/table numbering across the whole deck, constructed at build time
+// we parse the full deck once (cached by mtime), count the 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 numbered figure and table captions
+function countNumbered(md: MarkdownExit, content: string): { fig: number, tab: number } {
+  const tokens = md.parse(content, { __figTabCount: true })
+  let fig = 0, tab = 0
+  for (let i = 0; i < tokens.length; i++) {
+    const token = tokens[i]
+    // Figures: count markdown images
+    if (token.type === 'inline') {
+      for (const child of token.children ?? []) {
+        if (child.type !== 'image') continue;
+        const classes = classesOf(child)
+        if (classes.includes('caption') && classes.includes('numbered'))
+          fig++
+      }
+    }
+    // Tables: a `{.caption .numbered}` paragraph directly after a table.
+    const tableClasses = tableCaptionClasses(tokens, i)
+    if (tableClasses?.includes('caption') && tableClasses.includes('numbered'))
+      tab++
+  }
+  return { fig, tab }
+}
+
+function deckCounts(md: MarkdownExit, 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(md, 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(md: MarkdownExit, env: any): { fig: number, tab: number } {
+  const id = /^(.*)__slidev_(\d+)\.md$/.exec(env?.id ?? '')
+  if (!id)
+    return { fig: 0, tab: 0 }
+  const counts = deckCounts(md, 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 }
+}
+
+type Tok = { type: string, children?: Tok[] | null, attrs?: [string, string][] | null }
+
+// Gather every class on a token parsed with comark
+function classesOf(token: Tok): string[] {
+  return (token.attrs ?? [])
+    .filter(([name]) => name === 'class')
+    .flatMap(([, value]) => value.split(/\s+/))
+    .filter(Boolean)
+}
+
+// If the token at `i` is a paragraph sitting directly after a table, return its
+// classes; otherwise null. markdown-it always emits a paragraph as exactly
+// [paragraph_open, inline, paragraph_close] — however rich the caption content
+// is, it lives inside the `inline` token's children, so this 3-token shape (and
+// thus the fixed offsets) always holds. The `{.caption}`/`{.numbered}` markers
+// may land on the paragraph_open itself or on a props token among the inline
+// children, so classes are gathered from both. Used by both the deck-wide
+// counter and the caption rewrite so their detection can't drift apart.
+// works with nested content as well
+function tableCaptionClasses(tokens: Tok[], i: number): string[] | null {
+  if (tokens[i]?.type !== 'paragraph_close'
+    || tokens[i - 1]?.type !== 'inline'
+    || tokens[i - 2]?.type !== 'paragraph_open'
+    || tokens[i - 3]?.type !== 'table_close')
+    return null
+  return [tokens[i - 2], ...(tokens[i - 1].children ?? [])].flatMap(classesOf)
+}
+
+// Footnotes: render footnotes into a <Footnotes> component
+// inline footnote refs (i.e. [^1] markers) are not changed
+export function setupFootnotes(md: MarkdownExit): void {
+  md.renderer.rules.footnote_block_open = () =>
+    '<Footnotes><section class="footnotes"><ol class="footnotes-list">\n'
+  md.renderer.rules.footnote_block_close = () =>
+    '</ol></section></Footnotes>\n'
+}
+
+// images marked with `{.caption}` get their alt text rendered as caption.
+// see `caption-*` 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 classes = classesOf(token)
+    if (!classes.includes('caption'))
+      return img
+    const alt = md.utils.escapeHtml(token.content ?? '')
+    let label = ''
+    if (classes.includes('numbered')) {
+      const e = env as { __figureNo?: number }
+      e.__figureNo ??= numberingOffset(md, 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>`
+  }
+}
+
+// table analogue of the figure captions above
+// see styles/layout.css
+export function setupTableCaptions(md: MarkdownExit): void {
+  md.core.ruler.push('table_caption', (state) => {
+    // skip the rewrite on the counting pass (countNumbered)
+    if (state.env?.__figTabCount) return
+    const tokens = state.tokens
+    const Token = state.Token
+
+    // 1. in document order: match caption paragraphs directly after tables
+    const captions: { close: number, numbered: boolean, num?: number }[] = []
+    for (let i = 0; i < tokens.length; i++) {
+      const classes = tableCaptionClasses(tokens, i)
+      if (!classes?.includes('caption')) continue
+      captions.push({ close: i, numbered: classes.includes('numbered') })
+    }
+    if (captions.length === 0) return
+
+    let tableNo = numberingOffset(md, state.env).tab
+    for (const caption of captions)
+      if (caption.numbered)
+        caption.num = ++tableNo
+
+    // 2. in reverse: rewrite the captions
+    for (let k = captions.length - 1; k >= 0; k--) {
+      const { close: i, numbered, num } = captions[k]
+      const pInline = tokens[i - 1]
+      const pOpen = tokens[i - 2]
+      const pClose = tokens[i]
+
+      // Locate the <table> this caption belongs to.
+      let open = i - 3
+      while (open >= 0 && tokens[open].type !== 'table_open') open--
+      if (open < 0) continue
+
+      // Retag the paragraph as the caption span (`.caption-text` gives it the
+      // same look as the figure captions).
+      pOpen.tag = 'span'
+      pOpen.block = false
+      pOpen.attrs = null
+      pOpen.attrSet('class', 'caption-text')
+      pClose.tag = 'span'
+      pClose.block = false
+
+      if (numbered) {
+        const label = new Token('html_inline', '', 0)
+        label.content = `<span class="caption-label">Table ${num}: </span>`
+        ;(pInline.children ??= []).unshift(label)
+      }
+
+      const wrapOpen = new Token('html_block', '', 0)
+      wrapOpen.content = '<div class="caption-table">\n'
+      const wrapClose = new Token('html_block', '', 0)
+      wrapClose.content = '</div>\n'
+      tokens.splice(i + 1, 0, wrapClose)
+      tokens.splice(open, 0, wrapOpen)
+    }
+  })
+}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "slidev-theme-tud",
+  "version": "0.0.0",
+  "type": "module",
+  "description": "Corporate barkhausen Institut theme for SliDev",
+  "keywords": [
+    "slidev-theme",
+    "slidev",
+    "TUD",
+    "Dresden University of Technology"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/maxkurze1/slidev-theme-TUD.git"
+  },
+  "bugs": {
+    "url": "https://github.com/maxkurze1/slidev-theme-TUD/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "dayjs": "^1.11.20",
+    "gsap": "^3.13.0",
+    "katex": "^0.16.33",
+    "stylus": "^0.64.0",
+    "two.js": "^0.8.23"
+  },
+  "peerDependencies": {
+    "slidev-component-progress": "*"
+  },
+  "peerDependenciesMeta": {
+    "slidev-component-progress": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@slidev/cli": "^52.1.0",
+    "@slidev/types": "^52.1.0",
+    "slidev-component-progress": "github:maxkurze1/slidev-component-progress"
+  },
+  "slidev": {
+    "colorSchema": "light",
+    "defaults": {
+      "aspectRatio": "16/9",
+      "mdc": true,
+      "comark": true,
+      "view-transition-clicks": true,
+      "canvasWidth": 1280,
+      "presenter": true,
+      "titleTemplate": "%s",
+      "transition": "slide-fade-left | slide-fade-right",
+      "favicon": "",
+      "fonts": {
+        "sans": "NotoSans",
+        "mono": "FiraCode",
+        "provider": null
+      }
+    }
+  },
+  "scripts": {
+    "build": "slidev build example.mdc",
+    "dev": "slidev example.mdc --remote",
+    "export": "slidev export example.mdc",
+    "screenshot": "slidev export example.mdc --format png"
+  }
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,23 @@
+overrides:
+  '@babel/core@<=7.29.0': '>=7.29.6'
+  dompurify@<3.3.2: '>=3.3.2'
+  dompurify@<3.4.0: '>=3.4.0'
+  dompurify@<3.4.7: '>=3.4.7'
+  dompurify@<3.4.9: '>=3.4.9'
+  dompurify@<=3.3.1: '>=3.3.2'
+  dompurify@<=3.3.3: '>=3.4.0'
+  dompurify@<=3.4.10: '>=3.4.11'
+  dompurify@<=3.4.5: '>=3.4.6'
+  dompurify@<=3.4.6: '>=3.4.7'
+  dompurify@>=1.0.10 <3.4.0: '>=3.4.0'
+  dompurify@>=3.0.0 <=3.4.7: '>=3.4.8'
+  dompurify@>=3.0.1 <3.4.0: '>=3.4.0'
+  dompurify@>=3.1.3 <=3.3.1: '>=3.3.2'
+  esbuild@>=0.27.3 <0.28.1: '>=0.28.1'
+  js-yaml@<3.15.0: '>=3.15.0'
+  js-yaml@>=4.0.0 <=4.1.1: '>=4.2.0'
+  linkify-it@<=5.0.0: '>=5.0.1'
+  markdown-it@<=14.1.1: '>=14.2.0'
+  mermaid@>=11.0.0-alpha.1 <=11.14.0: '>=11.15.0'
+  uuid@<11.1.1: '>=11.1.1'
+  vite@>=7.0.0 <=7.3.4: '>=7.3.5'

package/scripts/background.ts

@@ -0,0 +1,69 @@
+/// <reference types="vite/client" />
+import { reactive, toValue, watchEffect } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+import { useSlideContext } from '@slidev/client'
+import { toCssColor, toRawColor } from './color'
+
+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 }
+}
+
+const backgroundsReg = createRegistry<string>()
+export const slideBackgrounds = backgroundsReg.store
+export function useBackground(color: MaybeRefOrGetter<string>) {
+  backgroundsReg.publish(() => toRawColor(toValue(color)))
+}
+
+
+// A mark's placement. (x, y) is the slide-pixel position of the logo's center
+export interface MarkTransform {
+  scale: number
+  x: number
+  y: number
+  rotate?: number // degrees
+}
+
+export interface BackgroundLogo {
+  bl: MarkTransform
+  tr: MarkTransform
+  fill?: string
+}
+
+const bgLogosReg = createRegistry<BackgroundLogo>()
+export const slideBgLogos = bgLogosReg.store
+
+export function useBackgroundLogo(logo: MaybeRefOrGetter<BackgroundLogo>) {
+  bgLogosReg.publish(() => {
+    const l = toValue(logo)
+    return l.fill === undefined ? l : { ...l, fill: toRawColor(l.fill) }
+  })
+}
+
+export interface SlideLogos {
+  text?: string
+  normal?: string
+  small?: string
+}
+
+const slideLogosReg = createRegistry<SlideLogos>()
+export const slideLogos = slideLogosReg.store
+
+export function useLogo(logos: MaybeRefOrGetter<SlideLogos>) {
+  slideLogosReg.publish(() => {
+    const l = toValue(logos)
+    const resolved: SlideLogos = {}
+    if (l.text !== undefined) resolved.text = toCssColor(l.text)
+    if (l.normal !== undefined) resolved.normal = toCssColor(l.normal)
+    if (l.small !== undefined) resolved.small = toCssColor(l.small)
+    return resolved
+  })
+}

package/scripts/color.ts

@@ -0,0 +1,81 @@
+// `colors` / `paletteNames` — the TU Dresden corporate palette, the single
+// source of truth for the theme's colors (consumed by uno.config.ts, which
+// registers them as UnoCSS theme colors and exposes them as `--theme-*`
+// CSS vars).
+
+export const colors = {
+  blue: { DEFAULT: '#2F57B2', 1: '#2F57B2', 2: '#97C6FF' },
+  violet: { DEFAULT: '#7369BE', 1: '#7369BE', 2: '#C8C8FF' },
+  magenta: { DEFAULT: '#BC1589', 1: '#BC1589', 2: '#FFB9FF' },
+  red: { DEFAULT: '#D20F41', 1: '#D20F41', 2: '#FFAAA5' },
+  orange: { DEFAULT: '#C85000', 1: '#C85000', 2: '#FFBE78' },
+  yellow: { DEFAULT: '#FFC700', 1: '#FFC700', 2: '#FFE483' },
+  olive: { DEFAULT: '#767A23', 1: '#767A23', 2: '#D2DC46' },
+  green: { DEFAULT: '#007D4B', 1: '#007D4B', 2: '#8CE6AA' },
+  teal: { DEFAULT: '#0A777F', 1: '#0A777F', 2: '#8CE6D7' },
+  primary: '#00008C',
+  darkblue: '#001450',
+  gray: '#323F4B',
+} as const
+
+// Every valid palette colour name
+export const paletteNames: string[] = Object.entries(colors).flatMap(([name, value]) =>
+  typeof value === 'string'
+    ? [name]
+    : [name, ...Object.keys(value)
+        .filter((shade) => shade !== 'DEFAULT')
+        .map((shade) => `${name}-${shade}`)],
+)
+
+export const toCssColor = (name: string) => (new Set(paletteNames).has(name) ? `var(--theme-${name})` : name)
+
+// Resolve a palette colour name to its concrete hex value; pass anything else through unchanged
+export function toRawColor(name: string): string {
+  const [base, shade] = name.split('-')
+  const entry = (colors as Record<string, string | Record<string, string>>)[base]
+  if (typeof entry === 'string') return shade === undefined ? entry : name
+  if (entry !== undefined) return entry[shade ?? 'DEFAULT'] ?? name
+  return name
+}
+
+// Predefined color sets.
+export const COLOR_COMBOS = [
+  { bg: 'red-2',     logo: 'magenta-2', text: 'primary' },
+  { bg: 'violet',    logo: 'magenta',   text: 'white' },
+  { bg: 'violet-2',  logo: 'primary',   text: 'white' },
+  { bg: 'teal-1',    logo: 'teal-2',    text: 'primary' },
+  { bg: 'yellow-2',  logo: 'teal-2',    text: 'primary' },
+  { bg: 'magenta-2', logo: 'blue-2',    text: 'primary' },
+] as const
+
+export function comboAt(i: number) {
+  const n = COLOR_COMBOS.length
+  return COLOR_COMBOS[(((Math.trunc(i) - 1) % n) + n) % n]
+}
+
+// The colour fields a combo provides; also the fields section-n resolves.
+export type ComboField = keyof (typeof COLOR_COMBOS)[number]
+
+// A colour spec as layouts pass it: a colour string (hex / CSS / palette name),
+// a combo index (number, or an all-digits string), or omitted.
+export type ColorSpec = number | string | undefined
+
+
+export function asIndex(spec: ColorSpec): number | undefined {
+  if (typeof spec === 'number') return spec
+  if (typeof spec === 'string' && /^\d+$/.test(spec)) return Number(spec)
+  return undefined
+}
+
+// full resolve
+export function resolveColorName(spec: ColorSpec, field: ComboField, defaultIndex: number): string {
+  const i = asIndex(spec)
+  if (i !== undefined) return comboAt(i)[field]
+  if (spec === undefined || spec === '') return comboAt(defaultIndex)[field]
+  return String(spec)
+}
+
+// Resolve a spec straight to a CSS <color> — resolveColorName then toCssColor.
+export function resolveCssColor(spec: ColorSpec, field: ComboField, defaultIndex: number): string {
+  return toCssColor(resolveColorName(spec, field, defaultIndex))
+}

package/scripts/util.ts

@@ -0,0 +1,51 @@
+// Import dayjs's native ESM build (not the UMD `dayjs`/`dayjs/plugin/*` entries).
+// The UMD bundle has no real `default` export, so when this theme is consumed as a
+// dependency Vite serves it raw and `import dayjs from "dayjs"` throws
+// "doesn't provide an export named: 'default'". The `/esm` build is proper ESM.
+import dayjs from "dayjs/esm";
+import advancedFormat from "dayjs/esm/plugin/advancedFormat";
+import { inject, ref } from "vue";
+import type { Ref } from "vue";
+
+export const WIDTH = 1280
+export const HEIGHT = 720
+
+// `Do` (ordinal day, e.g. "23rd") lives in the advancedFormat plugin.
+dayjs.extend(advancedFormat);
+
+/* ================================ */
+/*        export composables        */
+/* ================================ */
+
+// Slidev's authoritative, reactive slide scale.
+//
+// Caution this relies on Slidev's internal injection key.
+// It seems there is no other way to access the slide's
+// scale reactively.
+export function useScale(): Ref<number> {
+  return inject<Ref<number>>("$$slidev-slide-scale", ref(1));
+}
+
+export function formatString(template : string, values : any) {
+  return template.replace(/{(\w+)}/g, (_, key) => values[key] ?? `{${key}}`);
+}
+
+// Expand `\today` and `\now` tokens in a string, each with an optional
+// day.js format in square brackets (see https://day.js.org/docs/en/display/format):
+//   \today               -> "June 23rd, 2026"        (the long, human format)
+//   \today[YYYY-MM-DD]    -> "2026-06-23"
+//   \now                 -> "2026-06-23 14:05:09"     (date + time, no format given)
+//   \now[HH:mm]           -> "14:05"
+// `\today` and `\now` only differ in their default (no-bracket) format; both
+// accept any day.js format string.
+export function expandDateTokens(template : string, now = new Date()) {
+  const d = dayjs(now);
+  return String(template).replace(
+    /\\(today|now)(?:\[([^\]]*)\])?/g,
+    (_, kind, fmt) => {
+      if (fmt != null)
+        return d.format(fmt);
+      return kind === "today" ? d.format("MMMM Do, YYYY") : d.format("MMMM Do, YYYY HH:mm");
+    },
+  );
+}

package/setup/katex.ts

@@ -0,0 +1,35 @@
+import { defineKatexSetup } from '@slidev/types'
+import { colors } from '../scripts/color'
+
+// Short color macros, e.g. \red{x} instead of \htmlStyle{color:var(--theme-red)}{x}.
+// \red{x} is default shade, \red{2}{x} or \red2{x} for the "2"nd shade.
+const tokensToText = (tokens: { text: string }[]) => tokens.slice().reverse().map((t) => t.text).join('')
+
+const makeColorMacro = (name: string, shadeKeys: Set<string>) => (context: any) => {
+  context.consumeSpaces()
+  const first = context.consumeArg()
+  const firstText = tokensToText(first.tokens)
+  const hasShadeArg = shadeKeys.has(firstText) && context.future().text === '{'
+  const varName = hasShadeArg ? `${name}-${firstText}` : name
+  const textArg = hasShadeArg ? tokensToText(context.consumeArg().tokens) : firstText
+  return `\\htmlStyle{color:var(--theme-${varName})}{${textArg}}`
+}
+
+const colorMacros = Object.fromEntries(
+  Object.entries(colors).map(([name, value]) => {
+    const shadeKeys = typeof value === 'string'
+      ? new Set<string>()
+      : new Set(Object.keys(value).filter((k) => k !== 'DEFAULT'))
+    return [`\\${name}`, makeColorMacro(name, shadeKeys)]
+  }),
+)
+
+export default defineKatexSetup(() => {
+  return {
+    // maxExpand: 2000,
+    trust: true,
+    strict: false,
+    // throwOnError: false,
+    macros: colorMacros,
+  }
+})

package/setup/shiki.ts

@@ -0,0 +1,48 @@
+import type { ShikiSetupReturn } from '@slidev/types'
+import { defineShikiSetup } from '@slidev/types'
+import { bundledThemes } from 'shiki'
+import { colors } from '../scripts/color'
+
+// Recolor a handful of syntax categories with the TUD corporate palette on
+// top of a well-tested base theme, so code blocks pick up brand accents
+// without losing that theme's contrast/hierarchy for everything else
+// (comments, punctuation, generic variables, ...).
+// Never touch comments — some grammars file them under oddly-named scopes
+// (e.g. vitesse's `string.comment`) that would otherwise false-match below.
+const isComment = (s: string) => s.split('.').includes('comment')
+
+const CATEGORIES: { match: (scope: string) => boolean, color: (shade: 1 | 2) => string }[] = [
+  { match: s => s === 'keyword' || s.startsWith('keyword.control') || s.startsWith('storage.type.class') || s.startsWith('storage.modifier'), color: shade => colors.blue[shade] },
+  { match: s => s.split('.')[0] === 'string' || s.startsWith('source.regexp'), color: shade => colors.green[shade] },
+  { match: s => s.includes('entity.name.function') || s.includes('support.function'), color: shade => colors.magenta[shade] },
+  { match: s => s.includes('entity.name.tag') || s === 'tag.html', color: shade => colors.red[shade] },
+  { match: s => s.includes('entity.name.type') || s.includes('entity.name.class') || s.includes('support.type') || s.includes('support.class') || s === 'namespace', color: shade => colors.violet[shade] },
+  { match: s => s.includes('constant.numeric') || s === 'number', color: shade => colors.orange[shade] },
+]
+
+// shade 1 (saturated) reads well on light backgrounds, shade 2 (pastel) on dark ones.
+function recolor(theme: any, shade: 1 | 2) {
+  return {
+    ...theme,
+    tokenColors: theme.tokenColors?.map((rule: any) => {
+      const scopes: string[] = (Array.isArray(rule.scope) ? rule.scope : [rule.scope]).filter(Boolean)
+      if (scopes.some(isComment)) return rule
+      const category = CATEGORIES.find(c => scopes.some(c.match))
+      if (!category || !rule.settings?.foreground) return rule
+      return { ...rule, settings: { ...rule.settings, foreground: category.color(shade) } }
+    }),
+  }
+}
+
+export default defineShikiSetup(async (): Promise<ShikiSetupReturn> => {
+  const [{ default: light }, { default: dark }] = await Promise.all([
+    bundledThemes['night-owl-light'](),
+    bundledThemes['vitesse-dark'](),
+  ])
+  return {
+    themes: {
+      light: recolor(light, 1),
+      dark: recolor(dark, 2),
+    },
+  }
+})

package/shims.d.ts

@@ -0,0 +1,27 @@
+declare module '@slidev/client'
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+declare module '*.svg' {
+  const src: string
+  export default src
+}
+
+declare module '*.svg?raw' {
+  const src: string
+  export default src
+}
+
+declare module '*.ico?url' {
+  const src: string
+  export default src
+}
+
+declare module '*.png?url' {
+  const src: string
+  export default src
+}

package/styles/fade-transition.css

@@ -0,0 +1,36 @@
+/*
+ * Custom transitions with a smooth slide and fade animation
+ * Far more subtle than the build-in
+ *
+ * Usage:
+ * ```
+ * transition: slide-fade-left | slide-fade-right
+ * ```
+ */
+
+.slide-fade-right-enter-active,
+.slide-fade-left-enter-active {
+  transition:
+    opacity var(--slidev-transition-duration) ease
+      calc(var(--slidev-transition-duration) * 0.5), /* some additional delay here */
+    transform calc(var(--slidev-transition-duration) * 1.5) ease;
+}
+
+.slide-fade-right-leave-active,
+.slide-fade-left-leave-active {
+  transition:
+    opacity var(--slidev-transition-duration) ease,
+    transform calc(var(--slidev-transition-duration) * 1.5) ease;
+}
+
+.slide-fade-right-leave-to,
+.slide-fade-left-enter-from {
+  opacity: 0;
+  transform: translateX(4%);
+}
+
+.slide-fade-right-enter-from,
+.slide-fade-left-leave-to {
+  opacity: 0;
+  transform: translateX(-4%);
+}

package/styles/font.css

@@ -0,0 +1,28 @@
+@font-face {
+  font-family: NotoSans;
+  src: url('../assets/fonts/NotoSans-VariableFont_wdth\,wght.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 100 900;
+  font-stretch: 100%;
+  font-display: swap;
+  font-optical-sizing: auto;
+}
+
+@font-face {
+  font-family: NotoSans;
+  src: url('../assets/fonts/NotoSans-Italic-VariableFont_wdth\,wght.ttf') format('truetype');
+  font-style: italic;
+  font-weight: 100 900;
+  font-stretch: 100%;
+  font-display: swap;
+  font-optical-sizing: auto;
+}
+
+@font-face {
+  font-family: FiraCode;
+  src: url('../assets/fonts/FiraCode-VariableFont_wght.ttf') format('truetype');
+  font-style: normal;
+  font-weight: 300 700;
+  font-display: swap;
+  font-optical-sizing: auto;
+}

package/styles/index.ts

@@ -0,0 +1,5 @@
+// inherit from base layouts, remove it to get full customizations
+import '@slidev/client/styles/layouts-base.css'
+import './layout.css'
+import './fade-transition.css'
+import './font.css'