fix: pass TOC data from compiled MDX modules to page components

- loadPageModule returns both default component and toc array
- PageData includes toc field (TableOfContents)
- entry-client and page-context extract toc from import.meta.glob modules
- DocsPage uses page.toc instead of hardcoded empty array

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: rsbh

packages/chronicle/src/lib/page-context.tsx

@@ -8,12 +8,13 @@ import React, {
 import { useLocation } from 'react-router';
 import { mdxComponents } from '@/components/mdx';
 import type { ApiSpec } from '@/lib/openapi';
-import type { ChronicleConfig, Frontmatter, Root } from '@/types';
+import type { ChronicleConfig, Frontmatter, Root, TableOfContents } from '@/types';
 
 interface PageData {
   slug: string[];
   frontmatter: Frontmatter;
   content: ReactNode;
+  toc: TableOfContents;
 }
 
 interface PageContextValue {
@@ -47,21 +48,22 @@ interface PageProviderProps {
   children: ReactNode;
 }
 
-const contentModules = import.meta.glob<{ default?: React.ComponentType<any> }>(
+const contentModules = import.meta.glob<{ default?: React.ComponentType<any>; toc?: TableOfContents }>(
   '../../.content/**/*.{mdx,md}'
 );
 
-async function loadMdxComponent(relativePath: string): Promise<ReactNode> {
+async function loadMdxModule(relativePath: string): Promise<{ content: ReactNode; toc: TableOfContents }> {
   const withoutExt = relativePath.replace(/\.(mdx|md)$/, '');
   const key = relativePath.endsWith('.md')
     ? `../../.content/${withoutExt}.md`
     : `../../.content/${withoutExt}.mdx`;
   const loader = contentModules[key];
-  if (!loader) return null;
+  if (!loader) return { content: null, toc: [] };
   const mod = await loader();
-  return mod.default
+  const content = mod.default
     ? React.createElement(mod.default, { components: mdxComponents })
     : null;
+  return { content, toc: mod.toc ?? [] };
 }
 
 export function PageProvider({
@@ -105,9 +107,9 @@ export function PageProvider({
       .then(res => res.json())
       .then(async (data: { frontmatter: Frontmatter; relativePath: string }) => {
         if (cancelled.current) return;
-        const content = await loadMdxComponent(data.relativePath);
+        const { content, toc } = await loadMdxModule(data.relativePath);
         if (cancelled.current) return;
-        setPage({ slug, frontmatter: data.frontmatter, content });
+        setPage({ slug, frontmatter: data.frontmatter, content, toc });
       })
       .catch(() => {});
 

packages/chronicle/src/lib/source.ts

@@ -4,6 +4,7 @@ import { loader } from 'fumadocs-core/source';
 import type { Root, Node, Folder } from 'fumadocs-core/page-tree';
 import matter from 'gray-matter';
 import type { MDXContent } from 'mdx/types';
+import type { TableOfContents } from 'fumadocs-core/toc';
 
 function getContentDir(): string {
   return __CHRONICLE_CONTENT_DIR__ || path.join(process.cwd(), 'content');
@@ -120,20 +121,20 @@ export async function getPage(slugs?: string[]) {
   return s.getPage(slugs);
 }
 
-export async function loadPageComponent(
+export async function loadPageModule(
   relativePath: string
-): Promise<MDXContent | null> {
-  if (!relativePath) return null;
+): Promise<{ default: MDXContent | null; toc: TableOfContents }> {
+  if (!relativePath) return { default: null, toc: [] };
   const contentDir = getContentDir();
   const fullPath = path.join(contentDir, relativePath);
   try {
     await fs.access(fullPath);
   } catch {
-    return null;
+    return { default: null, toc: [] };
   }
   const withoutExt = relativePath.replace(/\.(mdx|md)$/, '');
   const mod = relativePath.endsWith('.md')
     ? await import(`../../.content/${withoutExt}.md`)
     : await import(`../../.content/${withoutExt}.mdx`);
-  return mod.default;
+  return { default: mod.default ?? null, toc: mod.toc ?? [] };
 }

packages/chronicle/src/pages/DocsPage.tsx

@@ -33,7 +33,7 @@ export function DocsPage({ slug }: DocsPageProps) {
           slug,
           frontmatter: page.frontmatter,
           content: page.content,
-          toc: []
+          toc: page.toc
         }}
         config={config}
         tree={tree}

packages/chronicle/src/server/entry-client.tsx

@@ -5,7 +5,7 @@ import { BrowserRouter } from 'react-router';
 import { ReactRouterProvider } from 'fumadocs-core/framework/react-router';
 import { mdxComponents } from '@/components/mdx';
 import { PageProvider } from '@/lib/page-context';
-import type { ChronicleConfig, Frontmatter, Root } from '@/types';
+import type { ChronicleConfig, Frontmatter, Root, TableOfContents } from '@/types';
 import type { ApiSpec } from '@/lib/openapi';
 import type { ReactNode } from 'react';
 import { App } from './App';
@@ -60,13 +60,13 @@ async function hydrate() {
   }
 }
 
-const contentModules = import.meta.glob<{ default?: React.ComponentType<any> }>(
+const contentModules = import.meta.glob<{ default?: React.ComponentType<any>; toc?: TableOfContents }>(
   '../../.content/**/*.{mdx,md}'
 );
 
 async function loadPage(
   embedded: EmbeddedData
-): Promise<{ slug: string[]; frontmatter: Frontmatter; content: ReactNode }> {
+): Promise<{ slug: string[]; frontmatter: Frontmatter; content: ReactNode; toc: TableOfContents }> {
   const withoutExt = embedded.relativePath.replace(/\.(mdx|md)$/, '');
   const key = embedded.relativePath.endsWith('.md')
     ? `../../.content/${withoutExt}.md`
@@ -76,7 +76,7 @@ async function loadPage(
   const content = mod?.default
     ? React.createElement(mod.default, { components: mdxComponents })
     : null;
-  return { slug: embedded.slug, frontmatter: embedded.frontmatter, content };
+  return { slug: embedded.slug, frontmatter: embedded.frontmatter, content, toc: mod?.toc ?? [] };
 }
 
 hydrate();

packages/chronicle/src/server/entry-server.tsx

@@ -8,7 +8,7 @@ import { mdxComponents } from '@/components/mdx';
 import { loadConfig } from '@/lib/config';
 import { loadApiSpecs } from '@/lib/openapi';
 import { PageProvider } from '@/lib/page-context';
-import { getPageTree, getPage, loadPageComponent } from '@/lib/source';
+import { getPageTree, getPage, loadPageModule } from '@/lib/source';
 import { App } from './App';
 
 // @ts-expect-error virtual import from Nitro
@@ -35,6 +35,8 @@ export default {
     const data = page?.data as Record<string, unknown> | undefined;
     const relativePath = (data?._relativePath as string) ?? null;
 
+    const mdxModule = relativePath ? await loadPageModule(relativePath) : null;
+
     const pageData = page
       ? {
           slug,
@@ -45,11 +47,10 @@ export default {
             icon: data?.icon as string | undefined,
             lastModified: data?.lastModified as string | undefined,
           },
-          content: relativePath
-            ? await loadPageComponent(relativePath).then(component =>
-                component ? React.createElement(component, { components: mdxComponents }) : null
-              )
+          content: mdxModule?.default
+            ? React.createElement(mdxModule.default, { components: mdxComponents })
             : null,
+          toc: mdxModule?.toc ?? [],
         }
       : null;