@clidey/dory 0.34.0 → 0.35.0

package/index.html

@@ -38,13 +38,6 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Inter&display=swap" rel="stylesheet">
 
-    <script>
-        !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init be ys Ss me gs ws capture Ne calculateEventProperties xs register register_once register_for_session unregister unregister_for_session Rs getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty Is ks createPersonProfile Ps bs opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing $s debug Es getPageViewId captureTraceFeedback captureTraceMetric".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
-        posthog.init('phc_hxwfcMiIgSXYKkbWl9zpQE0HaPPmlRaVXCWODricYu1', {
-            api_host: 'https://us.i.posthog.com',
-            person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well
-        })
-    </script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@clidey/dory",
   "private": false,
-  "version": "0.34.0",
+  "version": "0.35.0",
   "type": "module",
   "description": "A CLI tool for building and previewing documentation sites",
   "keywords": [
@@ -45,47 +45,47 @@
     "prepublishOnly": "echo 'Skipping prepublishOnly - build handled by publish script'"
   },
   "dependencies": {
-    "@algolia/autocomplete-core": "^1.19.2",
-    "@clidey/ux": "^0.36.0",
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-brands-svg-icons": "^6.7.2",
-    "@fortawesome/free-regular-svg-icons": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@fortawesome/react-fontawesome": "^0.2.2",
-    "@headlessui/react": "^2.2.9",
-    "@heroicons/react": "^2.2.0",
-    "@mdx-js/mdx": "^3.1.0",
-    "@mdx-js/preact": "^3.1.0",
-    "@mdx-js/rollup": "^3.1.0",
-    "@preact/preset-vite": "^2.10.1",
-    "@tailwindcss/vite": "^4.1.16",
-    "@types/react-highlight-words": "^0.20.0",
-    "classnames": "^2.5.1",
-    "flexsearch": "^0.8.205",
-    "gray-matter": "^4.0.3",
-    "gzip-size-cli": "^5.1.0",
-    "katex": "^0.16.22",
-    "lucide-react": "^0.513.0",
-    "mermaid": "^11.6.0",
-    "motion": "^12.16.0",
-    "preact": "^10.26.5",
-    "prism-react-renderer": "^2.4.1",
-    "react-highlight-words": "^0.21.0",
-    "remark-gfm": "^4.0.1",
-    "saas": "^1.0.0",
-    "sass-embedded": "^1.89.2",
-    "sirv": "^3.0.1",
-    "tailwindcss": "^4.1.16",
-    "terser": "^5.44.1",
-    "tsx": "^4.20.4",
+    "@algolia/autocomplete-core": "1.19.2",
+    "@clidey/ux": "0.36.0",
+    "@fortawesome/fontawesome-svg-core": "6.7.2",
+    "@fortawesome/free-brands-svg-icons": "6.7.2",
+    "@fortawesome/free-regular-svg-icons": "6.7.2",
+    "@fortawesome/free-solid-svg-icons": "6.7.2",
+    "@fortawesome/react-fontawesome": "0.2.2",
+    "@headlessui/react": "2.2.9",
+    "@heroicons/react": "2.2.0",
+    "@mdx-js/mdx": "3.1.0",
+    "@mdx-js/preact": "3.1.0",
+    "@mdx-js/rollup": "3.1.0",
+    "@preact/preset-vite": "2.10.1",
+    "@tailwindcss/vite": "4.1.16",
+    "@types/react-highlight-words": "0.20.0",
+    "classnames": "2.5.1",
+    "flexsearch": "0.8.205",
+    "gray-matter": "4.0.3",
+    "gzip-size-cli": "5.1.0",
+    "katex": "0.16.22",
+    "lucide-react": "0.513.0",
+    "mermaid": "11.6.0",
+    "motion": "12.16.0",
+    "preact": "10.26.5",
+    "prism-react-renderer": "2.4.1",
+    "react-highlight-words": "0.21.0",
+    "remark-gfm": "4.0.1",
+    "saas": "1.0.0",
+    "sass-embedded": "1.89.2",
+    "sirv": "3.0.1",
+    "tailwindcss": "4.1.16",
+    "tsx": "4.20.4",
     "typescript": "~5.8.3",
-    "unist-util-visit": "^5.0.0",
-    "vite": "^6.3.5",
-    "vite-plugin-mdx": "^3.6.1",
-    "wouter-preact": "^3.7.1"
+    "unist-util-visit": "5.0.0",
+    "vite": "6.3.5",
+    "vite-plugin-mdx": "3.6.1",
+    "wouter-preact": "3.7.1"
   },
