slidev-theme-tud 0.0.0

package/components/Footnotes.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { useSlideContext } from '@slidev/client'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, unref, watch } from 'vue'
+
+// Markdown footnotes are wrapped in this component by the footnote render-rule
+// override in vite.config.ts. Instead of rendering inline at the bottom of the
+// slide (where they get caught by slide transitions), we teleport them into a
+// target in global-bottom.vue. That layer is rendered *outside* Slidev's
+// transition group, so the footnotes no longer animate, and they sit right
+// next to the footer for easy styling.
+const { $nav, $page, $clicks } = useSlideContext()
+
+// Each mounted slide (the active one, preloaded neighbours, every print page)
+// renders its own <Footnotes>. Only the slide that is currently shown teleports
+// into the shared target; the others render nothing (see v-if below) so they
+// neither collide in the target nor flash their footnotes in-place while
+// sliding out during a transition.
+const isActive = computed(() => unref($page) === unref(($nav as any).value.currentPage))
+
+// The target id is scoped to the page number. In print/export each page has
+// its own global-bottom with a page-scoped nav, so this keeps every page's
+// footnotes pointed at *its own* target instead of all resolving to the first.
+const target = computed(() => `#footnotes-containter-${unref($page)}`)
+
+// --- Footnote <-> reference visibility mirroring -----------------------------
+// markdown-it-footnote already links each footnote to its in-text references:
+//   reference: <sup class="footnote-ref"><a href="#fnN" id="fnrefN[:k]">[N]</a>
+//   footnote:  <li id="fnN" class="footnote-item">
+// so a footnote `fnN` corresponds to every `.footnote-ref a[href="#fnN"]`.
+//
+// The references live in the slide body and may sit inside a `v-click` (or any
+// other reveal), which fades them via opacity. Because the footnote block is
+// teleported out of the slide it no longer shares that opacity, so on its own
+// it would always be fully visible. We mirror it here: each footnote item takes
+// the *max* opacity of its references (visible as soon as any one reference is),
+// reading the live, mid-transition value so the footnote fades in lockstep.
+
+// Hidden marker that stays in the (non-teleported) slide body, used purely to
+// locate the slide root that contains this instance's references.
+const anchorEl = ref<HTMLElement | null>(null)
+// Wrapper around the teleported list; `display: contents` keeps it transparent
+// to layout while giving us a handle on *this* instance's footnote items.
+const listEl = ref<HTMLElement | null>(null)
+let slideRoot: HTMLElement | null = null
+
+// Cumulative (visible) opacity of `el` relative to `root`: the product of every
+// opacity along the ancestor chain, so nested reveals compose correctly.
+function visibleOpacity(el: HTMLElement, root: HTMLElement) {
+  let opacity = 1
+  let node: HTMLElement | null = el
+  while (node) {
+    opacity *= Number.parseFloat(getComputedStyle(node).opacity) || 0
+    if (node === root)
+      break
+    node = node.parentElement
+  }
+  return opacity
+}
+
+// Mirror every footnote item's opacity onto the max of its references' opacity.
+// Returns whether anything changed this pass (used to detect a settled fade).
+function syncOnce() {
+  const list = listEl.value
+  if (!slideRoot || !list)
+    return false
+  let changed = false
+  list.querySelectorAll<HTMLElement>('.footnote-item').forEach((item) => {
+    const refs = slideRoot!.querySelectorAll<HTMLElement>(
+      `.footnote-ref a[href="#${item.id}"]`,
+    )
+    let max = 0
+    refs.forEach((a) => {
+      const o = visibleOpacity(a, slideRoot!)
+      if (o > max)
+        max = o
+    })
+    // No reference found (e.g. print quirks) -> leave the footnote untouched.
+    const next = refs.length ? String(max) : ''
+    if (item.style.opacity !== next) {
+      item.style.opacity = next
+      changed = true
+    }
+  })
+  return changed
+}
+
+// References fade over a CSS transition; follow it frame-by-frame until the
+// value settles (a few stable frames) instead of snapping to the end state.
+let rafId = 0
+function syncAnimated() {
+  cancelAnimationFrame(rafId)
+  let stable = 0
+  const step = () => {
+    stable = syncOnce() ? 0 : stable + 1
+    if (stable < 4)
+      rafId = requestAnimationFrame(step)
+  }
+  step()
+}
+
+onMounted(async () => {
+  slideRoot = anchorEl.value?.closest<HTMLElement>('[data-slidev-no]') ?? null
+  // A reference's fade is driven by CSS, so its transition events are our cue
+  // to re-follow the opacity even when no click index changed.
+  slideRoot?.addEventListener('transitionstart', syncAnimated)
+  slideRoot?.addEventListener('transitionend', syncAnimated)
+  await nextTick()
+  syncAnimated()
+})
+
+onBeforeUnmount(() => {
+  cancelAnimationFrame(rafId)
+  slideRoot?.removeEventListener('transitionstart', syncAnimated)
+  slideRoot?.removeEventListener('transitionend', syncAnimated)
+})
+
+// Re-sync when this slide becomes the active (teleporting) one, and on every
+// click step that may reveal/hide a reference.
+watch(isActive, () => nextTick(syncAnimated))
+watch($clicks, () => nextTick(syncAnimated))
+</script>
+
+<template>
+  <!-- Stays in the slide body; only used to find the slide root above. -->
+  <span ref="anchorEl" class="hidden" />
+  <!-- `defer` (Vue 3.5+) resolves the target *after* the render flush, so when
+       currentPage flips the teleport finds global-bottom's freshly-rendered
+       target instead of racing it (which made the footnotes pop in late). -->
+  <Teleport v-if="isActive" :to="target" defer>
+    <div ref="listEl" class="contents">
+      <slot />
+    </div>
+  </Teleport>
+</template>
+
+<style>
+/* Inline footnote reference ([^1] superscript) — stays in the slide body. */
+.footnote-ref a {
+  @apply no-underline border-0 text-gray;
+}
+
+/* The footnotes *block* is teleported into global-bottom.vue */
+.footnotes {
+  @apply flex-auto flex flex-col justify-end pt-1 text-gray border-t-1 border-gray;
+}
+.footnotes p {
+  @apply m-0 text-xs;
+}
+.footnotes-list {
+  /* UnoCSS resets list-style off every ol/ul, which dropped the footnote
+     numbers; list-decimal re-enables them. pl-7 leaves room for the markers. */
+  @apply m-0 list-decimal pl-7;
+}
+.footnotes ::marker {
+  /* numbers a touch lighter than the note text so they read as labels */
+  @apply text-xs text-gray;
+}
+
+/* markdown-it emits a separator rule and per-note backref links we don't want. */
+.footnotes-sep,
+.footnote-backref {
+  @apply hidden;
+}
+</style>

