doxla 0.1.0

package/dist/cli/index.js

@@ -0,0 +1,239 @@
+#!/usr/bin/env node
+
+// src/cli/index.ts
+import { Command } from "commander";
+
+// src/cli/commands/init.ts
+import { mkdir, writeFile } from "fs/promises";
+import { join } from "path";
+import { existsSync } from "fs";
+import chalk from "chalk";
+
+// src/cli/templates/doxla-workflow.ts
+var workflowTemplate = `name: Deploy Doxla Docs
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: \${{ steps.deployment.outputs.page_url }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+      - run: npx doxla@latest build --base-path "/\${{ github.event.repository.name }}"
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./doxla-dist
+      - id: deployment
+        uses: actions/deploy-pages@v4
+`;
+
+// src/cli/commands/init.ts
+async function initCommand() {
+  const workflowDir = join(process.cwd(), ".github", "workflows");
+  const workflowPath = join(workflowDir, "doxla.yml");
+  if (existsSync(workflowPath)) {
+    console.log(
+      chalk.yellow("\u26A0 Workflow file already exists at .github/workflows/doxla.yml")
+    );
+    console.log(chalk.yellow("  Overwriting with latest template..."));
+  }
+  await mkdir(workflowDir, { recursive: true });
+  await writeFile(workflowPath, workflowTemplate, "utf-8");
+  console.log(chalk.green("\u2713 Created .github/workflows/doxla.yml"));
+  console.log();
+  console.log("Next steps:");
+  console.log(
+    `  1. Enable GitHub Pages in your repo settings (Settings \u2192 Pages \u2192 Source: ${chalk.bold("GitHub Actions")})`
+  );
+  console.log("  2. Commit and push the workflow file");
+  console.log(
+    "  3. Your docs will be built and deployed on every push to main"
+  );
+}
+
+// src/cli/commands/build.ts
+import { resolve as resolve2 } from "path";
+import chalk2 from "chalk";
+import ora from "ora";
+
+// src/cli/lib/discover.ts
+import fg from "fast-glob";
+var IGNORE_PATTERNS = [
+  "**/node_modules/**",
+  "**/.git/**",
+  "**/dist/**",
+  "**/build/**",
+  "**/doxla-dist/**",
+  "**/.next/**",
+  "**/coverage/**"
+];
+async function discoverMarkdownFiles(rootDir) {
+  const files = await fg("**/*.md", {
+    cwd: rootDir,
+    ignore: IGNORE_PATTERNS,
+    onlyFiles: true
+  });
+  return files.sort((a, b) => {
+    const aIsReadme = a.toLowerCase() === "readme.md";
+    const bIsReadme = b.toLowerCase() === "readme.md";
+    if (aIsReadme && !bIsReadme) return -1;
+    if (!aIsReadme && bIsReadme) return 1;
+    return a.localeCompare(b);
+  });
+}
+
+// src/cli/lib/manifest.ts
+import { readFile } from "fs/promises";
+import { join as join2, basename, dirname } from "path";
+function extractTitle(content, filePath) {
+  const match = content.match(/^#\s+(.+)$/m);
+  if (match) {
+    return match[1].trim();
+  }
+  const name = basename(filePath, ".md");
+  if (name.toLowerCase() === "readme") {
+    const dir = dirname(filePath);
+    if (dir === ".") return "README";
+    return `${dir} - README`;
+  }
+  return name.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function createSlug(filePath) {
+  return filePath.replace(/\.md$/i, "").replace(/\\/g, "/").toLowerCase().replace(/[^a-z0-9/.-]/g, "-");
+}
+async function generateManifest(rootDir, files) {
+  const docs = await Promise.all(
+    files.map(async (filePath) => {
+      const fullPath = join2(rootDir, filePath);
+      const content = await readFile(fullPath, "utf-8");
+      return {
+        slug: createSlug(filePath),
+        path: filePath,
+        title: extractTitle(content, filePath),
+        content
+      };
+    })
+  );
+  const repoName = basename(rootDir);
+  return {
+    repoName,
+    generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    totalDocs: docs.length,
+    docs
+  };
+}
+
+// src/cli/lib/build-app.ts
+import { cp, writeFile as writeFile2, rm, mkdir as mkdir2 } from "fs/promises";
+import { join as join3 } from "path";
+import { tmpdir } from "os";
+import { execSync } from "child_process";
+import { randomBytes } from "crypto";
+
+// src/cli/lib/template.ts
+import { fileURLToPath } from "url";
+import { dirname as dirname2, resolve } from "path";
+import { existsSync as existsSync2 } from "fs";
+function getTemplatePath() {
+  const __filename = fileURLToPath(import.meta.url);
+  let dir = dirname2(__filename);
+  for (let i = 0; i < 5; i++) {
+    const candidate = resolve(dir, "src", "app");
+    if (existsSync2(resolve(candidate, "package.json"))) {
+      return candidate;
+    }
+    dir = dirname2(dir);
+  }
+  const fallback = resolve(dirname2(__filename), "..", "..", "src", "app");
+  return fallback;
+}
+
+// src/cli/lib/build-app.ts
+async function buildApp(manifest, options) {
+  const templateDir = getTemplatePath();
+  const tempDir = join3(
+    tmpdir(),
+    `doxla-build-${randomBytes(6).toString("hex")}`
+  );
+  try {
+    await cp(templateDir, tempDir, { recursive: true });
+    await writeFile2(
+      join3(tempDir, "src", "manifest.json"),
+      JSON.stringify(manifest, null, 2),
+      "utf-8"
+    );
+    const envContent = `VITE_BASE_PATH=${options.basePath}
+`;
+    await writeFile2(join3(tempDir, ".env"), envContent, "utf-8");
+    execSync("npm install --no-audit --no-fund", {
+      cwd: tempDir,
+      stdio: "pipe"
+    });
+    execSync("npx vite build", {
+      cwd: tempDir,
+      stdio: "pipe"
+    });
+    await rm(options.output, { recursive: true, force: true });
+    await mkdir2(options.output, { recursive: true });
+    await cp(join3(tempDir, "dist"), options.output, { recursive: true });
+  } finally {
+    await rm(tempDir, { recursive: true, force: true }).catch(() => {
+    });
+  }
+}
+
+// src/cli/commands/build.ts
+async function buildCommand(options) {
+  const rootDir = resolve2(options.root);
+  const outputDir = resolve2(options.output);
+  const basePath = options.basePath;
+  console.log(chalk2.bold("doxla build"));
+  console.log();
+  const discoverSpinner = ora("Discovering markdown files...").start();
+  const files = await discoverMarkdownFiles(rootDir);
+  if (files.length === 0) {
+    discoverSpinner.fail("No markdown files found");
+    process.exit(1);
+  }
+  discoverSpinner.succeed(`Found ${files.length} markdown file${files.length === 1 ? "" : "s"}`);
+  const manifestSpinner = ora("Generating manifest...").start();
+  const manifest = await generateManifest(rootDir, files);
+  manifestSpinner.succeed("Manifest generated");
+  const buildSpinner = ora("Building docs viewer...").start();
+  try {
+    await buildApp(manifest, { output: outputDir, basePath });
+    buildSpinner.succeed("Docs viewer built");
+  } catch (error) {
+    buildSpinner.fail("Build failed");
+    console.error(chalk2.red(error.message));
+    process.exit(1);
+  }
+  console.log();
+  console.log(chalk2.green(`\u2713 Output written to ${options.output}/`));
+}
+
+// src/cli/index.ts
+var program = new Command();
+program.name("doxla").description("Improve documentation discoverability within repos").version("0.1.0");
+program.command("init").description("Set up GitHub Actions workflow for Doxla docs deployment").action(initCommand);
+program.command("build").description("Discover markdown files and build the docs viewer").option("-o, --output <dir>", "Output directory", "doxla-dist").option("-r, --root <dir>", "Root directory to scan for markdown files", ".").option("--base-path <path>", "Base path for GitHub Pages deployment", "/").action(buildCommand);
+program.parse();
+//# sourceMappingURL=index.js.map

package/dist/cli/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/cli/index.ts","../../src/cli/commands/init.ts","../../src/cli/templates/doxla-workflow.ts","../../src/cli/commands/build.ts","../../src/cli/lib/discover.ts","../../src/cli/lib/manifest.ts","../../src/cli/lib/build-app.ts","../../src/cli/lib/template.ts"],"sourcesContent":["import { Command } from \"commander\";\nimport { initCommand } from \"./commands/init.js\";\nimport { buildCommand } from \"./commands/build.js\";\n\nconst program = new Command();\n\nprogram\n  .name(\"doxla\")\n  .description(\"Improve documentation discoverability within repos\")\n  .version(\"0.1.0\");\n\nprogram\n  .command(\"init\")\n  .description(\"Set up GitHub Actions workflow for Doxla docs deployment\")\n  .action(initCommand);\n\nprogram\n  .command(\"build\")\n  .description(\"Discover markdown files and build the docs viewer\")\n  .option(\"-o, --output <dir>\", \"Output directory\", \"doxla-dist\")\n  .option(\"-r, --root <dir>\", \"Root directory to scan for markdown files\", \".\")\n  .option(\"--base-path <path>\", \"Base path for GitHub Pages deployment\", \"/\")\n  .action(buildCommand);\n\nprogram.parse();\n","import { mkdir, writeFile } from \"node:fs/promises\";\nimport { join } from \"node:path\";\nimport { existsSync } from \"node:fs\";\nimport chalk from \"chalk\";\nimport { workflowTemplate } from \"../templates/doxla-workflow.js\";\n\nexport async function initCommand() {\n  const workflowDir = join(process.cwd(), \".github\", \"workflows\");\n  const workflowPath = join(workflowDir, \"doxla.yml\");\n\n  if (existsSync(workflowPath)) {\n    console.log(\n      chalk.yellow(\"⚠ Workflow file already exists at .github/workflows/doxla.yml\")\n    );\n    console.log(chalk.yellow(\"  Overwriting with latest template...\"));\n  }\n\n  await mkdir(workflowDir, { recursive: true });\n  await writeFile(workflowPath, workflowTemplate, \"utf-8\");\n\n  console.log(chalk.green(\"✓ Created .github/workflows/doxla.yml\"));\n  console.log();\n  console.log(\"Next steps:\");\n  console.log(\n    `  1. Enable GitHub Pages in your repo settings (Settings → Pages → Source: ${chalk.bold(\"GitHub Actions\")})`\n  );\n  console.log(\"  2. Commit and push the workflow file\");\n  console.log(\n    \"  3. Your docs will be built and deployed on every push to main\"\n  );\n}\n","export const workflowTemplate = `name: Deploy Doxla Docs\n\non:\n  push:\n    branches: [main]\n  workflow_dispatch:\n\npermissions:\n  contents: read\n  pages: write\n  id-token: write\n\nconcurrency:\n  group: \"pages\"\n  cancel-in-progress: false\n\njobs:\n  build-and-deploy:\n    runs-on: ubuntu-latest\n    environment:\n      name: github-pages\n      url: \\${{ steps.deployment.outputs.page_url }}\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v4\n        with:\n          node-version: \"20\"\n      - run: npx doxla@latest build --base-path \"/\\${{ github.event.repository.name }}\"\n      - uses: actions/upload-pages-artifact@v3\n        with:\n          path: ./doxla-dist\n      - id: deployment\n        uses: actions/deploy-pages@v4\n`;\n","import { resolve } from \"node:path\";\nimport chalk from \"chalk\";\nimport ora from \"ora\";\nimport { discoverMarkdownFiles } from \"../lib/discover.js\";\nimport { generateManifest } from \"../lib/manifest.js\";\nimport { buildApp } from \"../lib/build-app.js\";\n\ninterface BuildOptions {\n  output: string;\n  root: string;\n  basePath: string;\n}\n\nexport async function buildCommand(options: BuildOptions) {\n  const rootDir = resolve(options.root);\n  const outputDir = resolve(options.output);\n  const basePath = options.basePath;\n\n  console.log(chalk.bold(\"doxla build\"));\n  console.log();\n\n  // Step 1: Discover markdown files\n  const discoverSpinner = ora(\"Discovering markdown files...\").start();\n  const files = await discoverMarkdownFiles(rootDir);\n\n  if (files.length === 0) {\n    discoverSpinner.fail(\"No markdown files found\");\n    process.exit(1);\n  }\n\n  discoverSpinner.succeed(`Found ${files.length} markdown file${files.length === 1 ? \"\" : \"s\"}`);\n\n  // Step 2: Generate manifest\n  const manifestSpinner = ora(\"Generating manifest...\").start();\n  const manifest = await generateManifest(rootDir, files);\n  manifestSpinner.succeed(\"Manifest generated\");\n\n  // Step 3: Build docs viewer\n  const buildSpinner = ora(\"Building docs viewer...\").start();\n  try {\n    await buildApp(manifest, { output: outputDir, basePath });\n    buildSpinner.succeed(\"Docs viewer built\");\n  } catch (error) {\n    buildSpinner.fail(\"Build failed\");\n    console.error(chalk.red((error as Error).message));\n    process.exit(1);\n  }\n\n  console.log();\n  console.log(chalk.green(`✓ Output written to ${options.output}/`));\n}\n","import fg from \"fast-glob\";\n\nconst IGNORE_PATTERNS = [\n  \"**/node_modules/**\",\n  \"**/.git/**\",\n  \"**/dist/**\",\n  \"**/build/**\",\n  \"**/doxla-dist/**\",\n  \"**/.next/**\",\n  \"**/coverage/**\",\n];\n\nexport async function discoverMarkdownFiles(rootDir: string): Promise<string[]> {\n  const files = await fg(\"**/*.md\", {\n    cwd: rootDir,\n    ignore: IGNORE_PATTERNS,\n    onlyFiles: true,\n  });\n\n  // Sort: README.md first, then alphabetical\n  return files.sort((a, b) => {\n    const aIsReadme = a.toLowerCase() === \"readme.md\";\n    const bIsReadme = b.toLowerCase() === \"readme.md\";\n    if (aIsReadme && !bIsReadme) return -1;\n    if (!aIsReadme && bIsReadme) return 1;\n    return a.localeCompare(b);\n  });\n}\n","import { readFile } from \"node:fs/promises\";\nimport { join, basename, dirname } from \"node:path\";\nimport type { Manifest, DocFile } from \"../../app/src/types/manifest.js\";\n\nfunction extractTitle(content: string, filePath: string): string {\n  // Try to extract from first # heading\n  const match = content.match(/^#\\s+(.+)$/m);\n  if (match) {\n    return match[1].trim();\n  }\n\n  // Fallback to filename without extension\n  const name = basename(filePath, \".md\");\n  if (name.toLowerCase() === \"readme\") {\n    const dir = dirname(filePath);\n    if (dir === \".\") return \"README\";\n    return `${dir} - README`;\n  }\n  return name.replace(/[-_]/g, \" \").replace(/\\b\\w/g, (c) => c.toUpperCase());\n}\n\nfunction createSlug(filePath: string): string {\n  return filePath\n    .replace(/\\.md$/i, \"\")\n    .replace(/\\\\/g, \"/\")\n    .toLowerCase()\n    .replace(/[^a-z0-9/.-]/g, \"-\");\n}\n\nexport async function generateManifest(\n  rootDir: string,\n  files: string[]\n): Promise<Manifest> {\n  const docs: DocFile[] = await Promise.all(\n    files.map(async (filePath) => {\n      const fullPath = join(rootDir, filePath);\n      const content = await readFile(fullPath, \"utf-8\");\n      return {\n        slug: createSlug(filePath),\n        path: filePath,\n        title: extractTitle(content, filePath),\n        content,\n      };\n    })\n  );\n\n  const repoName = basename(rootDir);\n\n  return {\n    repoName,\n    generatedAt: new Date().toISOString(),\n    totalDocs: docs.length,\n    docs,\n  };\n}\n","import { cp, writeFile, rm, mkdir } from \"node:fs/promises\";\nimport { join } from \"node:path\";\nimport { tmpdir } from \"node:os\";\nimport { execSync } from \"node:child_process\";\nimport { randomBytes } from \"node:crypto\";\nimport type { Manifest } from \"../../app/src/types/manifest.js\";\nimport { getTemplatePath } from \"./template.js\";\n\ninterface BuildOptions {\n  output: string;\n  basePath: string;\n}\n\nexport async function buildApp(\n  manifest: Manifest,\n  options: BuildOptions\n): Promise<void> {\n  const templateDir = getTemplatePath();\n  const tempDir = join(\n    tmpdir(),\n    `doxla-build-${randomBytes(6).toString(\"hex\")}`\n  );\n\n  try {\n    // Copy template to temp dir\n    await cp(templateDir, tempDir, { recursive: true });\n\n    // Write manifest.json into the app's src directory\n    await writeFile(\n      join(tempDir, \"src\", \"manifest.json\"),\n      JSON.stringify(manifest, null, 2),\n      \"utf-8\"\n    );\n\n    // Write .env with base path\n    const envContent = `VITE_BASE_PATH=${options.basePath}\\n`;\n    await writeFile(join(tempDir, \".env\"), envContent, \"utf-8\");\n\n    // Install dependencies\n    execSync(\"npm install --no-audit --no-fund\", {\n      cwd: tempDir,\n      stdio: \"pipe\",\n    });\n\n    // Build with Vite\n    execSync(\"npx vite build\", {\n      cwd: tempDir,\n      stdio: \"pipe\",\n    });\n\n    // Copy output\n    await rm(options.output, { recursive: true, force: true });\n    await mkdir(options.output, { recursive: true });\n    await cp(join(tempDir, \"dist\"), options.output, { recursive: true });\n  } finally {\n    // Clean up temp dir\n    await rm(tempDir, { recursive: true, force: true }).catch(() => {});\n  }\n}\n","import { fileURLToPath } from \"node:url\";\nimport { dirname, resolve } from \"node:path\";\nimport { existsSync } from \"node:fs\";\n\nexport function getTemplatePath(): string {\n  const __filename = fileURLToPath(import.meta.url);\n  let dir = dirname(__filename);\n\n  // Walk up from the current file location until we find src/app\n  // Works both from source (src/cli/lib/) and built (dist/cli/)\n  for (let i = 0; i < 5; i++) {\n    const candidate = resolve(dir, \"src\", \"app\");\n    if (existsSync(resolve(candidate, \"package.json\"))) {\n      return candidate;\n    }\n    dir = dirname(dir);\n  }\n\n  // Fallback: assume built location dist/cli/ -> ../../src/app\n  const fallback = resolve(dirname(__filename), \"..\", \"..\", \"src\", \"app\");\n  return fallback;\n}\n"],"mappings":"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","names":["resolve","chalk","join","writeFile","mkdir","join","dirname","existsSync","join","writeFile","mkdir","resolve","chalk"]}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "doxla",
+  "version": "0.1.0",
+  "description": "Improve documentation discoverability within repos",
+  "type": "module",
+  "bin": {
+    "doxla": "dist/cli/index.js"
+  },
+  "files": [
+    "dist",
+    "src/app"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "keywords": [
+    "documentation",
+    "docs",
+    "github-pages",
+    "markdown",
+    "viewer"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "chalk": "^5.4.1",
+    "commander": "^13.1.0",
+    "fast-glob": "^3.3.3",
+    "ora": "^8.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/node": "^22.12.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@vitejs/plugin-react": "^5.1.4",
+    "clsx": "^2.1.1",
+    "jsdom": "^26.0.0",
+    "lucide-react": "^0.563.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^16.1.0",
+    "remark-gfm": "^4.0.1",
+    "tailwind-merge": "^3.4.0",
+    "tsup": "^8.3.6",
+    "typescript": "^5.7.3",
+    "vitest": "^3.0.4"
+  }
+}

