slidev-theme-tud-db 0.0.2 → 0.0.3

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.3",
   "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)
+}