slidev-workspace 0.1.3 → 0.1.5

package/dist/cli.js

@@ -1,14 +1,209 @@
 #!/usr/bin/env node
-import { spawn } from "node:child_process";
 import { fileURLToPath } from "node:url";
-import { dirname, join } from "node:path";
+import { dirname, join, resolve } from "node:path";
+import { build, createServer } from "vite";
+import vue from "@vitejs/plugin-vue";
+import tailwindcss from "@tailwindcss/vite";
+import { existsSync, readFileSync, readdirSync, watch } from "fs";
+import { basename, join as join$1, resolve as resolve$1 } from "path";
+import { parse } from "yaml";
+import "vue";
 
+//#region src/scripts/config.ts
+const DEFAULT_CONFIG = {
+	slidesDir: ["./slides"],
+	outputDir: "./dist",
+	baseUrl: "/",
+	exclude: ["node_modules", ".git"]
+};
+function loadConfig(workingDir) {
+	const configPaths = [
+		"slidev-workspace.config.js",
+		"slidev-workspace.config.ts",
+		"slidev-workspace.yml",
+		"slidev-workspace.yaml"
+	];
+	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 (configPath.endsWith(".yml") || configPath.endsWith(".yaml")) {
+				const content = readFileSync(fullPath, "utf8");
+				const config = parse(content);
+				return {
+					...DEFAULT_CONFIG,
+					...config
+				};
+			}
+		} catch (error) {
+			console.warn(`Failed to load config from ${fullPath}:`, error);
+		}
+	}
+	return DEFAULT_CONFIG;
+}
+function resolveSlidesDirs(config, workingDir) {
+	const projectRoot = workingDir || process.env.SLIDEV_WORKSPACE_CWD || process.cwd();
+	const resolvedDirs = (config.slidesDir || []).map((dir) => {
+		if (resolve$1(dir) === dir) return dir;
+		else return resolve$1(projectRoot, dir);
+	}).filter((dir) => {
+		const exists = existsSync(dir);
+		return exists;
+	});
+	return resolvedDirs;
+}
+
+//#endregion
+//#region src/scripts/getSlideFrontmatter.ts
+function getSlideFrontmatterByPath(slideDir, slideName) {
+	try {
+		const fullPath = join$1(slideDir, slideName, "slides.md");
+		if (!existsSync(fullPath)) {
+			console.warn(`File not found: ${fullPath}`);
+			return null;
+		}
+		const content = readFileSync(fullPath, "utf8");
+		const frontmatterMatch = content.match(/^---\s*\n([\s\S]*?)\n---\s*\n/);
+		if (!frontmatterMatch) {
+			console.warn(`Frontmatter not found in ${fullPath}`);
+			return null;
+		}
+		const frontmatterYaml = frontmatterMatch[1];
+		const frontmatter = parse(frontmatterYaml);
+		const sourceBasename = basename(slideDir);
+		const slideId = `${sourceBasename}/${slideName}`;
+		return {
+			id: slideId,
+			path: slideName,
+			fullPath,
+			sourceDir: slideDir,
+			frontmatter,
+			content: content.replace(frontmatterMatch[0], "")
+		};
+	} catch (error) {
+		console.error(`Error parsing frontmatter for ${slideName} in ${slideDir}:`, error);
+		return null;
+	}
+}
+function getAllSlidesFrontmatter() {
+	const config = loadConfig();
+	const slidesDirs = resolveSlidesDirs(config);
+	const slides = [];
+	for (const slidesDir of slidesDirs) {
+		if (!existsSync(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);
+			for (const slideDir of slideDirs) {
+				const slideInfo = getSlideFrontmatterByPath(slidesDir, slideDir);
+				if (slideInfo) slides.push(slideInfo);
+			}
+		} catch (error) {
+			console.error(`Error reading slides directory ${slidesDir}:`, error);
+		}
+	}
+	return slides;
+}
+if (import.meta.url === `file://${process.argv[1]}`) {
+	const slides = getAllSlidesFrontmatter();
+	console.log(JSON.stringify(slides, null, 2));
+}
+
+//#endregion
+//#region src/scripts/vite-plugin-slides.ts
+function slidesPlugin() {
+	return {
+		name: "vite-plugin-slides",
+		configureServer(server) {
+			const watchers = [];
+			const config = loadConfig();
+			const slidesDirs = resolveSlidesDirs(config);
+			slidesDirs.forEach((slidesDir) => {
+				const watcher = watch(slidesDir, { recursive: true }, (eventType, filename) => {
+					if (filename && filename.endsWith("slides.md")) try {
+						const slides = getAllSlidesFrontmatter();
+						server.ws.send({
+							type: "custom",
+							event: "slides-updated",
+							data: slides
+						});
+					} catch (error) {
+						console.error("❌ Error reading slides frontmatter:", error);
+					}
+				});
+				watchers.push(watcher);
+			});
+			server.httpServer?.once("close", () => {
+				watchers.forEach((watcher) => watcher.close());
+			});
+		},
+		resolveId(id) {
+			if (id === "slidev:content") return id;
+		},
+		load(id) {
+			if (id === "slidev:content") try {
+				const slides = getAllSlidesFrontmatter();
+				return `export const slidesData = ${JSON.stringify(slides, null, 2)};
+export default slidesData;`;
+			} catch (error) {
+				console.error("Error loading slides data:", error);
+				return `export const slidesData = [];
+export default slidesData;`;
+			}
+		}
+	};
+}
+
+//#endregion
 //#region src/cli.ts
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 const args = process.argv.slice(2);
 const command = args[0];
 const packageRoot = join(__dirname, "..");
