fix: properly handle multiple transclusions

quartz/components/renderPage.tsx

@@ -9,7 +9,6 @@ import {
 } from "../util/resources"
 import { FullSlug, RelativeURL, joinSegments, normalizeHastElement } from "../util/path"
 import { clone } from "../util/clone"
-import { visit } from "unist-util-visit"
 import { Root, Element, ElementContent } from "hast"
 import { GlobalConfiguration } from "../cfg"
 import { i18n } from "../i18n"
@@ -110,173 +109,192 @@ export function pageResources(
   return resources
 }
 
-function renderTranscludes(
+/** @internal Exported for testing only. */
+export function renderTranscludes(
   root: Root,
   cfg: GlobalConfiguration,
   slug: FullSlug,
   componentData: QuartzComponentProps,
   visited: Set<FullSlug>,
 ) {
-  // process transcludes in componentData
+  // Walk the tree manually instead of using visit() so we can track the
-  visit(root, "element", (node, _index, _parent) => {
+  // ancestor chain for cycle detection. visit() runs the callback before
-    if (node.tagName === "blockquote") {
+  // descending into replaced children, so a Set-based guard there falsely
-      const classNames = (node.properties?.className ?? []) as string[]
+  // rejects sibling transclusions of the same target.
-      if (classNames.includes("transclude")) {
+  function walk(node: Element | Root) {
-        const inner = node.children[0] as Element
+    const children = (node as Root).children ?? []
-        const transcludeTarget = (inner.properties["data-slug"] ?? slug) as FullSlug
+    for (let i = 0; i < children.length; i++) {
-        if (visited.has(transcludeTarget)) {
+      const child = children[i]
-          console.warn(
+      if (child?.type !== "element") continue
-            styleText(
+      const el = child as Element
-              "yellow",
-              `Warning: Skipping circular transclusion: ${slug} -> ${transcludeTarget}`,
-            ),
-          )
-          node.children = [
-            {
-              type: "element",
-              tagName: "p",
-              properties: { style: "color: var(--secondary);" },
-              children: [
-                {
-                  type: "text",
-                  value: `Circular transclusion detected: ${transcludeTarget}`,
-                },
-              ],
-            },
-          ]
-          return
-        }
-        visited.add(transcludeTarget)
 
-        let page = componentData.allFiles.find((f) => f.slug === transcludeTarget)
+      if (el.tagName !== "blockquote") {
-        if (!page) {
+        walk(el)
-          // Virtual pages from PageType plugins have slugs without extensions
+        continue
-          // (e.g. "plugins/CanvasPage") but CrawlLinks resolves wikilinks like
+      }
-          // ![[CanvasPage.canvas]] to "plugins/CanvasPage.canvas". Fall back to
-          // stripping the extension from the transclude target.
-          const dotIdx = transcludeTarget.lastIndexOf(".")
-          const slashIdx = transcludeTarget.lastIndexOf("/")
-          if (dotIdx > slashIdx + 1) {
-            const stripped = transcludeTarget.slice(0, dotIdx) as FullSlug
-            page = componentData.allFiles.findLast((f) => f.slug === stripped)
-          }
-        }
-        if (!page) {
-          return
-        }
 
-        let blockRef = node.properties.dataBlock as string | undefined
+      const classNames = (el.properties?.className ?? []) as string[]
-        if (blockRef?.startsWith("#^")) {
+      if (!classNames.includes("transclude")) {
-          // block transclude
+        walk(el)
-          blockRef = blockRef.slice("#^".length)
+        continue
-          let blockNode = page.blocks?.[blockRef]
+      }
-          if (blockNode) {
-            if (blockNode.tagName === "li") {
-              blockNode = {
-                type: "element",
-                tagName: "ul",
-                properties: {},
-                children: [blockNode],
-              }
-            }
 
-            node.children = [
+      const inner = el.children[0] as Element
-              normalizeHastElement(blockNode, slug, transcludeTarget),
+      const transcludeTarget = (inner.properties["data-slug"] ?? slug) as FullSlug
+      if (visited.has(transcludeTarget)) {
+        console.warn(
+          styleText(
+            "yellow",
+            `Warning: Skipping circular transclusion: ${slug} -> ${transcludeTarget}`,
+          ),
+        )
+        el.children = [
+          {
+            type: "element",
+            tagName: "p",
+            properties: { style: "color: var(--secondary);" },
+            children: [
               {
-                type: "element",
+                type: "text",
-                tagName: "a",
+                value: `Circular transclusion detected: ${transcludeTarget}`,
-                properties: {
-                  href: inner.properties?.href,
-                  class: ["internal", "internal-link", "transclude-src"],
-                },
-                children: [
-                  { type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
-                ],
               },
-            ]
+            ],
-          }
+          },
-        } else if (blockRef?.startsWith("#") && page.htmlAst) {
+        ]
-          // header transclude
+        continue
-          blockRef = blockRef.slice(1)
+      }
-          let startIdx = undefined
-          let startDepth = undefined
-          let endIdx = undefined
-          for (const [i, el] of page.htmlAst.children.entries()) {
-            // skip non-headers
-            if (!(el.type === "element" && el.tagName.match(headerRegex))) continue
-            const depth = Number(el.tagName.substring(1))
 
-            // lookin for our blockref
+      visited.add(transcludeTarget)
-            if (startIdx === undefined || startDepth === undefined) {
-              // skip until we find the blockref that matches
-              if (el.properties?.id === blockRef) {
-                startIdx = i
-                startDepth = depth
-              }
-            } else if (depth <= startDepth) {
-              // looking for new header that is same level or higher
-              endIdx = i
-              break
-            }
-          }
 
-          if (startIdx === undefined) {
+      let page = componentData.allFiles.find((f) => f.slug === transcludeTarget)
-            return
+      if (!page) {
-          }
+        const dotIdx = transcludeTarget.lastIndexOf(".")
-
+        const slashIdx = transcludeTarget.lastIndexOf("/")
-          node.children = [
+        if (dotIdx > slashIdx + 1) {
-            ...(page.htmlAst.children.slice(startIdx, endIdx) as ElementContent[]).map((child) =>
+          const stripped = transcludeTarget.slice(0, dotIdx) as FullSlug
-              normalizeHastElement(child as Element, slug, transcludeTarget),
+          page = componentData.allFiles.findLast((f) => f.slug === stripped)
-            ),
-            {
-              type: "element",
-              tagName: "a",
-              properties: {
-                href: inner.properties?.href,
-                class: ["internal", "internal-link", "transclude-src"],
-              },
-              children: [
-                { type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
-              ],
-            },
-          ]
-        } else if (page.htmlAst) {
-          // page transclude
-          node.children = [
-            {
-              type: "element",
-              tagName: "h1",
-              properties: {},
-              children: [
-                {
-                  type: "text",
-                  value:
-                    page.frontmatter?.title ??
-                    i18n(cfg.locale).components.transcludes.transcludeOf({
-                      targetSlug: page.slug!,
-                    }),
-                },
-              ],
-            },
-            ...(page.htmlAst.children as ElementContent[]).map((child) =>
-              normalizeHastElement(child as Element, slug, transcludeTarget),
-            ),
-            {
-              type: "element",
-              tagName: "a",
-              properties: {
-                href: inner.properties?.href,
-                class: ["internal", "internal-link", "transclude-src"],
-              },
-              children: [
-                { type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
-              ],
-            },
-          ]
         }
       }
+      if (!page) {
+        visited.delete(transcludeTarget)
+        continue
+      }
+
+      let blockRef = el.properties.dataBlock as string | undefined
+      if (blockRef?.startsWith("#^")) {
+        // block transclude
+        blockRef = blockRef.slice("#^".length)
+        let blockNode = page.blocks?.[blockRef]
+        if (blockNode) {
+          if (blockNode.tagName === "li") {
+            blockNode = {
+              type: "element",
+              tagName: "ul",
+              properties: {},
+              children: [blockNode],
+            }
+          }
+
+          el.children = [
+            normalizeHastElement(blockNode, slug, transcludeTarget),
+            {
+              type: "element",
+              tagName: "a",
+              properties: {
+                href: inner.properties?.href,
+                class: ["internal", "internal-link", "transclude-src"],
+              },
+              children: [
+                { type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
+              ],
+            },
+          ]
+        }
+      } else if (blockRef?.startsWith("#") && page.htmlAst) {
+        // header transclude
+        blockRef = blockRef.slice(1)
+        let startIdx = undefined
+        let startDepth = undefined
+        let endIdx = undefined
+        for (const [i, htmlEl] of page.htmlAst.children.entries()) {
+          if (!(htmlEl.type === "element" && htmlEl.tagName.match(headerRegex))) continue
+          const depth = Number(htmlEl.tagName.substring(1))
+
+          if (startIdx === undefined || startDepth === undefined) {
+            if (htmlEl.properties?.id === blockRef) {
+              startIdx = i
+              startDepth = depth
+            }
+          } else if (depth <= startDepth) {
+            endIdx = i
+            break
+          }
+        }
+
+        if (startIdx === undefined) {
+          visited.delete(transcludeTarget)
+          continue
+        }
+
+        el.children = [
+          ...(page.htmlAst.children.slice(startIdx, endIdx) as ElementContent[]).map((c) =>
+            normalizeHastElement(c as Element, slug, transcludeTarget),
+          ),
+          {
+            type: "element",
+            tagName: "a",
+            properties: {
+              href: inner.properties?.href,
+              class: ["internal", "internal-link", "transclude-src"],
+            },
+            children: [
+              { type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
+            ],
+          },
+        ]
+      } else if (page.htmlAst) {
+        // page transclude
+        el.children = [
+          {
+            type: "element",
+            tagName: "h1",
+            properties: {},
+            children: [
+              {
+                type: "text",
+                value:
+                  page.frontmatter?.title ??
+                  i18n(cfg.locale).components.transcludes.transcludeOf({
+                    targetSlug: page.slug!,
+                  }),
+              },
+            ],
+          },
+          ...(page.htmlAst.children as ElementContent[]).map((c) =>
+            normalizeHastElement(c as Element, slug, transcludeTarget),
+          ),
+          {
+            type: "element",
+            tagName: "a",
+            properties: {
+              href: inner.properties?.href,
+              class: ["internal", "internal-link", "transclude-src"],
+            },
+            children: [
+              { type: "text", value: i18n(cfg.locale).components.transcludes.linkToOriginal },
+            ],
+          },
+        ]
+      }
+
+      // Recurse into the replaced children to resolve nested transclusions,
+      // then remove from visited so sibling embeds of the same target work.
+      walk(el)
+      visited.delete(transcludeTarget)
     }
-  })
+  }
+
+  walk(root)
 }
 
 export function renderPage(