supaslidev 0.4.1 → 0.4.2

package/dist/cli/index.js

@@ -206,11 +206,13 @@ function regeneratePresentationsJson(presentationsDir, presentationsJsonPath, op
 		return isDir && hasSlides;
 	}).map((name) => {
 		const frontmatter = parseFrontmatter(readFileSync(join(presentationsDir, name, "slides.md"), "utf-8"));
+		const colorSchema = frontmatter.colorSchema;
 		const presentation = {
 			id: name,
 			title: frontmatter.title || name,
 			description: extractDescription(frontmatter.info) || "",
 			theme: frontmatter.theme || "default",
+			colorSchema: colorSchema || "",
 			background: frontmatter.background || "",
 			duration: frontmatter.duration || ""
 		};
@@ -186676,7 +186678,7 @@ var require_ts_morph = /* @__PURE__ */ __commonJSMin(((exports) => {
 var import_picocolors = /* @__PURE__ */ __toESM(require_picocolors(), 1);
 require_dist$2();
 require_ts_morph();
-const CLI_VERSION = "0.4.1";
+const CLI_VERSION = "0.4.2";
 const PACKAGE_NAME = "@supaslidev/cli";
 const CACHE_DIR = join(tmpdir(), "supaslidev-cli");
 const CACHE_FILE = join(CACHE_DIR, "version-cache.json");
@@ -188029,11 +188031,11 @@ function findNuxtBin(projectRoot, supaslidevRoot) {
 }
 function createVercelConfig(basePath, presentations) {
 	const rewrites = presentations.map((id) => ({
-		source: `${basePath}presentations/${id}/(.*)`,
+		source: `${basePath}presentations/${id}/:path((?!.*\\.).*)`,
 		destination: `${basePath}presentations/${id}/index.html`
 	}));
 	rewrites.push({
-		source: `${basePath}(.*)`,
+		source: `${basePath}:path((?!.*\\.).*)`,
 		destination: `${basePath}index.html`
 	});
 	return JSON.stringify({ rewrites }, null, 2);
@@ -188067,7 +188069,7 @@ async function deploy(options = {}) {
 	const presentationsDir = join(projectRoot, "presentations");
 	const presentations = getPresentations$1(presentationsDir);
 	if (presentations.length === 0) throw new Error("No presentations found in the presentations directory.");
-	const outputDir = resolve(options.output ?? join(projectRoot, "deploy"));
+	const outputDir = resolve(projectRoot, options.output ?? "deploy");
 	const resolvedProjectRoot = resolve(projectRoot);
 	if (!outputDir.startsWith(resolvedProjectRoot)) throw new Error(`Output directory "${outputDir}" is outside the project root "${resolvedProjectRoot}". Use a path within your project.`);
 	const basePath = (options.base ?? "/").replace(/\/*$/, "/");
@@ -188103,17 +188105,21 @@ async function deploy(options = {}) {
 		const slidevBin = join(presentationDir, "node_modules", ".bin", "slidev");
 		const outputBase = join(thumbnailsDir, id);
 		const targetFile = join(thumbnailsDir, `${id}.png`);
-		console.log(`  Thumbnail: ${id}`);
+		const slidesPath = join(presentationDir, "slides.md");
+		const useDark = (existsSync(slidesPath) ? parseFrontmatter(readFileSync(slidesPath, "utf-8")) : {}).colorSchema === "dark";
+		console.log(`  Thumbnail: ${id}${useDark ? " (dark mode)" : ""}`);
+		const exportArgs = [
+			"export",
+			"--format",
+			"png",
+			"--range",
+			"1",
+			"--output",
+			outputBase
+		];
+		if (useDark) exportArgs.push("--dark");
 		try {
-			await runCommand(slidevBin, [
-				"export",
-				"--format",
-				"png",
-				"--range",
-				"1",
-				"--output",
-				outputBase
-			], { cwd: presentationDir });
+			await runCommand(slidevBin, exportArgs, { cwd: presentationDir });
 			if (!existsSync(targetFile) && existsSync(outputBase)) {
 				const pngs = readdirSync(outputBase).filter((f) => f.endsWith(".png")).sort();
 				if (pngs.length > 0) renameSync(join(outputBase, pngs[0]), targetFile);
@@ -188131,6 +188137,7 @@ async function deploy(options = {}) {
 	const nuxtEnv = {
 		...process.env,
 		NODE_ENV: "production",
+		NITRO_PRESET: process.env.NITRO_PRESET ?? "static",
 		SUPASLIDEV_PROJECT_ROOT: projectRoot,
 		SUPASLIDEV_PRESENTATIONS_DIR: presentationsDir,
 		NUXT_PUBLIC_DEPLOY_MODE: "true"
@@ -188173,6 +188180,17 @@ async function deploy(options = {}) {
 	writeFileSync(join(outputDir, "vercel.json"), createVercelConfig(basePath, presentations));
 	writeFileSync(join(outputDir, "netlify.toml"), createNetlifyConfig(basePath, presentations));
 	writeFileSync(join(outputDir, "package.json"), createDeployPackageJson());
+	const rootVercelJson = join(projectRoot, "vercel.json");
+	if (!existsSync(rootVercelJson)) {
+		const vercelConfig = {
+			framework: null,
+			installCommand: `${existsSync(join(projectRoot, "pnpm-lock.yaml")) ? "pnpm" : existsSync(join(projectRoot, "yarn.lock")) ? "yarn" : "npm"} install`,
+			buildCommand: "npx supaslidev deploy --output dist",
+			outputDirectory: "dist"
+		};
+		writeFileSync(rootVercelJson, JSON.stringify(vercelConfig, null, 2) + "\n");
+		console.log("  Generated vercel.json in project root for Vercel deployment.\n");
+	}
 	console.log("=".repeat(50));
 	console.log("  Deploy package ready!");
 	console.log("=".repeat(50));
@@ -188210,16 +188228,23 @@ async function thumbnail(name, options = {}) {
 	console.log(`  Generating thumbnail: ${name}`);
 	console.log("=".repeat(50) + "\n");
 	const slidevBin = join(presentationDir, "node_modules", ".bin", "slidev");
+	let useDark = options.dark ?? false;
+	if (options.dark === void 0) {
+		const slidesPath = join(presentationDir, "slides.md");
+		if (existsSync(slidesPath)) useDark = parseFrontmatter(readFileSync(slidesPath, "utf-8")).colorSchema === "dark";
+	}
+	const exportArgs = [
+		"export",
+		"--format",
+		"png",
+		"--range",
+		"1",
+		"--output",
+		outputPath
+	];
+	if (useDark) exportArgs.push("--dark");
 	await new Promise((resolve) => {
-		const slidev = spawn(slidevBin, [
-			"export",
-			"--format",
-			"png",
-			"--range",
-			"1",
-			"--output",
-			outputPath
-		], {
+		const slidev = spawn(slidevBin, exportArgs, {
 			cwd: presentationDir,
 			stdio: "inherit"
 		});
@@ -188271,7 +188296,7 @@ program.command("import").description("Import existing Sli.dev presentation(s)")
 		install: options.install ?? true
 	});
 });
-program.command("thumbnail").description("Generate a PNG thumbnail of the first slide").argument("<name>", "Name of the presentation").option("-o, --output <path>", "Output path for the thumbnail (without extension)").action(async (name, options) => {
+program.command("thumbnail").description("Generate a PNG thumbnail of the first slide").argument("<name>", "Name of the presentation").option("-o, --output <path>", "Output path for the thumbnail (without extension)").option("--dark", "Export as dark theme (auto-detected from colorSchema if not set)").action(async (name, options) => {
 	await thumbnail(name, options);
 });
 program.command("deploy").description("Build all presentations into a static deployable site").option("-o, --output <dir>", "Output directory for the deploy package").option("--base <path>", "Base path for the deployed site (default: /)").action(async (options) => {

package/dist/index.d.ts

@@ -6,6 +6,7 @@ interface Presentation {
   title: string;
   description: string;
   theme: string;
+  colorSchema: 'dark' | 'light' | 'both' | '';
   background: string;
   duration: string;
   thumbnail?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "supaslidev",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "CLI toolkit for managing Supaslidev presentations",
   "keywords": [
     "slidev",
@@ -65,7 +65,7 @@
     "typescript": "^6.0.3",
     "vitest": "^4.1.5",
     "vue-tsc": "^3.2.7",
-    "create-supaslidev": "^0.4.1"
+    "create-supaslidev": "^0.4.2"
   },
   "scripts": {
     "dev": "nuxt dev",

package/src/cli/commands/deploy.ts

@@ -12,7 +12,7 @@ import {
 } from 'node:fs';
 import { fileURLToPath } from 'node:url';
 import { findProjectRoot, getPresentations } from '../utils.js';
-import { regeneratePresentationsJson } from '../../shared/presentations.js';
+import { parseFrontmatter, regeneratePresentationsJson } from '../../shared/presentations.js';
 import { optimizeThumbnail } from '../../shared/optimize-thumbnail.js';
 
 export interface DeployOptions {
@@ -84,13 +84,15 @@ function findNuxtBin(
 }
 
 export function createVercelConfig(basePath: string, presentations: string[]): string {
+  // Use negative lookahead to exclude paths with a dot (file extensions like .js, .css, .png)
+  // so that asset requests are served as static files instead of being rewritten to index.html
   const rewrites = presentations.map((id) => ({
-    source: `${basePath}presentations/${id}/(.*)`,
+    source: `${basePath}presentations/${id}/:path((?!.*\\.).*)`,
     destination: `${basePath}presentations/${id}/index.html`,
   }));
 
   rewrites.push({
-    source: `${basePath}(.*)`,
+    source: `${basePath}:path((?!.*\\.).*)`,
     destination: `${basePath}index.html`,
   });
 
@@ -147,7 +149,7 @@ export async function deploy(options: DeployOptions = {}): Promise<void> {
     throw new Error('No presentations found in the presentations directory.');
   }
 
-  const outputDir = resolve(options.output ?? join(projectRoot, 'deploy'));
+  const outputDir = resolve(projectRoot, options.output ?? 'deploy');
   const resolvedProjectRoot = resolve(projectRoot);
 
   // Safety check: prevent deleting directories outside the project root
@@ -202,16 +204,24 @@ export async function deploy(options: DeployOptions = {}): Promise<void> {
     const outputBase = join(thumbnailsDir, id);
     const targetFile = join(thumbnailsDir, `${id}.png`);
 
-    console.log(`  Thumbnail: ${id}`);
+    // Detect dark mode from frontmatter
+    const slidesPath = join(presentationDir, 'slides.md');
+    const frontmatter = existsSync(slidesPath)
+      ? parseFrontmatter(readFileSync(slidesPath, 'utf-8'))
+      : {};
+    const useDark = frontmatter.colorSchema === 'dark';
+
+    console.log(`  Thumbnail: ${id}${useDark ? ' (dark mode)' : ''}`);
+
+    const exportArgs = ['export', '--format', 'png', '--range', '1', '--output', outputBase];
+    if (useDark) {
+      exportArgs.push('--dark');
+    }
 
     try {
-      await runCommand(
-        slidevBin,
-        ['export', '--format', 'png', '--range', '1', '--output', outputBase],
-        {
-          cwd: presentationDir,
-        },
-      );
+      await runCommand(slidevBin, exportArgs, {
+        cwd: presentationDir,
+      });
 
       // Slidev exports into a directory <output>/<n>.png — move to <output>.png
       if (!existsSync(targetFile) && existsSync(outputBase)) {
@@ -244,6 +254,7 @@ export async function deploy(options: DeployOptions = {}): Promise<void> {
   const nuxtEnv: Record<string, string | undefined> = {
     ...process.env,
     NODE_ENV: 'production',
+    NITRO_PRESET: process.env.NITRO_PRESET ?? 'static',
     SUPASLIDEV_PROJECT_ROOT: projectRoot,
     SUPASLIDEV_PRESENTATIONS_DIR: presentationsDir,
     NUXT_PUBLIC_DEPLOY_MODE: 'true',
@@ -327,6 +338,24 @@ export async function deploy(options: DeployOptions = {}): Promise<void> {
   writeFileSync(join(outputDir, 'netlify.toml'), createNetlifyConfig(basePath, presentations));
   writeFileSync(join(outputDir, 'package.json'), createDeployPackageJson());
 
+  // Generate root vercel.json for build-from-repo workflow if it doesn't exist
+  const rootVercelJson = join(projectRoot, 'vercel.json');
+  if (!existsSync(rootVercelJson)) {
+    const pm = existsSync(join(projectRoot, 'pnpm-lock.yaml'))
+      ? 'pnpm'
+      : existsSync(join(projectRoot, 'yarn.lock'))
+        ? 'yarn'
+        : 'npm';
+    const vercelConfig = {
+      framework: null,
+      installCommand: `${pm} install`,
+      buildCommand: 'npx supaslidev deploy --output dist',
+      outputDirectory: 'dist',
+    };
+    writeFileSync(rootVercelJson, JSON.stringify(vercelConfig, null, 2) + '\n');
+    console.log('  Generated vercel.json in project root for Vercel deployment.\n');
+  }
+
   console.log('='.repeat(50));
   console.log('  Deploy package ready!');
   console.log('='.repeat(50));

package/src/cli/commands/thumbnail.ts

@@ -1,11 +1,13 @@
 import { spawn } from 'node:child_process';
 import { dirname, join } from 'node:path';
-import { existsSync, mkdirSync, readdirSync, renameSync } from 'node:fs';
+import { existsSync, mkdirSync, readdirSync, readFileSync, renameSync } from 'node:fs';
 import { findProjectRoot, getPresentations, printAvailablePresentations } from '../utils.js';
 import { optimizeThumbnail } from '../../shared/optimize-thumbnail.js';
+import { parseFrontmatter } from '../../shared/presentations.js';
 
 export interface ThumbnailOptions {
   output?: string;
+  dark?: boolean;
 }
 
 export async function thumbnail(name: string, options: ThumbnailOptions = {}): Promise<void> {
@@ -40,15 +42,26 @@ export async function thumbnail(name: string, options: ThumbnailOptions = {}): P
 
   const slidevBin = join(presentationDir, 'node_modules', '.bin', 'slidev');
 
+  // Auto-detect dark mode from frontmatter unless explicitly set
+  let useDark = options.dark ?? false;
+  if (options.dark === undefined) {
+    const slidesPath = join(presentationDir, 'slides.md');
+    if (existsSync(slidesPath)) {
+      const frontmatter = parseFrontmatter(readFileSync(slidesPath, 'utf-8'));
+      useDark = frontmatter.colorSchema === 'dark';
+    }
+  }
+
+  const exportArgs = ['export', '--format', 'png', '--range', '1', '--output', outputPath];
+  if (useDark) {
+    exportArgs.push('--dark');
+  }
+
   await new Promise<void>((resolve) => {
-    const slidev = spawn(
-      slidevBin,
-      ['export', '--format', 'png', '--range', '1', '--output', outputPath],
-      {
-        cwd: presentationDir,
-        stdio: 'inherit',
-      },
-    );
+    const slidev = spawn(slidevBin, exportArgs, {
+      cwd: presentationDir,
+      stdio: 'inherit',
+    });
 
     slidev.on('error', (err) => {
       console.error(`Failed to generate thumbnail: ${err.message}`);

package/src/cli/index.ts

@@ -63,7 +63,8 @@ program
   .description('Generate a PNG thumbnail of the first slide')
   .argument('<name>', 'Name of the presentation')
   .option('-o, --output <path>', 'Output path for the thumbnail (without extension)')
-  .action(async (name: string, options: { output?: string }) => {
+  .option('--dark', 'Export as dark theme (auto-detected from colorSchema if not set)')
+  .action(async (name: string, options: { output?: string; dark?: boolean }) => {
     await thumbnail(name, options);
   });
 

package/src/shared/presentations.ts

@@ -93,11 +93,14 @@ export function regeneratePresentationsJson(
       const content = readFileSync(slidesPath, 'utf-8');
       const frontmatter = parseFrontmatter(content);
 
+      const colorSchema = frontmatter.colorSchema as Presentation['colorSchema'];
+
       const presentation: Presentation = {
         id: name,
         title: frontmatter.title || name,
         description: extractDescription(frontmatter.info) || '',
         theme: frontmatter.theme || 'default',
+        colorSchema: colorSchema || '',
         background: frontmatter.background || '',
         duration: frontmatter.duration || '',
       };

package/src/shared/types.ts

@@ -3,6 +3,7 @@ export interface Presentation {
   title: string;
   description: string;
   theme: string;
+  colorSchema: 'dark' | 'light' | 'both' | '';
   background: string;
   duration: string;
   thumbnail?: string;