slidev-theme-tud 0.0.0

package/styles/layout.css

@@ -0,0 +1,184 @@
+:root {
+  /* default theme color */
+  /* can be overrided by uses `themeConfig` option */
+  --slidev-theme-primary: var(--theme-primary);
+  /* font-family: NotoSans; */
+}
+
+
+.slidev-layout {
+  @apply p-0;
+  font-family: NotoSans, serif;
+  font-style: normal;
+  font-variation-settings: "wdth" 100;
+  height: 100%;
+  @apply text-gray;
+  /* ![alt text](img){.caption} -> image with its alt text as a numbered,
+     LaTeX-style caption underneath. Markup is emitted in vite.config.ts. */
+  .caption-figure {
+    /* `table` sizes the figure to the image's width; the table-caption then
+       wraps to that width instead of stretching the figure wider (the classic
+       LaTeX look). mx-auto centers the whole figure on the slide. */
+    @apply table mx-auto;
+    img {
+      @apply block mb-1;
+    }
+  }
+  .caption-text {
+    caption-side: bottom;
+    /* centered while it fits on one line, justified once it wraps */
+    text-align: justify;
+    /* text-align-last: center; */
+    @apply table-caption text-sm text-gray leading-snug;
+  }
+  /* The bold "Figure N:" / "Table N:" prefix. The number itself is computed
+     deck-wide at build time (see vite.config.ts), not via a CSS counter — CSS
+     counters can't span slides because off-screen slides are display:none. */
+  .caption-label {
+    @apply font-bold;
+  }
+
+  /* Table captions: a paragraph marked `{.caption}` right after a table becomes
+     its caption; add `{.numbered}` for a "Table N:" prefix. vite.config.ts wraps
+     the table + caption in this `display: table` box — same trick as
+     .caption-figure — so the caption wraps to the table's width rather than
+     stretching it, and the whole thing stays centered. The caption itself reuses
+     the figure `.caption-text` look. */
+  .caption-table {
+    @apply table mx-auto mb-6;
+    table {
+      /* the table is the box's content now; drop its own outer spacing */
+      @apply mb-1 mx-0;
+    }
+  }
+
+  h1 {
+    @apply font-bold text-4xl mt-0 mb-8 text-primary;
+  }
+  h2 {
+    @apply font-bold text-2xl mt-0 mb-6 text-primary;
+  }
+  p {
+    @apply text-xl mt-0 mb-4 text-gray;
+  }
+  img {
+    @apply z-10;
+  }
+
+
+  /* &.cover .content,
+  &.cover-white .content,
+  &.section .content,
+  &.section-blue .content {
+    h1 {
+      @apply absolute bottom-[390px] m-0;
+    }
+    h2 {
+      @apply absolute top-[366.645px];
+    }
+    p {
+      @apply absolute top-[462.723px] m-0;
+    }
+  } */
+  /* &.cover .content, */
+
+  pre {
+    @apply mb-4;
+  }
+
+  ul {
+    @apply mb-4;
+  }
+
+  ol {
+    @apply mb-4;
+  }
+
+  li::marker {
+    @apply text-primary;
+  }
+
+  /* Tables follow the same corporate idiom as blockquotes: square corners,
+     a solid-blue header bar with white text, and the light-blue tint for
+     zebra striping. */
+  table {
+    border-collapse: collapse;
+    /* override Slidev's base `table { w-full }` so tables shrink to content */
+    width: fit-content;
+    @apply text-xl mb-6 mx-auto;
+    th {
+      @apply bg-primary text-white;
+      @apply font-bold px-3 py-2 text-left;
+    }
+    td {
+      border-bottom: 1px solid #d8d8d8;
+      @apply px-3 py-2 text-gray;
+    }
+    tbody tr:nth-child(even) {
+      /* @apply bg-[color-mix(in_srgb,var(--slidev-theme-primary)_5%,white)]; */
+    }
+    tbody tr {
+      @apply bg-[color-mix(in_srgb,var(--slidev-theme-primary)_5%,white)]
+    }
+    tbody tr:last-child td {
+      @apply border-b-2 border-b-primary;
+    }
+  }
+
+  blockquote:has(> h1) {
+    border-left: none;
+  }
+  blockquote {
+    border-radius: 0;
+    /* border-left: 4px solid #4c8ac6; */
+    /* background-color: #EFF5FA; */
+    /* display: inline-block; */
+    @apply px-2 py-[0.1px] mb-6 border-l-[4px] border-l-primary bg-[color-mix(in_srgb,var(--slidev-theme-primary)_5%,white)];
+    h1 {
+      @apply text-2xl text-white bg-primary -m-2 mb-2 px-2 py-2;
+      code {
+        @apply bg-white/10;
+      }
+    }
+    p {
+      @apply p-0 my-2;
+    }
+    /* .katex-display {
+      @apply m-0;
+    }
+    p:has(> .katex-display) {
+      @apply pb-4;
+    } */
+  }
+  :not(pre) > code {
+    @apply bg-gray/10;
+  }
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-delay: 0ms;
+  animation-duration: 700ms;
+}
+/* control the whole transition container */
+::view-transition-group(*) {
+  animation-duration: 1000ms;
+  animation-timing-function: cubic-bezier(.4,0,.2,1);
+}
+
+/* outgoing element disappears faster */
+::view-transition-old(*) {
+  animation-duration: 400ms;
+}
+
+/* incoming element fades slightly later */
+::view-transition-new(*) {
+  animation-duration: 700ms;
+  animation-delay: 150ms;
+}
+
+::view-transition-old(.simple),
+::view-transition-new(.simple) {
+  animation-duration: 1000ms;
+  animation-delay: 0ms;
+}

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "preserve",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "types": ["vite/client", "@slidev/types"],
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "allowImportingTsExtensions": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "strict": false, // Non-strict on purpose
+    "noImplicitAny": false
+  },
+  "vueCompilerOptions": {
+    "target": 3.5
+  },
+  "include": [
+    "*.ts",
+    "*.vue",
+    "shims.d.ts",
+    "layouts/**/*.vue",
+    "components/**/*.vue",
+    "setup/**/*",
+    "scripts/**/*"
+  ],
+  "exclude": ["node_modules", "dist", ".direnv", "resources"]
+}

