supaslidev 0.1.4 → 0.2.0

package/nuxt.config.ts

@@ -0,0 +1,53 @@
+import { fileURLToPath } from 'node:url';
+import { join } from 'node:path';
+import { readFileSync } from 'node:fs';
+
+const dir = fileURLToPath(new URL('.', import.meta.url));
+const pkg = JSON.parse(readFileSync(join(dir, 'package.json'), 'utf-8'));
+
+// When running via `supaslidev dev`, the Nuxt CWD is the package root inside
+// node_modules. Place the build cache in the user's project root instead so
+// it persists correctly across restarts and doesn't pollute node_modules.
+const projectRoot = process.env.SUPASLIDEV_PROJECT_ROOT || process.cwd();
+
+export default defineNuxtConfig({
+  buildDir: join(projectRoot, '.nuxt'),
+
+  // SPA mode: the dashboard is a local dev tool that doesn't need SSR.
+  // With SSR, Vue hydration timing causes e2e tests to interact with
+  // server-rendered elements before they become interactive.
+  ssr: false,
+
+  modules: ['@nuxt/ui', join(dir, 'src/module.ts')],
+
+  css: [join(dir, 'app/assets/css/main.css')],
+
+  devtools: { enabled: false },
+
+  // Disable external font providers — the dashboard is a local dev tool
+  // and should work offline without fetching from remote font services
+  fonts: {
+    defaults: {
+      weights: [400, 500, 600, 700],
+    },
+    providers: {
+      bunny: false,
+      fontshare: false,
+      fontsource: false,
+      google: false,
+      googleicons: false,
+    },
+  },
+
+  runtimeConfig: {
+    supaslidev: {
+      projectRoot: '',
+      presentationsDir: '',
+    },
+    public: {
+      supaslidevVersion: pkg.version,
+    },
+  },
+
+  compatibilityDate: '2025-05-01',
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "supaslidev",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "CLI toolkit for managing Supaslidev presentations",
   "keywords": [
     "slidev",
@@ -21,15 +21,26 @@
     "supaslidev": "./dist/cli/index.js"
   },
   "files": [
+    "app",
     "dist",
-    "scripts",
-    "server"
+    "nuxt.config.ts",
+    "public",
+    "server",
+    "src"
   ],
   "type": "module",
-  "main": "./dist/cli/index.js",
+  "main": "./nuxt.config.ts",
   "exports": {
     ".": {
-      "import": "./dist/cli/index.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./src/index.ts"
+    },
+    "./layer": "./nuxt.config.ts",
+    "./nuxt": {
+      "types": "./dist/module.d.ts",
+      "import": "./dist/module.js",
+      "default": "./src/module.ts"
     }
   },
   "publishConfig": {
@@ -38,31 +49,27 @@
   "dependencies": {
     "@nuxt/ui": "^4.4.0",
     "commander": "^13.1.0",
-    "create-supaslidev": "^0.1.0",
     "js-yaml": "^4.1.1",
+    "nuxt": "^4.4.2",
     "tailwindcss": "^4.1.18",
-    "vue": "^3.5.0",
-    "vue-router": "^4.6.4"
+    "vue": "^3.5.31"
   },
   "devDependencies": {
+    "@nuxt/kit": "^4.4.2",
+    "@nuxt/schema": "^4.4.2",
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^22.10.0",
-    "@vitejs/plugin-vue": "^5.2.1",
     "tsdown": "^0.12.5",
     "tsx": "^4.19.0",
     "typescript": "^5.3.3",
-    "vite": "^6.0.7",
-    "vitest": "^3.0.0",
-    "vue-tsc": "^2.0.0"
+    "vitest": "^4.0.0",
+    "vue-tsc": "^2.0.0",
+    "create-supaslidev": "^0.2.0"
   },
   "scripts": {
-    "dev": "tsx src/cli/index.ts",
-    "dev:api": "node server/api.js",
-    "build": "vite build && tsdown",
-    "build:cli": "tsdown",
-    "preview": "vite preview",
-    "generate": "node scripts/generate-presentations.mjs",
-    "typecheck": "vue-tsc --noEmit && tsc --noEmit -p tsconfig.cli.json",
+    "dev": "nuxt dev",
+    "build": "tsdown",
+    "typecheck": "nuxt typecheck",
     "lint": "oxlint --config ../../oxlint.json .",
     "test": "vitest run",
     "test:watch": "vitest"

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

@@ -0,0 +1,67 @@
+import { spawn } from 'node:child_process';
+import { join } from 'node:path';
+import { existsSync, mkdirSync } from 'node:fs';
+import { isValidPresentationId } from '../../../src/shared/validation.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 exportsDir = join(projectRoot, 'exports');
+  const outputPath = join(exportsDir, `${presentationId}.pdf`);
+
+  if (!existsSync(presentationPath)) {
+    throw createError({
+      statusCode: 404,
+      data: { success: false, error: 'Presentation not found' },
+    });
+  }
+
+  if (!existsSync(exportsDir)) {
+    mkdirSync(exportsDir, { recursive: true });
+  }
+
+  return new Promise((resolve) => {
+    const child = spawn('npx', ['slidev', 'export', '--output', outputPath], {
+      cwd: presentationPath,
+      stdio: ['pipe', 'pipe', 'pipe'],
+      shell: true,
+    });
+
+    let stderr = '';
+
+    child.stdout?.on('data', (data: Buffer) => {
+      console.log(`[export] ${data.toString().trim()}`);
+    });
+
+    child.stderr?.on('data', (data: Buffer) => {
+      stderr += data.toString();
+      console.error(`[export] ${data.toString().trim()}`);
+    });
+
+    child.on('error', (err: Error) => {
+      resolve({ success: false, error: `Export failed: ${err.message}` });
+    });
+
+    child.on('close', (code: number | null) => {
+      if (code === 0) {
+        resolve({
+          success: true,
+          pdfPath: `/exports/${presentationId}.pdf`,
+          filename: `${presentationId}.pdf`,
+        });
+      } else {
+        resolve({ success: false, error: `Export failed with exit code ${code}. ${stderr}` });
+      }
+    });
+  });
+});

package/server/api/open-editor/[id].post.ts

@@ -0,0 +1,28 @@
+import { spawn } from 'node:child_process';
+import { join } from 'node:path';
+import { existsSync } from 'node:fs';
+import { isValidPresentationId } from '../../../src/shared/validation.js';
+import { getProjectRoot } from '../../utils/config';
+
+export default defineEventHandler((event) => {
+  const presentationId = getRouterParam(event, 'id')!;
+  const projectRoot = getProjectRoot();
+
+  if (!isValidPresentationId(presentationId)) {
+    throw createError({
+      statusCode: 400,
+      data: { success: false, error: 'Invalid presentation id' },
+    });
+  }
+
+  const slidesPath = join(projectRoot, 'presentations', presentationId, 'slides.md');
+  if (!existsSync(slidesPath)) {
+    throw createError({
+      statusCode: 404,
+      data: { success: false, error: 'Presentation not found' },
+    });
+  }
+
+  spawn('code', [slidesPath], { detached: true, stdio: 'ignore' }).unref();
+  return { success: true };
+});

package/server/api/presentations/import.post.ts

@@ -0,0 +1,139 @@
+import { spawn } from 'node:child_process';
+import { join, basename, resolve } from 'node:path';
+import { existsSync, readFileSync, writeFileSync } from 'node:fs';
+import {
+  validateSourceDirectoryResult,
+  SLUG_REGEX,
+  copyDirectorySelective,
+  convertToCatalogDependencies,
+  hasSharedPackage,
+  addSharedDependencyToPackageJson,
+  addSharedAddonToSlides,
+  regeneratePresentationsJson,
+} from '../../../src/shared/index.js';
+import { getProjectRoot, getPresentationsDir, getPresentationsJsonPath } from '../../utils/config';
+
+export default defineEventHandler(async (event) => {
+  const body = await readBody(event);
+  const { source, name } = body;
+
+  const projectRoot = getProjectRoot();
+  const presentationsDir = getPresentationsDir();
+  const sourcePath = resolve(source);
+
+  // This endpoint is dev-only; sourcePath is validated by validateSourceDirectoryResult
+  const validation = validateSourceDirectoryResult(sourcePath);
+
+  if (!validation.isValid) {
+    throw createError({
+      statusCode: 400,
+      data: { field: 'source', message: validation.error },
+    });
+  }
+
+  const presentationName =
+    name ||
+    basename(sourcePath)
+      .toLowerCase()
+      .replace(/[^a-z0-9-]/g, '-')
+      .replace(/-{2,}/g, '-')
+      .replace(/^-+|-+$/g, '')
+    || 'untitled';
+
+  if (!SLUG_REGEX.test(presentationName)) {
+    throw createError({
+      statusCode: 400,
+      data: {
+        field: 'name',
+        message: 'Name must be a valid slug (lowercase letters, numbers, hyphens only)',
+      },
+    });
+  }
+
+  const destinationPath = join(presentationsDir, presentationName);
+
+  if (existsSync(destinationPath)) {
+    throw createError({
+      statusCode: 400,
+      data: { field: 'name', message: 'A presentation with this name already exists' },
+    });
+  }
+
+  copyDirectorySelective(sourcePath, destinationPath);
+
+  const sourcePackageJsonPath = join(sourcePath, 'package.json');
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let packageJson: any;
+  try {
+    const packageJsonContent = readFileSync(sourcePackageJsonPath, 'utf-8');
+    packageJson = JSON.parse(packageJsonContent);
+  } catch {
+    throw createError({
+      statusCode: 400,
+      data: { field: 'source', message: `Invalid package.json in ${sourcePackageJsonPath}` },
+    });
+  }
+
+  packageJson.name = `@supaslidev/${presentationName}`;
+  packageJson.private = true;
+  packageJson.scripts = {
+    dev: 'slidev --open',
+    build: 'slidev build',
+    export: 'slidev export',
+  };
+
+  if (packageJson.dependencies) {
+    packageJson.dependencies = convertToCatalogDependencies(packageJson.dependencies);
+  }
+  if (packageJson.devDependencies) {
+    packageJson.devDependencies = convertToCatalogDependencies(packageJson.devDependencies);
+  }
+
+  const sharedExists = hasSharedPackage(projectRoot);
+  if (sharedExists) {
+    addSharedDependencyToPackageJson(packageJson);
+  }
+
+  writeFileSync(
+    join(destinationPath, 'package.json'),
+    JSON.stringify(packageJson, null, 2) + '\n',
+  );
+
+  if (sharedExists) {
+    const slidesPath = join(destinationPath, 'slides.md');
+    if (existsSync(slidesPath)) {
+      addSharedAddonToSlides(slidesPath);
+    }
+  }
+
+  regeneratePresentationsJson(presentationsDir, getPresentationsJsonPath());
+
+  const presentation = {
+    id: presentationName,
+    title: presentationName,
+    description: '',
+    theme: 'default',
+    background: 'https://cover.sli.dev',
+    duration: '',
+  };
+
+  // Run pnpm install in background
+  const install = spawn('pnpm', ['install'], {
+    cwd: projectRoot,
+    stdio: 'inherit',
+    shell: true,
+  });
+
+  install.on('close', (code: number | null) => {
+    if (code !== 0) {
+      console.error(`[import] pnpm install failed with code ${code}`);
+    }
+  });
+
+  install.on('error', (err) => {
+    console.error(`[import] pnpm install spawn error: ${err.message}`);
+  });
+
+  setResponseStatus(event, 201);
+  return presentation;
+});

package/server/api/presentations/index.get.ts

@@ -0,0 +1,18 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { getPresentationsJsonPath } from '../../utils/config';
+
+export default defineEventHandler(() => {
+  const presentationsJsonPath = getPresentationsJsonPath();
+
+  if (existsSync(presentationsJsonPath)) {
+    const data = readFileSync(presentationsJsonPath, 'utf-8');
+    try {
+      return JSON.parse(data);
+    } catch (err) {
+      console.error(`Failed to parse ${presentationsJsonPath}: ${(err as Error).message}`);
+      return [];
+    }
+  }
+
+  return [];
+});

package/server/api/presentations/index.post.ts

@@ -0,0 +1,175 @@
+import { spawn } from 'node:child_process';
+import { join } from 'node:path';
+import { existsSync, readFileSync, writeFileSync } from 'node:fs';
+import {
+  parseFrontmatter,
+  extractDescription,
+  regeneratePresentationsJson,
+  hasSharedPackage,
+  addSharedAddonToSlides,
+  SLUG_REGEX,
+} from '../../../src/shared/index.js';
+import { getProjectRoot, getPresentationsDir, getPresentationsJsonPath } from '../../utils/config';
+
+export default defineEventHandler(async (event) => {
+  const body = await readBody(event);
+  const { name, title, description, template = 'default' } = body;
+
+  const projectRoot = getProjectRoot();
+  const presentationsDir = getPresentationsDir();
+  const presentationPath = join(presentationsDir, name);
+
+  if (existsSync(presentationPath)) {
+    throw createError({
+      statusCode: 400,
+      data: { field: 'name', message: 'A presentation with this name already exists' },
+    });
+  }
+
+  if (!SLUG_REGEX.test(name)) {
+    throw createError({
+      statusCode: 400,
+      data: {
+        field: 'name',
+        message: 'Name must be a valid slug (lowercase letters, numbers, hyphens only)',
+      },
+    });
+  }
+
+  return new Promise((resolve) => {
+    const child = spawn('pnpm', ['create', 'slidev', name], {
+      cwd: presentationsDir,
+      stdio: ['pipe', 'pipe', 'pipe'],
+      shell: true,
+    });
+
+    let stderr = '';
+    let scaffoldingDone = false;
+    let pollInterval: ReturnType<typeof setInterval> | null = null;
+    const slidesPath = join(presentationPath, 'slides.md');
+
+    const checkScaffoldingComplete = () => {
+      if (existsSync(slidesPath) && !scaffoldingDone) {
+        scaffoldingDone = true;
+        if (pollInterval) clearInterval(pollInterval);
+        child.kill('SIGTERM');
+      }
+    };
+
+    pollInterval = setInterval(checkScaffoldingComplete, 200);
+
+    const scaffoldTimeout = setTimeout(() => {
+      if (!scaffoldingDone) {
+        if (pollInterval) clearInterval(pollInterval);
+        child.kill('SIGTERM');
+      }
+    }, 60000);
+
+    child.stderr.on('data', (data: Buffer) => {
+      stderr += data.toString();
+    });
+
+    child.on('error', (err: Error) => {
+      if (pollInterval) clearInterval(pollInterval);
+      clearTimeout(scaffoldTimeout);
+      resolve({ success: false, message: `Failed to create presentation: ${err.message}` });
+    });
+
+    child.on('close', () => {
+      if (pollInterval) clearInterval(pollInterval);
+      clearTimeout(scaffoldTimeout);
+
+      if (!existsSync(slidesPath)) {
+        resolve({ success: false, message: `Slidev CLI failed. ${stderr}` });
+        return;
+      }
+
+      let slidesContent = readFileSync(slidesPath, 'utf-8');
+
+      slidesContent = slidesContent.replace(
+        /^(---\n[\s\S]*?)theme:\s*\S+/m,
+        `$1theme: ${template}`,
+      );
+
+      if (title) {
+        slidesContent = slidesContent.replace(
+          /^(---\n[\s\S]*?)title:\s*.+$/m,
+          `$1title: ${title}`,
+        );
+      }
+
+      if (description) {
+        slidesContent = slidesContent.replace(
+          /^(---\n[\s\S]*?)info:\s*\|[\s\S]*?(?=\n[a-zA-Z]|\n---)/m,
+          `$1info: |\n  ${description}\n`,
+        );
+      }
+
+      writeFileSync(slidesPath, slidesContent);
+
+      const sharedExists = hasSharedPackage(projectRoot);
+      if (sharedExists) {
+        addSharedAddonToSlides(slidesPath);
+      }
+
+      const frontmatter = parseFrontmatter(readFileSync(slidesPath, 'utf-8'));
+
+      const packageJsonPath = join(presentationPath, 'package.json');
+      const catalogPackageJson = {
+        name: `@supaslidev/${name}`,
+        private: true,
+        type: 'module',
+        scripts: {
+          build: 'slidev build',
+          dev: 'slidev --open',
+          export: 'slidev export',
+        },
+        dependencies: {
+          '@slidev/cli': 'catalog:',
+          '@slidev/theme-default': 'catalog:',
+          '@slidev/theme-seriph': 'catalog:',
+          '@slidev/theme-apple-basic': 'catalog:',
+          vue: 'catalog:',
+        } as Record<string, string>,
+        devDependencies: {},
+      };
+
+      if (sharedExists) {
+        catalogPackageJson.dependencies['@supaslidev/shared'] = 'workspace:*';
+      }
+
+      writeFileSync(packageJsonPath, JSON.stringify(catalogPackageJson, null, 2) + '\n');
+
+      regeneratePresentationsJson(presentationsDir, getPresentationsJsonPath());
+
+      const presentation = {
+        id: name,
+        title: frontmatter.title || name,
+        description: extractDescription(frontmatter.info) || '',
+        theme: template || 'default',
+        background: frontmatter.background || 'https://cover.sli.dev',
+        duration: frontmatter.duration || '',
+      };
+
+      // Respond immediately so the UI updates, then run pnpm install in the
+      // background to register the new workspace package.
+      resolve({ success: true, presentation });
+
+      const install = spawn('pnpm', ['install'], {
+        cwd: projectRoot,
+        stdio: 'inherit',
+        shell: true,
+      });
+
+      install.on('close', (installCode: number | null) => {
+        if (installCode !== 0) {
+          console.error(`[create] pnpm install failed with code ${installCode}`);
+        }
+      });
+
+      install.on('error', (err: Error) => {
+        console.error(`[create] pnpm install error:`, err);
+      });
+    });
+  });
+});