slidev-theme-tud 0.0.8 → 0.0.10

package/README.md

@@ -35,6 +35,12 @@ This theme provides the following components:
 
 None
 
+## Composables
+
+The background, logos and footer of a slide can be changed from a layout or from
+a single slide. See [docs/composables.md](./docs/composables.md) for what each
+composable accepts.
+
 ## Contributing
 
 - `pnpm install`

package/example.mdc

@@ -3,10 +3,10 @@ theme: ./
 # Hash-based routing to make reload work on GitHub Pages
 routerMode: hash
 # layout: "cover"
-author: "Your Name"
+author: "Someone else, <u>Your Name</u>, Your Prof."
 title: "Some very catchy title"
 subtitle: "With a sub-title"
-group: "Verified System Design Automation"
+group: "Here goes your group"
 location: "Dresden"
 
 # Use single quotes so YAML keeps the backslash literally (double quotes turn \t etc. into escapes).
@@ -224,6 +224,11 @@ normal lists:
 
 ---
 
+<script setup>
+import { useFooter } from "./scripts/footer"
+const footer = useFooter({ template: null })
+</script>
+
 # Latex support
 
 Did you ever use google slides for a theoretical presentation?

package/global-bottom.vue

@@ -20,10 +20,8 @@
     ></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 :class="{'opacity-0': !footer}" class="duration-[0.5s] transition-opacity text-primary">
+        <div v-html="footer" class="whitespace-pre"></div>
       </div>
 
       <!-- Footnotes teleport target (see components/Footnotes.vue) -->
@@ -31,7 +29,7 @@
         <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="{'opacity-0': !show_number}" 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>
@@ -47,6 +45,7 @@ import { computed, unref } from 'vue';
 import { expandDateTokens } from './scripts/util';
 import { formatString } from './scripts/util';
 import { slideBackgrounds, slideBgLogos, slideLogos } from './scripts/background';
+import { slideFooters, DEFAULT_FOOTER_TEMPLATE } from './scripts/footer';
 
 import rawLogo from './assets/TUD-logo-no-color.svg?raw';
 import rawLogoSmall from './assets/TUD-logo-text-small-no-color.svg?raw';
