slidev-workspace 0.2.3 → 0.4.0

package/README.md

@@ -0,0 +1,59 @@
+# Slidev Workspace
+
+[![npm version](https://badge.fury.io/js/slidev-workspace.svg)](https://badge.fury.io/js/slidev-workspace)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+Slidev Workspace is a specialized command-line tool designed to manage and showcase multiple [Slidev](https://sli.dev) presentations. It provides a unified web interface to browse, search, and access Slidev presentations distributed across different directories.
+
+- **[Slidev Workspace Starter](https://github.com/leochiu-a/slidev-workspace-starter)** - Ready-to-use template
+- **[Live Demo](https://leochiu-a.github.io/slidev-workspace-starter/)** - See it in action
+- **[Documentation](https://leochiu-a.github.io/slidev-workspace/)**
+
+## Features
+
+✨ **Multi-presentation management** - Organize multiple Slidev presentations in one workspace  
+📱 **Responsive interface** - Clean, modern UI for presentation management  
+🔧 **Easy configuration** - Simple YAML-based configuration  
+📦 **Build & Deploy** - Built-in commands for production builds  
+🎨 **Thumbnail previews** - Visual presentation previews in the workspace
+
+## Usage
+
+Slidev Workspace provides two flexible ways to work with your presentations:
+
+### Built-in Preview Interface
+
+Use the command-line tool for an out-of-the-box solution:
+
+```bash
+slidev-workspace preview
+```
+
+This launches a responsive web interface with presentation management, search functionality, and thumbnail previews - perfect for users who want to get started quickly without building custom UI.
+
+### Content API
+
+For developers who need custom UI integration, access slide data programmatically:
+
+```typescript
+import { useSlides } from "slidev-workspace";
+
+const { slides } = useSlides();
+```
+
+The `useSlides` composable returns frontmatter data from all discovered presentations, enabling you to build entirely custom interfaces while leveraging Slidev Workspace's presentation discovery and parsing capabilities.
+
+## Quick Start
+
+Get started in 5 minutes! See our [Quick Start Guide](https://leochiu-a.github.io/slidev-workspace/getting-started/quick-start.html).
+
+## Documentation
+
+- 📚 [Quick Start Guide](https://leochiu-a.github.io/slidev-workspace/getting-started/quick-start.html) - Get up and running in 5 minutes
+- 🚀 [Deployment Guide](https://leochiu-a.github.io/slidev-workspace/getting-started/deploy.html) - Deploy to GitHub Pages
+
+## Related Projects
+
+- [Slidev](https://sli.dev) - Presentation slides for developers
+- [Vue.js](https://vuejs.org) - The progressive JavaScript framework
+- [Vite](https://vitejs.dev) - Next generation frontend tooling

package/dist/cli.js

@@ -17,7 +17,11 @@ const DEFAULT_CONFIG = {
 	slidesDir: ["./slides"],
 	outputDir: "./dist",
 	baseUrl: "/",
-	exclude: ["node_modules", ".git"]
+	exclude: ["node_modules", ".git"],
+	hero: {
+		title: "Slide Deck",
+		description: "Browse all available slide decks and use the search function to quickly find what you need."
+	}
 };
 function loadConfig(workingDir) {
 	const configPaths = [
@@ -240,7 +244,7 @@ function slidesPlugin() {
 			});
 		},
 		resolveId(id) {
-			if (id === "slidev:content") return id;
+			if (id === "slidev:content" || id === "slidev:config") return id;
 		},
 		load(id) {
 			if (id === "slidev:content") try {
@@ -252,6 +256,16 @@ export default slidesData;`;
 				return `export const slidesData = [];
 export default slidesData;`;
 			}
+			if (id === "slidev:config") try {
+				const config = loadConfig();
+				const configData = { hero: config.hero };
+				return `export const configData = ${JSON.stringify(configData, null, 2)};
+export default configData;`;
+			} catch (error) {
+				console.error("Error loading config:", error);
+				return `export const configData = { hero: {} };
+export default configData;`;
+			}
 		}
 	};
 }
@@ -303,7 +317,9 @@ async function buildAllSlides() {
 			console.log(`📦 Building slide: ${slideName}`);
 			try {
 				const baseUrl = config.baseUrl.endsWith("/") ? config.baseUrl : config.baseUrl + "/";
-				const buildCmd = `pnpm --filter "./slides/${slideName}" run build --base ${baseUrl}${slideName}/`;
+				const subDir = slideDir.startsWith(workspaceCwd) ? slideDir.replace(workspaceCwd, "").replace(/^\//, "") : slideDir;
+				const buildCmd = `pnpm --filter "./${subDir}" run build --base ${baseUrl}${slideName}/`;
+				console.log(buildCmd);
 				execSync(buildCmd, {
 					cwd: workspaceCwd,
 					stdio: "inherit"

package/dist/index.d.ts

@@ -51,11 +51,16 @@ declare function useSlides(): {
 };
 //#endregion
 //#region src/types/config.d.ts
+interface HeroConfig {
+  title: string;
+  description: string;
+}
 interface SlidevWorkspaceConfig {
   slidesDir: string[];
   outputDir: string;
   baseUrl: string;
   exclude: string[];
+  hero: HeroConfig;
 }
 //#endregion
 export { type SlideData, type SlideFrontmatter, type SlideInfo, type SlidevWorkspaceConfig, useSlides };

package/dist/plugin-slides.js

@@ -8,7 +8,11 @@ const DEFAULT_CONFIG = {
 	slidesDir: ["./slides"],
 	outputDir: "./dist",
 	baseUrl: "/",
-	exclude: ["node_modules", ".git"]
+	exclude: ["node_modules", ".git"],
+	hero: {
+		title: "Slide Deck",
+		description: "Browse all available slide decks and use the search function to quickly find what you need."
+	}
 };
 function loadConfig(workingDir) {
 	const configPaths = [
@@ -231,7 +235,7 @@ function slidesPlugin() {
 			});
 		},
 		resolveId(id) {
-			if (id === "slidev:content") return id;
+			if (id === "slidev:content" || id === "slidev:config") return id;
 		},
 		load(id) {
 			if (id === "slidev:content") try {
@@ -243,6 +247,16 @@ export default slidesData;`;
 				return `export const slidesData = [];
 export default slidesData;`;
 			}
+			if (id === "slidev:config") try {
+				const config = loadConfig();
+				const configData = { hero: config.hero };
+				return `export const configData = ${JSON.stringify(configData, null, 2)};
+export default configData;`;
+			} catch (error) {
+				console.error("Error loading config:", error);
+				return `export const configData = { hero: {} };
+export default configData;`;
+			}
 		}
 	};
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-workspace",
-  "version": "0.2.3",
+  "version": "0.4.0",
   "description": "A workspace tool for managing multiple Slidev presentations with API-based content management",
   "type": "module",
   "license": "MIT",

package/src/preview/assets/main.css

@@ -4,113 +4,113 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar: hsl(var(--sidebar));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
 }
 
 :root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --background: 0 0% 100%;
+  --foreground: 0 0% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 3.9%;
+  --primary: 0 0% 9%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 0 0% 96.1%;
+  --secondary-foreground: 0 0% 9%;
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 45.1%;
+  --accent: 0 0% 96.1%;
+  --accent-foreground: 0 0% 9%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 0 0% 89.8%;
+  --input: 0 0% 89.8%;
+  --ring: 0 0% 3.9%;
+  --chart-1: 12 76% 61%;
+  --chart-2: 173 58% 39%;
+  --chart-3: 197 37% 24%;
+  --chart-4: 43 74% 66%;
+  --chart-5: 27 87% 67%;
+  --radius: 0.5rem;
+  --sidebar: 0 0% 98%;
+  --sidebar-foreground: 0 0% 3.9%;
+  --sidebar-primary: 0 0% 9%;
+  --sidebar-primary-foreground: 0 0% 98%;
+  --sidebar-accent: 0 0% 96.1%;
+  --sidebar-accent-foreground: 0 0% 9%;
+  --sidebar-border: 0 0% 89.8%;
+  --sidebar-ring: 0 0% 3.9%;
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.145 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.145 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.269 0 0);
-  --input: oklch(0.269 0 0);
-  --ring: oklch(0.439 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
+  --background: 224 71.4% 4.1%;
+  --foreground: 210 20% 98%;
+  --muted: 215 27.9% 16.9%;
+  --muted-foreground: 217.9 10.6% 64.9%;
+  --popover: 224 71.4% 4.1%;
+  --popover-foreground: 210 20% 98%;
+  --card: 224 71.4% 4.1%;
+  --card-foreground: 210 20% 98%;
+  --border: 215 27.9% 16.9%;
+  --input: 215 27.9% 16.9%;
+  --primary: 210 20% 98%;
+  --primary-foreground: 220.9 39.3% 11%;
+  --secondary: 215 27.9% 16.9%;
+  --secondary-foreground: 210 20% 98%;
+  --accent: 215 27.9% 16.9%;
+  --accent-foreground: 210 20% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 20% 98%;
+  --ring: 216 12.2% 83.9%;
+  --chart-1: 220 70% 50%;
+  --chart-2: 160 60% 45%;
+  --chart-3: 30 80% 55%;
+  --chart-4: 280 65% 60%;
+  --chart-5: 340 75% 55%;
+  --sidebar: 0 0% 9%;
+  --sidebar-foreground: 0 0% 98%;
+  --sidebar-primary: 220 70% 50%;
+  --sidebar-primary-foreground: 0 0% 98%;
+  --sidebar-accent: 0 0% 14.9%;
+  --sidebar-accent-foreground: 0 0% 98%;
+  --sidebar-border: 0 0% 14.9%;
+  --sidebar-ring: 0 0% 83.1%;
 }
 
 @layer base {

package/src/preview/components/SlideDeck.vue

@@ -1,22 +1,38 @@
 <template>
   <div
-    class="min-h-screen bg-gradient-to-br from-gray-100 via-white to-gray-200 py-16 px-4"
+    class="min-h-screen bg-gradient-to-br from-gray-100 via-white to-gray-200 dark:from-gray-900 dark:via-gray-950 dark:to-black py-16 px-4 transition-colors"
   >
     <div class="max-w-5xl mx-auto">
-      <div class="mb-8">
-        <h1 class="text-3xl font-bold mb-2">Slide Deck</h1>
-        <p class="text-muted-foreground">
-          Browse all available slide decks and use the search function to
-          quickly find what you need.
-        </p>
+      <div class="mb-8 flex justify-between items-start">
+        <div>
+          <h1 class="text-3xl font-bold mb-2">{{ hero.title }}</h1>
+          <p class="text-muted-foreground">
+            {{ hero.description }}
+          </p>
+        </div>
+        <button
+          @click="toggleDarkMode"
+          class="p-2 rounded-lg hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors cursor-pointer"
+          aria-label="Toggle dark mode"
+          type="button"
+        >
+          <Moon v-if="!isDark" class="size-6" />
+          <Sun v-else class="size-6" />
+        </button>
       </div>
 
       <div class="space-y-4 mb-8">
-        <div class="relative">
+        <div class="relative w-full">
           <Input
+            class="pl-10"
             placeholder="Search by title, description, or author..."
             v-model="searchTerm"
           />
+          <span
+            class="absolute start-0 inset-y-0 flex items-center justify-center px-2"
+          >
+            <Search class="size-6 text-muted-foreground/30" />
+          </span>
         </div>
       </div>
 
@@ -51,12 +67,18 @@
 
 <script setup lang="ts">
 import { ref, computed } from "vue";
+import { Search, Moon, Sun } from "lucide-vue-next";
+
 import { useSlides } from "../composables/useSlides";
+import { useConfig } from "../composables/useConfig";
+import { useDarkMode } from "../composables/useDarkMode";
 import { Input } from "../components/ui/input";
 import SlideCard from "./SlideCard.vue";
 
 const searchTerm = ref("");
 const { slides, slidesCount } = useSlides();
+const { hero } = useConfig();
+const { isDark, toggleDarkMode } = useDarkMode();
 
 const filteredSlides = computed(() => {
   if (!searchTerm.value) return slides.value;

package/src/preview/components/ui/card/Card.vue

@@ -12,7 +12,7 @@ const props = defineProps<{
     data-slot="card"
     :class="
       cn(
-        'bg-card text-card-foreground flex flex-col rounded-xl border shadow-sm',
+        'bg-card text-card-foreground flex flex-col rounded-xl border shadow',
         props.class,
       )
     "

package/src/preview/components/ui/input/Input.vue

@@ -22,12 +22,9 @@ const modelValue = useVModel(props, "modelValue", emits, {
 <template>
   <input
     v-model="modelValue"
-    data-slot="input"
     :class="
       cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "

package/src/preview/composables/__mocks__/slidev-config.ts

@@ -0,0 +1,15 @@
+import type { HeroConfig } from "../../../types/config";
+
+interface ConfigData {
+  hero: HeroConfig;
+}
+
+const mockConfigData: ConfigData = {
+  hero: {
+    title: "Slide Deck",
+    description:
+      "Browse all available slide decks and use the search function to quickly find what you need.",
+  },
+};
+
+export default mockConfigData;

package/src/preview/composables/useConfig.test.ts

@@ -0,0 +1,158 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from "vitest";
+
+describe("useConfig", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  /**
+   * Helper function to setup useConfig and wait for data to load
+   */
+  async function setupUseConfig(configData?: {
+    hero: { title: string; description: string };
+  }) {
+    vi.resetModules();
+
+    // Mock the virtual module
+    vi.doMock("slidev:config", () => ({
+      default: configData || {
+        hero: {
+          title: "Slide Deck",
+          description:
+            "Browse all available slide decks and use the search function to quickly find what you need.",
+        },
+      },
+    }));
+
+    const { useConfig } = await import("./useConfig");
+    const result = useConfig();
+
+    // Wait for data to finish loading
+    await vi.waitFor(
+      () => {
+        // Check if config has loaded by comparing with expected values
+        if (configData) {
+          expect(result.hero.value.title).toBe(configData.hero.title);
+        } else {
+          expect(result.hero.value.title).toBe("Slide Deck");
+        }
+      },
+      { timeout: 1000, interval: 10 },
+    );
+
+    return result;
+  }
+
+  describe("hero config", () => {
+    it("should return hero config from slidev:config", async () => {
+      const result = await setupUseConfig({
+        hero: {
+          title: "Test Workspace",
+          description: "Test Description",
+        },
+      });
+
+      expect(result.hero.value.title).toBe("Test Workspace");
+      expect(result.hero.value.description).toBe("Test Description");
+    });
+
+    it("should provide reactive hero config", async () => {
+      const result = await setupUseConfig({
+        hero: {
+          title: "Initial Title",
+          description: "Initial Description",
+        },
+      });
+
+      // Initial values
+      expect(result.hero.value.title).toBe("Initial Title");
+      expect(result.hero.value.description).toBe("Initial Description");
+
+      // Hero should be reactive
+      expect(result.hero.value).toBeDefined();
+      expect(typeof result.hero.value).toBe("object");
+    });
+
+    it("should return default hero values when no config provided", async () => {
+      const result = await setupUseConfig();
+
+      expect(result.hero.value.title).toBe("Slide Deck");
+      expect(result.hero.value.description).toContain("Browse all available");
+    });
+  });
+
+  describe("HeroConfig properties", () => {
+    it("should have title and description properties", async () => {
+      const result = await setupUseConfig({
+        hero: {
+          title: "Test Title",
+          description: "Test Description",
+        },
+      });
+
+      const hero = result.hero.value;
+
+      expect("title" in hero).toBe(true);
+      expect("description" in hero).toBe(true);
+      expect(typeof hero.title).toBe("string");
+      expect(typeof hero.description).toBe("string");
+    });
+
+    it("should handle long descriptions", async () => {
+      const longDescription =
+        "This is a very long description that could contain multiple sentences and paragraphs to describe the workspace";
+
+      const result = await setupUseConfig({
+        hero: {
+          title: "My Workspace",
+          description: longDescription,
+        },
+      });
+
+      expect(result.hero.value.description).toBe(longDescription);
+      expect(result.hero.value.description.length).toBeGreaterThan(50);
+    });
+
+    it("should handle special characters in title and description", async () => {
+      const result = await setupUseConfig({
+        hero: {
+          title: "My Slides & Presentations",
+          description: "Browse <all> available slides @ our company",
+        },
+      });
+
+      expect(result.hero.value.title).toContain("&");
+      expect(result.hero.value.description).toContain("<");
+      expect(result.hero.value.description).toContain("@");
+    });
+  });
+
+  describe("error handling", () => {
+    it("should use default values when import fails", async () => {
+      vi.resetModules();
+
+      // Mock import to throw error
+      vi.doMock("slidev:config", () => {
+        throw new Error("Failed to load config");
+      });
+
+      const { useConfig } = await import("./useConfig");
+      const result = useConfig();
+
+      // Should fall back to default values
+      await vi.waitFor(
+        () => {
+          expect(result.hero.value.title).toBe("Slide Deck");
+          expect(result.hero.value.description).toContain(
+            "Browse all available",
+          );
+        },
+        { timeout: 1000, interval: 10 },
+      );
+    });
+  });
+});

package/src/preview/composables/useConfig.ts

@@ -0,0 +1,31 @@
+import { computed, ref } from "vue";
+import type { HeroConfig } from "../../types/config.js";
+
+const DEFAULT_CONFIG = {
+  hero: {
+    title: "Slide Deck",
+    description:
+      "Browse all available slide decks and use the search function to quickly find what you need.",
+  },
+};
+
+export function useConfig() {
+  const heroData = ref<HeroConfig>(DEFAULT_CONFIG.hero);
+
+  const loadConfigData = async () => {
+    try {
+      const module = await import("slidev:config");
+      heroData.value = module.default?.hero || heroData.value;
+    } catch (error) {
+      console.warn("Failed to load config data:", error);
+    }
+  };
+
+  loadConfigData();
+
+  const hero = computed(() => heroData.value);
+
+  return {
+    hero,
+  };
+}

package/src/preview/composables/useDarkMode.ts

@@ -0,0 +1,54 @@
+import { useDark } from "@vueuse/core";
+
+export function useDarkMode() {
+  const isDark = useDark();
+
+  const toggleDarkMode = (event: MouseEvent) => {
+    if (!document.startViewTransition) {
+      isDark.value = !isDark.value;
+      return;
+    }
+
+    const x = event.clientX;
+    const y = event.clientY;
+    // Calculate percentage-based position for better accuracy
+    const xPercent = (x / window.innerWidth) * 100;
+    const yPercent = (y / window.innerHeight) * 100;
+
+    const endRadius = Math.hypot(
+      Math.max(x, window.innerWidth - x),
+      Math.max(y, window.innerHeight - y),
+    );
+
+    const wasDark = isDark.value;
+
+    const transition = document.startViewTransition(() => {
+      isDark.value = !wasDark;
+    });
+
+    transition.ready.then(() => {
+      const clipPath = [
+        `circle(0px at ${xPercent}% ${yPercent}%)`,
+        `circle(${endRadius}px at ${xPercent}% ${yPercent}%)`,
+      ];
+
+      document.documentElement.animate(
+        {
+          clipPath: isDark.value ? clipPath.reverse() : clipPath,
+        },
+        {
+          duration: 200,
+          easing: "ease-in",
+          pseudoElement: isDark.value
+            ? "::view-transition-old(root)"
+            : "::view-transition-new(root)",
+        },
+      );
+    });
+  };
+
+  return {
+    isDark,
+    toggleDarkMode,
+  };
+}