supaslidev 0.3.6 → 0.4.1

package/dist/index.d.ts

@@ -8,6 +8,7 @@ interface Presentation {
   theme: string;
   background: string;
   duration: string;
+  thumbnail?: string;
 }
 interface PackageJson {
   name?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "supaslidev",
-  "version": "0.3.6",
+  "version": "0.4.1",
   "description": "CLI toolkit for managing Supaslidev presentations",
   "keywords": [
     "slidev",
@@ -47,24 +47,25 @@
     "access": "public"
   },
   "dependencies": {
-    "@nuxt/ui": "^4.4.0",
-    "commander": "^14.0.0",
+    "@nuxt/ui": "^4.6.1",
+    "commander": "^14.0.3",
     "js-yaml": "^4.1.1",
     "nuxt": "^4.4.2",
-    "tailwindcss": "^4.1.18",
-    "vue": "^3.5.31"
+    "sharp": "^0.34.5",
+    "tailwindcss": "^4.2.4",
+    "vue": "^3.5.33"
   },
   "devDependencies": {
     "@nuxt/kit": "^4.4.2",
     "@nuxt/schema": "^4.4.2",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "^24.0.0",
-    "tsdown": "^0.21.6",
-    "tsx": "^4.19.0",
-    "typescript": "^6.0.0",
-    "vitest": "^4.0.0",
-    "vue-tsc": "^3.0.0",
-    "create-supaslidev": "^0.3.6"
+    "@types/node": "^24.12.2",
+    "tsdown": "^0.21.9",
+    "tsx": "^4.21.0",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.5",
+    "vue-tsc": "^3.2.7",
+    "create-supaslidev": "^0.4.1"
   },
   "scripts": {
     "dev": "nuxt dev",

package/server/api/thumbnail/[id].post.ts

@@ -0,0 +1,115 @@
+import { spawn } from 'node:child_process';
+import { join } from 'node:path';
+import { existsSync, mkdirSync, readdirSync, renameSync } from 'node:fs';
+import { isValidPresentationId } from '../../../src/shared/validation.js';
+import { optimizeThumbnail } from '../../../src/shared/optimize-thumbnail.js';
+import { getProjectRoot } from '../../utils/config';
+
+export default defineEventHandler(async (event) => {
+  const presentationId = getRouterParam(event, 'id')!;
+  const projectRoot = getProjectRoot();
+
+  if (!isValidPresentationId(presentationId)) {
+    throw createError({
+      statusCode: 400,
+      data: { success: false, error: 'Invalid presentation id' },
+    });
+  }
+
+  const presentationPath = join(projectRoot, 'presentations', presentationId);
+  const thumbnailsDir = join(projectRoot, 'thumbnails');
+  const outputBase = join(thumbnailsDir, presentationId);
+
+  if (!existsSync(presentationPath)) {
+    throw createError({
+      statusCode: 404,
+      data: { success: false, error: 'Presentation not found' },
+    });
+  }
+
+  if (!existsSync(thumbnailsDir)) {
+    mkdirSync(thumbnailsDir, { recursive: true });
+  }
+
+  // Step 1: Export PNG with Slidev
+  const exportResult = await new Promise<{ success: boolean; error?: string }>((resolve) => {
+    const slidevBin = join(presentationPath, 'node_modules', '.bin', 'slidev');
+    const child = spawn(
+      slidevBin,
+      ['export', '--format', 'png', '--range', '1', '--output', outputBase],
+      {
+        cwd: presentationPath,
+        stdio: ['pipe', 'pipe', 'pipe'],
+      },
+    );
+
+    let stderr = '';
+
+    child.stdout?.on('data', (data: Buffer) => {
+      const line = data.toString().trim();
+      if (line) console.log(`[thumbnail] ${line}`);
+    });
+
+    child.stderr?.on('data', (data: Buffer) => {
+      const line = data.toString().trim();
+      stderr += data.toString();
+      if (
+        line &&
+        !line.includes('outside of Vite serving allow list') &&
+        !line.includes('Refer to docs https://vite.dev')
+      ) {
+        console.error(`[thumbnail] ${line}`);
+      }
+    });
+
+    child.on('error', (err: Error) => {
+      resolve({ success: false, error: `Thumbnail generation failed: ${err.message}` });
+    });
+
+    child.on('close', (code: number | null) => {
+      if (code === 0) {
+        const pngDirect = `${outputBase}.png`;
+        const pngDir = outputBase;
+        const targetFile = join(thumbnailsDir, `${presentationId}.png`);
+
+        if (!existsSync(pngDirect) && existsSync(pngDir)) {
+          const pngs = readdirSync(pngDir)
+            .filter((f) => f.endsWith('.png'))
+            .sort();
+          if (pngs.length > 0) {
+            renameSync(join(pngDir, pngs[0]), targetFile);
+          }
+        }
+
+        resolve({ success: existsSync(targetFile) });
+      } else {
+        resolve({
+          success: false,
+          error: `Thumbnail generation failed with exit code ${code}. ${stderr}`,
+        });
+      }
+    });
+  });
+
+  if (!exportResult.success) {
+    return exportResult;
+  }
+
+  // Step 2: Optimize PNG to WebP
+  const pngFile = join(thumbnailsDir, `${presentationId}.png`);
+  try {
+    await optimizeThumbnail(pngFile);
+    return {
+      success: true,
+      thumbnailPath: `/thumbnails/${presentationId}.webp`,
+      filename: `${presentationId}.webp`,
+    };
+  } catch {
+    // Fall back to PNG if optimization fails
+    return {
+      success: true,
+      thumbnailPath: `/thumbnails/${presentationId}.png`,
+      filename: `${presentationId}.png`,
+    };
+  }
+});

package/server/routes/thumbnails/[...path].get.ts

@@ -0,0 +1,27 @@
+import { join, basename, relative } from 'node:path';
+import { existsSync, createReadStream } from 'node:fs';
+import { getProjectRoot } from '../../utils/config';
+
+export default defineEventHandler((event) => {
+  const path = getRouterParam(event, 'path') || '';
+  const projectRoot = getProjectRoot();
+  const thumbnailsDir = join(projectRoot, 'thumbnails');
+  const filePath = join(thumbnailsDir, path);
+
+  const rel = relative(thumbnailsDir, filePath);
+  const isAllowedExt = filePath.endsWith('.png') || filePath.endsWith('.webp');
+  if (
+    rel.startsWith('..') ||
+    !filePath.startsWith(thumbnailsDir) ||
+    !existsSync(filePath) ||
+    !isAllowedExt
+  ) {
+    throw createError({ statusCode: 404, message: 'Not found' });
+  }
+
+  const contentType = filePath.endsWith('.webp') ? 'image/webp' : 'image/png';
+  setHeader(event, 'Content-Type', contentType);
+  setHeader(event, 'Content-Disposition', `inline; filename="${basename(filePath)}"`);
+
+  return sendStream(event, createReadStream(filePath));
+});

package/server/utils/process-manager.ts

@@ -46,7 +46,7 @@ export function startPresentationServer(
 
   const port = getNextPort();
 
-  const child = spawn(slidevBin, ['--port', String(port), '--open', 'false'], {
+  const child = spawn(slidevBin, ['--port', String(port), '--remote', '--open', 'false'], {
     cwd: presentationPath,
     stdio: ['pipe', 'pipe', 'pipe'],
     detached: !IS_WINDOWS,

package/src/cli/commands/deploy.ts

@@ -1,9 +1,19 @@
 import { spawn } from 'node:child_process';
 import { join, dirname, resolve } from 'node:path';
-import { existsSync, mkdirSync, cpSync, rmSync, writeFileSync, readFileSync } from 'node:fs';
+import {
+  existsSync,
+  mkdirSync,
+  cpSync,
+  rmSync,
+  writeFileSync,
+  readFileSync,
+  readdirSync,
+  renameSync,
+} from 'node:fs';
 import { fileURLToPath } from 'node:url';
 import { findProjectRoot, getPresentations } from '../utils.js';
 import { regeneratePresentationsJson } from '../../shared/presentations.js';
+import { optimizeThumbnail } from '../../shared/optimize-thumbnail.js';
 
 export interface DeployOptions {
   output?: string;
@@ -160,8 +170,11 @@ export async function deploy(options: DeployOptions = {}): Promise<void> {
   console.log(`  Presentations: ${presentations.join(', ')}`);
   console.log('');
 
+  const totalSteps = 5;
+  const thumbnailsDir = join(projectRoot, 'thumbnails');
+
   // Step 1: Build each presentation with slidev build --base
-  console.log(`Step 1/${4}: Building ${presentations.length} presentation(s)...\n`);
+  console.log(`Step 1/${totalSteps}: Building ${presentations.length} presentation(s)...\n`);
 
   for (const id of presentations) {
     const presentationDir = join(presentationsDir, id);
@@ -176,13 +189,55 @@ export async function deploy(options: DeployOptions = {}): Promise<void> {
     console.log(`  Done: ${id}\n`);
   }
 
-  // Step 2: Generate presentations.json
-  console.log('Step 2/4: Generating presentations.json...\n');
+  // Step 2: Generate thumbnails for each presentation
+  console.log(`Step 2/${totalSteps}: Generating thumbnails...\n`);
+
+  if (!existsSync(thumbnailsDir)) {
+    mkdirSync(thumbnailsDir, { recursive: true });
+  }
 
-  regeneratePresentationsJson(presentationsDir, presentationsJsonPath);
+  for (const id of presentations) {
+    const presentationDir = join(presentationsDir, id);
+    const slidevBin = join(presentationDir, 'node_modules', '.bin', 'slidev');
+    const outputBase = join(thumbnailsDir, id);
+    const targetFile = join(thumbnailsDir, `${id}.png`);
+
+    console.log(`  Thumbnail: ${id}`);
+
+    try {
+      await runCommand(
+        slidevBin,
+        ['export', '--format', 'png', '--range', '1', '--output', outputBase],
+        {
+          cwd: presentationDir,
+        },
+      );
+
+      // Slidev exports into a directory <output>/<n>.png — move to <output>.png
+      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);
+        }
+      }
+
+      if (existsSync(targetFile)) {
+        await optimizeThumbnail(targetFile);
+        console.log(`  Done: ${id}\n`);
+      } else {
+        console.warn(`  Warning: Thumbnail for "${id}" could not be found after export.\n`);
+      }
+    } catch {
+      console.warn(`  Warning: Thumbnail generation failed for "${id}", skipping.\n`);
+    }
+  }
 
   // Step 3: Build the Nuxt dashboard in static mode
-  console.log('Step 3/4: Building dashboard...\n');
+  // (runs before presentations.json because the Nitro generate plugin
+  // overwrites presentations.json without thumbnail data)
+  console.log(`Step 3/${totalSteps}: Building dashboard...\n`);
 
   const nuxt = findNuxtBin(projectRoot, supaslidevRoot);
 
@@ -206,8 +261,16 @@ export async function deploy(options: DeployOptions = {}): Promise<void> {
     env: nuxtEnv,
   });
 
-  // Step 4: Assemble output directory
-  console.log('\nStep 4/4: Assembling deploy output...\n');
+  // Step 4: Generate presentations.json (after Nuxt build so it's not overwritten by Nitro plugin)
+  console.log(`\nStep 4/${totalSteps}: Generating presentations.json...\n`);
+
+  regeneratePresentationsJson(presentationsDir, presentationsJsonPath, {
+    thumbnailsDir,
+    basePath,
+  });
+
+  // Step 5: Assemble output directory
+  console.log(`\nStep 5/${totalSteps}: Assembling deploy output...\n`);
 
   // Clean and create output directory
   if (existsSync(outputDir)) {
@@ -238,6 +301,22 @@ export async function deploy(options: DeployOptions = {}): Promise<void> {
     }
   }
 
+  // Copy thumbnails into output/thumbnails/
+  if (existsSync(thumbnailsDir)) {
+    const thumbnailsOutputDir = join(outputDir, 'thumbnails');
+    mkdirSync(thumbnailsOutputDir, { recursive: true });
+
+    for (const id of presentations) {
+      const webpFile = join(thumbnailsDir, `${id}.webp`);
+      const pngFile = join(thumbnailsDir, `${id}.png`);
+      if (existsSync(webpFile)) {
+        cpSync(webpFile, join(thumbnailsOutputDir, `${id}.webp`));
+      } else if (existsSync(pngFile)) {
+        cpSync(pngFile, join(thumbnailsOutputDir, `${id}.png`));
+      }
+    }
+  }
+
   // Copy presentations.json to output root
   if (existsSync(presentationsJsonPath)) {
     cpSync(presentationsJsonPath, join(outputDir, 'presentations.json'));

package/src/cli/commands/thumbnail.ts

@@ -0,0 +1,89 @@
+import { spawn } from 'node:child_process';
+import { dirname, join } from 'node:path';
+import { existsSync, mkdirSync, readdirSync, renameSync } from 'node:fs';
+import { findProjectRoot, getPresentations, printAvailablePresentations } from '../utils.js';
+import { optimizeThumbnail } from '../../shared/optimize-thumbnail.js';
+
+export interface ThumbnailOptions {
+  output?: string;
+}
+
+export async function thumbnail(name: string, options: ThumbnailOptions = {}): Promise<void> {
+  const projectRoot = findProjectRoot();
+
+  if (!projectRoot) {
+    console.error('Error: Could not find a Supaslidev project.');
+    console.error('Make sure you are in a directory with a "presentations" folder.');
+    process.exit(1);
+  }
+
+  const presentationsDir = join(projectRoot, 'presentations');
+  const thumbnailsDir = join(projectRoot, 'thumbnails');
+  const presentations = getPresentations(presentationsDir);
+
+  if (!presentations.includes(name)) {
+    console.error(`Error: Presentation "${name}" not found`);
+    printAvailablePresentations(presentations);
+    process.exit(1);
+  }
+
+  const presentationDir = join(presentationsDir, name);
+  const outputPath = options.output ?? join(thumbnailsDir, name);
+
+  if (!existsSync(dirname(outputPath))) {
+    mkdirSync(dirname(outputPath), { recursive: true });
+  }
+
+  console.log('\n' + '='.repeat(50));
+  console.log(`  Generating thumbnail: ${name}`);
+  console.log('='.repeat(50) + '\n');
+
+  const slidevBin = join(presentationDir, 'node_modules', '.bin', 'slidev');
+
+  await new Promise<void>((resolve) => {
+    const slidev = spawn(
+      slidevBin,
+      ['export', '--format', 'png', '--range', '1', '--output', outputPath],
+      {
+        cwd: presentationDir,
+        stdio: 'inherit',
+      },
+    );
+
+    slidev.on('error', (err) => {
+      console.error(`Failed to generate thumbnail: ${err.message}`);
+      process.exit(1);
+    });
+
+    slidev.on('close', (code) => {
+      if (code !== 0) {
+        console.error(`\nThumbnail generation failed with exit code ${code}`);
+        process.exit(code ?? 1);
+      }
+
+      // Slidev exports into a directory <output>/<n>.png — move it to <output>.png
+      const targetFile = `${outputPath}.png`;
+      if (!existsSync(targetFile) && existsSync(outputPath)) {
+        const pngs = readdirSync(outputPath)
+          .filter((f) => f.endsWith('.png'))
+          .sort();
+        if (pngs.length > 0) {
+          renameSync(join(outputPath, pngs[0]), targetFile);
+        }
+      }
+
+      resolve();
+    });
+  });
+
+  // Optimize PNG to WebP
+  const pngFile = `${outputPath}.png`;
+  if (existsSync(pngFile)) {
+    const webpFile = await optimizeThumbnail(pngFile);
+
+    console.log('\n' + '='.repeat(50));
+    console.log(`  Thumbnail generated!`);
+    console.log(`  Output: ${webpFile}`);
+    console.log('='.repeat(50) + '\n');
+  }
+}

package/src/cli/index.ts

@@ -7,6 +7,7 @@ import { present } from './commands/present.js';
 import { exportPdf } from './commands/export.js';
 import { importPresentation } from './commands/import.js';
 import { deploy } from './commands/deploy.js';
+import { thumbnail } from './commands/thumbnail.js';
 
 const program = new Command();
 
@@ -57,6 +58,15 @@ program
     await importPresentation(source, { name: options.name, 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: string, options: { output?: string }) => {
+    await thumbnail(name, options);
+  });
+
 program
   .command('deploy')
   .description('Build all presentations into a static deployable site')

package/src/shared/optimize-thumbnail.ts

@@ -0,0 +1,23 @@
+import sharp from 'sharp';
+import { existsSync, unlinkSync } from 'node:fs';
+
+const THUMBNAIL_WIDTH = 1280;
+const WEBP_QUALITY = 80;
+
+export async function optimizeThumbnail(pngPath: string): Promise<string> {
+  if (!existsSync(pngPath)) {
+    throw new Error(`Thumbnail not found: ${pngPath}`);
+  }
+
+  const webpPath = pngPath.replace(/\.png$/, '.webp');
+
+  await sharp(pngPath)
+    .resize(THUMBNAIL_WIDTH, undefined, { withoutEnlargement: true })
+    .webp({ quality: WEBP_QUALITY })
+    .toFile(webpPath);
+
+  // Remove the original PNG
+  unlinkSync(pngPath);
+
+  return webpPath;
+}

package/src/shared/presentations.ts

@@ -64,9 +64,15 @@ export function extractDescription(info: string | undefined): string {
     .join(' ');
 }
 
+export interface RegenerateOptions {
+  thumbnailsDir?: string;
+  basePath?: string;
+}
+
 export function regeneratePresentationsJson(
   presentationsDir: string,
   presentationsJsonPath: string,
+  options: RegenerateOptions = {},
 ): void {
   if (!existsSync(presentationsDir)) {
     return;
@@ -87,7 +93,7 @@ export function regeneratePresentationsJson(
       const content = readFileSync(slidesPath, 'utf-8');
       const frontmatter = parseFrontmatter(content);
 
-      return {
+      const presentation: Presentation = {
         id: name,
         title: frontmatter.title || name,
         description: extractDescription(frontmatter.info) || '',
@@ -95,6 +101,19 @@ export function regeneratePresentationsJson(
         background: frontmatter.background || '',
         duration: frontmatter.duration || '',
       };
+
+      if (options.thumbnailsDir) {
+        const base = (options.basePath ?? '/').replace(/\/*$/, '/');
+        const webpFile = join(options.thumbnailsDir, `${name}.webp`);
+        const pngFile = join(options.thumbnailsDir, `${name}.png`);
+        if (existsSync(webpFile)) {
+          presentation.thumbnail = `${base}thumbnails/${name}.webp`;
+        } else if (existsSync(pngFile)) {
+          presentation.thumbnail = `${base}thumbnails/${name}.png`;
+        }
+      }
+
+      return presentation;
     })
     .sort((a, b) => a.title.localeCompare(b.title));
 

package/src/shared/types.ts

@@ -5,6 +5,7 @@ export interface Presentation {
   theme: string;
   background: string;
   duration: string;
+  thumbnail?: string;
 }
 
 export interface PackageJson {