+function createViteConfig() {
+	const workspaceCwd = process.env.SLIDEV_WORKSPACE_CWD || process.cwd();
+	const config = loadConfig(workspaceCwd);
+	return {
+		root: resolve(packageRoot, "src/preview"),
+		plugins: [
+			vue(),
+			tailwindcss(),
+			slidesPlugin()
+		],
+		resolve: { alias: { "@": resolve(packageRoot, "src/preview") } },
+		build: { outDir: resolve(workspaceCwd, config.outputDir) },
+		server: {
+			port: 3e3,
+			open: true
+		}
+	};
+}
+async function runViteBuild() {
+	try {
+		console.log("📦 Building Slidev Workspace for production...");
+		const config = createViteConfig();
+		await build(config);
+		console.log("✅ Build completed successfully!");
+	} catch (error) {
+		console.error("❌ Build failed:", error);
+		process.exit(1);
+	}
+}
+async function runVitePreview() {
+	try {
+		console.log("🚀 Starting Slidev Workspace development server...");
+		const config = createViteConfig();
+		const server = await createServer(config);
+		await server.listen();
+		server.printUrls();
+	} catch (error) {
+		console.error("❌ Development server failed:", error);
+		process.exit(1);
+	}
+}
 function showHelp() {
 	console.log(`
 Slidev Workspace - A tool for managing multiple Slidev presentations
@@ -28,42 +223,32 @@ Examples:
 For more information, visit: https://github.com/author/slidev-workspace
 `);
 }
