@docubook/flame 1.2.0 → 1.3.0

package/.docu/node/server-routes.ts

@@ -0,0 +1,266 @@
+import { readFile } from "node:fs/promises";
+import { resolve, join } from "node:path";
+import { statSync } from "node:fs";
+import React, { type ReactNode } from "react";
+import { renderToString } from "react-dom/server";
+import { compileMdx } from "./mdx";
+import { getContentType } from "./utils";
+import { DOCS_DIR, DIST_DIR, PROJECT_ROOT } from "./paths";
+import { BuildPluginBuilder } from "./plugin-builder";
+import type { PageContext } from "./plugin";
+import type { DocuConfig, TocItem } from "./types";
+import DocsPage from "../pages/docs/[[...slug]]";
+import NotFoundPage from "../pages/404";
+import IndexPage from "../pages/index";
+import { DocsLayout } from "../components/DocsLayout";
+import { generateNonce, isPathSafe, isSlugSafe, htmlResponse, SECURITY_HEADERS } from "./security";
+import { htmlShell as createHtmlShell, hmrScript, errorHtml } from "./html";
+
+export interface ServerState {
+  docuConfig: DocuConfig;
+  assetManifest: { css: string; js: string };
+  inlineThemeCss: string;
+  builder: BuildPluginBuilder | null;
+}
+
+function createHtmlResponse(
+  title: string,
+  description: string,
+  body: string,
+  status: number,
+  state: ServerState
+): Response {
+  const nonce = generateNonce();
+  const favicon = state.docuConfig.meta?.favicon || "/favicon.ico";
+  const html = createHtmlShell({
+    title,
+    description,
+    body,
+    favicon,
+    css: state.assetManifest.css,
+    js: state.assetManifest.js,
+    nonce,
+    extraScripts: hmrScript(nonce),
+    themeCss: state.inlineThemeCss,
+  });
+  return htmlResponse(html, nonce, status, process.env.NODE_ENV !== "production");
+}
+
+async function getDocsForSlug(
+  slug: string,
+  state: ServerState
+): Promise<{
+  content: ReactNode;
+  compiledSource: string;
+  frontmatter: Record<string, unknown>;
+  tocs: TocItem[];
+  filePath: string;
+  resolvedContent: string;
+} | null> {
+  if (!isSlugSafe(slug, DOCS_DIR)) return null;
+
+  const paths = [
+    join(DOCS_DIR, slug, "index.mdx"),
+    join(DOCS_DIR, `${slug}.mdx`),
+    join(DOCS_DIR, slug, "index.md"),
+    join(DOCS_DIR, `${slug}.md`),
+  ];
+
+  let filePath: string | null = null;
+  let raw: string | null = null;
+  for (const p of paths) {
+    if (!p.startsWith(DOCS_DIR)) continue;
+    try {
+      raw = await readFile(p, "utf-8");
+      filePath = p;
+      break;
+    } catch (err) {
+      if ((err as NodeJS.ErrnoException).code !== "ENOENT") throw err;
+    }
+  }
+  if (!filePath || !raw) return null;
+
+  const relPath = filePath.replace(PROJECT_ROOT + "/", "");
+
+  let content = raw;
+  if (state.builder) {
+    const transformed = await state.builder.runOnLoad(relPath, content);
+    if (transformed?.contents) {
+      content = transformed.contents;
+    }
+  }
+
+  const remarkPlugins = state.builder?.collectRemarkPlugins();
+  const rehypePlugins = state.builder?.collectRehypePlugins();
+  const result = await compileMdx(content, relPath, undefined, remarkPlugins, rehypePlugins);
+
+  let frontmatter = result.frontmatter as Record<string, unknown>;
+  if (state.builder) {
+    frontmatter = await state.builder.runTransformFrontmatterChain(frontmatter, {
+      slug: slug || "/",
+      filePath: relPath,
+      content,
+    });
+  }
+
+  return {
+    content: result.content,
+    compiledSource: result.compiledSource,
+    frontmatter,
+    tocs: result.tocs,
+    filePath: relPath,
+    resolvedContent: content,
+  };
+}
+
+async function renderDocsServerPage(
+  doc: NonNullable<Awaited<ReturnType<typeof getDocsForSlug>>>,
+  slug: string[],
+  pathname: string,
+  state: ServerState
+): Promise<Response> {
+  const title = (doc.frontmatter.title as string) || slug.join("/") || "Docs";
+  const description = (doc.frontmatter.description as string) || "";
+
+  const page = React.createElement(
+    DocsLayout,
+    { repoUrl: state.docuConfig.repo?.url, pathname },
+    React.createElement(DocsPage, {
+      slug,
+      title,
+      description,
+      date: doc.frontmatter.date as string | undefined,
+      content: doc.content,
+      tocs: doc.tocs,
+      filePath: doc.filePath,
+      repoUrl: state.docuConfig.repo?.url,
+      compiledSource: doc.compiledSource,
+    })
+  );
+
+  const body = renderToString(page);
+
+  if (state.builder) {
+    const ctx: PageContext = {
+      slug: slug.join("/") || "/",
+      filePath: doc.filePath,
+      frontmatter: doc.frontmatter,
+      content: doc.resolvedContent,
+      config: state.docuConfig,
+    };
+    const headExtra = state.builder.collectHead(ctx);
+    const bodyExtra = state.builder.collectBody(ctx);
+    const nonce = generateNonce();
+    const favicon = state.docuConfig.meta?.favicon || "/favicon.ico";
+    let html = createHtmlShell({
+      title,
+      description,
+      body,
+      favicon,
+      css: state.assetManifest.css,
+      js: state.assetManifest.js,
+      nonce,
+      extraScripts: hmrScript(nonce),
+      themeCss: state.inlineThemeCss,
+      headExtra,
+      bodyExtra,
+    });
+    html = await state.builder.runTransformHtmlChain(html, ctx);
+    return htmlResponse(html, nonce, 200, process.env.NODE_ENV !== "production");
+  }
+
+  return createHtmlResponse(title, description, body, 200, state);
+}
+
+function renderPage(
+  Component: React.ComponentType<Record<string, unknown>>,
+  title: string,
+  description: string,
+  status: number,
+  state: ServerState,
+  props: Record<string, unknown> = {}
+): Response {
+  const page = React.createElement(
+    DocsLayout,
+    { repoUrl: state.docuConfig.repo?.url, pathname: "/docs" },
+    React.createElement(Component, props)
+  );
+  const body = renderToString(page);
+  return createHtmlResponse(title, description, body, status, state);
+}
+
+export async function handleDocsIndex(state: ServerState): Promise<Response> {
+  const doc = await getDocsForSlug("", state);
+  if (!doc) return renderPage(NotFoundPage, "404 - Not Found", "", 404, state);
+  return renderDocsServerPage(doc, [], "/docs", state);
+}
+
+export async function handleDocsRoute(slug: string[], state: ServerState): Promise<Response> {
+  const path = slug.join("/");
+  const doc = await getDocsForSlug(path, state);
+  if (!doc) return renderPage(NotFoundPage, "404 - Not Found", "", 404, state);
+  return renderDocsServerPage(doc, slug, `/docs/${path}`, state);
+}
+
+export function handleIndex(state: ServerState): Response {
+  const page = React.createElement(IndexPage);
+  const body = renderToString(page);
+  return createHtmlResponse(
+    state.docuConfig.meta?.title || "DocuBook",
+    state.docuConfig.meta?.description || "",
+    body,
+    200,
+    state
+  );
+}
+
+export function handleNotFound(state: ServerState): Response {
+  return renderPage(NotFoundPage, "404 - Not Found", "", 404, state);
+}
+
+export function serveStatic(pathname: string): Response | null {
+  if (!isPathSafe(pathname, DIST_DIR)) return null;
+  const decoded = decodeURIComponent(pathname);
+  const assetPath = resolve(DIST_DIR, decoded.slice(1));
+  try {
+    const s = statSync(assetPath);
+    if (s.isFile()) {
+      return new Response(Bun.file(assetPath), {
+        headers: { "Content-Type": getContentType(pathname) },
+      });
+    }
+  } catch (err) {
+    if ((err as NodeJS.ErrnoException).code !== "ENOENT") throw err;
+  }
+
+  if (decoded.startsWith("/docs/assets/")) {
+    const docsAsset = resolve(DOCS_DIR, "assets", decoded.replace("/docs/assets/", ""));
+    const docsAssetsDir = resolve(DOCS_DIR, "assets");
+    const docsAssetsDirSlash = docsAssetsDir.endsWith("/") ? docsAssetsDir : docsAssetsDir + "/";
+    if (docsAsset !== docsAssetsDir && !docsAsset.startsWith(docsAssetsDirSlash)) return null;
+    try {
+      const s = statSync(docsAsset);
+      if (s.isFile()) {
+        return new Response(Bun.file(docsAsset), {
+          headers: { "Content-Type": getContentType(pathname) },
+        });
+      }
+    } catch (err) {
+      if ((err as NodeJS.ErrnoException).code !== "ENOENT") throw err;
+    }
+  }
+  return null;
+}
+
+export function serverErrorResponse(error: unknown): Response {
+  const msg = error instanceof Error ? error.message : "Unknown error";
+  const st = error instanceof Error ? error.stack : undefined;
+  return new Response(errorHtml(msg, st), {
+    status: 500,
+    headers: {
+      "Content-Type": "text/html",
+      ...SECURITY_HEADERS,
+      "Content-Security-Policy": "default-src 'none'; style-src 'unsafe-inline'",
+    },
+  });
+}

