slidev-theme-tud 0.0.0

package/global-top.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { defineComponent, getCurrentInstance } from 'vue'
+import { useHead } from '@unhead/vue'
+
+// Favicons are imported as Vite assets (not from public/) so the bundler
+// resolves each to a hashed, base-aware URL. This works regardless of where
+// the theme is installed, unlike hardcoded "/theme/..." paths in index.html.
+import faviconIco from './assets/favicons/favicon.ico?url'
+import favicon32 from './assets/favicons/favicon-32x32.png?url'
+import favicon16 from './assets/favicons/favicon-16x16.png?url'
+import appleTouchIcon from './assets/favicons/apple-touch-icon.png?url'
+import faviconIcoDark from './assets/favicons/dark/favicon.ico?url'
+import favicon32Dark from './assets/favicons/dark/favicon-32x32.png?url'
+import favicon16Dark from './assets/favicons/dark/favicon-16x16.png?url'
+import appleTouchIconDark from './assets/favicons/dark/apple-touch-icon.png?url'
+
+useHead({
+  link: [
+    // Light color scheme
+    { rel: 'apple-touch-icon', sizes: '180x180', href: appleTouchIcon, media: '(prefers-color-scheme: light)' },
+    { rel: 'icon', type: 'image/png', sizes: '32x32', href: favicon32, media: '(prefers-color-scheme: light)' },
+    { rel: 'icon', type: 'image/png', sizes: '16x16', href: favicon16, media: '(prefers-color-scheme: light)' },
+    { rel: 'icon', href: faviconIco, sizes: 'any', media: '(prefers-color-scheme: light)' },
+    // Dark color scheme
+    { rel: 'apple-touch-icon', sizes: '180x180', href: appleTouchIconDark, media: '(prefers-color-scheme: dark)' },
+    { rel: 'icon', type: 'image/png', sizes: '32x32', href: favicon32Dark, media: '(prefers-color-scheme: dark)' },
+    { rel: 'icon', type: 'image/png', sizes: '16x16', href: favicon16Dark, media: '(prefers-color-scheme: dark)' },
+    { rel: 'icon', href: faviconIcoDark, sizes: 'any', media: '(prefers-color-scheme: dark)' },
+  ],
+})
+
+
+// `slidev-component-progress` is optional. When it is installed and
+// enabled (via `addons:`), Slidev auto-imports its <Progress>
+//
+// registering a global no-op fallback
+const app = getCurrentInstance()?.appContext.app
+if (app && !app.component('Progress')) {
+  app.component(
+    'Progress',
+    defineComponent({ name: 'Progress', inheritAttrs: false, render: () => null }),
+  )
+  app.component(
+    'MarkersShapes',
+    defineComponent({ name: 'MarkersShapes', inheritAttrs: false, render: () => null }),
+  )
+}
+// Note: setting opacity to 1 directly in the template causes problems from
+// the unocss attributify generated class
+const progressProps = {
+  level: '3',
+  height: 15,
+  thickness: '15px',
+  clicks: true,
+  opacity: 1,
+  print: true,
+  marginY: '-1px',
+  fillLast: true,
+  emptyFirst: true,
+  scale: 'clicks',
+  disable: (layout: string) =>
+    new Set(['cover', 'cover-blue', 'cover-white', 'section', 'section-blue', 'section-white', 'section-n']).has(layout),
+}
+</script>
+
+<template>
+  <div class="absolute top-0 left-0 w-full z-10">
+    <Progress v-bind="progressProps">
+      <template #marker="args"><MarkersShapes v-bind="args" shape="square" visible="hover" activeStyle="filled"/></template>
+    </Progress>
+  </div>
+</template>

package/layouts/README.md

@@ -0,0 +1,2 @@
+Note that `cover.vue` and `section.vue` are only symbolic links
+to the `cover-blue.vue` and `section-blue.vue` layouts, respectively.