package/src/app/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Doxla Docs</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/src/app/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "doxla-viewer",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.0",
+    "react-syntax-highlighter": "^15.6.1",
+    "lucide-react": "^0.474.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.0.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "@tailwindcss/vite": "^4.0.6",
+    "@tailwindcss/typography": "^0.5.16",
+    "tailwindcss": "^4.0.6",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.0"
+  }
+}

package/src/app/src/App.tsx

@@ -0,0 +1,76 @@
+import { useState, useEffect, useCallback } from "react";
+import manifest from "./manifest.json";
+import type { Manifest } from "./types/manifest";
+import { Layout } from "./components/layout/Layout";
+import { IndexPage } from "./components/IndexPage";
+import { DocPage } from "./components/DocPage";
+import { SearchResults } from "./components/SearchResults";
+
+const data = manifest as Manifest;
+
+type Route =
+  | { type: "index" }
+  | { type: "doc"; slug: string }
+  | { type: "search"; query: string };
+
+function parseHash(): Route {
+  const hash = window.location.hash.slice(1) || "/";
+
+  if (hash === "/" || hash === "") {
+    return { type: "index" };
+  }
+
+  if (hash.startsWith("/doc/")) {
+    return { type: "doc", slug: hash.slice(5) };
+  }
+
+  if (hash.startsWith("/search")) {
+    const params = new URLSearchParams(hash.split("?")[1] || "");
+    return { type: "search", query: params.get("q") || "" };
+  }
+
+  return { type: "index" };
+}
+
+export default function App() {
+  const [route, setRoute] = useState<Route>(parseHash);
+
+  const handleHashChange = useCallback(() => {
+    setRoute(parseHash());
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("hashchange", handleHashChange);
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }, [handleHashChange]);
+
+  const renderContent = () => {
+    switch (route.type) {
+      case "index":
+        return <IndexPage docs={data.docs} />;
+      case "doc": {
+        const doc = data.docs.find((d) => d.slug === route.slug);
+        if (!doc) {
+          return (
+            <div className="p-8">
+              <h1 className="text-2xl font-bold">Document not found</h1>
+              <p className="mt-2 text-muted-foreground">
+                The document &quot;{route.slug}&quot; could not be found.
+              </p>
+              <a href="#/" className="mt-4 inline-block text-primary underline">
+                Back to index
+              </a>
+            </div>
+          );
+        }
+        return <DocPage doc={doc} />;
+      }
+      case "search":
+        return <SearchResults docs={data.docs} query={route.query} />;
+    }
+  };
+
+  return (
+    <Layout manifest={data}>{renderContent()}</Layout>
+  );
+}

