slidev-workspace 0.1.7 → 0.1.9

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Leo Chiu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cli.js

@@ -1,10 +1,13 @@
 #!/usr/bin/env node
 import { fileURLToPath } from "node:url";
 import { dirname, join, resolve } from "node:path";
+import { existsSync, mkdirSync, readdirSync } from "node:fs";
+import { cp } from "node:fs/promises";
+import { execSync } from "node:child_process";
 import { build, createServer } from "vite";
 import vue from "@vitejs/plugin-vue";
 import tailwindcss from "@tailwindcss/vite";
-import { existsSync, readFileSync, readdirSync, watch } from "fs";
+import { existsSync as existsSync$1, readFileSync, readdirSync as readdirSync$1, watch } from "fs";
 import { basename, join as join$1, resolve as resolve$1 } from "path";
 import { parse } from "yaml";
 
@@ -25,7 +28,7 @@ function loadConfig(workingDir) {
 	const projectRoot = workingDir || process.env.SLIDEV_WORKSPACE_CWD || process.cwd();
 	for (const configPath of configPaths) {
 		const fullPath = join$1(projectRoot, configPath);
-		if (existsSync(fullPath)) try {
+		if (existsSync$1(fullPath)) try {
 			if (configPath.endsWith(".yml") || configPath.endsWith(".yaml")) {
 				const content = readFileSync(fullPath, "utf8");
 				const config = parse(content);
@@ -46,7 +49,7 @@ function resolveSlidesDirs(config, workingDir) {
 		if (resolve$1(dir) === dir) return dir;
 		else return resolve$1(projectRoot, dir);
 	}).filter((dir) => {
-		const exists = existsSync(dir);
+		const exists = existsSync$1(dir);
 		return exists;
 	});
 	return resolvedDirs;
@@ -57,7 +60,7 @@ function resolveSlidesDirs(config, workingDir) {
 function getSlideFrontmatterByPath(slideDir, slideName) {
 	try {
 		const fullPath = join$1(slideDir, slideName, "slides.md");
-		if (!existsSync(fullPath)) {
+		if (!existsSync$1(fullPath)) {
 			console.warn(`File not found: ${fullPath}`);
 			return null;
 		}
@@ -89,12 +92,12 @@ function getAllSlidesFrontmatter() {
 	const slidesDirs = resolveSlidesDirs(config);
 	const slides = [];
 	for (const slidesDir of slidesDirs) {
-		if (!existsSync(slidesDir)) {
+		if (!existsSync$1(slidesDir)) {
 			console.warn(`Slides directory not found: ${slidesDir}`);
 			continue;
 		}
 		try {
-			const slideDirs = readdirSync(slidesDir, { withFileTypes: true }).filter((dirent) => dirent.isDirectory()).filter((dirent) => !(config.exclude || []).includes(dirent.name)).map((dirent) => dirent.name);
+			const slideDirs = readdirSync$1(slidesDir, { withFileTypes: true }).filter((dirent) => dirent.isDirectory()).filter((dirent) => !(config.exclude || []).includes(dirent.name)).map((dirent) => dirent.name);
 			for (const slideDir of slideDirs) {
 				const slideInfo = getSlideFrontmatterByPath(slidesDir, slideDir);
 				if (slideInfo) slides.push(slideInfo);
@@ -181,11 +184,72 @@ function createViteConfig() {
 		}
 	};
 }
+async function buildAllSlides() {
+	const workspaceCwd = process.env.SLIDEV_WORKSPACE_CWD || process.cwd();
+	const config = loadConfig(workspaceCwd);
+	const slidesDirs = resolveSlidesDirs(config, workspaceCwd);
+	console.log("🔨 Building all slides...");
+	for (const slidesDir of slidesDirs) {
+		if (!existsSync(slidesDir)) {
+			console.warn(`⚠️ Slides directory not found: ${slidesDir}`);
+			continue;
+		}
+		const slides = readdirSync(slidesDir, { withFileTypes: true }).filter((dirent) => dirent.isDirectory()).map((dirent) => dirent.name);
+		for (const slideName of slides) {
+			const slideDir = join(slidesDir, slideName);
+			const packageJsonPath = join(slideDir, "package.json");
+			if (!existsSync(packageJsonPath)) {
+				console.warn(`⚠️ Skipping ${slideName}: no package.json found`);
+				continue;
+			}
+			console.log(`📦 Building slide: ${slideName}`);
+			try {
+				const buildCmd = `pnpm --filter "./slides/${slideName}" run build --base ${config.baseUrl}${slideName}/`;
+				execSync(buildCmd, {
+					cwd: workspaceCwd,
+					stdio: "inherit"
+				});
+				console.log(`✅ Built slide: ${slideName}`);
+			} catch (error) {
+				console.error(`❌ Failed to build slide ${slideName}:`, error);
+				process.exit(1);
+			}
+		}
+	}
+}
+async function copyToGhPages() {
+	const workspaceCwd = process.env.SLIDEV_WORKSPACE_CWD || process.cwd();
+	const config = loadConfig(workspaceCwd);
+	const slidesDirs = resolveSlidesDirs(config, workspaceCwd);
+	const ghPagesDir = join(workspaceCwd, "_gh-pages");
+	console.log("📁 Copying files to _gh-pages directory...");
+	if (!existsSync(ghPagesDir)) mkdirSync(ghPagesDir, { recursive: true });
+	for (const slidesDir of slidesDirs) {
+		if (!existsSync(slidesDir)) continue;
+		const slides = readdirSync(slidesDir, { withFileTypes: true }).filter((dirent) => dirent.isDirectory()).map((dirent) => dirent.name);
+		for (const slideName of slides) {
+			const slideDistDir = join(slidesDir, slideName, "dist");
+			const targetDir = join(ghPagesDir, slideName);
+			if (existsSync(slideDistDir)) {
+				console.log(`📋 Copying ${slideName} to _gh-pages...`);
+				await cp(slideDistDir, targetDir, { recursive: true });
+			}
+		}
+	}
+	const previewDistDir = join(workspaceCwd, config.outputDir);
+	if (existsSync(previewDistDir)) {
+		console.log("📋 Copying preview app as index...");
+		await cp(previewDistDir, ghPagesDir, { recursive: true });
+	}
+	console.log("✅ All files copied to _gh-pages successfully!");
+}
 async function runViteBuild() {
 	try {
+		await buildAllSlides();
 		console.log("📦 Building Slidev Workspace for production...");
 		const config = createViteConfig();
 		await build(config);
+		await copyToGhPages();
 		console.log("✅ Build completed successfully!");
 	} catch (error) {
 		console.error("❌ Build failed:", error);
@@ -217,8 +281,11 @@ Commands:
   help    Show this help message
 
 Examples:
-  slidev-workspace dev    # Start development server
-  slidev-workspace build  # Build for production
+  slidev-workspace dev                                    # Start development server
+  slidev-workspace build                                  # Build all slides and preview app
+
+Configuration:
+  Use slidev-workspace.yml to set baseUrl for all builds
 
 For more information, visit: https://github.com/author/slidev-workspace
 `);

package/dist/index.d.ts

@@ -1,23 +1,5 @@
 import * as vue0 from "vue";
 
-//#region src/preview/composables/useSlides.d.ts
-interface SlideData$1 {
-  title: string;
-  url: string;
-  description: string;
-  image: string;
-  author: string;
-  date: string;
-  theme?: string;
-  transition?: string;
-  class?: string;
-}
-declare function useSlides(): {
-  slides: vue0.ComputedRef<SlideData$1[]>;
-  slidesCount: vue0.ComputedRef<number>;
-  loadSlidesData: () => Promise<void>;
-};
-//#endregion
 //#region src/types/slide.d.ts
 interface SlideFrontmatter {
   theme?: string;
@@ -37,7 +19,6 @@ interface SlideFrontmatter {
   };
   author?: string;
   date?: string;
-  [key: string]: any;
 }
 interface SlideInfo {
   id: string;
@@ -48,7 +29,6 @@ interface SlideInfo {
   content: string;
 }
 interface SlideData {
-  id: string;
   title: string;
   url: string;
   description: string;
@@ -58,13 +38,15 @@ interface SlideData {
   theme?: string;
   transition?: string;
   class?: string;
-  sourceDir: string;
-  path: string;
-  fullPath: string;
-  frontmatter: SlideFrontmatter;
-  content: string;
 }
 //#endregion
+//#region src/preview/composables/useSlides.d.ts
+declare function useSlides(): {
+  slides: vue0.ComputedRef<SlideData[]>;
+  slidesCount: vue0.ComputedRef<number>;
+  loadSlidesData: () => Promise<void>;
+};
+//#endregion
 //#region src/types/config.d.ts
 interface SlidevWorkspaceConfig {
   slidesDir: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-workspace",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "A workspace tool for managing multiple Slidev presentations with API-based content management",
   "type": "module",
   "license": "MIT",
@@ -35,7 +35,7 @@
     "access": "public"
   },
   "dependencies": {
-    "yaml": "^2.8.0",
+    "@tailwindcss/vite": "^4.1.11",
     "@vitejs/plugin-vue": "^6.0.0",
     "@vueuse/core": "^13.5.0",
     "class-variance-authority": "^0.7.1",
@@ -45,29 +45,24 @@
     "tw-animate-css": "^1.3.5",
     "vite": "npm:rolldown-vite@latest",
     "vue": "^3.5.17",
-    "@tailwindcss/vite": "^4.1.11"
+    "yaml": "^2.8.0"
   },
   "devDependencies": {
-    "tsdown": "^0.11.9",
-    "typescript": "^5.8.3",
-    "vitest": "^3.1.3",
-    "vue-tsc": "^3.0.3",
+    "@prettier/plugin-oxc": "^0.0.4",
     "@tsconfig/node22": "^22.0.2",
     "@types/node": "^22.15.32",
-    "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/eslint-config-typescript": "^14.5.1",
     "@vue/tsconfig": "^0.7.0",
-    "autoprefixer": "^10.4.21",
-    "eslint": "^9.29.0",
-    "eslint-plugin-oxlint": "~1.1.0",
-    "eslint-plugin-vue": "~10.2.0",
     "jiti": "^2.4.2",
     "npm-run-all2": "^8.0.4",
     "oxlint": "~1.1.0",
     "postcss": "^8.5.6",
     "prettier": "3.5.3",
     "tailwindcss": "^4.1.11",
-    "vite-plugin-vue-devtools": "^7.7.7"
+    "tsdown": "^0.11.9",
+    "typescript": "^5.8.3",
+    "vite-plugin-vue-devtools": "^7.7.7",
+    "vitest": "^3.1.3",
+    "vue-tsc": "^3.0.3"
   },
   "scripts": {
     "build": "tsdown",
@@ -75,7 +70,7 @@
     "dev:watch": "tsdown --watch",
     "test": "vitest",
     "typecheck": "vue-tsc --noEmit",
-    "lint": "eslint . --fix",
+    "lint": "oxlint",
     "format": "prettier --write src/"
   }
 }

package/src/preview/assets/main.css

@@ -1,4 +1,4 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 @import "tw-animate-css";
 
 @custom-variant dark (&:is(.dark *));

package/src/preview/components/SlideCard.vue

@@ -1,5 +1,8 @@
 <template>
-  <Card class="group hover:shadow-lg transition-all duration-200 cursor-pointer" @click="$emit('click')">
+  <Card
+    class="group hover:shadow-lg transition-all duration-200 cursor-pointer"
+    @click="$emit('click')"
+  >
     <div class="relative overflow-hidden rounded-t-lg">
       <img
         :src="image || '/placeholder.svg'"
@@ -9,24 +12,36 @@
     </div>
 
     <CardHeader class="pb-2">
-      <CardTitle class="text-lg line-clamp-2 group-hover:text-primary transition-colors">
+      <CardTitle
+        class="text-lg line-clamp-2 group-hover:text-primary transition-colors"
+      >
         {{ title }}
       </CardTitle>
     </CardHeader>
 
     <CardContent class="space-y-3">
-      <CardDescription class="line-clamp-3 text-sm h-[40px]">{{ description }}</CardDescription>
+      <CardDescription class="line-clamp-3 text-sm h-[40px]">{{
+        description
+      }}</CardDescription>
 
       <div class="flex flex-wrap gap-1 mb-2">
-        <span v-if="theme" class="inline-flex items-center px-2 py-1 rounded-full text-xs bg-blue-100 text-blue-800">
+        <span
+          v-if="theme"
+          class="inline-flex items-center px-2 py-1 rounded-full text-xs bg-blue-100 text-blue-800"
+        >
           {{ theme }}
         </span>
-        <span v-if="sourceDir" class="inline-flex items-center px-2 py-1 rounded-full text-xs bg-green-100 text-green-800">
-          {{ sourceDir.split('/').pop() }}
+        <span
+          v-if="sourceDir"
+          class="inline-flex items-center px-2 py-1 rounded-full text-xs bg-green-100 text-green-800"
+        >
+          {{ sourceDir.split("/").pop() }}
         </span>
       </div>
 
-      <div class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t">
+      <div
+        class="flex items-center justify-between text-xs text-muted-foreground pt-2 border-t"
+      >
         <div class="flex items-center gap-1">
           <User class="h-3 w-3" />
           <span>{{ author }}</span>
@@ -41,22 +56,28 @@
 </template>
 
 <script setup lang="ts">
-import { Calendar, User } from 'lucide-vue-next'
+import { Calendar, User } from "lucide-vue-next";
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 
 defineProps<{
-  title: string
-  image?: string
-  description?: string
-  url: string
-  author: string
-  date: string
-  theme?: string
-  sourceDir?: string
-}>()
+  title: string;
+  image?: string;
+  description?: string;
+  url: string;
+  author: string;
+  date: string;
+  theme?: string;
+  sourceDir?: string;
+}>();
 
 defineEmits<{
-  click: []
-}>()
+  click: [];
+}>();
 </script>

package/src/preview/components/SlideDeck.vue

@@ -47,13 +47,6 @@
         />
       </div>
     </div>
-
-    <!-- Slide Detail Modal -->
-    <SlideDetail
-      v-if="selectedSlide"
-      :slide="selectedSlide"
-      @close="closeSlide"
-    />
   </div>
 </template>
 
@@ -62,27 +55,25 @@ import { ref, computed } from "vue";
 import { useSlides } from "../composables/useSlides";
 import { Input } from "../components/ui/input";
 import SlideCard from "./SlideCard.vue";
-import SlideDetail from "./SlideDetail.vue";
+import type { SlideData } from "../../types/slide";
 
 const searchTerm = ref("");
 const { slides, slidesCount } = useSlides();
 
 const filteredSlides = computed(() => {
   if (!searchTerm.value) return slides.value;
-  return slides.value.filter((slide) =>
-    slide.title.toLowerCase().includes(searchTerm.value.toLowerCase()) ||
-    slide.description.toLowerCase().includes(searchTerm.value.toLowerCase()) ||
-    slide.author.toLowerCase().includes(searchTerm.value.toLowerCase())
+  return slides.value.filter(
+    (slide) =>
+      slide.title.toLowerCase().includes(searchTerm.value.toLowerCase()) ||
+      slide.description
+        .toLowerCase()
+        .includes(searchTerm.value.toLowerCase()) ||
+      slide.author.toLowerCase().includes(searchTerm.value.toLowerCase()),
   );
 });
 
-const selectedSlide = ref(null);
-
-const openSlide = (slide: any) => {
-  selectedSlide.value = slide;
-};
-
-const closeSlide = () => {
-  selectedSlide.value = null;
+const openSlide = (slide: SlideData) => {
+  const url = `${window.location.href}/${slide.url}`;
+  window.open(url, "_blank");
 };
 </script>

package/src/preview/components/ui/button/Button.vue

@@ -14,8 +14,8 @@ import type { VariantProps } from "class-variance-authority";
 
 interface Props {
   as?: string;
-  variant?: VariantProps<typeof buttonVariants>['variant'];
-  size?: VariantProps<typeof buttonVariants>['size'];
+  variant?: VariantProps<typeof buttonVariants>["variant"];
+  size?: VariantProps<typeof buttonVariants>["size"];
 }
 
 const props = withDefaults(defineProps<Props>(), {

package/src/preview/components/ui/button/index.ts

@@ -26,7 +26,7 @@ export const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 );
 
 export type ButtonVariants = VariantProps<typeof buttonVariants>;

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>

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

@@ -1,16 +1,21 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
   <div
     data-slot="card-action"
-    :class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)"
+    :class="
+      cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        props.class,
+      )
+    "
   >
     <slot />
   </div>

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

@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
-  <div
-    data-slot="card-content"
-    :class="cn('px-6 pb-6', props.class)"
-  >
+  <div data-slot="card-content" :class="cn('px-6 pb-6', props.class)">
     <slot />
   </div>
 </template>

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>

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

@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>
-  <div data-slot="card-header" :class="cn('@container/card-header gap-1.5 pt-6 px-6', props.class)">
+  <div
+    data-slot="card-header"
+    :class="cn('@container/card-header gap-1.5 pt-6 px-6', props.class)"
+  >
     <slot />
   </div>
 </template>

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
+  class?: HTMLAttributes["class"];
+}>();
 </script>
 
 <template>

package/src/preview/components/ui/card/index.ts

@@ -1,7 +1,7 @@
-export { default as Card } from './Card.vue'
-export { default as CardAction } from './CardAction.vue'
-export { default as CardContent } from './CardContent.vue'
-export { default as CardDescription } from './CardDescription.vue'
-export { default as CardFooter } from './CardFooter.vue'
-export { default as CardHeader } from './CardHeader.vue'
-export { default as CardTitle } from './CardTitle.vue'
+export { default as Card } from "./Card.vue";
+export { default as CardAction } from "./CardAction.vue";
+export { default as CardContent } from "./CardContent.vue";
+export { default as CardDescription } from "./CardDescription.vue";
+export { default as CardFooter } from "./CardFooter.vue";
+export { default as CardHeader } from "./CardHeader.vue";
+export { default as CardTitle } from "./CardTitle.vue";

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

@@ -1,33 +1,35 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { useVModel } from '@vueuse/core'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from "vue";
+import { useVModel } from "@vueuse/core";
+import { cn } from "@/lib/utils";
 
 const props = defineProps<{
-  defaultValue?: string | number
-  modelValue?: string | number
-  class?: HTMLAttributes['class']
-}>()
+  defaultValue?: string | number;
+  modelValue?: string | number;
+  class?: HTMLAttributes["class"];
+}>();
 
 const emits = defineEmits<{
-  (e: 'update:modelValue', payload: string | number): void
-}>()
+  (e: "update:modelValue", payload: string | number): void;
+}>();
 
-const modelValue = useVModel(props, 'modelValue', emits, {
+const modelValue = useVModel(props, "modelValue", emits, {
   passive: true,
   defaultValue: props.defaultValue,
-})
+});
 </script>
 
 <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',
-      props.class,
-    )"
-  >
+    :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',
+        props.class,
+      )
+    "
+  />
 </template>

package/src/preview/components/ui/input/index.ts

@@ -1 +1 @@
-export { default as Input } from './Input.vue'
+export { default as Input } from "./Input.vue";

package/src/preview/composables/useSlides.ts

@@ -1,17 +1,5 @@
 import { computed, ref } from "vue";
-import type { SlideInfo } from "../../types/slide.js";
-
-export interface SlideData {
-  title: string;
-  url: string;
-  description: string;
-  image: string;
-  author: string;
-  date: string;
-  theme?: string;
-  transition?: string;
-  class?: string;
-}
+import type { SlideData, SlideInfo } from "../../types/slide.js";
 
 export function useSlides() {
   const slidesData = ref<SlideInfo[]>([]);

package/src/preview/index.html

@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Slidev Workspace</title>
-</head>
-<body>
-  <div id="app"></div>
-  <script type="module" src="/main.ts"></script>
-</body>
-</html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Slidev Workspace</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/main.ts"></script>
+  </body>
+</html>

package/src/preview/lib/utils.ts

@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }

package/src/preview/main.ts

@@ -1,6 +1,6 @@
-import './assets/main.css'
+import "./assets/main.css";
 
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from "vue";
+import App from "./App.vue";
 
-createApp(App).mount('#app')
+createApp(App).mount("#app");

package/README.md

@@ -1,145 +0,0 @@
-# Slidev Workspace
-
-一個用於管理多個 Slidev 演示文稿的工作區工具，提供類似 Contentful API 的內容管理介面。
-
-## 功能特色
-
-✨ **自動發現 Slides**: 自動掃描配置目錄中的所有 Slidev 演示文稿  
-🔍 **智慧搜尋**: 支援按標題、描述、作者和主題搜尋  
-📊 **Frontmatter 解析**: 完整解析每個 slide 的 YAML frontmatter  
-🌐 **類 Contentful API**: 提供結構化的 API 介面來存取 slides  
-🎨 **現代介面**: 使用 Vue 3 + Tailwind CSS 的響應式介面  
-🔥 **熱重載**: 開發時自動檢測 slides 變更
-
-## 安裝和使用
-
-### 1. 基本使用
-
-```bash
-# 開發模式
-pnpm run slidev-workspace:dev
-
-# 建置
-pnpm run slidev-workspace:build
-```
-
-### 2. CLI 工具 (計劃中)
-
-```bash
-# 全域安裝後
-slidev-workspace dev
-slidev-workspace build
-```
-
-## 配置
-
-在專案根目錄創建 `slidev-workspace.yml` 來配置 slides 來源：
-
-```yaml
-# Slidev Workspace 配置
-slidesDir:
-  - "../../demo/slides"    # 相對路徑到 slides 目錄
-  - "./slides"             # 本地 slides 目錄
-
-outputDir: "./slide-decks/dist"
-baseUrl: "/"
-
-exclude:
-  - "node_modules"
-  - ".git"
-  - ".DS_Store"
-```
-
-## API 介面
-
-### 基本 API
-
-```typescript
-import { slidesApi } from '@/composables/useSlidesApi'
-
-// 獲取所有 slides
-const { data: slides } = await slidesApi.getEntries()
-
-// 搜尋 slides
-const results = await slidesApi.getEntries({ 
-  search: 'Vue.js',
-  theme: 'seriph',
-  limit: 10 
-})
-
-// 獲取特定 slide
-const { data: slide } = await slidesApi.getEntry('slides/my-presentation')
-```
-
-### 響應式查詢
-
-```vue
-<script setup>
-import { ref } from 'vue'
-import { slidesApi } from '@/composables/useSlidesApi'
-
-const searchOptions = ref({
-  search: '',
-  theme: 'seriph',
-  sort: 'title'
-})
-
-// 即時搜尋結果
-const slides = slidesApi.createLiveQuery(searchOptions)
-</script>
-```
-
-## 專案結構
-
-```
-packages/slidev-workspace/
-├── scripts/                 # 核心腳本
-│   ├── config.ts           # 配置管理
-│   ├── getSlideFrontmatter.ts # Slides 解析
-│   └── vite-plugin-slides.ts # Vite 插件
-├── slide-decks/            # Vue 應用
-│   ├── src/
-│   │   ├── components/     # UI 組件
-│   │   ├── composables/    # API 邏輯
-│   │   └── utils/         # 工具函數
-│   └── package.json
-├── src/                    # 庫匯出
-│   ├── index.ts           # 主要匯出
-│   └── cli.ts             # CLI 工具
-└── slidev-workspace.yml    # 配置檔案
-```
-
-## 測試
-
-```bash
-# 測試核心功能
-npx tsx test-slides.js
-
-# 預期輸出
-🔍 Testing Slidev Workspace functionality...
-📁 Loading slides...
-✅ Found 2 slides:
-
-1. Welcome to Slidev
-   ID: slides/slidev-starter-1
-   Source: /Users/.../demo/slides
-   Theme: seriph
-```
-
-## 開發
-
-這個工具是基於以下技術棧開發：
-
-- **後端**: Node.js + TypeScript
-- **前端**: Vue 3 + Composition API
-- **樣式**: Tailwind CSS
-- **建置**: Vite + tsdown
-- **包管理**: pnpm workspace
-
-## 貢獻
-
-歡迎提交 Issues 和 Pull Requests！
-
-## 許可證
-
-MIT License

package/src/preview/components/SlideDetail.vue

@@ -1,165 +0,0 @@
-<template>
-  <div
-    class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
-    @click="$emit('close')"
-  >
-    <div
-      class="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto"
-      @click.stop
-    >
-      <div class="p-6">
-        <div class="flex items-start justify-between mb-6">
-          <div class="flex-1">
-            <h1 class="text-2xl font-bold mb-2">{{ slide.title }}</h1>
-            <div class="flex items-center gap-4 text-sm text-muted-foreground">
-              <div class="flex items-center gap-1">
-                <User class="h-4 w-4" />
-                <span>{{ slide.author }}</span>
-              </div>
-              <div class="flex items-center gap-1">
-                <Calendar class="h-4 w-4" />
-                <span>{{ slide.date }}</span>
-              </div>
-              <div v-if="slide.theme" class="flex items-center gap-1">
-                <Palette class="h-4 w-4" />
-                <span>{{ slide.theme }}</span>
-              </div>
-            </div>
-          </div>
-          <Button variant="ghost" size="sm" @click="$emit('close')">
-            <X class="h-4 w-4" />
-          </Button>
-        </div>
-
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <!-- Preview Image -->
-          <div class="space-y-4">
-            <div
-              class="aspect-video bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg overflow-hidden"
-            >
-              <img
-                :src="slide.image"
-                :alt="slide.title"
-                class="w-full h-full object-cover"
-                @error="handleImageError"
-              />
-            </div>
-
-            <!-- Slide Actions -->
-            <div class="flex gap-2">
-              <Button @click="openInSlidev" class="flex-1">
-                <ExternalLink class="h-4 w-4 mr-2" />
-                Open in Slidev
-              </Button>
-              <Button variant="outline" @click="copyPath">
-                <Copy class="h-4 w-4 mr-2" />
-                Copy Path
-              </Button>
-            </div>
-          </div>
-
-          <!-- Slide Information -->
-          <div class="space-y-6">
-            <div>
-              <h3 class="font-semibold mb-2">Description</h3>
-              <p class="text-muted-foreground">{{ slide.description }}</p>
-            </div>
-
-            <div>
-              <h3 class="font-semibold mb-2">Frontmatter</h3>
-              <div class="bg-gray-50 rounded-lg p-4">
-                <pre class="text-sm overflow-x-auto">{{
-                  formatFrontmatter(slide.frontmatter)
-                }}</pre>
-              </div>
-            </div>
-
-            <div>
-              <h3 class="font-semibold mb-2">File Information</h3>
-              <div class="space-y-2 text-sm">
-                <div class="flex justify-between">
-                  <span class="text-muted-foreground">ID:</span>
-                  <code class="bg-gray-100 px-2 py-1 rounded">{{
-                    slide.id
-                  }}</code>
-                </div>
-                <div class="flex justify-between">
-                  <span class="text-muted-foreground">Path:</span>
-                  <code class="bg-gray-100 px-2 py-1 rounded">{{
-                    slide.path
-                  }}</code>
-                </div>
-                <div class="flex justify-between">
-                  <span class="text-muted-foreground">Source:</span>
-                  <span>{{
-                    slide.sourceDir?.split("/").pop() || "Unknown"
-                  }}</span>
-                </div>
-                <div class="flex justify-between">
-                  <span class="text-muted-foreground">Full Path:</span>
-                  <code class="bg-gray-100 px-2 py-1 rounded text-xs">{{
-                    slide.fullPath
-                  }}</code>
-                </div>
-              </div>
-            </div>
-
-            <div v-if="slide.content">
-              <h3 class="font-semibold mb-2">Content Preview</h3>
-              <div class="bg-gray-50 rounded-lg p-4 max-h-60 overflow-y-auto">
-                <pre class="text-sm whitespace-pre-wrap"
-                  >{{ slide.content.substring(0, 500)
-                  }}{{ slide.content.length > 500 ? "..." : "" }}</pre
-                >
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  X,
-  User,
-  Calendar,
-  Palette,
-  ExternalLink,
-  Copy,
-} from "lucide-vue-next";
-import { computed } from "vue";
-import { Button } from "@/components/ui/button";
-import type { SlideData } from "../../types/slide";
-
-const props = defineProps<{
-  slide: SlideData;
-}>();
-
-defineEmits<{
-  close: [];
-}>();
-
-const slidevUrl = computed(() => {
-  return `${window.location.href}/${props.slide.url}`;
-});
-
-const formatFrontmatter = (frontmatter: any) => {
-  return JSON.stringify(frontmatter, null, 2);
-};
-
-const handleImageError = (event: Event) => {
-  const target = event.target as HTMLImageElement;
-  target.src = "https://cover.sli.dev";
-};
-
-const openInSlidev = () => {
-  window.open(slidevUrl.value, "_blank");
-};
-
-const copyPath = () => {
-  navigator.clipboard.writeText(slidevUrl.value);
-  // You could add a toast notification here
-};
-</script>

package/src/preview/utils/getSlides.ts

@@ -1,65 +0,0 @@
-import slidesData from "slidev:content";
-import type { SlideData, SlideInfo } from "../../types/slide.js";
-
-export function getSlides(): SlideData[] {
-  try {
-    if (slidesData && slidesData.length > 0) {
-      return (slidesData as SlideInfo[]).map((slide) => ({
-        id: slide.id,
-        title: slide.frontmatter.title || slide.path,
-        url: slide.path,
-        description:
-          slide.frontmatter.info ||
-          slide.frontmatter.seoMeta?.ogDescription ||
-          "No description available",
-        image:
-          slide.frontmatter.background ||
-          slide.frontmatter.seoMeta?.ogImage ||
-          "https://cover.sli.dev",
-        author: slide.frontmatter.author || "Unknown Author",
-        date: slide.frontmatter.date || new Date().toISOString().split("T")[0],
-        theme: slide.frontmatter.theme,
-        transition: slide.frontmatter.transition,
-        class: slide.frontmatter.class,
-        sourceDir: slide.sourceDir,
-        path: slide.path,
-        fullPath: slide.fullPath,
-        frontmatter: slide.frontmatter,
-        content: slide.content,
-      }));
-    }
-  } catch (error) {
-    console.error("Error reading slides frontmatter:", error);
-  }
-
-  return [];
-}
-
-export function getSlideById(id: string): SlideData | null {
-  const slides = getSlides();
-  return slides.find((slide) => slide.id === id) || null;
-}
-
-export function getSlidesBySourceDir(sourceDir: string): SlideData[] {
-  const slides = getSlides();
-  return slides.filter((slide) => slide.sourceDir === sourceDir);
-}
-
-export function searchSlides(query: string): SlideData[] {
-  const slides = getSlides();
-  const lowerQuery = query.toLowerCase();
-
-  return slides.filter(
-    (slide) =>
-      slide.title.toLowerCase().includes(lowerQuery) ||
-      slide.description.toLowerCase().includes(lowerQuery) ||
-      slide.author.toLowerCase().includes(lowerQuery) ||
-      (slide.theme && slide.theme.toLowerCase().includes(lowerQuery))
-  );
-}
-
-if (import.meta.hot) {
-  import.meta.hot.accept("slidev:content", (_newSlidesData: any) => {
-    console.log("Slides data updated");
-  });
-}