package/uno.config.ts

@@ -0,0 +1,35 @@
+import { defineConfig } from 'unocss'
+import { colors, paletteNames } from './scripts/color'
+
+// Expose the same palette as CSS custom properties on :root.
+// e.g. --theme-primary --theme-blue --theme-blue-1 ...
+const paletteVars = Object.entries(colors).flatMap(([name, value]) =>
+  typeof value === 'string'
+    ? [`--theme-${name}: ${value};`]
+    : Object.entries(value).map(([shade, hex]) =>
+        `--theme-${name}${shade === 'DEFAULT' ? '' : `-${shade}`}: ${hex};`)
+)
+
+// A class per color (to change the color of components)
+// e.g. .red { --slidev-theme-primary: var(--theme-red) }
+const primaryClasses = paletteNames.map((name) =>
+  `.${name} {\n  --slidev-theme-primary: var(--theme-${name});\n}`
+)
+
+export default defineConfig({
+  theme: { colors },
+  preflights: [
+    { getCSS: () => `:root {\n  ${paletteVars.join('\n  ')}\n}` },
+    { getCSS: () => primaryClasses.join('\n') },
+  ],
+  rules: [
+    [/^vt-([\w-]+)$/, ([, name]) => ({ "view-transition-name": name })],
+    // this variant does only a simple cross-fade without and opacity shenanigans
+    [/^vtcf-([\w-]+)$/, ([, name]) => ({ "view-transition-name": name, "view-transition-class": "simple" })],
+  ]
+  // shortcuts: {
+  //   // custom the default background
+  //   'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])',
+  // },
+  // ...
+})

package/vite.config.ts

@@ -0,0 +1,29 @@
+import { resolve } from 'node:path'
+import { defineConfig } from 'vite'
+import { setupFootnotes, setupFigureCaptions, setupTableCaptions } from './markdown'
+
+export default defineConfig({
+  slidev: {
+    vue: {
+      /* vue options */
+    },
+    markdown: {
+      // Theme markdown customizations (footnotes, figure/table captions,
+      // deck-wide numbering) — see markdown.ts.
+      markdownSetup: (md) => {
+        setupFootnotes(md)
+        setupFigureCaptions(md)
+        setupTableCaptions(md)
+      },
+    },
+  },
+
+  server: {
+    watch: {
+      ignored: [
+        '**/.direnv/**', '**/.vscode/**',
+        resolve(import.meta.dirname, 'resources/**'),
+      ],
+    },
+  },
+})