-  "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39",
+  "packageManager": "pnpm@10.24.0+sha512.01ff8ae71b4419903b65c60fb2dc9d34cf8bb6e06d03bde112ef38f7a34d6904c424ba66bea5cdcf12890230bf39f9580473140ed9c946fef328b6e5238a345a",
   "devDependencies": {
-    "@types/node": "^24.0.12"
+    "@types/node": "24.0.12",
+    "terser": "5.44.1"
   }
 }

package/src/components/error-boundary.tsx

@@ -0,0 +1,59 @@
+import { Component, type ComponentChildren } from 'preact';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+
+interface ErrorBoundaryProps {
+  children: ComponentChildren;
+  fallback?: (error: Error) => ComponentChildren;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: any) {
+    console.error('Error caught by boundary:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError && this.state.error) {
+      if (this.props.fallback) {
+        return this.props.fallback(this.state.error);
+      }
+      return (
+        <div className="flex flex-col items-center justify-center min-h-[50vh] p-8">
+          <div className="w-16 h-16 mb-4 flex items-center justify-center bg-red-100 dark:bg-red-900/30 rounded-full">
+            <ExclamationTriangleIcon className="w-8 h-8 text-red-500" />
+          </div>
+          <h2 className="text-2xl font-semibold text-red-700 dark:text-red-300 mb-2">
+            Something went wrong
+          </h2>
+          <p className="text-red-600 dark:text-red-400 mb-4 text-center max-w-md">
+            An error occurred while rendering this page.
+          </p>
+          <pre className="text-sm text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-md p-3 max-w-md mb-4 overflow-auto">
+            {this.state.error.message}
+          </pre>
+          <button
+            onClick={() => window.location.reload()}
+            className="px-4 py-2 text-sm font-medium rounded-md bg-[var(--brand-primary)] text-white hover:opacity-90 transition-opacity"
+          >
+            Reload Page
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/components/routes.tsx

@@ -70,10 +70,27 @@ export default function Routes() {
   useEffect(() => {
     const page = ALL_NAVIGATION.find((tab) => tab.groups.find((group) => group.pages.find((page) => page.href === pathname)));
     if (!page && pathname !== '/') {
-      navigate(ALL_NAVIGATION[0].groups[0].pages[0].href);
-      window.location.reload();
+      setRoutes([{
+        path: pathname,
+        component: () => (
+          <div className="flex flex-col items-center justify-center min-h-[50vh] p-8">
+            <h1 className="text-6xl font-bold text-gray-300 dark:text-gray-700 mb-4">404</h1>
+            <h2 className="text-2xl font-semibold mb-4">Page Not Found</h2>
+            <p className="text-gray-600 dark:text-gray-400 mb-6 text-center max-w-md">
+              The page <code className="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-sm">{pathname}</code> doesn't exist.
+            </p>
+            <button
+              onClick={() => navigate(ALL_NAVIGATION[0].groups[0].pages[0].href)}
+              className="px-4 py-2 text-sm font-medium rounded-md bg-[var(--brand-primary)] text-white hover:opacity-90 transition-opacity"
+            >
+              Go to Home
+            </button>
+          </div>
+        )
+      }]);
+      setLoading(false);
     }
-  }, [routes, pathname]);
+  }, [pathname]);
 
   useEffect(() => {
     window.scrollTo({ top: 0, behavior: 'smooth' });

package/src/components/search-index.ts

@@ -1,41 +1,52 @@
-import { Document } from "flexsearch";
+let searchIndex: any = null;
 
-export const searchIndex = new Document({
-    tokenize: 'full',
-    document: {
-        id: 'url',
-        index: 'content',
-        store: ['title', 'pageTitle'],
-    },
-    context: {
-        resolution: 9,
-        depth: 2,
-        bidirectional: true
+async function getSearchIndex() {
+    if (!searchIndex) {
+        const { Document } = await import('flexsearch');
+        searchIndex = new Document({
+            tokenize: 'full',
+            document: {
+                id: 'url',
+                index: 'content',
+                store: ['title', 'pageTitle'],
+            },
+            context: {
+                resolution: 9,
+                depth: 2,
+                bidirectional: true
+            }
+        });
     }
-});
+    return searchIndex;
+}
 
-export function addToSearchIndex(filename: string, data: any, content: string) {
-    searchIndex.add({
-        url: filename,
-        title: data.title || '',
-        content: content,
-        pageTitle: data.title
-    });
+export async function addToSearchIndex(filename: string, data: any, content: string) {
+    try {
+        const index = await getSearchIndex();
+        index.add({
+            url: filename,
+            title: data.title || '',
+            content: content,
+            pageTitle: data.title
+        });
+    } catch (error) {
+        console.warn(`Failed to index ${filename}:`, error);
+    }
 }
 
 export function search(query: string, options = {}) {
     if (!searchIndex) return [];
-    
+
     const result = searchIndex.search(query, {
         ...options,
         enrich: true,
-    });
+    }) as any[];
 
     if (result.length === 0) {
         return [];
     }
 
-    return result[0].result.map((item) => ({
+    return result[0].result.map((item: any) => ({
         url: item.id,
         title: item.doc?.title || '',
         pageTitle: item.doc?.pageTitle || '',

package/src/components/store.ts

@@ -2,7 +2,7 @@ import type { ComponentType } from 'preact';
 import { type RouteComponentProps } from 'wouter-preact';
 import docsConfig from '../../docs/dory.json' with { type: 'json' };
 import type { DoryConfig } from '../types/config';
-import { searchIndex } from './search-index';
+import { addToSearchIndex } from './search-index';
 
 const config = docsConfig as DoryConfig;
 
@@ -108,16 +108,26 @@ export async function preloadFrontmatter() {
 // Add preloaded content to search index
 async function addPreloadedContentToSearch() {
     if (!preloadedFrontMatter) return;
+    
+    const mdxFiles = import.meta.glob<{ default: string }>('../../docs/**/*.mdx', { query: 'raw' });
+    const fileEntries = Object.entries(mdxFiles);
 
-    // Content is already included in the preloaded frontmatter, no need to fetch raw files
-    preloadedFrontMatter.forEach((fm) => {
-        searchIndex.add({
-            url: fm.path,
-            title: fm.title || '',
-            content: fm.content || '',
-            pageTitle: fm.title || ''
-        });
-    });
+    await Promise.all(
+        preloadedFrontMatter.map(async (fm) => {
+            const fileEntry = fileEntries.find(([filePath]) => pathFromFilename(filePath) === fm.path);
+            if (fileEntry) {
+                try {
+                    const [, loader] = fileEntry;
+                    const rawContent = (await loader()).default;
+                    const { content } = parseFrontMatter(rawContent);
+
+                    await addToSearchIndex(fm.path, { title: fm.title }, content);
+                } catch (error) {
+                    console.warn(`Failed to index ${fm.path}:`, error);
+                }
+            }
+        })
+    );
 }
 
 // Load frontmatter for a specific pathname (optimized with fallback)
@@ -143,12 +153,7 @@ export async function loadMDXFrontMatterForPath(pathname: string) {
     const filename = pathFromFilename(path);
 
     updateNavigationTitle(filename, data.title);
-    searchIndex.add({
-        url: filename,
-        title: data.title || '',
-        content,
-        pageTitle: data.title || ''
-    });
+    await addToSearchIndex(filename, data, content);
 
     const frontmatterItem = { ...data, path: filename };
     completeFrontMatter = [...completeFrontMatter, frontmatterItem];
@@ -175,12 +180,7 @@ export async function loadAllMDXFrontMatter(pathname: string) {
             const filename = pathFromFilename(path);
 
             updateNavigationTitle(filename, data.title);
-            searchIndex.add({
-                url: filename,
-                title: data.title || '',
-                content,
-                pageTitle: data.title || ''
-            });
+            await addToSearchIndex(filename, data, content);
 
             newFrontmatter.push({ ...data, path: filename });
         })

package/src/main.tsx

@@ -2,6 +2,7 @@ import { render } from 'preact'
 import '@clidey/ux/styles.css';
 import { App } from './app.tsx'
 import { withMDX } from './components/mdx-provider.tsx'
+import { ErrorBoundary } from './components/error-boundary.tsx'
 import { loadFonts } from './utils/fonts'
 import { loadColors } from './utils/colors'
 import { Toaster } from '@clidey/ux'
@@ -16,7 +17,9 @@ const AppWithMDX = withMDX(App)
 render(
     <ThemeProvider storageKey="@clidey/dory/theme">
         <Toaster />
-        <AppWithMDX />
+        <ErrorBoundary>
+            <AppWithMDX />
+        </ErrorBoundary>
     </ThemeProvider>,
     document.getElementById('app')!
 )

package/src/mdx/latex.tsx

@@ -1,6 +1,5 @@
-import { useEffect, useRef } from 'react'
-import katex from 'katex'
-import 'katex/dist/katex.min.css'
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
+import { useEffect, useRef, useState } from 'react'
 
 interface LatexProps {
   children: string
@@ -8,19 +7,77 @@ interface LatexProps {
 
 export function Latex({ children }: LatexProps) {
   const containerRef = useRef<HTMLDivElement>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
 
   useEffect(() => {
-    if (containerRef.current) {
+    let mounted = true
+
+    const renderLatex = async () => {
       try {
+        setError(null)
+        setIsLoading(true)
+
+        const [katexModule] = await Promise.all([
+          import('katex'),
+          import('katex/dist/katex.min.css'),
+        ])
+        const katex = katexModule.default
+
+        if (!mounted || !containerRef.current) return
+
         katex.render(children, containerRef.current, {
           displayMode: true,
           throwOnError: false,
         })
+        setIsLoading(false)
       } catch (error) {
-        console.error('Error rendering LaTeX:', error)
+        if (mounted) {
+          console.error('Error rendering LaTeX:', error)
+          setError(error instanceof Error ? error.message : 'Failed to render LaTeX')
+          setIsLoading(false)
+        }
       }
     }
+
+    renderLatex()
+
+    return () => {
+      mounted = false
+    }
   }, [children])
 
-  return <div ref={containerRef} className="my-4" />
+  if (error) {
+    return (
+      <div className="my-4">
+        <div className="flex flex-col items-center justify-center py-12 px-6 text-center bg-gradient-to-br from-red-50 to-red-100 dark:from-red-900/20 dark:to-red-800/20 border-2 border-dashed border-red-300 dark:border-red-700 rounded-lg">
+          <div className="w-16 h-16 mb-4 flex items-center justify-center bg-red-100 dark:bg-red-900/30 rounded-full">
+            <ExclamationTriangleIcon className="w-8 h-8 text-red-500" />
+          </div>
+          <h3 className="text-lg font-semibold text-red-700 dark:text-red-300 mb-2">
+            LaTeX Rendering Error
+          </h3>
+          <p className="text-red-600 dark:text-red-400 mb-4 max-w-md">
+            The LaTeX expression could not be rendered.
+          </p>
+          <div className="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-md p-3 max-w-md">
+            <p className="text-sm text-red-700 dark:text-red-300 font-mono break-all">
+              {error}
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="my-4">
+      {isLoading && (
+        <div className="flex items-center justify-center py-4">
+          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500" />
+        </div>
+      )}
+      <div ref={containerRef} className={isLoading ? 'hidden' : ''} />
+    </div>
+  )
 }

package/src/mdx/mdx.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useRef } from 'preact/hooks';
+import { lazy, Suspense } from 'preact/compat';
 import { usePathname } from 'wouter-preact/use-browser-location';
 import { completeFrontMatter } from '../components/store';
+import { Loading } from '../components/loading';
 
 export { h1, h2, h3, h4, h5, h6, p, Row, Col, Anchor as a, Image as img } from './text';
 export { Code as code, CodeGroup } from './code';
@@ -17,11 +19,24 @@ export { ResponseField, Properties, Property } from './open-api';
 export { Steps, Step } from './step';
 export { Table as table, Th as th, Td as td } from './table';
 export { UnorderedList as ul, OrderedList as ol, ListItem as li } from './list';
-export { APIPlayground } from './api-playground';
-export { WebSocketPlayground } from './websocket-playground';
 export { AsyncAPI } from './async-api';
 export { Source } from './source';
 
+// Lazy-loaded heavy components — only downloaded when a page uses them
+const LazyAPIPlayground = lazy(() => import('./api-playground').then(m => ({ default: m.APIPlayground })));
+export const APIPlayground = (props: any) => (
+  <Suspense fallback={<Loading />}>
+    <LazyAPIPlayground {...props} />
+  </Suspense>
+);
+
+const LazyWebSocketPlayground = lazy(() => import('./websocket-playground').then(m => ({ default: m.WebSocketPlayground })));
+export const WebSocketPlayground = (props: any) => (
+  <Suspense fallback={<Loading />}>
+    <LazyWebSocketPlayground {...props} />
+  </Suspense>
+);
+
 export const wrapper = ({ children }: { children: preact.ComponentChildren }) => {
   const ref = useRef<HTMLDivElement>(null);
   const pathname = usePathname();

package/src/plugins/analytics-injector.ts

@@ -0,0 +1,43 @@
+import type { Plugin } from 'vite';
+import { readFileSync, existsSync } from 'fs';
+import { resolve } from 'path';
+
+/**
+ * Conditionally injects analytics scripts based on dory.json config.
+ * PostHog is only injected if `analytics.posthog.token` is configured.
+ */
+export function analyticsInjector(): Plugin {
+  return {
+    name: 'analytics-injector',
+    transformIndexHtml(html) {
+      const doryJsonPath = resolve(process.cwd(), 'docs', 'dory.json');
+      if (!existsSync(doryJsonPath)) return html;
+
+      try {
+        const config = JSON.parse(readFileSync(doryJsonPath, 'utf-8'));
+
+        if (config.analytics?.posthog?.token) {
+          const token = config.analytics.posthog.token;
+          const apiHost = config.analytics.posthog.apiHost || 'https://us.i.posthog.com';
+
+          const script = `
+    <script>
+        !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture identify setPersonProperties group resetGroups reset get_distinct_id getGroups get_session_id opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+        posthog.init('${token}', {
+            api_host: '${apiHost}',
+            person_profiles: 'identified_only',
+        })
+    </script>`;
+
+          return html.replace('</head>', `${script}\n  </head>`);
+        }
+
+        return html;
+      } catch (error) {
+        const detail = error instanceof SyntaxError ? error.message : String(error);
+        console.error(`Failed to parse dory.json for analytics injection: ${detail}`);
+        return html;
+      }
+    },
+  };
+}

package/src/plugins/csp-generator.ts

@@ -0,0 +1,68 @@
+import type { Plugin } from 'vite';
+import { readFileSync, existsSync } from 'fs';
+import { resolve } from 'path';
+
+/**
+ * Generates a Content-Security-Policy meta tag based on dory.json config.
+ * Dynamically adds font sources and analytics domains as needed.
+ */
+export function cspGenerator(): Plugin {
+  return {
+    name: 'csp-generator',
+    transformIndexHtml(html) {
+      const doryJsonPath = resolve(process.cwd(), 'docs', 'dory.json');
+      if (!existsSync(doryJsonPath)) return html;
+
+      try {
+        const config = JSON.parse(readFileSync(doryJsonPath, 'utf-8'));
+
+        const scriptSrc = ["'self'", "'unsafe-inline'", "'unsafe-eval'"];
+        const styleSrc = ["'self'", "'unsafe-inline'"];
+        const fontSrc = ["'self'", "data:"];
+        const connectSrc = ["'self'"];
+        const imgSrc = ["'self'", "data:", "https:"];
+
+        // Add Google Fonts if fonts are configured with external source
+        if (config.fonts?.source) {
+          try {
+            const fontUrl = new URL(config.fonts.source);
+            fontSrc.push(fontUrl.origin);
+          } catch {
+            // Not a URL, skip
+          }
+        }
+        styleSrc.push("https://fonts.googleapis.com");
+        fontSrc.push("https://fonts.gstatic.com");
+
+        // Add PostHog if analytics configured
+        if (config.analytics?.posthog?.token) {
+          const apiHost = config.analytics.posthog.apiHost || 'https://us.i.posthog.com';
+          const assetsHost = apiHost.replace('.i.posthog.com', '-assets.i.posthog.com');
+          scriptSrc.push(apiHost);
+          scriptSrc.push(assetsHost);
+          connectSrc.push(apiHost);
+        }
+
+        // Note: frame-ancestors is omitted because it's ignored in <meta> CSP tags.
+        // Clickjacking protection is handled via X-Frame-Options in nginx config.
+        const csp = [
+          `default-src 'self'`,
+          `script-src ${scriptSrc.join(' ')}`,
+          `style-src ${styleSrc.join(' ')}`,
+          `font-src ${fontSrc.join(' ')}`,
+          `img-src ${imgSrc.join(' ')}`,
+          `connect-src ${connectSrc.join(' ')}`,
+        ].join('; ');
+
+        return html.replace(
+          '</head>',
+          `  <meta http-equiv="Content-Security-Policy" content="${csp}">\n  </head>`
+        );
+      } catch (error) {
+        const detail = error instanceof SyntaxError ? error.message : String(error);
+        console.error(`Failed to generate CSP: ${detail}`);
+        return html;
+      }
+    },
+  };
+}

package/src/plugins/docs-assets.ts

@@ -1,5 +1,5 @@
 import type { Plugin } from 'vite';
-import { cpSync, existsSync, readdirSync, statSync, mkdirSync } from 'fs';
+import { cpSync, existsSync, readdirSync, statSync } from 'fs';
 import { resolve, extname } from 'path';
 
 /**
@@ -31,7 +31,6 @@ export function docsAssetsPlugin(): Plugin {
       const skipPatterns = new Set([
         'dory.json',
         'node_modules',
-        'dist',
         '.DS_Store',
       ]);
 
@@ -57,10 +56,6 @@ export function docsAssetsPlugin(): Plugin {
             const stats = statSync(srcPath);
 
             if (stats.isDirectory()) {
-              // Create destination directory if it doesn't exist
-              if (!existsSync(destPath)) {
-                mkdirSync(destPath, { recursive: true });
-              }
               // Recursively copy directories
               copyAssets(srcPath, destPath, itemRelativePath);
             } else if (stats.isFile()) {

package/src/plugins/frontmatter-dev-server.ts

@@ -6,7 +6,14 @@ import path from 'path';
 function getNavigationOrder(docsDir: string): string[] {
   const doryJsonPath = path.join(docsDir, 'dory.json');
   if (!fs.existsSync(doryJsonPath)) return [];
-  const doryJson = JSON.parse(fs.readFileSync(doryJsonPath, 'utf-8'));
+  let doryJson;
+  try {
+    doryJson = JSON.parse(fs.readFileSync(doryJsonPath, 'utf-8'));
+  } catch (error) {
+    const detail = error instanceof SyntaxError ? error.message : String(error);
+    console.error(`Failed to parse ${doryJsonPath}: ${detail}`);
+    return [];
+  }
   const order: string[] = [];
 
   function walkPages(pages: any[]) {