package/src/app/src/components/DocPage.tsx

@@ -0,0 +1,41 @@
+import type { DocFile } from "../types/manifest";
+import { MarkdownRenderer } from "./MarkdownRenderer";
+import { Badge } from "./ui/Badge";
+import { Separator } from "./ui/Separator";
+
+interface DocPageProps {
+  doc: DocFile;
+}
+
+export function DocPage({ doc }: DocPageProps) {
+  const pathParts = doc.path.split("/");
+
+  return (
+    <div>
+      <div className="mb-4 flex items-center gap-2 text-sm text-muted-foreground">
+        <a href="#/" className="hover:text-foreground">
+          Home
+        </a>
+        {pathParts.map((part, i) => (
+          <span key={i} className="flex items-center gap-2">
+            <span>/</span>
+            {i === pathParts.length - 1 ? (
+              <span className="text-foreground">{part}</span>
+            ) : (
+              <span>{part}</span>
+            )}
+          </span>
+        ))}
+      </div>
+
+      <div className="mb-4 flex items-center gap-3">
+        <h1 className="text-3xl font-bold">{doc.title}</h1>
+        <Badge variant="secondary">.md</Badge>
+      </div>
+
+      <Separator className="mb-6" />
+
+      <MarkdownRenderer content={doc.content} />
+    </div>
+  );
+}