package/.docu/node/server.ts

@@ -1,22 +1,20 @@
-import { statSync } from "node:fs";
-import { readFile } from "node:fs/promises";
-import { resolve, join } from "node:path";
 import { watch } from "node:fs";
-import React from "react";
-import { renderToString } from "react-dom/server";
-import { getContentType } from "./utils";
-import { compileMdx } from "./mdx";
-import { DOCS_DIR, DIST_DIR, PAGES_DIR, PROJECT_ROOT, loadDocuConfig } from "./paths";
-import DocsPage from "../pages/docs/[[...slug]]";
-import NotFoundPage from "../pages/404";
-import IndexPage from "../pages/index";
-import { DocsLayout } from "../components/DocsLayout";
+import { DOCS_DIR, PAGES_DIR, loadDocuConfig } from "./paths";
+import { loadPlugins } from "./plugin-loader";
+import { BuildPluginBuilder } from "./plugin-builder";
 import { buildClientBundle, computeInlineThemeCss } from "./hydrate";
 import { generateSearchIndex } from "./search-indexer";
 import { logger } from "./logger";
 import { initSentry, captureException } from "./sentry";
-import { SECURITY_HEADERS, generateNonce, htmlResponse } from "./security";
-import { htmlShell as createHtmlShell, hmrScript } from "./html";
+import {
+  serveStatic,
+  handleDocsIndex,
+  handleDocsRoute,
+  handleIndex,
+  handleNotFound,
+  serverErrorResponse,
+  type ServerState,
+} from "./server-routes";
 
 const docuConfig = loadDocuConfig();
 