package/layouts/cols.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="slidev-layout layout-cols w-full h-full">
+    <div class="content px-[64px] py-[60px]">
+      <slot></slot>
+      <div class="flex justify-between mb-8">
+        <div v-for="col in orderedCols" :key="col.num" class="col">
+          <component :is="col.fn" />
+          <!-- <slot :name="`col-${col.num}`"></slot> -->
+        </div>
+      </div>
+      <slot name="bottom"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, useSlots } from "vue";
+import { useLogo } from "../scripts/background";
+
+useLogo({ small: 'primary' });
+
+const slots = useSlots();
+
+const orderedCols = computed(() => {
+  return Object.entries(slots)
+    .filter(([name]) => name.startsWith("col-"))
+    .map(([name, fn]) => {
+      const num = parseInt(name.split("-")[1], 10);
+      return { num, fn };
+    })
+    .sort((a, b) => a.num - b.num);
+});
+</script>
+<style lang="stylus">
+.slidev-layout.layout-cols col {
+  h1 {}
+}
+</style>

package/layouts/cover-blue.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="h-full">
+    <div class="slidev-layout cover text-white">
+      <div class="content p-[64px]">
+        <!-- <slot></slot> -->
+        <div class="title absolute bottom-[340px] w-full">
+          <div class="date absolute top-0 -translate-y-full text-md">{{ get_date }}</div>
+          <h1 v-if="!slotTags.includes('h1')"> {{ $slidev.configs.title }} </h1>
+          <component v-else v-for="node in get_slot('h1')" :is="node" :key="node.key"/>
+
+          <div class="absolute bottom-0 translate-y-full">
+            <h2 v-if="!slotTags.includes('h2')"> {{ $slidev.configs.subtitle }} </h2>
+            <component v-else v-for="node in get_slot('h2')" :is="node" :key="node.key"/>
+          </div>
+        </div>
+
+        <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="!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"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { useSlideContext } from '@slidev/client'
+import { expandDateTokens } from '../scripts/util';
+import { useBackground, useLogo } from '../scripts/background'
+import { computed, useSlots } from 'vue'
+
+useBackground('primary')
+useLogo({ text: 'white' })
+
+const slotTags = computed(() => (useSlots().default?.() || []).map(e => e.type));
+const { $slidev } = useSlideContext()
+
+function get_slot(tag) {
+  return (useSlots().default?.() || []).filter(n => n.type === tag)
+}
+
+const get_date = computed(() => {
+  const d = $slidev.configs.date
+  return d ? expandDateTokens(String(d)) : d
+})
+</script>
+
+<style scoped lang="stylus">
+.content {
+  .title :deep(h1) {
+    @apply my-1;
+    color: white;
+  }
+  .title :deep(h2), .name :deep(p) {
+    color: white;
+  }
+}
+</style>

package/layouts/cover-white.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="h-full">
+    <div class="slidev-layout cover-white">
+      <div class="content p-[64px]">
+
+        <div class="title absolute bottom-[340px] w-full">
+          <div class="date absolute top-0 -translate-y-full text-gray text-md">{{ get_date }}</div>
+          <h1 v-if="!slotTags.includes('h1')"> {{ $slidev.configs.title }} </h1>
+          <component v-else v-for="node in get_slot('h1')" :is="node" :key="node.key"/>
+
+          <div class="absolute bottom-0 translate-y-full">
+            <h2 v-if="!slotTags.includes('h2')" class="text-gray"> {{ $slidev.configs.subtitle }} </h2>
+            <component v-else v-for="node in get_slot('h2')" class="text-gray" :is="node" :key="node.key"/>
+          </div>
+        </div>
+
+        <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="!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"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { useSlideContext } from '@slidev/client'
+import { expandDateTokens } from '../scripts/util';
+import { useLogo } from '../scripts/background'
+import { computed, useSlots } from 'vue'
+
+useLogo({ text: 'primary' })
+
+const slotTags = computed(() => (useSlots().default?.() || []).map(e => e.type));
+const { $slidev } = useSlideContext()
+
+function get_slot(tag) {
+  return (useSlots().default?.() || []).filter(n => n.type === tag)
+}
+
+const get_date = computed(() => {
+  const d = $slidev.configs.date
+  return d ? expandDateTokens(String(d)) : d
+})
+</script>
+
+<style scoped>
+.content {
+  .title :deep(h1) {
+    @apply m-0;
+  }
+  .title :deep(h2) {
+    @apply text-gray;
+  }
+}
+</style>

