Add a compressed illustration carousel with slide indicators

2026-10-28 18:16:17 +08:00
parent c08371647d
commit bd932c36b2
16 changed files with 191 additions and 17 deletions
@@ -17,6 +17,7 @@ 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 { FigureGallery } from "@/components/FigureGallery";
 import { CodeBlock } from "@/components/CodeBlock";
 import { collectionEntries, collectionLabel } from "@/lib/collections";
 import { Icon } from "@/components/Icon";
@@ -102,15 +103,30 @@ export default function DocPage({
              <ReactMarkdown
                remarkPlugins={[remarkGfm]}
                components={{
-                  p: ({ children, node }) =>
-                    node?.children.some(
+                  p: ({ children, node }) => {
+                    const slides = node?.children.flatMap((child) =>
+                      child.type === "element" && child.tagName === "img" &&
+                      typeof child.properties.src === "string" &&
+                      child.properties.src.startsWith("/figures/endor-")
+                        ? [{ source: child.properties.src, alt: String(child.properties.alt ?? "") }]
+                        : [],
+                    ) ?? [];
+                    const onlyImages = node?.children.every((child) =>
+                      (child.type === "element" && child.tagName === "img" &&
+                        typeof child.properties.src === "string" &&
+                        child.properties.src.startsWith("/figures/endor-")) ||
+                      (child.type === "text" && child.value.trim() === ""),
+                    );
+                    if (slides.length > 1 && onlyImages) return <FigureGallery slides={slides} />;
+                    return node?.children.some(
                      (child) =>
                        child.type === "element" && child.tagName === "img",
                    ) ? (
                      <div>{children}</div>
                    ) : (
                      <p>{children}</p>
-                    ),
+                    );
+                  },
                  img: ({ src, alt }) =>
                    typeof src === "string" && src.startsWith("/figures/endor-") ? (
                      <ArchitectureFigure source={src} alt={alt ?? "Endor 架构图"} />