package/src/app/src/components/FileTree.tsx

@@ -0,0 +1,113 @@
+import { useState } from "react";
+import { ChevronRight, ChevronDown, FileText, Folder } from "lucide-react";
+import type { DocFile } from "../types/manifest";
+import { cn } from "../lib/utils";
+
+interface TreeNode {
+  name: string;
+  path: string;
+  doc?: DocFile;
+  children: Map<string, TreeNode>;
+}
+
+function buildTree(docs: DocFile[]): TreeNode {
+  const root: TreeNode = { name: "", path: "", children: new Map() };
+
+  for (const doc of docs) {
+    const parts = doc.path.split("/");
+    let current = root;
+
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      if (!current.children.has(part)) {
+        current.children.set(part, {
+          name: part,
+          path: parts.slice(0, i + 1).join("/"),
+          children: new Map(),
+        });
+      }
+      current = current.children.get(part)!;
+    }
+
+    current.doc = doc;
+  }
+
+  return root;
+}
+
+function TreeItem({
+  node,
+  depth,
+}: {
+  node: TreeNode;
+  depth: number;
+}) {
+  const [expanded, setExpanded] = useState(depth < 2);
+  const isFolder = node.children.size > 0 && !node.doc;
+  const sortedChildren = Array.from(node.children.values()).sort((a, b) => {
+    // Folders first, then files
+    const aIsFolder = a.children.size > 0 && !a.doc;
+    const bIsFolder = b.children.size > 0 && !b.doc;
+    if (aIsFolder && !bIsFolder) return -1;
+    if (!aIsFolder && bIsFolder) return 1;
+    return a.name.localeCompare(b.name);
+  });
+
+  if (isFolder) {
+    return (
+      <div>
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className={cn(
+            "flex w-full items-center gap-1 rounded-md px-2 py-1 text-sm hover:bg-accent",
+          )}
+          style={{ paddingLeft: `${depth * 12 + 8}px` }}
+        >
+          {expanded ? (
+            <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" />
+          ) : (
+            <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" />
+          )}
+          <Folder className="h-4 w-4 shrink-0 text-muted-foreground" />
+          <span className="truncate">{node.name}</span>
+        </button>
+        {expanded && (
+          <div>
+            {sortedChildren.map((child) => (
+              <TreeItem key={child.path} node={child} depth={depth + 1} />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (node.doc) {
+    return (
+      <a
+        href={`#/doc/${node.doc.slug}`}
+        className={cn(
+          "flex items-center gap-1 rounded-md px-2 py-1 text-sm hover:bg-accent",
+        )}
+        style={{ paddingLeft: `${depth * 12 + 8}px` }}
+      >
+        <FileText className="h-4 w-4 shrink-0 text-muted-foreground" />
+        <span className="truncate">{node.name}</span>
+      </a>
+    );
+  }
+
+  return null;
+}
+
+export function FileTree({ docs }: { docs: DocFile[] }) {
+  const tree = buildTree(docs);
+
+  return (
+    <nav className="space-y-0.5">
+      {Array.from(tree.children.values()).map((node) => (
+        <TreeItem key={node.path} node={node} depth={0} />
+      ))}
+    </nav>
+  );
+}

package/src/app/src/components/IndexPage.tsx

@@ -0,0 +1,88 @@
+import type { DocFile } from "../types/manifest";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "./ui/Card";
+import { Badge } from "./ui/Badge";
+import { FileText } from "lucide-react";
+
+interface IndexPageProps {
+  docs: DocFile[];
+}
+
+function getPreview(content: string): string {
+  // Strip the first heading and get the first non-empty paragraph
+  const lines = content.split("\n");
+  let foundHeading = false;
+  const previewLines: string[] = [];
+
+  for (const line of lines) {
+    if (!foundHeading && line.startsWith("#")) {
+      foundHeading = true;
+      continue;
+    }
+    const trimmed = line.trim();
+    if (trimmed === "") {
+      if (previewLines.length > 0) break;
+      continue;
+    }
+    previewLines.push(trimmed);
+  }
+
+  const preview = previewLines.join(" ");
+  if (preview.length > 150) {
+    return preview.slice(0, 150) + "...";
+  }
+  return preview || "No preview available";
+}
+
+function getDirLabel(path: string): string | null {
+  const parts = path.split("/");
+  if (parts.length <= 1) return null;
+  return parts.slice(0, -1).join("/");
+}
+
+export function IndexPage({ docs }: IndexPageProps) {
+  return (
+    <div>
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold">Documentation</h1>
+        <p className="mt-2 text-muted-foreground">
+          {docs.length} document{docs.length === 1 ? "" : "s"} found in this
+          repository
+        </p>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        {docs.map((doc) => {
+          const dirLabel = getDirLabel(doc.path);
+          return (
+            <a key={doc.slug} href={`#/doc/${doc.slug}`} className="group">
+              <Card className="h-full transition-shadow group-hover:shadow-md">
+                <CardHeader>
+                  <div className="flex items-center gap-2">
+                    <FileText className="h-5 w-5 text-muted-foreground" />
+                    <CardTitle className="group-hover:text-primary">
+                      {doc.title}
+                    </CardTitle>
+                  </div>
+                  {dirLabel && (
+                    <Badge variant="outline" className="w-fit">
+                      {dirLabel}
+                    </Badge>
+                  )}
+                </CardHeader>
+                <CardContent>
+                  <CardDescription>{getPreview(doc.content)}</CardDescription>
+                </CardContent>
+              </Card>
+            </a>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/app/src/components/MarkdownRenderer.tsx

@@ -0,0 +1,49 @@
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
+import type { Components } from "react-markdown";
+
+interface MarkdownRendererProps {
+  content: string;
+}
+
+const components: Components = {
+  code(props) {
+    const { children, className, ...rest } = props;
+    const match = /language-(\w+)/.exec(className || "");
+    const isInline = !match;
+
+    if (isInline) {
+      return (
+        <code
+          className="rounded bg-muted px-1.5 py-0.5 text-sm font-mono"
+          {...rest}
+        >
+          {children}
+        </code>
+      );
+    }
+
+    return (
+      <SyntaxHighlighter
+        style={oneLight}
+        language={match[1]}
+        PreTag="div"
+        className="rounded-md text-sm"
+      >
+        {String(children).replace(/\n$/, "")}
+      </SyntaxHighlighter>
+    );
+  },
+};
+
+export function MarkdownRenderer({ content }: MarkdownRendererProps) {
+  return (
+    <div className="prose prose-neutral max-w-none">
+      <Markdown remarkPlugins={[remarkGfm]} components={components}>
+        {content}
+      </Markdown>
+    </div>
+  );
+}

package/src/app/src/components/SearchResults.tsx

@@ -0,0 +1,94 @@
+import type { DocFile } from "../types/manifest";
+import { Card, CardHeader, CardTitle, CardContent, CardDescription } from "./ui/Card";
+import { Badge } from "./ui/Badge";
+import { FileText, SearchX } from "lucide-react";
+
+interface SearchResultsProps {
+  docs: DocFile[];
+  query: string;
+}
+
+interface SearchHit {
+  doc: DocFile;
+  snippet: string;
+}
+
+function search(docs: DocFile[], query: string): SearchHit[] {
+  if (!query.trim()) return [];
+
+  const lower = query.toLowerCase();
+  const results: SearchHit[] = [];
+
+  for (const doc of docs) {
+    const titleMatch = doc.title.toLowerCase().includes(lower);
+    const contentLower = doc.content.toLowerCase();
+    const contentIdx = contentLower.indexOf(lower);
+
+    if (titleMatch || contentIdx !== -1) {
+      let snippet = "";
+      if (contentIdx !== -1) {
+        const start = Math.max(0, contentIdx - 60);
+        const end = Math.min(doc.content.length, contentIdx + query.length + 60);
+        snippet =
+          (start > 0 ? "..." : "") +
+          doc.content.slice(start, end).replace(/\n/g, " ") +
+          (end < doc.content.length ? "..." : "");
+      } else {
+        // Title match only - take first line of content as snippet
+        const firstLine = doc.content.split("\n").find((l) => l.trim() && !l.startsWith("#"));
+        snippet = firstLine?.trim().slice(0, 120) || "";
+      }
+      results.push({ doc, snippet });
+    }
+  }
+
+  return results;
+}
+
+export function SearchResults({ docs, query }: SearchResultsProps) {
+  const results = search(docs, query);
+
+  return (
+    <div>
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold">Search Results</h1>
+        <p className="mt-2 text-muted-foreground">
+          {results.length} result{results.length === 1 ? "" : "s"} for &quot;{query}&quot;
+        </p>
+      </div>
+
+      {results.length === 0 ? (
+        <div className="flex flex-col items-center gap-4 py-12 text-muted-foreground">
+          <SearchX className="h-12 w-12" />
+          <p>No documents matched your search.</p>
+          <a href="#/" className="text-primary underline">
+            Back to index
+          </a>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {results.map((hit) => (
+            <a key={hit.doc.slug} href={`#/doc/${hit.doc.slug}`} className="group block">
+              <Card className="transition-shadow group-hover:shadow-md">
+                <CardHeader>
+                  <div className="flex items-center gap-2">
+                    <FileText className="h-5 w-5 text-muted-foreground" />
+                    <CardTitle className="group-hover:text-primary">
+                      {hit.doc.title}
+                    </CardTitle>
+                    <Badge variant="outline" className="ml-auto">
+                      {hit.doc.path}
+                    </Badge>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <CardDescription>{hit.snippet}</CardDescription>
+                </CardContent>
+              </Card>
+            </a>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/app/src/components/layout/Header.tsx

@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { Search, BookOpen } from "lucide-react";
+import { Input } from "../ui/Input";
+import { Button } from "../ui/Button";
+
+interface HeaderProps {
+  repoName: string;
+}
+
+export function Header({ repoName }: HeaderProps) {
+  const [searchInput, setSearchInput] = useState("");
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (searchInput.trim()) {
+      window.location.hash = `/search?q=${encodeURIComponent(searchInput.trim())}`;
+    }
+  };
+
+  return (
+    <header className="sticky top-0 z-10 flex h-14 items-center gap-4 border-b border-border bg-background px-6">
+      <a href="#/" className="flex items-center gap-2 font-semibold">
+        <BookOpen className="h-5 w-5" />
+        <span>{repoName}</span>
+      </a>
+
+      <form onSubmit={handleSearch} className="ml-auto flex items-center gap-2">
+        <div className="relative">
+          <Search className="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            type="search"
+            placeholder="Search docs..."
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            className="w-64 pl-9"
+          />
+        </div>
+        <Button type="submit" size="sm">
+          Search
+        </Button>
+      </form>
+    </header>
+  );
+}

package/src/app/src/components/layout/Layout.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import type { Manifest } from "../../types/manifest";
+import { Header } from "./Header";
+import { Sidebar } from "./Sidebar";
+
+interface LayoutProps {
+  manifest: Manifest;
+  children: ReactNode;
+}
+
+export function Layout({ manifest, children }: LayoutProps) {
+  return (
+    <div className="min-h-screen">
+      <Header repoName={manifest.repoName} />
+      <div className="flex">
+        <Sidebar docs={manifest.docs} />
+        <main className="flex-1 overflow-auto">
+          <div className="mx-auto max-w-4xl p-6">{children}</div>
+        </main>
+      </div>
+    </div>
+  );
+}

package/src/app/src/components/layout/Sidebar.tsx

@@ -0,0 +1,22 @@
+import { ScrollArea } from "../ui/ScrollArea";
+import { FileTree } from "../FileTree";
+import type { DocFile } from "../../types/manifest";
+
+interface SidebarProps {
+  docs: DocFile[];
+}
+
+export function Sidebar({ docs }: SidebarProps) {
+  return (
+    <aside className="hidden w-64 shrink-0 border-r border-border md:block">
+      <ScrollArea className="h-[calc(100vh-3.5rem)] py-4">
+        <div className="px-3">
+          <h2 className="mb-2 px-2 text-sm font-semibold text-muted-foreground">
+            Documents
+          </h2>
+          <FileTree docs={docs} />
+        </div>
+      </ScrollArea>
+    </aside>
+  );
+}

package/src/app/src/components/ui/Badge.tsx

@@ -0,0 +1,26 @@
+import { cn } from "../../lib/utils";
+
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: "default" | "secondary" | "outline";
+}
+
+export function Badge({
+  className,
+  variant = "default",
+  ...props
+}: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors",
+        {
+          "bg-primary text-primary-foreground": variant === "default",
+          "bg-muted text-muted-foreground": variant === "secondary",
+          "border border-border text-foreground": variant === "outline",
+        },
+        className
+      )}
+      {...props}
+    />
+  );
+}

package/src/app/src/components/ui/Button.tsx

@@ -0,0 +1,37 @@
+import { cn } from "../../lib/utils";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "ghost" | "outline";
+  size?: "default" | "sm" | "icon";
+}
+
+export function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      className={cn(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary",
+        "disabled:pointer-events-none disabled:opacity-50",
+        {
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90":
+            variant === "default",
+          "hover:bg-accent hover:text-accent-foreground": variant === "ghost",
+          "border border-border bg-background shadow-sm hover:bg-accent hover:text-accent-foreground":
+            variant === "outline",
+        },
+        {
+          "h-9 px-4 py-2": size === "default",
+          "h-8 rounded-md px-3 text-xs": size === "sm",
+          "h-9 w-9": size === "icon",
+        },
+        className
+      )}
+      {...props}
+    />
+  );
+}

package/src/app/src/components/ui/Card.tsx

@@ -0,0 +1,56 @@
+import { cn } from "../../lib/utils";
+
+export function Card({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "rounded-lg border border-border bg-background shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export function CardHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("flex flex-col gap-1.5 p-6", className)} {...props} />
+  );
+}
+
+export function CardTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3
+      className={cn("text-lg font-semibold leading-none", className)}
+      {...props}
+    />
+  );
+}
+
+export function CardDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export function CardContent({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("p-6 pt-0", className)} {...props} />;
+}

package/src/app/src/components/ui/Input.tsx

@@ -0,0 +1,19 @@
+import { cn } from "../../lib/utils";
+
+export function Input({
+  className,
+  ...props
+}: React.InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <input
+      className={cn(
+        "flex h-9 w-full rounded-md border border-border bg-background px-3 py-1 text-sm shadow-sm transition-colors",
+        "placeholder:text-muted-foreground",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  );
+}

package/src/app/src/components/ui/ScrollArea.tsx

@@ -0,0 +1,16 @@
+import { cn } from "../../lib/utils";
+
+export function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("overflow-auto", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

package/src/app/src/components/ui/Separator.tsx

@@ -0,0 +1,22 @@
+import { cn } from "../../lib/utils";
+
+interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: "horizontal" | "vertical";
+}
+
+export function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}: SeparatorProps) {
+  return (
+    <div
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className
+      )}
+      {...props}
+    />
+  );
+}

package/src/app/src/globals.css

@@ -0,0 +1,25 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+@theme {
+  --color-background: #ffffff;
+  --color-foreground: #0a0a0a;
+  --color-muted: #f5f5f5;
+  --color-muted-foreground: #737373;
+  --color-border: #e5e5e5;
+  --color-primary: #171717;
+  --color-primary-foreground: #fafafa;
+  --color-accent: #f5f5f5;
+  --color-accent-foreground: #171717;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+}
+
+body {
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+    Arial, sans-serif;
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+}

package/src/app/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/app/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./globals.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/src/app/src/types/manifest.ts

@@ -0,0 +1,13 @@
+export interface DocFile {
+  slug: string;
+  path: string;
+  title: string;
+  content: string;
+}
+
+export interface Manifest {
+  repoName: string;
+  generatedAt: string;
+  totalDocs: number;
+  docs: DocFile[];
+}

package/src/app/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}

package/src/app/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  base: process.env.VITE_BASE_PATH || "/",
+  build: {
+    outDir: "dist",
+  },
+});