feat: add static site generation mode (#147)

* docs: add static site mode design spec

* feat: add static site generation mode with --preset static

* chore: remove design spec from tracked files

* fix: address review feedback for static site mode

* perf: add picture tag with webp source for static mode and lazy-load mermaid

* refactor: consolidate static mode helpers, data URLs, and use local font

Author: rohilsurana

bun.lock

@@ -21,6 +21,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.13",
+    "@playwright/test": "^1.60.0",
     "@raystack/tools-config": "0.56.0",
     "@types/hast": "^3.0.4",
     "@types/lodash-es": "^4.17.12",
@@ -68,6 +69,7 @@
     "http-status-codes": "^2.3.0",
     "lodash-es": "^4.17.23",
     "mermaid": "^11.13.0",
+    "minisearch": "^7.2.0",
     "nitro": "3.0.260311-beta",
     "openapi-types": "^12.1.3",
     "react": "^19.0.0",

packages/chronicle/package.json

@@ -0,0 +1,12 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  testMatch: '**/*.e2e.ts',
+  timeout: 30000,
+  retries: 0,
+  use: {
+    headless: true,
+    baseURL: 'http://localhost:4173',
+  },
+});

packages/chronicle/playwright.config.ts

@@ -1,3 +1,4 @@
+import path from 'node:path';
 import chalk from 'chalk';
 import { Command } from 'commander';
 import { loadCLIConfig } from '@/cli/utils/config';
@@ -9,7 +10,7 @@ export const buildCommand = new Command('build')
   .option('--config <path>', 'Path to chronicle.yaml')
   .option(
     '--preset <preset>',
-    'Deploy preset (vercel, cloudflare, node-server)'
+    'Deploy preset (vercel, cloudflare, node-server, static)'
   )
   .action(async options => {
     const { config, projectRoot, configPath, preset } = await loadCLIConfig(options.config, {
@@ -19,8 +20,8 @@ export const buildCommand = new Command('build')
 
     console.log(chalk.cyan('Building for production...'));
 
-    const { createBuilder } = await import('vite');
-    const { createViteConfig } = await import('@/server/vite-config');
+    const { createBuilder, build } = await import('vite');
+    const { createViteConfig, isStaticPreset } = await import('@/server/vite-config');
 
     const viteConfig = await createViteConfig({
       packageRoot: PACKAGE_ROOT,
@@ -29,9 +30,28 @@ export const buildCommand = new Command('build')
       preset
     });
 
-    const builder = await createBuilder({ ...viteConfig, builder: {} });
-    await builder.buildApp();
+    if (isStaticPreset(preset)) {
+      await build(viteConfig);
+    } else {
+      const builder = await createBuilder({ ...viteConfig, builder: {} });
+      await builder.buildApp();
+    }
 
-    console.log(chalk.green('Build complete'));
-    console.log(chalk.cyan('Run `chronicle start` to start the server'));
+    if (isStaticPreset(preset)) {
+      const { generateStaticSite } = await import('@/cli/commands/static-generate');
+      const outputDir = path.resolve(projectRoot, '.output/public');
+
+      await generateStaticSite({
+        projectRoot,
+        config,
+        outputDir,
+        packageRoot: PACKAGE_ROOT,
+      });
+
+      console.log(chalk.green('Static build complete'));
+      console.log(chalk.cyan(`Output: ${outputDir}`));
+    } else {
+      console.log(chalk.green('Build complete'));
+      console.log(chalk.cyan('Run `chronicle start` to start the server'));
+    }
   });