-function runCommand(cmd, args$1 = []) {
-	const child = spawn(cmd, args$1, {
-		cwd: packageRoot,
-		stdio: "inherit",
-		shell: true
-	});
-	child.on("error", (error) => {
-		console.error("Error running command:", error.message);
-		process.exit(1);
-	});
-	child.on("exit", (code) => {
-		process.exit(code || 0);
-	});
-}
-switch (command) {
-	case "preview":
-		console.log("🚀 Starting Slidev Workspace development server...");
-		process.env.SLIDEV_WORKSPACE_CWD = process.cwd();
-		runCommand("pnpm", ["run", "slidev-workspace:preview"]);
-		break;
-	case "build":
-		console.log("📦 Building Slidev Workspace for production...");
-		process.env.SLIDEV_WORKSPACE_CWD = process.cwd();
-		runCommand("pnpm", ["run", "slidev-workspace:build"]);
-		break;
-	case "help":
-	case "--help":
-	case "-h":
-		showHelp();
-		break;
-	default: if (!command) showHelp();
-	else {
-		console.error(`Unknown command: ${command}`);
-		console.error("Run \"slidev-workspace help\" for available commands.");
-		process.exit(1);
+async function main() {
+	switch (command) {
+		case "preview":
+			process.env.SLIDEV_WORKSPACE_CWD = process.cwd();
+			await runVitePreview();
+			break;
+		case "build":
+			process.env.SLIDEV_WORKSPACE_CWD = process.cwd();
+			await runViteBuild();
+			break;
+		case "help":
+		case "--help":
+		case "-h":
+			showHelp();
+			break;
+		default: if (!command) showHelp();
+		else {
+			console.error(`Unknown command: ${command}`);
+			console.error("Run \"slidev-workspace help\" for available commands.");
+			process.exit(1);
+		}
 	}
 }
+main().catch((error) => {
+	console.error("❌ An error occurred:", error);
+	process.exit(1);
+});
 
 //#endregion

package/dist/index.d.ts

@@ -83,6 +83,7 @@ interface SlideData$1 {
 declare function useSlides(): {
   slides: vue0.ComputedRef<SlideData$1[]>;
   slidesCount: vue0.ComputedRef<number>;
+  loadSlidesData: () => Promise<void>;
 };
 //#endregion
 export { type SlideData, type SlideFrontmatter, type SlideInfo, type SlidevWorkspaceConfig, getAllSlidesFrontmatter, getSlideFrontmatter, getSlideFrontmatterByPath, loadConfig, resolveSlidesDirs, slidesPlugin, useSlides };

package/dist/index.js

@@ -1,12 +1,12 @@
 import { existsSync, readFileSync, readdirSync, watch } from "fs";
 import { basename, join, resolve } from "path";
 import { parse } from "yaml";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 
 //#region src/scripts/config.ts
 const DEFAULT_CONFIG = {
 	slidesDir: ["./slides"],
-	outputDir: "./slide-decks/dist",
+	outputDir: "./dist",
 	baseUrl: "/",
 	exclude: ["node_modules", ".git"]
 };
@@ -154,17 +154,23 @@ export default slidesData;`;
 	};
 }
 
-//#endregion
-//#region slidev:content
-const slidesData = [];
-var slidev_content_default = slidesData;
-
 //#endregion
 //#region src/preview/composables/useSlides.ts
 function useSlides() {
+	const slidesData = ref([]);
+	const loadSlidesData = async () => {
+		try {
+			const module = await import("slidev:content");
+			slidesData.value = module.default || module.slidesData || [];
+		} catch (error) {
+			console.warn("Failed to load slides data:", error);
+			slidesData.value = [];
+		}
+	};
+	loadSlidesData();
 	const slides = computed(() => {
-		if (!slidev_content_default || slidev_content_default.length === 0) return [];
-		return slidev_content_default.map((slide) => ({
+		if (!slidesData.value || slidesData.value.length === 0) return [];
+		return slidesData.value.map((slide) => ({
 			title: slide.frontmatter.title || slide.path,
 			url: slide.path,
 			description: slide.frontmatter.info || slide.frontmatter.seoMeta?.ogDescription || "No description available",
@@ -179,7 +185,8 @@ function useSlides() {
 	const slidesCount = computed(() => slides.value.length);
 	return {
 		slides,
-		slidesCount
+		slidesCount,
+		loadSlidesData
 	};
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-workspace",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "A workspace tool for managing multiple Slidev presentations with API-based content management",
   "type": "module",
   "license": "MIT",
@@ -19,6 +19,7 @@
   "files": [
     "dist",
     "scripts",
+    "src/preview",
     "vite.config.ts"
   ],
   "main": "./dist/index.js",
@@ -42,14 +43,14 @@
     "tailwind-merge": "^3.3.1",
     "tw-animate-css": "^1.3.5",
     "vite": "npm:rolldown-vite@latest",
-    "vue": "^3.5.17"
+    "vue": "^3.5.17",
+    "@tailwindcss/vite": "^4.1.11"
   },
   "devDependencies": {
     "tsdown": "^0.11.9",
     "typescript": "^5.8.3",
     "vitest": "^3.1.3",
     "vue-tsc": "^3.0.3",
-    "@tailwindcss/vite": "^4.1.11",
     "@tsconfig/node22": "^22.0.2",
     "@types/node": "^22.15.32",
     "@vue/eslint-config-prettier": "^10.2.0",
@@ -71,8 +72,6 @@
     "build": "tsdown",
     "dev": "pnpm run dev",
     "dev:watch": "tsdown --watch",
-    "slidev-workspace:preview": "vite",
-    "slidev-workspace:build": "vite build --config vite.config.ts",
     "test": "vitest",
     "typecheck": "vue-tsc --noEmit",
     "lint": "eslint . --fix",

package/src/preview/App.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import SlideDeck from "./components/SlideDeck.vue";
+</script>
+
+<template>
+  <SlideDeck />
+</template>

package/src/preview/assets/main.css

@@ -0,0 +1,123 @@
+@import 'tailwindcss';
+@import "tw-animate-css";
+
+@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);
+  --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);
+}
+
+: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);
+}
+
+.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);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/preview/components/SlideCard.vue

@@ -0,0 +1,62 @@
+<template>
+  <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'"
+        :alt="title"
+        class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-200"
+      />
+    </div>
+
+    <CardHeader class="pb-2">
+      <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>
+
+      <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">
+          {{ 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>
+      </div>
+
+      <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>
+        </div>
+        <div class="flex items-center gap-1">
+          <Calendar class="h-3 w-3" />
+          <span>{{ date }}</span>
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+</template>
+
+<script setup lang="ts">
+import { Calendar, User } from 'lucide-vue-next'
+
+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
+}>()
+
+defineEmits<{
+  click: []
+}>()
+</script>

package/src/preview/components/SlideDeck.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    class="min-h-screen bg-gradient-to-br from-gray-100 via-white to-gray-200 py-16 px-4"
+  >
+    <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>
+
+      <div class="space-y-4 mb-8">
+        <div class="relative">
+          <Input
+            placeholder="Search by title, description, or author..."
+            v-model="searchTerm"
+          />
+        </div>
+      </div>
+
+      <div class="mb-6">
+        <p class="text-sm text-muted-foreground">
+          Found {{ filteredSlides.length }} of {{ slidesCount }} slides
+          <template v-if="searchTerm">
+            <span>
+              containing "
+              <span class="font-medium">{{ searchTerm }}</span>
+              "
+            </span>
+          </template>
+        </p>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
+        <SlideCard
+          v-for="slide in filteredSlides"
+          :key="slide.title"
+          :title="slide.title"
+          :image="slide.image"
+          :description="slide.description"
+          :url="slide.url"
+          :author="slide.author"
+          :date="slide.date"
+          @click="() => openSlide(slide)"
+        />
+      </div>
+    </div>
+
+    <!-- Slide Detail Modal -->
+    <SlideDetail
+      v-if="selectedSlide"
+      :slide="selectedSlide"
+      @close="closeSlide"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+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";
+
+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())
+  );
+});
+
+const selectedSlide = ref(null);
+
+const openSlide = (slide: any) => {
+  selectedSlide.value = slide;
+};
+
+const closeSlide = () => {
+  selectedSlide.value = null;
+};
+</script>