@clidey/dory 0.47.0 → 0.49.0

package/src/components/routes.tsx

@@ -19,8 +19,8 @@ export default function Routes() {
   const route = useMemo(() => {
     let targetPath = pathname;
     if (pathname === '/') {
-      const ssrRoute = typeof window !== 'undefined' && (window as any).__DORY_ROUTE__;
-      targetPath = ssrRoute || ALL_NAVIGATION[0].groups[0].pages[0].href;
+      const ssrRoute = typeof window !== 'undefined' ? window.__DORY_ROUTE__ : undefined;
+      targetPath = ssrRoute || ALL_NAVIGATION[0]?.groups[0]?.pages[0]?.href || pathname;
     }
 
     const entry = Object.entries(ALL_PAGES).find(([path]) => path === targetPath);
@@ -33,26 +33,23 @@ export default function Routes() {
     };
   }, [pathname]);
 
-  // 404
-  if (!route) {
-    const page = ALL_NAVIGATION.find((tab) => tab.groups.find((group) => group.pages.find((page) => page.href === pathname)));
-    if (!page && pathname !== '/') {
-      return (
-        <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>
-      );
-    }
+  // 404 — no MDX module for this path (even if it appears in navigation)
+  if (!route && pathname !== '/') {
+    return (
+      <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>
+    );
   }
 
   return (

package/src/components/store.ts

@@ -68,13 +68,13 @@ export function isFrontmatterReady() { return preloadedFrontMatter !== null; }
 let preloadedFrontMatter: Record<string, any>[] | null = null;
 
 // Check for inlined frontmatter from SSR (available synchronously, no fetch needed)
-if (typeof window !== 'undefined' && (window as any).__DORY_FRONTMATTER__) {
-    preloadedFrontMatter = (window as any).__DORY_FRONTMATTER__;
-    completeFrontMatter = [...preloadedFrontMatter!];
-    for (const fm of preloadedFrontMatter!) {
+if (typeof window !== 'undefined' && window.__DORY_FRONTMATTER__) {
+    preloadedFrontMatter = window.__DORY_FRONTMATTER__;
+    completeFrontMatter = [...preloadedFrontMatter];
+    for (const fm of preloadedFrontMatter) {
         updateNavigationTitle(fm.path, fm.title);
     }
-    delete (window as any).__DORY_FRONTMATTER__;
+    delete window.__DORY_FRONTMATTER__;
     // Build search index in the background after the page has fully rendered
     setTimeout(() => addPreloadedContentToSearch(), 2000);
 }

package/src/config/mdx.js

@@ -1,12 +1,16 @@
 import remarkGfm from 'remark-gfm';
+import rehypeSlug from 'rehype-slug';
 import { remarkSafeVars } from '../plugins/sanitize.ts';
 
 /**
- * Shared MDX configuration used by both main build (vite.config.ts) 
- * and CLI build:file command (bin/dory.js)
+ * Shared MDX configuration used by the main build (vite.config.ts),
+ * the SSR build (vite.config.ssr.ts), and the CLI build:file command
+ * (bin/dory.js). rehype-slug adds stable ids to headings so anchors
+ * match between SSR output and client hydration.
  */
 export const getMdxConfig = (isDevelopment = false) => ({
   providerImportSource: '@mdx-js/preact',
   remarkPlugins: [remarkGfm, remarkSafeVars],
+  rehypePlugins: [rehypeSlug],
   development: isDevelopment,
-});
+});

package/src/config/mdx.ts

@@ -1,12 +1,16 @@
 import remarkGfm from 'remark-gfm';
+import rehypeSlug from 'rehype-slug';
 import { remarkSafeVars } from '../plugins/sanitize';
 
 /**
- * Shared MDX configuration used by both main build (vite.config.ts) 
- * and CLI build:file command (bin/dory.js)
+ * Shared MDX configuration used by the main build (vite.config.ts),
+ * the SSR build (vite.config.ssr.ts), and the CLI build:file command
+ * (bin/dory.js). rehype-slug adds stable ids to headings so anchors
+ * match between SSR output and client hydration.
  */
 export const getMdxConfig = (isDevelopment: boolean = false) => ({
   providerImportSource: '@mdx-js/preact',
   remarkPlugins: [remarkGfm, remarkSafeVars],
+  rehypePlugins: [rehypeSlug],
   development: isDevelopment,
 });

package/src/entry-server.tsx

@@ -1,11 +1,18 @@
+import type { ComponentType } from 'preact';
 import { renderToString } from 'preact-render-to-string';
 import { Router } from 'wouter-preact';
 import { MDXProvider } from '@mdx-js/preact';
 import { ThemeProvider } from '@clidey/ux';
 import * as mdxComponents from './mdx/mdx';
-import docsConfig from '../docs/dory.json';
+import docsConfig from '../docs/dory.json' with { type: 'json' };
+import type { DoryConfig } from './types/config';
 
-const config = docsConfig as any;
+const config = docsConfig as DoryConfig;
+
+const navigationTabs = config.navigation?.tabs ?? [];
+if (!config.navigation?.tabs) {
+  console.warn('dory.json has no navigation.tabs — SSR navigation will be empty.');
+}
 
 function pathFromFilename(filename: string): string {
   return filename
@@ -20,12 +27,27 @@ const allPages = Object.fromEntries(
   Object.entries(pages).map(([path, loader]) => [pathFromFilename(path), loader])
 );
 
-function buildNavigation(frontmatter?: Record<string, any>[]) {
-  return config.navigation.tabs.map((tab: any) => ({
+interface NavPage {
+  title: string;
+  href: string;
+}
+
+interface NavGroup {
+  title: string;
+  pages: NavPage[];
+}
+
+interface NavTab {
+  title: string;
+  groups: NavGroup[];
+}
+
+function buildNavigation(frontmatter?: Record<string, any>[]): NavTab[] {
+  return navigationTabs.map(tab => ({
     title: tab.tab,
-    groups: tab.groups.map((group: any) => ({
+    groups: tab.groups.map(group => ({
       title: group.group,
-      pages: group.pages.map((page: string) => {
+      pages: group.pages.map(page => {
         const href = `/${page}`;
         const fm = frontmatter?.find(f => f.path === href);
         return {
@@ -42,32 +64,32 @@ export async function render(routePath: string, frontmatter?: Record<string, any
   if (!loader) return '';
 
   try {
-    const module = await loader() as any;
+    const module = await loader() as { default: ComponentType };
     const Content = module.default;
 
     const navigation = buildNavigation(frontmatter);
-    const pageFm = frontmatter?.find((fm: any) => fm.path === routePath);
+    const pageFm = frontmatter?.find(fm => fm.path === routePath);
 
     // Find group/page titles (Layout uses swapped names: "title: group, group: title")
     let groupTitle = '';
-    const currentTab = navigation.find((tab: any) =>
-      tab.groups.some((group: any) =>
-        group.pages.some((page: any) => page.href === routePath)
+    const currentTab = navigation.find(tab =>
+      tab.groups.some(group =>
+        group.pages.some(page => page.href === routePath)
       )
     );
     if (currentTab) {
       for (const group of currentTab.groups) {
-        if (group.pages.some((p: any) => p.href === routePath)) {
+        if (group.pages.some(p => p.href === routePath)) {
           groupTitle = group.title;
         }
       }
     }
 
     // Prev/next
-    const allLinks = navigation.flatMap((tab: any) =>
-      tab.groups.flatMap((group: any) => group.pages)
+    const allLinks = navigation.flatMap(tab =>
+      tab.groups.flatMap(group => group.pages)
     );
-    const linkIndex = allLinks.findIndex((link: any) => link.href === routePath);
+    const linkIndex = allLinks.findIndex(link => link.href === routePath);
     const prevPage = linkIndex > 0 ? allLinks[linkIndex - 1] : null;
     const nextPage = linkIndex < allLinks.length - 1 ? allLinks[linkIndex + 1] : null;
 
@@ -76,17 +98,28 @@ export async function render(routePath: string, frontmatter?: Record<string, any
         <Router ssrPath={routePath}>
           <MDXProvider components={mdxComponents}>
                 <div class="flex w-full flex-col">
+                  {/* SYNC NOTE: the static shell below (header chrome, sidebar nav skeleton,
+                       main/article wrappers) hand-mirrors the client components:
+                       - <header> block  -> src/ui/header.tsx (Header component JSX)
+                       - #container/nav  -> src/ui/layout.tsx (non-landing return) + src/components/navigation.tsx
+                       When editing structure or classes in either place, update the counterpart,
+                       or hydration will mismatch. Client-only widgets (Search, ModeToggle,
+                       MobileNav) are intentionally NOT rendered here — see placeholder below. */}
                   {/* Header — matches src/ui/header.tsx structure */}
                   <header class="sticky top-0 z-50 flex flex-none flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-gray-900/5 sm:px-6 lg:px-8 dark:shadow-none dark:bg-transparent">
                     <div class="relative flex justify-between gap-6 sm:gap-8 md:grow items-center w-full px-4">
                       <div class="flex items-center grow gap-2">
-                        <img src={`/${config.logo.light}`} alt="logo" class="w-8 hidden dark:block" />
-                        <img src={`/${config.logo.dark}`} alt="logo" class="w-8 block dark:hidden" />
+                        {config.logo && (
+                          <>
+                            <img src={`/${config.logo.light}`} alt="logo" class="w-8 hidden dark:block" />
+                            <img src={`/${config.logo.dark}`} alt="logo" class="w-8 block dark:hidden" />
+                          </>
+                        )}
                         <h1 class="text-base lg:text-2xl font-bold">{config.name}</h1>
                       </div>
                       <nav class="hidden md:block">
                         <ul role="list" class="flex items-center gap-8">
-                          {navigation.map((tab: any) => {
+                          {navigation.map(tab => {
                             const isActive = tab === currentTab;
                             return (
                               <li key={tab.title}>
@@ -117,11 +150,11 @@ export async function render(routePath: string, frontmatter?: Record<string, any
                             {currentTab && (
                               <li>
                                 <h2 class="font-display font-medium text-xs">{currentTab.title}</h2>
-                                {currentTab.groups.map((group: any) => (
+                                {currentTab.groups.map(group => (
                                   <div key={group.title}>
                                     <h3 class="mt-4 text-sm font-semibold">{group.title}</h3>
                                     <ul role="list" class="mt-2 space-y-2 border-l-2 border-slate-100 lg:mt-4 lg:space-y-4 lg:border-slate-200 dark:border-slate-800">
-                                      {group.pages.map((page: any) => (
+                                      {group.pages.map(page => (
                                         <li key={page.href} class="relative">
                                           <a
                                             href={page.href}

package/src/main.tsx

@@ -5,9 +5,14 @@ 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 { loadTheme } from './utils/theme'
 import { Toaster } from '@clidey/ux'
 import { ThemeProvider } from '@clidey/ux'
 import { preloadFrontmatter } from './components/store'
+import docsConfig from '../docs/dory.json' with { type: 'json' };
+import type { DoryConfig } from './types/config';
+
+const config = docsConfig as DoryConfig;
 
 // Start frontmatter loading immediately — if inlined from SSR, this is a no-op.
 preloadFrontmatter()
@@ -15,14 +20,17 @@ preloadFrontmatter()
 // Load fonts and colors before rendering the app
 loadFonts()
 loadColors()
+loadTheme()
 
 const AppWithMDX = withMDX(App)
 
 const appRoot = document.getElementById('app')!
 const hasSSRContent = appRoot.children.length > 0
 
+const defaultTheme = config.theme?.mode === 'dark' ? 'dark' : config.theme?.mode === 'light' ? 'light' : 'system';
+
 const tree = (
-    <ThemeProvider storageKey="@clidey/dory/theme">
+    <ThemeProvider defaultTheme={defaultTheme} storageKey="@clidey/dory/theme">
         <Toaster />
         <ErrorBoundary>
             <AppWithMDX />

package/src/mdx/code.tsx

@@ -115,7 +115,7 @@ function CodePanelHeader({ tag, label }: { tag?: string; label?: string }) {
   if (!tag && !label) return null
 
   return (
-    <div className="flex h-9 items-center gap-2 border-y border-t-transparent border-b-white/7.5 bg-white/2.5 px-4 dark:border-b-white/5 dark:bg-white/1">
+    <div className="flex h-9 items-center gap-2 border-b border-t-transparent px-4" style={{ borderColor: 'var(--border)' }}>
       {tag && (
         <div className="dark flex">
           <Tag variant="small">{tag}</Tag>
@@ -155,7 +155,7 @@ function CodePanel({
   }
 
   return (
-    <div className="group dark:bg-white/2.5">
+    <div className="group">
       <CodePanelHeader tag={tag} label={label} />
       <div className="relative">
         <pre className="overflow-x-auto p-4 text-xs">{children}</pre>
@@ -257,7 +257,7 @@ export function CodeGroup({
   return (
     <CodeGroupContext.Provider value={true}>
       {hasTabs ? (
-        <Card className="py-0 border-black/10 bg-none overflow-hidden mb-4">
+        <Card className="p-0 border-black/10 bg-none overflow-hidden mb-4">
           <TabGroup
             as="div"
             selectedIndex={selectedIndex}
@@ -270,7 +270,7 @@ export function CodeGroup({
           </TabGroup>
         </Card>
       ) : (
-        <Card className="py-0 border-black/10 bg-none overflow-hidden mb-4">
+        <Card className="p-0 border-black/10 bg-none overflow-hidden mb-4">
           <div className="not-prose">
             {header}
             {panels}
@@ -285,5 +285,8 @@ export function Code({
   children,
   ...props
 }: React.ComponentPropsWithoutRef<'code'>) {
-  return <code className={classNames('dory-mdx-code rounded-md py-1 text-sm px-2', props.className)} {...props}>{children}</code>
+  const isBlock = typeof props.className === 'string' && props.className.includes('language-');
+  return <code className={classNames(props.className, {
+    'dory-mdx-code rounded-md py-0.5 text-sm px-1.5': !isBlock,
+  })} {...props}>{children}</code>
 }

package/src/mdx/fence.tsx

@@ -6,6 +6,14 @@ import { Loading } from '../components/loading'
 import { useTheme } from '@clidey/ux'
 import classNames from 'classnames'
 
+function dedent(code: string): string {
+  const lines = code.replace(/^\n+/, '').replace(/\s+$/, '').split('\n');
+  const indents = lines.filter(l => l.trim().length > 0).map(l => l.match(/^(\s*)/)?.[1].length ?? 0);
+  const minIndent = indents.length > 0 ? Math.min(...indents) : 0;
+  if (minIndent === 0) return lines.join('\n');
+  return lines.map(l => l.slice(minIndent)).join('\n');
+}
+
 
 export function Fence({
   children,
@@ -31,12 +39,12 @@ export function Fence({
 
   return (
     <Highlight
-      code={children.trimEnd()}
+      code={dedent(children)}
       language={supportedLanguage}
       theme={isDark ? themes.vsDark : themes.vsLight}>
       {({ className, style, tokens, getTokenProps }) => (
         <pre>
-          <Code className={classNames(className, "whitespace-pre-wrap")} style={style} title={supportedLanguage}>
+          <Code className={classNames(className, "whitespace-pre-wrap")} style={{ ...style, backgroundColor: 'transparent' }} title={supportedLanguage}>
             {tokens.map((line, lineIndex) => (
               <Fragment key={lineIndex}>
                 {line

package/src/mdx/icon.tsx

@@ -51,21 +51,28 @@ export function Icon({
   }
 
   // --- Try Font Awesome ---
-  const faSet = iconSets[iconType] ?? solidIcons
-  const iconKey = `fa${pascalCase}` as keyof typeof faSet
-  const faIcon = faSet[iconKey]
+  // Fall back to the brands set: Lucide 1.x removed all brand icons
+  // (github, twitter, npm, ...), which live only in FA brands.
+  const iconKey = `fa${pascalCase}`
+  const setsToTry: Array<keyof typeof iconSets> =
+    iconType === 'brands' ? ['brands'] : [iconType, 'brands']
 
-  if (faIcon && typeof faIcon === 'object' && 'iconName' in faIcon) {
-    library.add(faIcon)
-    return (
-      <FontAwesomeIcon
-        icon={[prefixes[iconType] || 'fas', faIcon.iconName] as any}
-        className={classNames("stroke-black dark:stroke-white", className)}
-        color={color as any}
-        size={size as any}
-        {...rest as any}
-      />
-    )
+  for (const setName of setsToTry) {
+    const faSet = iconSets[setName] ?? solidIcons
+    const faIcon = faSet[iconKey as keyof typeof faSet]
+
+    if (faIcon && typeof faIcon === 'object' && 'iconName' in faIcon) {
+      library.add(faIcon)
+      return (
+        <FontAwesomeIcon
+          icon={[prefixes[setName] || 'fas', faIcon.iconName] as any}
+          className={classNames("stroke-black dark:stroke-white", className)}
+          color={color as any}
+          size={size as any}
+          {...rest as any}
+        />
+      )
+    }
   }
 
   console.warn(`⚠️ Icon not found: "${icon}" (converted to ${iconKey}) in ${iconType}`)

package/src/mdx/mermaid.tsx

@@ -16,6 +16,15 @@ function fixNodeLabelsWithSpecialChars(content: string): string {
     });
 }
 
+// Deterministic djb2 hash — btoa throws on non-Latin-1 content (e.g. "→", CJK, emoji)
+function hashContent(content: string): string {
+    let hash = 5381;
+    for (let i = 0; i < content.length; i++) {
+        hash = ((hash << 5) + hash + content.charCodeAt(i)) >>> 0;
+    }
+    return hash.toString(16);
+}
+
 export function MermaidRenderer({ content }: { content: string }) {
     const mermaidRef = useRef<HTMLDivElement>(null)
     const [isFullscreen, setIsFullscreen] = useState(false)
@@ -23,7 +32,7 @@ export function MermaidRenderer({ content }: { content: string }) {
     const [error, setError] = useState<string | null>(null)
     const [isValid, setIsValid] = useState<boolean | null>(null)
 
-    const diagramId = useMemo(() => `mermaid-${btoa(content).replace(/[^a-zA-Z0-9]/g, '').substring(0, 10)}`, [content])
+    const diagramId = useMemo(() => `mermaid-${hashContent(content)}`, [content])
 
     useEffect(() => {
         let mounted = true

package/src/mdx/processor.test.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest';
+import { preprocessMdxContent } from './processor';
+
+async function run(input: string): Promise<string> {
+  const result = await preprocessMdxContent(input);
+  expect(result.success).toBe(true);
+  return result.processedContent!;
+}
+
+describe('preprocessMdxContent', () => {
+  it('strips YAML frontmatter', async () => {
+    const output = await run('---\ntitle: Hello\n---\n# Heading\n');
+    expect(output).not.toContain('title: Hello');
+    expect(output).toContain('# Heading');
+  });
+
+  it('converts URLs in angle brackets to markdown links', async () => {
+    const output = await run('Visit <https://example.com/docs> now');
+    expect(output).toBe('Visit [https://example.com/docs](https://example.com/docs) now');
+  });
+
+  it('preserves angle-bracket URLs inside fenced code blocks', async () => {
+    const input = '```\ncurl <https://example.com>\n```\n';
+    expect(await run(input)).toBe(input);
+  });
+
+  it('preserves angle-bracket URLs inside inline code', async () => {
+    const input = 'run `curl <https://example.com>` locally';
+    expect(await run(input)).toBe(input);
+  });
+
+  it('tracks code-block state across multiple fences', async () => {
+    const input = [
+      '```',
+      '<https://in-block.com>',
+      '```',
+      '<https://outside.com>',
+      '```',
+      '<https://in-block-2.com>',
+      '```',
+    ].join('\n');
+    const output = await run(input);
+    expect(output).toContain('<https://in-block.com>');
+    expect(output).toContain('<https://in-block-2.com>');
+    expect(output).toContain('[https://outside.com](https://outside.com)');
+  });
+});

package/src/mdx/step.tsx

@@ -16,11 +16,11 @@ export function Steps({ children }: { children: preact.ComponentChildren }) {
               },
               'relative'
             )}>
-              <div aria-hidden="true" className="absolute top-10 left-4 h-full w-[0.5px] bg-gray-300/50 dark:bg-gray-600/50" style={{ top: '40px', height: 'calc(100% - 44px)' }} />
+              <div aria-hidden="true" className="absolute top-10 left-4 h-full w-[0.5px]" style={{ top: '40px', height: 'calc(100% - 44px)', backgroundColor: 'color-mix(in oklch, var(--brand-foreground) 30%, transparent)' }} />
               <div className="group relative flex items-start">
                 <span className="flex h-9 items-center">
-                  <span className="relative z-10 flex size-8 items-center justify-center rounded-full bg-white dark:bg-gray-800 group-hover:border-gray-400">
-                    <span className="text-sm font-medium text-gray-500 dark:text-white">
+                  <span className="relative z-10 flex size-8 items-center justify-center rounded-full border" style={{ borderColor: 'var(--brand-foreground)', backgroundColor: 'color-mix(in oklch, var(--brand-foreground) 12%, transparent)' }}>
+                    <span className="text-sm font-medium" style={{ color: 'var(--brand-foreground)' }}>
                       {stepIdx + 1}
                     </span>
                   </span>

package/src/plugins/analytics-injector.ts

@@ -17,19 +17,21 @@ export function analyticsInjector(): Plugin {
         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';
+          // JSON.stringify so config-controlled values are safely escaped
+          // when inlined into the script (quotes, </script>, etc.)
+          const token = JSON.stringify(String(config.analytics.posthog.token)).replace(/</g, '\\u003c');
+          const apiHost = JSON.stringify(String(config.analytics.posthog.apiHost || 'https://us.i.posthog.com')).replace(/</g, '\\u003c');
 
           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}',
+        posthog.init(${token}, {
+            api_host: ${apiHost},
             person_profiles: 'identified_only',
         })
     </script>`;
 
-          return html.replace('</head>', `${script}\n  </head>`);
+          return html.replace('</head>', () => `${script}\n  </head>`);
         }
 
         return html;

package/src/plugins/docs-assets.ts

@@ -37,8 +37,9 @@ export function docsAssetsPlugin(): Plugin {
       const shouldSkip = (name: string) => {
         if (skipPatterns.has(name)) return true;
         const ext = extname(name).toLowerCase();
-        // Skip MDX and JSON files (they're processed by Vite)
-        if (ext === '.mdx' || ext === '.md' || ext === '.json') return true;
+        // Skip Markdown and JSON files (they're processed by Vite).
+        // MDX sources ARE copied so /route.mdx URLs work (Open MDX / LLM prompts).
+        if (ext === '.md' || ext === '.json') return true;
         return false;
       };
 
@@ -60,8 +61,8 @@ export function docsAssetsPlugin(): Plugin {
               copyAssets(srcPath, destPath, itemRelativePath);
             } else if (stats.isFile()) {
               const ext = extname(item).toLowerCase();
-              // Copy if it's an asset file
-              if (assetExtensions.has(ext)) {
+              // Copy asset files, plus source .mdx files at their route paths
+              if (assetExtensions.has(ext) || ext === '.mdx') {
                 cpSync(srcPath, destPath, { force: true });
                 console.log(`[docs-assets] Copied ${itemRelativePath}`);
               }