Enhance MDX component rendering with Mermaid support and update site name in OG docs

Author: gunta

src/app/og/docs/[...slug]/route.tsx

@@ -18,7 +18,7 @@ export async function GET(
       <DefaultImage
         title={page.data.title}
         description={page.data.description}
-        site="My App"
+        site="BetterScript"
       />
     ),
     {

src/app/robots.ts

@@ -0,0 +1,14 @@
+import type { MetadataRoute } from 'next';
+
+export default function robots(): MetadataRoute.Robots {
+    const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000';
+    return {
+        rules: {
+            userAgent: '*',
+            allow: '/',
+        },
+        sitemap: `${siteUrl.replace(/\/$/, '')}/sitemap.xml`,
+    };
+}
+
+

src/app/sitemap.ts

@@ -0,0 +1,23 @@
+import type { MetadataRoute } from 'next';
+import { source } from '@/lib/source';
+
+export default function sitemap(): MetadataRoute.Sitemap {
+    const siteUrl = (process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000').replace(/\/$/, '');
+
+    const docsEntries = source.getPages().map((page) => {
+        const url = `${siteUrl}${page.url}`;
+        return {
+            url,
+            changeFrequency: 'weekly' as const,
+            priority: 0.7,
+        };
+    });
+
+    return [
+        { url: `${siteUrl}/`, changeFrequency: 'weekly', priority: 0.8 },
+        { url: `${siteUrl}/docs`, changeFrequency: 'weekly', priority: 0.8 },
+        ...docsEntries,
+    ];
+}
+
+

src/mdx-components.tsx

@@ -1,6 +1,7 @@
 import defaultMdxComponents from 'fumadocs-ui/mdx';
-import * as TabsComponents from 'fumadocs-ui/components/tabs';[[]]
+import * as TabsComponents from 'fumadocs-ui/components/tabs';
 import type { MDXComponents } from 'mdx/types';
+import React from 'react';
 import { Mermaid } from './components/mermaid';
 
 // use this function to get MDX components, you will need it for rendering MDX
@@ -10,5 +11,41 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
     ...TabsComponents,
     ...components,
     Mermaid,
+    // Auto-render ```mermaid code fences using our Mermaid component
+    pre: (props: any) => {
+      const DefaultPre = (components?.pre ?? defaultMdxComponents.pre) as
+        | React.ComponentType<any>
+        | undefined;
+
+      const child: any = props?.children;
+      const codeElement = Array.isArray(child)
+        ? child.find((c) => c?.type === 'code' || c?.props?.className)
+        : child;
+      const className: string | undefined =
+        codeElement?.props?.className ?? props?.className;
+
+      // Recursively extract text from possible nested token structures
+      const extractText = (node: any): string => {
+        if (node == null) return '';
+        if (typeof node === 'string') return node;
+        if (Array.isArray(node)) return node.map(extractText).join('');
+        if (typeof node === 'object' && 'props' in node) {
+          return extractText((node as any).props?.children);
+        }
+        return '';
+      };
+
+      const code = extractText(codeElement?.props?.children);
+
+      if (className && className.includes('language-mermaid') && code) {
+        return <Mermaid chart={code.trimEnd()} />;
+      }
+
+      return DefaultPre ? (
+        <DefaultPre {...props} />
+      ) : (
+        <pre {...props} />
+      );
+    },
   };
 }