Enable fumadocs MDX plugins and UI enhancements

apps/site/app/docs/[[...slug]]/page.tsx

@@ -15,7 +15,11 @@ export default async function Page({
   const MDX = page.data.body;
 
   return (
-    <DocsPage toc={page.data.toc} full={page.data.full}>
+    <DocsPage 
+      toc={page.data.toc} 
+      full={page.data.full}
+      lastUpdate={page.data.lastModified}
+    >
       <DocsTitle>{page.data.title}</DocsTitle>
       <DocsDescription>{page.data.description}</DocsDescription>
       <DocsBody>

apps/site/app/layout.config.tsx

@@ -13,4 +13,39 @@ export const baseOptions: Omit<DocsLayoutProps, 'tree'> = {
     },
   ],
   githubUrl: 'https://github.com/objectstack-ai/objectql',
+  // Enable sidebar search
+  sidebar: {
+    defaultOpenLevel: 0,
+    banner: (
+      <div className="text-sm text-muted-foreground">
+        ObjectQL Documentation
+      </div>
+    ),
+  },
+  // Enable table of contents
+  toc: {
+    enabled: true,
+    footer: (
+      <div className="flex flex-col gap-2 border-t pt-4 mt-4 text-xs">
+        <a
+          href="https://github.com/objectstack-ai/objectql/blob/main/apps/site"
+          className="text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-1"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Edit this page on GitHub →
+        </a>
+      </div>
+    ),
+  },
+  // Enable last updated timestamp
+  lastUpdate: {
+    enabled: true,
+    showTimestamp: true,
+  },
+  // Enable edit on GitHub
+  editOnGithub: {
+    enabled: true,
+    base: 'https://github.com/objectstack-ai/objectql/blob/main/apps/site',
+  },
 };

apps/site/app/layout.tsx

@@ -1,4 +1,5 @@
 import './globals.css';
+import 'katex/dist/katex.min.css';
 import type { ReactNode } from 'react';
 import { RootProvider } from 'fumadocs-ui/provider';
 

apps/site/package.json

@@ -9,22 +9,29 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "fumadocs-core": "^13.0.0",
+    "fumadocs-mdx": "10.0.0",
+    "fumadocs-ui": "^13.0.0",
+    "katex": "^0.16.27",
     "next": "^14.2.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
-    "fumadocs-core": "^13.0.0",
-    "fumadocs-ui": "^13.0.0",
-    "fumadocs-mdx": "10.0.0"
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-katex": "^7.0.1",
+    "rehype-slug": "^6.0.0",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.10.0",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
-    "typescript": "^5.3.0",
+    "autoprefixer": "^10.4.16",
     "eslint": "^8.0.0",
     "eslint-config-next": "^14.2.0",
+    "postcss": "^8.4.32",
     "tailwindcss": "^3.4.0",
-    "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.32"
+    "typescript": "^5.3.0"
   }
 }

apps/site/source.config.ts

@@ -1,7 +1,31 @@
 import { defineDocs, defineConfig } from 'fumadocs-mdx/config';
+import { rehypeCode } from 'fumadocs-core/mdx-plugins';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import rehypeSlug from 'rehype-slug';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 
 export const { docs, meta } = defineDocs({
   dir: 'content/docs',
 });
 
-export default defineConfig({});
+export default defineConfig({
+  mdxOptions: {
+    remarkPlugins: [
+      remarkGfm, // GitHub Flavored Markdown (tables, strikethrough, task lists, etc.)
+      remarkMath, // Math equations support
+    ],
+    rehypePlugins: [
+      rehypeSlug, // Add IDs to headings
+      [rehypeAutolinkHeadings, { behavior: 'wrap' }], // Add links to headings
+      rehypeKatex, // Render math equations
+      [rehypeCode, {
+        themes: {
+          light: 'github-light',
+          dark: 'github-dark',
+        },
+      }],
+    ],
+  },
+});