package/example.mdc

@@ -0,0 +1,372 @@
+---
+theme: ./
+# Hash-based routing to make reload work on GitHub Pages
+routerMode: hash
+# layout: "cover"
+author: "Your Name"
+title: "Some very catchy title"
+subtitle: "With a sub-title"
+group: "Verified System Design Automation"
+location: "Dresden"
+
+# Use single quotes so YAML keeps the backslash literally (double quotes turn \t etc. into escapes).
+date: '\today' # \today -> current date in the long format; \today[YYYY-MM-DD] for a custom day.js format
+# date: '\now[YYYY-MM-DD HH:mm:ss]' # \now defaults to date + time; both \today and \now accept any day.js format
+# date: "January 1st, 2000"
+
+# footer: "{title}\n{group} / {author}\n{location}, {date}"
+# footer: false
+layout: "cover-white"
+addons:
+  - slidev-component-progress
+---
+
+<!-- If you want to have a different title on
+  the slide than in the metadata use a level 1 heading -->
+
+# Here goes your fancy Title
+
+<!-- same thing for the sub-title -->
+## With another sub-title
+
+<!--
+The last comment on every page will be display
+as the speaker notes in the presenter view
+-->
+
+---
+layout: "cover-blue"
+---
+
+# A blue cover slide
+
+---
+layout: "section-white"
+---
+
+# A white section
+
+## Using `section-white`
+
+---
+layout: "section"
+---
+
+
+# And a blue section
+
+## Using `section` or `section-blue`
+
+---
+layout: "section-n"
+variant: 1
+---
+
+
+# Here is the title of the section
+
+Here is a subtitle, the name of the speaker, and additional
+contextual information.
+
+You can customize the colors within the TUD color set.
+
+::detail::
+
+This slide uses `section-n` with `variant: 1`.
+
+---
+layout: "section-n"
+variant: 2
+---
+
+
+
+# Here is the title of the section
+
+Here is a subtitle, the name of the speaker, and additional<br>
+contextual information.
+
+You can customize the colors within the TUD color set.
+
+This slide uses `section-n` with `variant: 2`.
+
+
+---
+layout: "section-n"
+variant: 3
+---
+
+
+# Another section
+
+
+Here is a subtitle, the name of the speaker, and additional<br>
+contextual information.
+
+You can customize the colors within the TUD color set.
+
+::detail::
+
+This slide uses `section-n` with `variant: 3`.
+
+---
+layout: "section-n"
+variant: 4
+---
+
+
+# Another section
+
+## Using `section-n` with `variant: 4`
+
+---
+layout: "section-n"
+variant: 5
+---
+
+
+# Another section
+
+## Using `section-n` with `variant: 5`
+
+---
+layout: "section-n"
+variant: 6
+---
+
+
+# Another section
+
+## Using `section-n` with `variant: 6`
+
+---
+
+
+# A `default` slide
+
+This slide shows the default layout
+
+The TUD theme also supports _italic_, **bold** and `code` text,
+as well as other markdown features like bullet lists:
+
+- statement 1
+- statement 2
+
+## 2nd level heading
+
+normal lists:
+
+1. test
+2. test
+
+---
+
+# Other markdown features
+
+::div{.flex.justify-between}
+## Blockquotes:
+
+> This is a very important
+> quote from a very important person
+::
+
+> # Theorem 1 {.test}
+> Bla bla bla bla blaa
+> theorem bla bla bla
+>
+> $$f(x) := y \times z^2$$
+
+::div{.flex.justify-between.items-center}
+  ::div
+  | Left Align | Center Align | Right Align |
+  |:-----------|:------------:|------------:|
+  | 1          |      1       |           1 |
+  | 2          |      2       |           2 |
+  | 3          |      3       |           3 |
+
+  A plain caption underneath the table. {.caption}
+  ::
+
+  ## Tables
+
+  ::div
+  | Left Align | Center Align | Right Align |
+  |:-----------|:------------:|------------:|
+  | 1          |      1       |           1 |
+  | 2          |      2       |           2 |
+  | 3          |      3       |           3 |
+
+  A numbered caption with a "Table N:" prefix. {.caption .numbered}
+  ::
+::
+
+---
+
+# More numbered tables
+
+::div{.flex.justify-between.items-center}
+  ::div
+  | Left Align | Center Align | Right Align |
+  |:-----------|:------------:|------------:|
+  | 1          |      1       |           1 |
+  | 2          |      2       |           2 |
+  | 3          |      3       |           3 |
+
+  A plain caption underneath the table. {.caption .numbered}
+  ::
+
+  ## Tables
+
+  ::div
+  | Left Align | Center Align | Right Align |
+  |:-----------|:------------:|------------:|
+  | 1          |      1       |           1 |
+  | 2          |      2       |           2 |
+  | 3          |      3       |           3 |
+
+  A numbered caption with a "Table N:" prefix. {.caption .numbered}
+  ::
+::
+
+---
+
+# Latex support
+
+Did you ever use google slides for a theoretical presentation?
+Well then you probably had a lot of pain with formulas.
+
+But with the right tools formulas can be as easy as writing a bit of latex.
+
+$$
+\forall\, \green{p}~src.\\
+\texttt{\red{in}}[src] = \green{p} \to \lozenge~\texttt{\blue{out}}[p.dst] = \green{p}
+$$
+
+Note the usage of the official color scheme inside of latex formulas
+
+---
+layout: "cols"
+---
+
+# A slots layout with multiple columns
+
+This layout is named `cols`
+
+> You can put some content above the columns that will span then whole slide
+
+::col-1::
+
+## First {.red}
+
+This shows on the left in red
+
+::col-3::
+
+## Third {.green}
+
+This shows on the right in green
+
+::col-2::
+
+## Second {.magenta}
+
+This shows in the middle in magenta
+
+::bottom::
+
+::div{.violet}
+> # The `bottom` slot
+>
+> This is shown on the bottom (below the columns) and spans the whole slide again.
+::
+
+---
+
+# Code examples
+
+Enjoy the ligatures of FiraCode: (And automatic syntax highlighting)
+
+```coq /stalls/ [some-title.js ~~]
+Lemma reset_all_inputs_nsp_correct {data_t dims IdxEnv} {lcl : idx_t dims} (nsp : @noc_state_partial data_t dims IdxEnv) ext1 ext2
+  (stalls : vect bool (length dims * 2 * 2)) :
+  (∀ i,
+    vect_nth stalls i = false ->
+    vect_nth nsp.(nsp_pkgs1)?[vect_nth (list_neighbors_du lcl) (idx_div 2 i)] i = None) ->
+  ∀ sig REnv (sigma : ∀ f : ext_fn_t dims, Sig_denote (Sigma (data_t:=data_t) dims f)) Γv Q,
+  kpm_entails_ret (R:=R dims) (REnv:=REnv) (represent_nsp (nsp_map_pkgs1 nsp (in_channel_update lcl (reset_all_inputs_spec stalls))) ext1 ext2) Γv (tau:=unit_t) (eq Ob) Q ->
+  kpm_entails     (R:=R dims) (REnv:=REnv) (represent_nsp nsp ext1 ext2) Γv (wp_total (sigma:=sigma) (sig:=sig) (InternalCall (reset_all_inputs lcl) (ConstCtx #{
+    ("stalls", array_t (bits_t 1) (length dims * 2 * 2)) => represent stalls
+  }#)) Q).
+```
+
+```js
+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) } }
+    }),
+  }
+}
+```
+
+---
+
+# Images with captions
+
+Add `{.caption}` to an image and its alt text becomes a LaTeX-style
+caption below it:
+
+![A plain caption](https://placehold.co/400x300){.caption .w-40}
+
+::div{.flex.justify-between}
+  ::div{.flex.flex-col.items-center}
+    Add `{.numbered}` as well for a "Figure N:" prefix:
+
+    ![A picture with a very long caption that hopefully eventually line breaks into another second caption line.](https://placehold.co/400x300){.caption .numbered .w-60}
+  ::
+  ::div{.flex.flex-col.items-center}
+    Without the class, an image renders as usual (no caption):
+
+    ![this alt text stays hidden](https://placehold.co/400x300){.w-60}
+  ::
+::
+
+---
+
+<!-- # Footnotes -->
+
+<v-click>
+
+And another footnote here[^note2][]
+
+</v-click>
+
+[^note2]: another 2nd footnote
+
+
+Test[^note][]
+
+[^note]: Some test
+
+---
+
+# More Footnotes
+
+<v-click>
+
+And another footnote here[^note2][]
+
+</v-click>
+
+[^note2]: different footnote
+
+
+Test[^note][] [^note3][]
+
+[^note]: another one
+[^note3]: another one

package/flake.lock

@@ -0,0 +1,61 @@
+{
+  "nodes": {
+    "flake-utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1731533236,
+        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1768649915,
+        "narHash": "sha256-jc21hKogFnxU7KXSVTRmxC7u5D4RHwm9BAvDf5/Z1Uo=",
+        "owner": "nixos",
+        "repo": "nixpkgs",
+        "rev": "3e3f3c7f9977dc123c23ee21e8085ed63daf8c37",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nixos",
+        "ref": "release-25.05",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "flake-utils": "flake-utils",
+        "nixpkgs": "nixpkgs"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

package/flake.nix

@@ -0,0 +1,22 @@
+{
+  inputs = {
+    nixpkgs.url = "github:nixos/nixpkgs/release-25.05";
+    flake-utils.url = "github:numtide/flake-utils";
+  };
+
+  outputs = { self, nixpkgs, flake-utils }:
+    flake-utils.lib.eachDefaultSystem (system:
+      let
+        pkgs = import nixpkgs {
+          inherit system;
+          overlays = [ ];
+        };
+      in
+      {
+        # devShells.default = self.packages.${system}.default;
+        devShells.default = pkgs.mkShell {
+          packages = [ pkgs.pnpm pkgs.nodejs ];
+        };
+      }
+    );
+}

package/global-bottom.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <Background
+      :bl="pageLogo?.bl" :tr="pageLogo?.tr" :fill="pageLogo?.fill"
+      :background="pageBackground"
+    />
+
+    <div v-html="rawLogoText"
+      :style="{ fill: logos.text }" :class="{'opacity-0': !logos.text}"
+      class="[&>svg]:w-[220px] duration-[0.5s] transition-[opacity,fill] absolute left-[64px] top-[42px] z-10"
+    ></div>
+    <div v-html="rawLogo"
+      :style="{ fill: logos.normal }" :class="{'opacity-0': !logos.normal}"
+      class="[&>svg]:w-[68px] duration-[0.5s] transition-[opacity,fill] absolute left-[64px] top-[42px] z-10"
+    ></div>
+
+    <div v-html="rawLogoSmall"
+      :style="{ fill: logos.small }" :class="{'opacity-0': !logos.small}"
+      class="duration-[0.5s] transition-[opacity,fill] absolute left-[64px] top-[660px] z-10 w-[54px]"
+    ></div>
+
+    <footer class="absolute bottom-0 h-16 pb-[13px] pr-[64px] pl-[164px] flex items-baseline gap-x-6 w-full z-100">
+      <div :class="{'opacity-0': !show_footer}" class="duration-[0.5s] transition-opacity text-primary">
+        <div v-if="$slidev.configs.footer !== false" class="whitespace-pre">
+          {{ footer }}
+        </div>
+      </div>
+
+      <!-- Footnotes teleport target (see components/Footnotes.vue) -->
+      <div class="relative flex-1 min-w-0 self-end flex flex-col h-full">
+        <div :id="footnotesTargetId" class="absolute bottom-0 w-full min-h-full pb-2"></div>
+      </div>
+
+      <div :class="{'opacity-0': !show_footer}" class="duration-[0.5s] transition-opacity w-[66px]">
+        <div class="flex items-baseline justify-center">
+          <span class="flex-1 text-right font-bold text-lg text-primary">{{ $nav.currentPage }}</span>
+          <span :class="{ 'opacity-0': $nav.clicksTotal == 0 }" class="text-left text-gray text-xs">.</span>
+          <span :class="{ 'opacity-0': $nav.clicksTotal == 0 }" class="flex-1 text-left text-gray text-xs">{{ $nav.clicks+1 }}</span>
+        </div>
+      </div>
+    </footer>
+  </div>
+</template>
+<script setup lang="ts">
+import { useSlideContext } from '@slidev/client'
+import { computed, unref } from 'vue';
+import { expandDateTokens } from './scripts/util';
+import { formatString } from './scripts/util';
+import { slideBackgrounds, slideBgLogos, slideLogos } from './scripts/background';
+
+import rawLogo from './assets/TUD-logo-no-color.svg?raw';
+import rawLogoSmall from './assets/TUD-logo-text-small-no-color.svg?raw';
+import rawLogoText from './assets/TUD-logo-text-no-color.svg?raw';
+
+const { $slidev, $nav } = useSlideContext()
+const pageBackground = computed(() => slideBackgrounds[$nav.value.currentPage] ?? 'transparent')
+
+// use $nav instead of useNav to ensure that the export works correctly
+const footnotesTargetId = computed(() => `footnotes-containter-${unref(($nav as any).value.currentPage)}`)
+
+const logos = computed(() => slideLogos[$nav.value.currentPage] ?? {})
+
+const show_footer = computed(() => !new Set(['cover', 'cover-blue', 'cover-white', 'section', 'section-blue', 'section-white', 'section-n']).has($nav.value.currentLayout))
+
+const get_date = computed(() => {
+  const d = ($slidev.configs as any).date
+  return d ? expandDateTokens(String(d)) : d
+})
+const footer = computed(() => {
+  let fstring = "{title} • {author}"
+  return formatString(($slidev.configs as any).footer ?
+    ($slidev.configs as any).footer : fstring,
+    {...$slidev.configs, date: get_date.value}
+  )
+})
+
+const pageLogo = computed(() => slideBgLogos[$nav.value.currentPage])
+
+</script>