Explain Endor concepts with a reproducible multi-region topology

apps/docs/src/pages/docs/[slug].tsx

@@ -16,6 +16,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { listDocs, readDoc, type Doc, type DocLink } from "@/lib/docs";
 import { Shell, Navigation } from "@/components/Shell";
+import { ArchitectureFigure } from "@/components/ArchitectureFigure";
 import { CodeBlock } from "@/components/CodeBlock";
 import { headingsFor, sectionFor } from "@/lib/navigation";
 
@@ -102,6 +103,22 @@ export default function DocPage({
               <ReactMarkdown
                 remarkPlugins={[remarkGfm]}
                 components={{
+                  p: ({ children, node }) =>
+                    node?.children.some(
+                      (child) =>
+                        child.type === "element" && child.tagName === "img",
+                    ) ? (
+                      <div>{children}</div>
+                    ) : (
+                      <p>{children}</p>
+                    ),
+                  img: ({ src, alt }) =>
+                    src === "/figures/endor-architecture.svg" ? (
+                      <ArchitectureFigure alt={alt ?? "Endor 概念架构草案"} />
+                    ) : (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img src={src} alt={alt ?? ""} />
+                    ),
                   table: ({ children }) => (
                     <div className="table-scroll">
                       <table>{children}</table>