package/layouts/cover.vue

@@ -0,0 +1,10 @@
+<!-- Alias: for the `cover-blue` layout. -->
+<template>
+  <CoverBlue>
+    <slot />
+  </CoverBlue>
+</template>
+
+<script setup lang="ts">
+import CoverBlue from './cover-blue.vue'
+</script>

package/layouts/default.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="h-full">
+    <div class="slidev-layout default">
+      <div class="content px-[64px] py-[60px] w-full h-full">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLogo } from '../scripts/background'
+
+useLogo({ small: 'primary' })
+</script>

package/layouts/section-blue.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="h-full">
+    <div class="slidev-layout section-blue text-white">
+      <div class="content p-[64px] pb-8 flex flex-col justify-center h-full">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useBackground, useLogo } from '../scripts/background'
+useBackground('primary')
+useLogo({ small: 'white' })
+// TODO generalize over bg color via parameter
+</script>
+
+<style>
+.slidev-layout.section-blue {
+  h1 {
+    @apply mb-4;
+  }
+
+  h1, h2 {
+    color: white;
+  }
+
+  code {
+    @apply bg-white/10;
+  }
+}
+</style>

package/layouts/section-n.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="h-full">
+    <div class="slidev-layout section-n" :class="`section-${variant}`" :style="{ '--section-text': textCss }">
+      <div class="content content-main flex items-center absolute inset-0">
+        <div class="main w-full">
+          <slot></slot>
+        </div>
+      </div>
+      <div class="content content-detail flex items-center absolute inset-0">
+        <div class="detail w-full">
+          <slot name="detail"></slot>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useBackground, useBackgroundLogo, useLogo, type BackgroundLogo, type MarkTransform } from '../scripts/background'
+import { asIndex, resolveColorName, toCssColor } from '../scripts/color'
+
+const { variant = 1, colors = {} } = defineProps<{
+  variant?: number | string
+  colors?: {
+    bg?: number | string
+    logo?: number | string
+    text?: number | string
+  }
+}>()
+const { bg, logo, text } = colors
+
+const defaultIndex = asIndex(bg) ?? asIndex(logo) ?? Number(variant)
+
+const bgColor = computed(() => resolveColorName(bg, 'bg', defaultIndex))
+const logoFill = computed(() => resolveColorName(logo, 'logo', defaultIndex))
+const textColor = computed(() => resolveColorName(text, 'text', defaultIndex))
+// The template consumes --section-text as a CSS colour, so convert here.
+const textCss = computed(() => toCssColor(textColor.value))
+
+useBackground(bgColor)
+
+// SVG is 100x100; slide is 1280x720, and the transform origin is (50,50).
+// Values feed MarkTransform (see scripts/background.ts): { scale, x, y, rotate? }.
+const HIDDEN: MarkTransform = { scale: 5, x: 640, y: 360 }
+const sectionTransforms = computed<Pick<BackgroundLogo, 'bl' | 'tr'>>(() => {
+  switch (String(variant)) {
+    case '1':
+      return {
+        // bl: SVG (69,100) -> slide (530,493)
+        bl: { scale: 28.32, x: -8.08, y: -923 },
+        // tr: SVG (31,0) -> slide (530,493)
+        tr: { scale: 28.32, x: 1068.08, y: 1909 },
+      }
+    case '2':
+      // bl/tr: SVG (31,0) -> slide (1280,0), logo centre on vertical middle (y=360)
+      return {
+        bl: { rotate: 90, scale: 18.9474, x: 332.63, y: 360 },
+        tr: { rotate: 90, scale: 18.9474, x: 332.63, y: 360 },
+      }
+    case '3':
+      return {
+        // bl: SVG (0,40.584) -> slide (640,430)
+        bl: { scale: 20.63, x: 1671.5, y: 624.252 },
+        // tr: SVG (100,59.416) -> slide (640,430)
+        tr: { scale: 20.63, x: -391.5, y: 235.748 },
+      }
+    case '4':
+      return {
+        // bl: SVG (0,70.71) -> slide (800,360)
+        bl: { scale: 23.6, x: 1980, y: -128.756 },
+        // tr: SVG (100,29.29) -> slide (800,360)
+        tr: { scale: 23.6, x: -380, y: 848.756 },
+      }
+    case '5':
+      return {
+        // bl: SVG (0,70.71) -> slide (800,360)
+        bl: { scale: 10, x: 640 - 300, y: 360 + 50 },
+        // tr: SVG (100,29.29) -> slide (800,360)
+        tr: { scale: 10, x: 640 + 300, y: 360 - 50 },
+      }
+    case '6':
+      return {
+        // bl: SVG (17.25,37.542) -> slide (640,360), -0.5px along logo +y
+        bl: { rotate: -60, scale: 15, x: 1047.026, y: 27.75 },
+        // tr: SVG (82.75,62.458) -> slide (640,360), +0.5px along logo +y
+        tr: { rotate: -60, scale: 15, x: 232.974, y: 692.25 },
+      }
+    default:
+      return { bl: HIDDEN, tr: HIDDEN }
+  }
+})
+
+const sectionLogo = computed<BackgroundLogo>(() => ({
+  ...sectionTransforms.value,
+  fill: logoFill.value,
+}))
+useBackgroundLogo(sectionLogo)
+useLogo(computed(() => {
+  switch (String(variant)) {
+    case '1':
+    case '5':
+    case '6':
+      return { small: textColor.value }
+    case '3':
+      return { small: logoFill.value }
+    case '4':
+      return { small: bgColor.value }
+    case '2':
+    default:
+      return { }
+  }
+}))
+</script>
+<style>
+.slidev-layout.section-n {
+  code {
+    background: none;
+    @apply border-2 border-[color-mix(in_srgb,var(--section-text,white)_20%,transparent)];
+  }
+  color: var(--section-text, white);
+  h1, h2, h3, h4, h5, h6, p {
+    color: var(--section-text, white);
+  }
+  h1 {
+    @apply mb-18;
+  }
+}
+
+.slidev-layout.section-1 {
+  .content-main {
+    @apply pl-[530px] pb-[227px];
+  }
+  .content-detail {
+    @apply pr-[750px] pt-[493px];
+  }
+  .main { @apply my-[64px] mr-[64px] }
+  .detail { @apply pl-[64px] py-[64px] }
+
+}
+.slidev-layout.section-2 {
+  .content-main {
+    @apply pl-[64px] py-[66px];
+  }
+}
+.slidev-layout.section-3 {
+  .content-main {
+    @apply pb-[175px] pr-[640px]; /*pb-[290px]*/
+  }
+  .content-detail {
+    @apply pl-[640px] pt-[320px];
+  }
+  .main { @apply p-[64px] }
+  .detail { @apply p-[64px] }
+  h1 {
+    @apply mb-18;
+  }
+}
+.slidev-layout.section-4 {
+  .main { @apply p-[64px] }
+}
+
+.slidev-layout.section-5 {
+  .main { @apply text-center }
+}
+
+.slidev-layout.section-6 {
+  .main { @apply text-center }
+}
+</style>

package/layouts/section-white.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="h-full">
+    <div class="slidev-layout section-white">
+      <div class="content p-[64px] pb-8 flex flex-col justify-center h-full">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { useLogo } from '../scripts/background'
+
+useLogo({ small: 'primary' })
+</script>
+<style>
+.slidev-layout.section-white {
+  h1 {
+    @apply mb-4;
+  }
+  h2 {
+    @apply text-gray;
+  }
+  /* @apply m-0 absolute bottom-[340px]; */
+}
+</style>

package/layouts/section.vue

@@ -0,0 +1,10 @@
+<!-- Alias: for the `section-blue` layout. -->
+<template>
+  <SectionBlue>
+    <slot />
+  </SectionBlue>
+</template>
+
+<script setup lang="ts">
+import SectionBlue from './section-blue.vue'
+</script>