@@ -40,6 +38,23 @@ logger.indexDone(records, Math.round(performance.now() - t));
 
 logger.routes();
 
+// Plugin setup — all hooks active (onLoad, remark/rehype, frontmatter, head/body, html transform, handleRequest)
+const hasPlugins = !!docuConfig.plugins?.length;
+const builder = hasPlugins ? new BuildPluginBuilder(docuConfig) : null;
+if (hasPlugins && builder) {
+  const plugins = await loadPlugins(docuConfig.plugins!);
+  for (const plugin of plugins) {
+    await plugin.setup(builder);
+  }
+}
+
+const state: ServerState = {
+  docuConfig,
+  assetManifest,
+  inlineThemeCss,
+  builder,
+};
+
 let router: InstanceType<typeof Bun.FileSystemRouter> | null = null;
 try {
   router = new Bun.FileSystemRouter({
@@ -76,179 +91,6 @@ process.on("SIGTERM", () => {
   process.exit(0);
 });
 
-function createHtmlResponse(
-  title: string,
-  description: string,
-  body: string,
-  status = 200
-): Response {
-  const nonce = generateNonce();
-  const favicon = docuConfig.meta?.favicon || "/favicon.ico";
-  const html = createHtmlShell({
-    title,
-    description,
-    body,
-    favicon,
-    css: assetManifest.css,
-    js: assetManifest.js,
-    nonce,
-    extraScripts: hmrScript(nonce),
-    themeCss: inlineThemeCss,
-  });
-  return htmlResponse(html, nonce, status);
-}
-
-async function getDocsForSlug(slug: string) {
-  const resolved = resolve(DOCS_DIR, slug);
-  if (!resolved.startsWith(DOCS_DIR)) return null;
-
-  const paths = [
-    join(DOCS_DIR, slug, "index.mdx"),
-    join(DOCS_DIR, `${slug}.mdx`),
-    join(DOCS_DIR, slug, "index.md"),
-    join(DOCS_DIR, `${slug}.md`),
-  ];
-
-  let filePath: string | null = null;
-  let raw: string | null = null;
-  for (const p of paths) {
-    if (!p.startsWith(DOCS_DIR)) continue;
-    try {
-      raw = await readFile(p, "utf-8");
-      filePath = p;
-      break;
-    } catch (err) {
-      if ((err as NodeJS.ErrnoException).code !== "ENOENT") throw err;
-    }
-  }
-  if (!filePath || !raw) return null;
-
-  const relPath = filePath.replace(PROJECT_ROOT + "/", "");
-  const result = await compileMdx(raw, relPath);
-
-  return {
-    content: result.content,
-    compiledSource: result.compiledSource,
-    frontmatter: result.frontmatter,
-    tocs: result.tocs,
-    filePath: relPath,
-  };
-}
-
-async function handleDocsIndex(): Promise<Response> {
-  const doc = await getDocsForSlug("");
-  if (!doc) return renderPage(NotFoundPage, "404 - Not Found", "", 404);
-
-  const title = doc.frontmatter.title || "Docs";
-  const description = doc.frontmatter.description || "";
-
-  const page = React.createElement(
-    DocsLayout,
-    { repoUrl: docuConfig.repo?.url, pathname: "/docs" },
-    React.createElement(DocsPage, {
-      slug: [],
-      title,
-      description,
-      date: doc.frontmatter.date,
-      content: doc.content,
-      tocs: doc.tocs,
-      filePath: doc.filePath,
-      repoUrl: docuConfig.repo?.url,
-      compiledSource: doc.compiledSource,
-    })
-  );
-
-  const body = renderToString(page);
-  return createHtmlResponse(title, description, body);
-}
-
-async function handleDocsRoute(slug: string[]): Promise<Response> {
-  const path = slug.join("/");
-
-  const doc = await getDocsForSlug(path);
-  if (!doc) return renderPage(NotFoundPage, "404 - Not Found", "", 404);
-
-  const title = doc.frontmatter.title || path;
-  const description = doc.frontmatter.description || "";
-
-  const page = React.createElement(
-    DocsLayout,
-    { repoUrl: docuConfig.repo?.url, pathname: `/docs/${path}` },
-    React.createElement(DocsPage, {
-      slug,
-      title,
-      description,
-      date: doc.frontmatter.date,
-      content: doc.content,
-      tocs: doc.tocs,
-      filePath: doc.filePath,
-      repoUrl: docuConfig.repo?.url,
-      compiledSource: doc.compiledSource,
-    })
-  );
-
-  const body = renderToString(page);
-  return createHtmlResponse(title, description, body);
-}
-
-function renderPage(
-  Component: React.ComponentType<Record<string, unknown>>,
-  title: string,
-  description: string,
-  status: number,
-  props: Record<string, unknown> = {}
-): Response {
-  const page = React.createElement(
-    DocsLayout,
-    { repoUrl: docuConfig.repo?.url, pathname: "/docs" },
-    React.createElement(Component, props)
-  );
-  const body = renderToString(page);
-  return createHtmlResponse(title, description, body, status);
-}
-
-function handleIndex(): Response {
-  const page = React.createElement(IndexPage);
-  const body = renderToString(page);
-  return createHtmlResponse(
-    docuConfig.meta?.title || "DocuBook",
-    docuConfig.meta?.description || "",
-    body
-  );
-}
-
-function serveStatic(pathname: string): Response | null {
-  const decoded = decodeURIComponent(pathname);
-  const assetPath = resolve(DIST_DIR, decoded.slice(1));
-  if (!assetPath.startsWith(DIST_DIR)) return null;
-  try {
-    const s = statSync(assetPath);
-    if (s.isFile()) {
-      return new Response(Bun.file(assetPath), {
-        headers: { "Content-Type": getContentType(pathname) },
-      });
-    }
-  } catch (err) {
-    if ((err as NodeJS.ErrnoException).code !== "ENOENT") throw err;
-  }
-
-  if (decoded.startsWith("/docs/assets/")) {
-    const docsAsset = resolve(DOCS_DIR, "assets", decoded.replace("/docs/assets/", ""));
-    if (!docsAsset.startsWith(resolve(DOCS_DIR, "assets"))) return null;
-    try {
-      const s = statSync(docsAsset);
-      if (s.isFile()) {
-        return new Response(Bun.file(docsAsset), {
-          headers: { "Content-Type": getContentType(pathname) },
-        });
-      }
-    } catch (err) {
-      if ((err as NodeJS.ErrnoException).code !== "ENOENT") throw err;
-    }
-  }
-  return null;
-}
-
 const server = Bun.serve({
   port: PORT,
   development: true,
@@ -259,6 +101,22 @@ const server = Bun.serve({
     const pathname = url.pathname;
     const startTime = performance.now();
 
+    if (builder) {
+      const pluginResponse = await builder.runHandleRequest(req, {
+        port: server.port,
+        hostname: server.hostname,
+      });
+      if (pluginResponse) {
+        logger.request(
+          req.method,
+          pathname,
+          pluginResponse.status,
+          Math.round(performance.now() - startTime)
+        );
+        return pluginResponse;
+      }
+    }
+
     try {
       if (pathname === "/__hmr") {
         const stream = new ReadableStream({
@@ -295,19 +153,19 @@ const server = Bun.serve({
           const slug = slugParam ? slugParam.split("/") : [];
 
           if (slug.length === 0) {
-            response = await handleDocsIndex();
+            response = await handleDocsIndex(state);
           } else {
-            response = await handleDocsRoute(slug);
+            response = await handleDocsRoute(slug, state);
           }
         } else if (routeName === "/404") {
-          response = renderPage(NotFoundPage, "404 - Not Found", "", 404);
+          response = handleNotFound(state);
         } else if (routeName === "/") {
-          response = handleIndex();
+          response = handleIndex(state);
         } else {
-          response = renderPage(NotFoundPage, "404 - Not Found", "", 404);
+          response = handleNotFound(state);
         }
       } else {
-        response = renderPage(NotFoundPage, "404 - Not Found", "", 404);
+        response = handleNotFound(state);
       }
 
       logger.request(
@@ -319,45 +177,15 @@ const server = Bun.serve({
       return response;
     } catch (err) {
       captureException(err, { method: req.method, pathname });
-      const message = err instanceof Error ? err.message : String(err);
-      const stack = err instanceof Error ? err.stack || "" : "";
       logger.request(req.method, pathname, 500, Math.round(performance.now() - startTime));
-      const html = `<!DOCTYPE html><html><head><meta charset="utf-8"><title>Error</title>
-<style>body{margin:0;padding:2rem;font-family:ui-monospace,monospace;background:#1a1a2e;color:#e0e0e0}
-h1{color:#ff6b6b}pre{background:#0d0d1a;border:1px solid #333;border-radius:8px;padding:1.5rem;overflow-x:auto;font-size:14px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
-.msg{color:#ff6b6b;font-weight:bold}</style></head><body>
-<h1>🔥 Server Error</h1>
-<pre><span class="msg">${Bun.escapeHTML(message)}</span>\n\n${Bun.escapeHTML(stack)}</pre></body></html>`;
-      return new Response(html, {
-        status: 500,
-        headers: {
-          "Content-Type": "text/html",
-          ...SECURITY_HEADERS,
-          "Content-Security-Policy": "default-src 'none'; style-src 'unsafe-inline'",
-        },
-      });
+      return serverErrorResponse(err);
     }
   },
 
   error(error) {
     console.error(error);
     captureException(error);
-    const msg = Bun.escapeHTML(error?.message || "Unknown error");
-    const stack = Bun.escapeHTML(error?.stack || "");
-    const html = `<!DOCTYPE html><html><head><meta charset="utf-8"><title>Error</title>
-<style>body{margin:0;padding:2rem;font-family:ui-monospace,monospace;background:#1a1a2e;color:#e0e0e0}
-h1{color:#ff6b6b}pre{background:#0d0d1a;border:1px solid #333;border-radius:8px;padding:1.5rem;overflow-x:auto;font-size:14px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
-.msg{color:#ff6b6b;font-weight:bold}</style></head><body>
-<h1>🔥 Server Error</h1>
-<pre><span class="msg">${msg}</span>\n\n${stack}</pre></body></html>`;
-    return new Response(html, {
-      status: 500,
-      headers: {
-        "Content-Type": "text/html",
-        ...SECURITY_HEADERS,
-        "Content-Security-Policy": "default-src 'none'; style-src 'unsafe-inline'",
-      },
-    });
+    return serverErrorResponse(error);
   },
 });
 

package/.docu/node/types.ts

@@ -67,6 +67,7 @@ export interface HomeConfig {
 }
 
 import type { ThemeConfig } from "@docubook/themes-colors";
+import type { PluginEntry } from "./plugin";
 
 export interface DocuConfig {
   meta: DocuMeta;
@@ -78,6 +79,8 @@ export interface DocuConfig {
   themes?: {
     colors: ThemeConfig;
   };
+  /** List of DocuBook plugins to load. Empty by default — no-op when absent. */
+  plugins?: PluginEntry[];
 }
 
 export interface BuildCache {

package/.docu/node/utils.ts

@@ -1,5 +1,45 @@
 export { cn, parseDate, formatDate, formatDate2 } from "@docubook/core";
 
+import { readdir, stat } from "node:fs/promises";
+import { join } from "node:path";
+
+export interface ScannedMdxFile {
+  path: string;
+  absPath: string;
+  mtime: number;
+}
+
+/**
+ * Scan a directory recursively for MDX/MD files.
+ * Skips "assets" directories, hidden directories (dot-prefixed), and root-level index.mdx.
+ * Shared between build.ts and search-indexer.ts.
+ */
+export async function scanMdxFiles(dir: string, baseDir = ""): Promise<ScannedMdxFile[]> {
+  const files: ScannedMdxFile[] = [];
+  const entries = await readdir(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = join(dir, entry.name);
+    const relativePath = baseDir ? `${baseDir}/${entry.name}` : entry.name;
+
+    if (entry.isDirectory()) {
+      if (entry.name === "assets" || entry.name.startsWith(".")) continue;
+      files.push(...(await scanMdxFiles(fullPath, relativePath)));
+    } else if (entry.name.endsWith(".mdx") || entry.name.endsWith(".md")) {
+      if (entry.name === "index.mdx" && !baseDir) continue;
+      const stats = await stat(fullPath);
+      let path = relativePath.replace(/\.(mdx|md)$/, "");
+
+      if (/\/index$/.test(path)) {
+        path = path.replace(/\/index$/, "");
+      }
+      files.push({ path, absPath: fullPath, mtime: stats.mtimeMs });
+    }
+  }
+
+  return files;
+}
+
 export function isExternalUrl(url: string): boolean {
   return /^(https?:\/\/|\/\/)/.test(url);
 }
@@ -40,9 +80,26 @@ export async function getGitLastModifiedBatch(filePaths: string[]): Promise<Map<
   const result = new Map<string, string>();
   if (filePaths.length === 0) return result;
 
+  // Filter and validate paths — same guard as getGitLastModified
+  const safePaths: string[] = [];
+  for (const fp of filePaths) {
+    const cleanPath = fp.replace(/^\//, "");
+    if (
+      !cleanPath ||
+      !/^[a-zA-Z0-9\-_/.\s]+$/.test(cleanPath) ||
+      /(^|\/)\.\.($|\/)/.test(cleanPath)
+    ) {
+      console.warn(`[utils] getGitLastModifiedBatch: skipping invalid path "${fp}"`);
+      continue;
+    }
+    safePaths.push(cleanPath);
+  }
+
+  if (safePaths.length === 0) return result;
+
   try {
     const proc = Bun.spawn(
-      ["git", "log", "--format=%cI", "--name-only", "--diff-filter=ACMR", ...filePaths],
+      ["git", "log", "--format=%cI", "--name-only", "--diff-filter=ACMR", ...safePaths],
       { stderr: "ignore" }
     );
     const text = await new Response(proc.stdout).text();

package/.docu/pages/docs/[[...slug]].tsx

@@ -62,7 +62,9 @@ export default function DocsPage({
               <script
                 id="mdx-compiled-source"
                 type="application/json"
-                dangerouslySetInnerHTML={{ __html: JSON.stringify(compiledSource) }}
+                dangerouslySetInnerHTML={{
+                  __html: JSON.stringify(compiledSource).replace(/<\//g, "\\u003C/"),
+                }}
               />
             )}
             <div className="border-base-300 my-8 flex items-center border-b-2 border-dashed">