@@ -60,20 +59,27 @@ const footnotesTargetId = computed(() => `footnotes-containter-${unref(($nav as
 
 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))
+// Per-slide settings published via `useFooter()` (see scripts/footer.ts);
+// the layouts without room for a footer opt out there.
+const slideFooter = computed(() => slideFooters[$nav.value.currentPage] ?? {})
+
+const show_number = computed(() => slideFooter.value.number ?? true)
 
 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}
-  )
+
+// slide (`useFooter`) > headmatter (`footer`, `false` for no text) > theme default
+const footer_template = computed(() => {
+  if (slideFooter.value.template !== undefined) return slideFooter.value.template
+  const configured = ($slidev.configs as any).footer
+  if (configured === false) return null
+  return configured ? String(configured) : DEFAULT_FOOTER_TEMPLATE
 })
+const footer = computed(() => footer_template.value === null ? ''
+  : formatString(footer_template.value, {...$slidev.configs, date: get_date.value}))
 
 const pageLogo = computed(() => slideBgLogos[$nav.value.currentPage])
 
-</script>
+</script>

package/layouts/cover-blue.vue

@@ -16,7 +16,7 @@
 
         <div class="name absolute bottom-[120px]">
           <div v-if="!slotTags.includes('p')">
-            <p class="!text-2xl !m-0 font-bold">{{ $slidev.configs.author }}</p>
+            <p class="!text-2xl !m-0 font-bold" :innerHTML="$slidev.configs.author"></p>
             <p class="!m-0 !text-sm">{{ $slidev.configs.group }}</p>
           </div>
           <component v-else v-for="node in get_slot('p')" class="!m-0 !text-sm" :is="node" :key="node.key"/>
@@ -29,10 +29,12 @@
 import { useSlideContext } from '@slidev/client'
 import { expandDateTokens } from '../scripts/util';
 import { useBackground, useLogo } from '../scripts/background'
+import { useFooter } from '../scripts/footer'
 import { computed, useSlots } from 'vue'
 
 useBackground('primary')
 useLogo({ text: 'white' })
+useFooter({ template: null, number: false })
 
 const slotTags = computed(() => (useSlots().default?.() || []).map(e => e.type));
 const { $slidev } = useSlideContext()
@@ -56,5 +58,9 @@ const get_date = computed(() => {
   .title :deep(h2), .name :deep(p) {
     color: white;
   }
+  .name :deep(u) {
+    text-decoration-thickness: 3px;
+    text-underline-offset: 5px;
+  }
 }
 </style>

package/layouts/cover-white.vue

@@ -16,7 +16,7 @@
 
         <div class="name absolute bottom-[120px] text-gray">
           <div v-if="!slotTags.includes('p')">
-            <p class="!text-2xl !m-0 font-bold">{{ $slidev.configs.author }}</p>
+            <p class="!text-2xl !m-0 font-bold" :innerHTML="$slidev.configs.author"></p>
             <p class="!m-0 !text-sm">{{ $slidev.configs.group }}</p>
           </div>
           <component v-else v-for="node in get_slot('p')" class="!m-0 !text-sm" :is="node" :key="node.key"/>
@@ -29,9 +29,11 @@
 import { useSlideContext } from '@slidev/client'
 import { expandDateTokens } from '../scripts/util';
 import { useLogo } from '../scripts/background'
+import { useFooter } from '../scripts/footer'
 import { computed, useSlots } from 'vue'
 
 useLogo({ text: 'primary' })
+useFooter({ template: null, number: false })
 
 const slotTags = computed(() => (useSlots().default?.() || []).map(e => e.type));
 const { $slidev } = useSlideContext()
@@ -54,5 +56,9 @@ const get_date = computed(() => {
   .title :deep(h2) {
     @apply text-gray;
   }
+  .name :deep(u) {
+    text-decoration-thickness: 3px;
+    text-underline-offset: 5px;
+  }
 }
 </style>

package/layouts/section-blue.vue

@@ -10,8 +10,10 @@
 
 <script setup lang="ts">
 import { useBackground, useLogo } from '../scripts/background'
+import { useFooter } from '../scripts/footer'
 useBackground('primary')
 useLogo({ small: 'white' })
+useFooter({ template: null, number: false })
 // TODO generalize over bg color via parameter
 </script>
 

package/layouts/section-n.vue

@@ -21,6 +21,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useBackground, useBackgroundLogo, useLogo, type BackgroundLogo, type MarkTransform } from '../scripts/background'
+import { useFooter } from '../scripts/footer'
 import { asIndex, resolveColorName, toCssColor } from '../scripts/color'
 
 const { variant = 1, colors = {} } = defineProps<{
@@ -42,6 +43,7 @@ const textColor = computed(() => resolveColorName(text, 'text', defaultIndex))
 const textCss = computed(() => toCssColor(textColor.value))
 
 useBackground(bgColor)
+useFooter({ template: null, number: false })
 
 // SVG is 100x100; slide is 1280x720, and the transform origin is (50,50).
 // Values feed MarkTransform (see scripts/background.ts): { scale, x, y, rotate? }.

package/layouts/section-white.vue

@@ -9,8 +9,10 @@
 </template>
 <script setup lang="ts">
 import { useLogo } from '../scripts/background'
+import { useFooter } from '../scripts/footer'
 
 useLogo({ small: 'primary' })
+useFooter({ template: null, number: false })
 </script>
 <style>
 .slidev-layout.section-white {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-tud",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
   "description": "Corporate TUD theme for SliDev",
   "keywords": [

package/scripts/background.ts

@@ -1,22 +1,9 @@
 /// <reference types="vite/client" />
-import { reactive, toValue, watchEffect } from 'vue'
+import { toValue } from 'vue'
 import type { MaybeRefOrGetter } from 'vue'
-import { useSlideContext } from '@slidev/client'
+import { createRegistry } from './util'
 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>) {

package/scripts/footer.ts

@@ -0,0 +1,48 @@
+import { toValue } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+import { createRegistry } from './util'
+
+/** The footer text used when neither a slide nor the headmatter provides one. */
+export const DEFAULT_FOOTER_TEMPLATE = '{title} • {author}'
+
+export interface Footer {
+  /**
+   * The footer text, or `null` for none.
+   * Defaults to the headmatter's `footer`, else {@link DEFAULT_FOOTER_TEMPLATE}.
+   */
+  template?: string | null
+  /** Whether the page number (+ click counter) is shown (default: `true`) */
+  number?: boolean
+}
+
+/** Shorthand accepted by {@link useFooter}: a `string` or `null` sets {@link Footer.template}. */
+export type FooterInput = string | null | Footer
+
+const footerReg = createRegistry<Footer>()
+export const slideFooters = footerReg.store
+
+/** Normalize the {@link useFooter} shorthands into a {@link Footer}. */
+export function toFooter(footer: FooterInput | undefined): Footer {
+  if (footer === undefined) return {}
+  if (footer === null || typeof footer === 'string') return { template: footer }
+  return footer
+}
+
+/**
+ * Override the footer of the slide this is called on.
+ *
+ * Call it from a layout's or a slide's `setup`. The text and the page number
+ * are independent, and each field left unset keeps its default — so the footer
+ * stays visible with its usual content unless asked otherwise.
+ *
+ * ```ts
+ * useFooter({ template: null, number: false }) // no footer at all
+ * useFooter('{title} — {subtitle}')            // keep it, change the text
+ * useFooter(null)                              // only the page number
+ * useFooter({ number: false })                 // only the text
+ * useFooter(() => (done ? null : '{title}'))   // reactive: refs and getters work too
+ * ```
+ */
+export function useFooter(footer: MaybeRefOrGetter<FooterInput>) {
+  footerReg.publish(() => toFooter(toValue(footer)))
+}

package/scripts/util.ts

@@ -4,8 +4,9 @@
 // "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";
+import { getCurrentInstance, inject, reactive, ref, toValue, watchEffect } from "vue";
+import type { MaybeRefOrGetter, Ref } from "vue";
+import { useSlideContext } from "@slidev/client";
 
 export const WIDTH = 1280
 export const HEIGHT = 720
@@ -26,6 +27,41 @@ export function useScale(): Ref<number> {
   return inject<Ref<number>>("$$slidev-slide-scale", ref(1));
 }
 
+// How deeply the calling component is nested. A slide's own `<script setup>`
+// runs in the component that *renders* the layout, so it always sits above it.
+function componentDepth() {
+  let depth = 0
+  for (let i = getCurrentInstance()?.parent; i; i = i.parent) depth++
+  return depth
+}
+
+/**
+ * A per-slide value store.
+ *
+ * `publish` is meant to be called from a layout's (or a slide's) `setup`; it
+ * records the value under the slide it was called on, so that the globals
+ * (e.g. `global-bottom.vue`) can look it up by page number. Values stay
+ * reactive: refs/getters are re-evaluated whenever their sources change.
+ */
+export function createRegistry<T>() {
+  const store = reactive<Record<number, T>>({})
+  // keep outside of `store` to avoid `watchEffect` dep. cycle
+  const owner: Record<number, number> = {}
+
+  function publish(value: MaybeRefOrGetter<T>) {
+    const page = toValue(useSlideContext().$page)
+    const depth = componentDepth() // fix priority order
+    watchEffect(() => {
+      const resolved = toValue(value)
+      if (owner[page] !== undefined && depth > owner[page]) return
+      owner[page] = depth
+      store[page] = resolved
+    })
+  }
+
+  return { store, publish }
+}
+
 export function formatString(template : string, values : any) {
   return template.replace(/{(\w+)}/g, (_, key) => values[key] ?? `{${key}}`);
 }