@clidey/dory 0.46.0 → 0.48.0

package/src/components/routes.tsx

@@ -1,115 +1,60 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useMemo } from 'preact/hooks';
 import { Route, Router, useLocation } from 'wouter-preact';
 import { usePathname } from './hooks';
 import { ALL_NAVIGATION, ALL_PAGES, pathFromFilename } from './store';
-import { Loading } from './loading';
 
 
 export default function Routes() {
-  const [routes, setRoutes] = useState<any[]>([]);
   const pathname = usePathname();
   const [, navigate] = useLocation();
-  const [loading, setLoading] = useState(true);
 
+  // Redirect root to the first page so the URL reflects the actual content
   useEffect(() => {
-    const links = document.querySelectorAll('.dory-navigation a');
-    const listeners: (() => void)[] = [];
-    const preloaded = new Set();
-  
-    links.forEach(link => {
-      const href = link.getAttribute('href');
-      if (!href) return;
-  
-      const loaderEntry = Object.entries(ALL_PAGES).find(
-        ([path]) => path === href
-      );
-  
-      if (!loaderEntry) return;
-  
-      const [path, loader] = loaderEntry;
-  
-      const handleMouseEnter = () => {
-        if (!preloaded.has(path)) {
-          loader();
-          preloaded.add(path);
-        }
-      };
-  
-      link.addEventListener('mouseenter', handleMouseEnter);
-      listeners.push(() => link.removeEventListener('mouseenter', handleMouseEnter));
-    });
-  
-    return () => {
-      listeners.forEach(unsub => unsub());
-    };
-  }, []);
-
-  useEffect(() => {
-    setLoading(true);
-    const loadRoutes = async () => {
-      try {
-        // For root path, load the first navigation page
-        const targetPath = pathname === '/' ? ALL_NAVIGATION[0].groups[0].pages[0].href : pathname;
-
-        const entries = await Promise.all(
-          Object.entries(ALL_PAGES).filter(([path]) => path === targetPath).map(async ([path, loader]) => {
-            const module = await loader();
-            const routePath = pathname === '/' ? '/' : pathFromFilename(path);
-            return {
-              path: routePath,
-              component: module.default,
-            };
-          })
-        );
-        setRoutes(entries);
-      } catch (error) {
-        console.error('Failed to load route:', error);
-        setRoutes([]);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    loadRoutes();
+    if (pathname === '/') {
+      const firstPage = ALL_NAVIGATION[0]?.groups[0]?.pages[0]?.href;
+      if (firstPage) navigate(firstPage, { replace: true });
+    }
   }, [pathname]);
 
-  useEffect(() => {
-    const page = ALL_NAVIGATION.find((tab) => tab.groups.find((group) => group.pages.find((page) => page.href === pathname)));
-    if (!page && pathname !== '/') {
-      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);
+  const route = useMemo(() => {
+    let targetPath = pathname;
+    if (pathname === '/') {
+      const ssrRoute = typeof window !== 'undefined' ? window.__DORY_ROUTE__ : undefined;
+      targetPath = ssrRoute || ALL_NAVIGATION[0]?.groups[0]?.pages[0]?.href || pathname;
     }
-  }, [pathname]);
 
-  useEffect(() => {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
+    const entry = Object.entries(ALL_PAGES).find(([path]) => path === targetPath);
+    if (!entry) return null;
+
+    const [path, mod] = entry;
+    return {
+      path: pathname === '/' ? '/' : pathFromFilename(path),
+      component: (mod as any).default,
+    };
   }, [pathname]);
-  
 
-  if (loading) return <div className="h-[25vh] flex grow"><Loading /></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 (
     <Router>
-      {routes.map(({ path, component: Component }) => (
-        <Route key={path} path={path} component={Component} />
-      ))}
+      {route && <Route key={route.path} path={route.path} component={route.component} />}
     </Router>
   );
 }

package/src/components/search.tsx

@@ -374,6 +374,7 @@ function useSearchProps() {
   return {
     inputProps: {
       ref: inputRef,
+      readOnly: true,
       onClick() {
         setOpen(true)
       },

package/src/components/store.ts

@@ -6,9 +6,12 @@ import { addToSearchIndex } from './search-index';
 
 const config = docsConfig as DoryConfig;
 
+// Eager-load all page modules so they're available synchronously.
+// This eliminates the async loading spinner in Routes and enables
+// proper hydrate() — the first render matches the SSR DOM.
 export const ALL_PAGES = Object.fromEntries(
-  Object.entries(import.meta.glob<{ default: ComponentType; }>('../../docs/**/*.mdx'))
-    .map(([path, loader]) => [pathFromFilename(path), loader])
+  Object.entries(import.meta.glob<{ default: ComponentType; }>('../../docs/**/*.mdx', { eager: true }))
+    .map(([path, mod]) => [pathFromFilename(path), mod])
 );
 export const ALL_OPENAPI = Object.fromEntries(
   Object.entries(import.meta.glob<{ default: string }>('../../docs/**/openapi.json', { query: 'raw', eager: true }))
@@ -59,30 +62,26 @@ export function pathFromFilename(filename: string): string {
         .toLowerCase();
 }
 
-function parseFrontMatter(content: string) {
-    const frontMatterMatch = content.match(/^---\n([\s\S]*?)\n---/);
-    if (!frontMatterMatch) return { data: {}, content };
-    
-    const frontMatter = frontMatterMatch[1];
-    const data: Record<string, any> = {};
-    
-    frontMatter.split('\n').forEach(line => {
-        const [key, ...valueParts] = line.split(':');
-        if (key && valueParts.length) {
-        const value = valueParts.join(':').trim();
-        data[key.trim()] = value.replace(/^["']|["']$/g, ''); // Remove quotes if present
-        }
-    });
-
-    return { data, content: content.slice(frontMatterMatch[0].length) };
-}
 
 export let completeFrontMatter: Record<string, any>[] = [];
+export function isFrontmatterReady() { return preloadedFrontMatter !== null; }
 let preloadedFrontMatter: Record<string, any>[] | null = null;
 
-// Preload frontmatter from JSON file (optimized approach)
+// Check for inlined frontmatter from SSR (available synchronously, no fetch needed)
+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.__DORY_FRONTMATTER__;
+    // Build search index in the background after the page has fully rendered
+    setTimeout(() => addPreloadedContentToSearch(), 2000);
+}
+
+// Preload frontmatter from JSON file (fallback when no inline data)
 export async function preloadFrontmatter() {
-    if (preloadedFrontMatter) return; // Already loaded
+    if (preloadedFrontMatter) return; // Already loaded (inline or previous fetch)
 
     try {
         const response = await fetch('/frontmatter.json');
@@ -106,33 +105,23 @@ export async function preloadFrontmatter() {
     }
 }
 
-// Add preloaded content to search index (runs in background, never blocks rendering)
+// Add preloaded content to search index (runs in background, never blocks rendering).
+// Fetches pre-built search-content.json generated at build time — no ?raw glob needed.
 async function addPreloadedContentToSearch() {
-    if (!preloadedFrontMatter) return;
-
-    const mdxFiles = import.meta.glob<{ default: string }>('../../docs/**/*.mdx', { query: '?raw' });
-    const fileEntries = Object.entries(mdxFiles);
-
-    // Index in batches to avoid firing hundreds of requests at once
-    const BATCH_SIZE = 10;
-    for (let i = 0; i < preloadedFrontMatter.length; i += BATCH_SIZE) {
-        const batch = preloadedFrontMatter.slice(i, i + BATCH_SIZE);
-        await Promise.all(
-            batch.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);
-                    }
-                }
-            })
-        );
+    try {
+        const response = await fetch('/search-content.json');
+        if (!response.ok) return;
+        const searchContent: Array<{ path: string; title: string; content: string }> = await response.json();
+
+        for (const entry of searchContent) {
+            try {
+                await addToSearchIndex(entry.path, { title: entry.title }, entry.content);
+            } catch (error) {
+                console.warn(`Failed to index ${entry.path}:`, error);
+            }
+        }
+    } catch (error) {
+        console.warn('Failed to load search content:', error);
     }
 }
 
@@ -146,53 +135,40 @@ export async function loadMDXFrontMatterForPath(pathname: string) {
     // Check if already loaded in completeFrontMatter
     if (completeFrontMatter.find(fm => fm.path === pathname)) return;
 
-    // Fallback to dynamic loading
-    const mdxFiles = import.meta.glob<{ default: string }>('../../docs/**/*.mdx', { query: '?raw' });
-    const fileEntries = Object.entries(mdxFiles);
-
-    const fileEntry = fileEntries.find(([path]) => pathFromFilename(path) === pathname);
-    if (!fileEntry) return;
-
-    const [path, loader] = fileEntry;
-    const rawContent = (await loader()).default;
-    const { data, content } = parseFrontMatter(rawContent);
-    const filename = pathFromFilename(path);
-
-    updateNavigationTitle(filename, data.title);
-    await addToSearchIndex(filename, data, content);
-
-    const frontmatterItem = { ...data, path: filename };
-    completeFrontMatter = [...completeFrontMatter, frontmatterItem];
+    // Fallback: fetch frontmatter.json for this page's metadata
+    try {
+        const response = await fetch('/frontmatter.json');
+        if (response.ok) {
+            const allFm: Record<string, any>[] = await response.json();
+            const fm = allFm.find(f => f.path === pathname);
+            if (fm) {
+                updateNavigationTitle(pathname, fm.title);
+                completeFrontMatter = [...completeFrontMatter, fm];
+            }
+        }
+    } catch {
+        // Non-fatal — page will still render, just without title in nav
+    }
 }
 
 // Load all remaining frontmatter (after initial load) - optimized with fallback
 export async function loadAllMDXFrontMatter(pathname: string) {
-    // If we have preloaded data, we're already done
-    if (preloadedFrontMatter) {
-        return;
-    }
-
-    // Fallback to dynamic loading
-    const mdxFiles = import.meta.glob<{ default: string }>('../../docs/**/*.mdx', { query: '?raw' });
-    const fileEntries = Object.entries(mdxFiles);
+    if (preloadedFrontMatter) return;
 
-    const remainingEntries = fileEntries.filter(([path]) => pathFromFilename(path) !== pathname);
-    const newFrontmatter: Record<string, any>[] = [];
-
-    await Promise.all(
-        remainingEntries.map(async ([path, loader]) => {
-            const rawContent = (await loader()).default;
-            const { data, content } = parseFrontMatter(rawContent);
-            const filename = pathFromFilename(path);
-
-            updateNavigationTitle(filename, data.title);
-            await addToSearchIndex(filename, data, content);
-
-            newFrontmatter.push({ ...data, path: filename });
-        })
-    );
+    try {
+        const response = await fetch('/frontmatter.json');
+        if (!response.ok) return;
+        const allFm: Record<string, any>[] = await response.json();
 
-    completeFrontMatter = [...completeFrontMatter, ...newFrontmatter];
+        for (const fm of allFm) {
+            if (fm.path !== pathname) {
+                updateNavigationTitle(fm.path, fm.title);
+                completeFrontMatter = [...completeFrontMatter, fm];
+            }
+        }
+    } catch {
+        // Non-fatal
+    }
 }
 
 // Shared helper

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,
 });