Merge pull request #54 from objectstack-ai/copilot/install-fumadocs-framework

Author: huangyiirene

package.json

@@ -12,15 +12,23 @@
     "test": "pnpm -r test"
   },
   "dependencies": {
+    "@fumadocs/cli": "^1.2.2",
     "client-only": "^0.0.1",
     "fumadocs-core": "16.4.7",
     "fumadocs-mdx": "14.2.5",
+    "fumadocs-openapi": "^10.2.6",
+    "fumadocs-twoslash": "^3.1.12",
+    "fumadocs-typescript": "^5.0.1",
     "fumadocs-ui": "16.4.7",
+    "katex": "^0.16.27",
     "lucide-react": "^0.562.0",
     "next": "16.1.2",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
+    "rehype-katex": "^7.0.1",
     "remark-directive": "^4.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
     "server-only": "^0.0.1",
     "tailwind-merge": "^3.4.0"
   },

packages/site/app/layout.tsx

@@ -1,4 +1,5 @@
 import 'fumadocs-ui/style.css';
+import 'katex/dist/katex.min.css';
 import { RootProvider } from 'fumadocs-ui/provider/next';
 import { defineI18nUI } from 'fumadocs-ui/i18n';
 import { i18n } from '@/lib/i18n';

packages/site/source.config.ts

@@ -4,6 +4,10 @@ import path from 'node:path';
 import fs from 'node:fs';
 import remarkDirective from 'remark-directive';
 import { remarkDirectiveAdmonition } from 'fumadocs-core/mdx-plugins';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import { transformerTwoslash } from 'fumadocs-twoslash';
 
 function resolveContentDir(dir: string) {
   if (process.env.DOCS_DIR && dir === 'content/docs') return process.env.DOCS_DIR;
@@ -26,9 +30,20 @@ export const { docs, meta } = defineDocs({
 
 export default defineConfig({
   mdxOptions: {
-    remarkPlugins: [remarkDirective, remarkDirectiveAdmonition],
+    remarkPlugins: [
+      remarkDirective,
+      remarkDirectiveAdmonition,
+      remarkGfm,        // GitHub Flavored Markdown (tables, strikethrough, etc.)
+      remarkMath,       // Math support (LaTeX equations)
+    ],
+    rehypePlugins: [
+      rehypeKatex,      // Render math equations
+    ],
     rehypeCodeOptions: {
       theme: siteConfig.content.codeBlock.theme,
+      transformers: [
+        transformerTwoslash(), // Interactive TypeScript code examples
+      ],
     }
   }
 });