create-zudo-doc 0.1.0

package/templates/base/pages/docs/[...slug].tsx

@@ -0,0 +1,448 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+// Port of src/pages/docs/[...slug].astro → zfb page module.
+//
+// Default-locale (EN) catch-all docs route. paths() enumerates every page in
+// the "docs" collection plus auto-generated category index pages (for
+// categories without an index.mdx). Per-page props carry all pre-computed
+// data so the component is a pure renderer with no collection reads.
+//
+// paths() contract (zfb ADR-004 — synchronous):
+//   params: { slug: string[] }   — e.g. ["getting-started", "intro"]
+//   props:  { entry, autoIndex, breadcrumbs, prev, next }
+//
+// The catchall slug is an array per zfb spec — the component joins it when
+// deriving the string form (e.g. for Content lookups, breadcrumbs, etc.).
+//
+// Locale: defaultLocale (EN). Non-default locales are handled by
+// pages/[locale]/docs/[...slug].tsx.
+
+import { getCollection } from "zfb/content";
+import type { CollectionEntry } from "zfb/content";
+import type { DocsEntry } from "@/types/docs-entry";
+import { settings } from "@/config/settings";
+import { defaultLocale, t } from "@/config/i18n";
+import { docsUrl } from "@/utils/base";
+import {
+  buildNavTree,
+  buildBreadcrumbs,
+  flattenTree,
+  findNode,
+  loadCategoryMeta,
+  collectAutoIndexNodes,
+  isNavVisible,
+  type NavNode,
+  type BreadcrumbItem,
+} from "@/utils/docs";
+import { getNavSectionForSlug, getNavSubtree } from "@/utils/nav-scope";
+import { toRouteSlug } from "@/utils/slug";
+import { DocLayoutWithDefaults } from "@takazudo/zudo-doc/doclayout";
+import { Breadcrumb } from "@takazudo/zudo-doc/breadcrumb";
+import { NavCardGrid } from "@takazudo/zudo-doc/nav-indexing";
+import { FrontmatterPreview } from "@takazudo/zudo-doc/metainfo";
+import { frontmatterRenderers } from "@/config/frontmatter-preview-renderers";
+// Shared MDX-tag → Preact-component bag. Includes htmlOverrides
+// (native typography), HtmlPreviewWrapper (Island), and stub bindings
+// for every other custom tag the MDX corpus references — see
+// `pages/_mdx-components.ts` for the full list and rationale.
+import { createMdxComponents } from "../_mdx-components";
+import { FooterWithDefaults } from "../lib/_footer-with-defaults";
+import { DocHistoryArea } from "../lib/_doc-history-area";
+import { DocMetainfoArea } from "../lib/_doc-metainfo-area";
+import { DocTagsArea } from "../lib/_doc-tags-area";
+import { BodyEndIslands } from "../lib/_body-end-islands";
+import { SidebarWithDefaults } from "../lib/_sidebar-with-defaults";
+import { HeaderWithDefaults } from "../lib/_header-with-defaults";
+import { HeadWithDefaults } from "../lib/_head-with-defaults";
+import { buildFrontmatterPreviewEntries } from "../lib/_frontmatter-preview-data";
+import { composeMetaTitle } from "../lib/_compose-meta-title";
+import { buildInlineVersionSwitcher } from "../lib/_inline-version-switcher";
+import type { JSX } from "preact";
+import { bridgeEntries } from "../_data";
+import { extractHeadings } from "../lib/_extract-headings";
+import DesktopSidebarToggle from "@/components/desktop-sidebar-toggle";
+import { SidebarResizerInit } from "@takazudo/zudo-doc/sidebar-resizer";
+import type { VNode } from "preact";
+import { Island } from "@takazudo/zfb";
+
+export const frontmatter = { title: "Docs" };
+
+// ---------------------------------------------------------------------------
+// Props contract
+// ---------------------------------------------------------------------------
+
+interface DocPageEntry extends DocsEntry {
+  /** zfb content renderer. */
+  Content: CollectionEntry<unknown>["Content"];
+  /** zfb module specifier (for Content bridge). */
+  module_specifier: string;
+}
+
+interface AutoIndexNode extends NavNode {
+  children: NavNode[];
+}
+
+interface DocPageProps {
+  /** The docs entry to render, or null for auto-index pages. */
+  entry: DocPageEntry | null;
+  /** Pre-built auto-index node (categories without index.mdx). */
+  autoIndex?: AutoIndexNode;
+  /** Breadcrumb trail, first item is home. */
+  breadcrumbs: BreadcrumbItem[];
+  /** Preceding page in the nav tree. */
+  prev: NavNode | null;
+  /** Following page in the nav tree. */
+  next: NavNode | null;
+  /** Depth-2/3/4 headings extracted from the MDX body, for SSG TOC links. */
+  headings: ReturnType<typeof extractHeadings>;
+}
+
+// ---------------------------------------------------------------------------
+// paths() — synchronous route enumeration (ADR-004)
+// ---------------------------------------------------------------------------
+
+/**
+ * Enumerate all doc routes for the default locale (EN).
+ *
+ * Synchronous per ADR-004: getCollection() resolves from the pre-loaded
+ * ContentSnapshot. All nav-tree and breadcrumb computation is done here
+ * so the component is a pure renderer.
+ */
+export function paths(): Array<{
+  params: { slug: string[] };
+  props: DocPageProps;
+}> {
+  const locale = defaultLocale;
+  const allDocs = (bridgeEntries(getCollection("docs"), "docs") as unknown as DocPageEntry[]);
+  // In static builds, always exclude drafts.
+  const docs = allDocs.filter((doc) => !doc.data.draft);
+  const categoryMeta = loadCategoryMeta(settings.docsDir);
+
+  // Nav docs: exclude unlisted (for sidebar/prev-next) but keep for breadcrumbs
+  const navDocs = docs.filter(isNavVisible);
+  const tree = buildNavTree(navDocs as unknown as DocsEntry[], locale, categoryMeta);
+  // Full tree (including unlisted) for accurate breadcrumbs
+  const fullTree = buildNavTree(docs as unknown as DocsEntry[], locale, categoryMeta);
+
+  const result: Array<{ params: { slug: string[] }; props: DocPageProps }> = [];
+
+  // Regular doc pages
+  for (const entry of docs) {
+    const slug = entry.data.slug ?? toRouteSlug(entry.slug);
+    const navSection = getNavSectionForSlug(slug);
+    const subtree = getNavSubtree(tree, navSection);
+    const flat = flattenTree(subtree);
+    const idx = flat.findIndex((n) => n.slug === slug);
+
+    let prevNode = idx > 0 ? flat[idx - 1] ?? null : null;
+    let nextNode = idx >= 0 && idx < flat.length - 1 ? flat[idx + 1] ?? null : null;
+
+    // Frontmatter pagination overrides
+    if (entry.data.pagination_prev !== undefined) {
+      if (entry.data.pagination_prev === null) {
+        prevNode = null;
+      } else {
+        const found = findNode(tree, entry.data.pagination_prev);
+        prevNode = found ?? prevNode;
+      }
+    }
+    if (entry.data.pagination_next !== undefined) {
+      if (entry.data.pagination_next === null) {
+        nextNode = null;
+      } else {
+        const found = findNode(tree, entry.data.pagination_next);
+        nextNode = found ?? nextNode;
+      }
+    }
+
+    result.push({
+      params: { slug: slug.split("/") },
+      props: {
+        entry,
+        breadcrumbs: buildBreadcrumbs(fullTree, slug, locale),
+        prev: prevNode,
+        next: nextNode,
+        headings: extractHeadings(entry.body ?? ""),
+      },
+    });
+  }
+
+  // Auto-generated index pages for categories without index.mdx
+  for (const node of collectAutoIndexNodes(tree)) {
+    result.push({
+      params: { slug: node.slug.split("/") },
+      props: {
+        entry: null,
+        autoIndex: node as AutoIndexNode,
+        breadcrumbs: buildBreadcrumbs(fullTree, node.slug, locale),
+        prev: null,
+        next: null,
+        headings: [],
+      },
+    });
+  }
+
+  return result;
+}
+
+// ---------------------------------------------------------------------------
+// Page component
+// ---------------------------------------------------------------------------
+
+interface PageArgs {
+  params: { slug: string[] };
+  entry: DocPageProps["entry"];
+  autoIndex?: DocPageProps["autoIndex"];
+  breadcrumbs: DocPageProps["breadcrumbs"];
+  prev: DocPageProps["prev"];
+  next: DocPageProps["next"];
+  headings: DocPageProps["headings"];
+}
+
+export default function DocsPage({ entry, autoIndex, breadcrumbs, prev, next, headings }: PageArgs): JSX.Element {
+  const locale = defaultLocale;
+
+  const slug = autoIndex
+    ? autoIndex.slug
+    : (entry!.data.slug ?? toRouteSlug(entry!.slug));
+
+  const title = autoIndex ? autoIndex.label : entry!.data.title;
+  const description = autoIndex ? autoIndex.description : entry!.data.description;
+
+  // Locale-aware components bag — creates nav wrappers bound to the active
+  // locale so CategoryNav/CategoryTreeNav/SiteTreeNav query the right collection.
+  const components = createMdxComponents(locale);
+
+  // Resolve child hrefs for auto-index pages
+  const autoIndexChildren = autoIndex
+    ? autoIndex.children
+        .filter((c: NavNode) => c.hasPage || c.children.length > 0)
+        .map((c: NavNode) => ({
+          ...c,
+          href: c.href ?? docsUrl(c.slug, locale),
+        }))
+    : [];
+
+  // Canonical URL — only when siteUrl is configured. pageUrl is the
+  // base-prefixed path for this page without the siteUrl origin.
+  const pageUrl = docsUrl(slug, locale);
+  const canonical = settings.siteUrl
+    ? settings.siteUrl.replace(/\/$/, "") + pageUrl
+    : undefined;
+
+  // Persist key: locale + nav-section so the sidebar DOM node is reused
+  // across same-locale + same-section navigations only. No sanitizer needed —
+  // both lang (BCP-47 locale string) and navSection (filesystem-derived
+  // kebab-case slug) come from controlled, trusted sources.
+  const navSection = getNavSectionForSlug(slug);
+  const hideSidebar = entry?.data?.hide_sidebar;
+  const sidebarPersistKey = hideSidebar
+    ? undefined
+    : `sidebar-${locale}-${navSection ?? "default"}`;
+
+  return (
+    <DocLayoutWithDefaults
+      title={composeMetaTitle(title)}
+      description={description}
+      head={<HeadWithDefaults title={title} description={description} canonical={canonical} />}
+      lang={locale}
+      noindex={settings.noindex}
+      hideSidebar={hideSidebar}
+      hideToc={entry?.data?.hide_toc}
+      headings={headings}
+      canonical={canonical}
+      sidebarPersistKey={sidebarPersistKey}
+      headerOverride={
+        <HeaderWithDefaults
+          lang={locale}
+          currentSlug={slug}
+          navSection={getNavSectionForSlug(slug)}
+          currentPath={docsUrl(slug, locale)}
+        />
+      }
+      breadcrumbOverride={
+        breadcrumbs.length > 0 ? (
+          <Breadcrumb
+            items={breadcrumbs}
+            rightSlot={buildInlineVersionSwitcher(slug, locale)}
+          />
+        ) : undefined
+      }
+      sidebarOverride={
+        <SidebarWithDefaults
+          currentSlug={slug}
+          lang={locale}
+          navSection={getNavSectionForSlug(slug)}
+          currentPath={docsUrl(slug, locale)}
+        />
+      }
+      afterSidebar={
+        // Pre-paint inline script: restore persisted sidebar visibility to
+        // <html data-sidebar-hidden> before first paint to avoid flash.
+        // Runs unconditionally when sidebarToggle is enabled; the attribute
+        // is only set when localStorage says "false" so the default (visible)
+        // needs no attribute and causes no layout shift.
+        settings.sidebarToggle ? (
+          <>
+            <script dangerouslySetInnerHTML={{
+              __html: `(function(){try{if(localStorage.getItem('zudo-doc-sidebar-visible')==='false'){document.documentElement.setAttribute('data-sidebar-hidden','');}}catch(e){}})();`,
+            }} />
+            {Island({
+              when: "load",
+              children: <DesktopSidebarToggle />,
+            }) as unknown as VNode}
+          </>
+        ) : undefined
+      }
+      footerOverride={<FooterWithDefaults lang={locale} />}
+      bodyEndComponents={
+        <>
+          <BodyEndIslands basePath={settings.base ?? "/"} />
+          {/* SidebarResizerInit: attach drag handle to #desktop-sidebar on load
+              and on AFTER_NAVIGATE_EVENT (zfb:after-swap under the Strategy B
+              SPA navigation model). Idempotent — safe on every page. */}
+          {settings.sidebarResizer && <SidebarResizerInit />}
+        </>
+      }
+    >
+      {autoIndex ? (
+        /* Auto-index page: category without an index.mdx.
+           Fragment (not <div>) so children become direct children of
+           <article class="zd-content">, picking up the flow-space rule
+           (.zd-content > :where(* + *) { margin-top: var(--flow-space) }).
+           Wrapping in <div> would make h1/description p children-of-children
+           and the flow gap (~24px) would never apply — see #1460. */
+        <>
+          <h1 class="text-heading font-bold mb-vsp-xs">{autoIndex.label}</h1>
+
+          {/* Build-time date block — chrome parity (#1461). Auto-index pages
+              previously rendered without doc-meta; reference site shows it on
+              every docs page. The component returns null when no manifest
+              entry exists for this slug. */}
+          <DocMetainfoArea slug={slug} locale={locale} />
+
+          {autoIndex.description && (
+            <p class="mb-vsp-lg text-title text-muted">
+              {autoIndex.description}
+            </p>
+          )}
+          <NavCardGrid children={autoIndexChildren} />
+        </>
+      ) : (
+        /* Regular doc page. Fragment (not <div>) for the same reason as
+           the auto-index branch above — see #1460. */
+        <>
+          <h1 class="text-heading font-bold mb-vsp-xs">{entry!.data.title}</h1>
+
+          {/* Build-time date block (Created / Updated / Author). Mirrors the
+              Astro `doc-metainfo.astro` placement — between <h1> and description.
+              Data from `.zfb/doc-history-meta.json` (esbuild-inlined, no fs). */}
+          <DocMetainfoArea slug={slug} locale={locale} />
+
+          {/* Page-level tag chips — mirroring doc-tags.astro placement (#1658). */}
+          <DocTagsArea slug={slug} locale={locale} tags={entry!.data.tags} />
+
+          {entry!.data.description && (
+            <p class="mb-vsp-lg text-title text-muted">
+              {entry!.data.description}
+            </p>
+          )}
+
+          {/* Frontmatter preview — non-system, custom keys only. Returns
+              null when the entries array is empty, so pages without
+              custom frontmatter emit nothing. Custom per-key renderers
+              from frontmatter-preview-renderers.tsx produce styled cells
+              (pills, badges, etc.) instead of plain text. */}
+          <FrontmatterPreview
+            entries={buildFrontmatterPreviewEntries(entry!.data)}
+            title={t("frontmatter.preview.title", locale)}
+            keyColLabel={t("frontmatter.preview.keyCol", locale)}
+            valueColLabel={t("frontmatter.preview.valueCol", locale)}
+            renderers={frontmatterRenderers}
+            data={entry!.data as Record<string, unknown>}
+            locale={locale}
+          />
+
+          {/* MDX content rendered via zfb's Content bridge */}
+          {entry && <entry.Content components={components} />}
+
+          {/* Prev / Next pagination — placed before the document utilities
+              section to match the Astro reference order: content → pager →
+              view-source / history. In the Astro layout, BodyFootUtilArea was
+              rendered by the doc-layout wrapper after the <slot /> content,
+              so the pager (inside the slot) came first. Fixes #1535. */}
+          <nav class="mt-vsp-2xl grid grid-cols-2 gap-hsp-xl">
+            {prev ? (
+              <a
+                href={prev.href}
+                class="group border border-muted rounded-lg p-hsp-lg hover:border-accent"
+              >
+                <div class="flex items-center gap-hsp-xs text-caption text-muted mb-vsp-2xs">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-[1.125rem] w-[1.125rem]"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M15 19l-7-7 7-7"
+                    />
+                  </svg>
+                  <span class="no-underline">{t("nav.previous", locale)}</span>
+                </div>
+                <p class="text-small font-semibold underline group-hover:text-accent">
+                  {prev.label}
+                </p>
+              </a>
+            ) : (
+              <div />
+            )}
+            {next ? (
+              <a
+                href={next.href}
+                class="group border border-muted rounded-lg p-hsp-lg hover:border-accent text-right"
+              >
+                <div class="flex items-center justify-end gap-hsp-xs text-caption text-muted mb-vsp-2xs">
+                  <span class="no-underline">{t("nav.next", locale)}</span>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-[1.125rem] w-[1.125rem]"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M9 5l7 7-7 7"
+                    />
+                  </svg>
+                </div>
+                <p class="text-small font-semibold underline group-hover:text-accent">
+                  {next.label}
+                </p>
+              </a>
+            ) : (
+              <div />
+            )}
+          </nav>
+
+          {/* Document utilities (revision history + view-source link) — skipped for unlisted pages */}
+          {!entry!.data.unlisted && (
+            <DocHistoryArea
+              slug={slug}
+              locale={locale}
+              entrySlug={entry!.slug}
+              contentDir={settings.docsDir}
+            />
+          )}
+        </>
+      )}
+    </DocLayoutWithDefaults>
+  );
+}

package/templates/base/pages/index.tsx

@@ -0,0 +1,158 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource preact */
+// Port of src/pages/index.astro → zfb page module.
+//
+// Default-locale (EN) site index. Static route — no paths() export needed.
+// Collects the EN docs tree and renders the site-map grid plus optional
+// tag count.
+//
+// Data flow:
+//   getCollection("docs")   [sync, zfb ADR-004]
+//   → buildNavTree()        builds the nav tree for the sitemap grid
+//   → collectTags()         counts unique tags for the tag section header
+//   → DocLayoutWithDefaults renders the page with no sidebar/TOC
+
+import { loadDocs } from "./_data";
+import { settings } from "@/config/settings";
+import { defaultLocale, t } from "@/config/i18n";
+import { withBase } from "@/utils/base";
+import {
+  buildNavTree,
+  groupSatelliteNodes,
+  isNavVisible,
+} from "@/utils/docs";
+import { loadCategoryMeta } from "@/utils/docs";
+import { getCategoryOrder } from "@/utils/nav-scope";
+import { collectTags } from "@/utils/tags";
+import { toRouteSlug } from "@/utils/slug";
+import { DocLayoutWithDefaults } from "@takazudo/zudo-doc/doclayout";
+import type { JSX } from "preact";
+import type { VNode } from "preact";
+import { Island } from "@takazudo/zfb";
+import SiteTreeNav from "@/components/site-tree-nav";
+import { FooterWithDefaults } from "./lib/_footer-with-defaults";
+import { HeaderWithDefaults } from "./lib/_header-with-defaults";
+import { HeadWithDefaults } from "./lib/_head-with-defaults";
+import { composeMetaTitle } from "./lib/_compose-meta-title";
+import { BodyEndIslands } from "./lib/_body-end-islands";
+
+export const frontmatter = { title: "Home" };
+
+export default function IndexPage(): JSX.Element {
+  const locale = defaultLocale;
+
+  // `loadDocs` bridges zfb's CollectionEntry → Astro-style DocsEntry
+  // (adds `id`/`collection`) so `@/utils/docs` helpers see the shape
+  // they expect.
+  const allDocs = loadDocs("docs");
+  const docs = allDocs.filter((doc) => !doc.data.draft);
+  const categoryMeta = loadCategoryMeta(settings.docsDir);
+  const navDocs = docs.filter(isNavVisible);
+  const tree = buildNavTree(navDocs, locale, categoryMeta);
+  const categoryOrder = getCategoryOrder();
+  const groupedTree = groupSatelliteNodes(tree, categoryOrder);
+
+  const tagDocs = docs.filter(isNavVisible);
+  const tagCount = collectTags(
+    tagDocs,
+    (id, data) => data.slug ?? toRouteSlug(id),
+  ).size;
+
+  const ctaNav = settings.headerNav[0] ?? null;
+  const overview = ctaNav ? withBase(ctaNav.path) : null;
+  const logoUrl = withBase("/img/logo.svg");
+
+  return (
+    <DocLayoutWithDefaults
+      title={composeMetaTitle(settings.siteName)}
+      head={<HeadWithDefaults title={settings.siteName} />}
+      lang={locale}
+      noindex={settings.noindex}
+      hideSidebar={true}
+      hideToc={true}
+      headerOverride={<HeaderWithDefaults lang={locale} currentPath={withBase("/")} />}
+      footerOverride={<FooterWithDefaults lang={locale} />}
+      bodyEndComponents={<BodyEndIslands basePath={settings.base ?? "/"} />}
+    >
+      {/* Hero: logo left, title+desc+links right, block centered */}
+      <div class="flex justify-center mb-vsp-xl">
+        <div class="flex flex-col items-center text-center gap-hsp-md lg:flex-row lg:text-left lg:gap-hsp-xl">
+          <img
+            src={logoUrl}
+            alt={settings.siteName}
+            class="w-[320px] max-w-full aspect-[1200/630] shrink-0"
+          />
+          <div>
+            <h1 class="text-heading font-bold mb-vsp-2xs">{settings.siteName}</h1>
+            <p class="text-muted text-small mb-vsp-sm">{settings.siteDescription}</p>
+            <div class="flex items-center justify-center lg:justify-start gap-hsp-md text-small">
+              {overview && (
+                <>
+                  <a href={overview} class="text-fg underline hover:text-accent">
+                    {t("nav.overview", locale)}
+                  </a>
+                  <span class="text-muted">/</span>
+                </>
+              )}
+              {settings.githubUrl && (
+                <>
+                  <a
+                    href={settings.githubUrl as string}
+                    class="inline-flex items-center gap-[0.3em] text-fg underline hover:text-accent"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <svg viewBox="0 0 16 16" aria-hidden="true" class="w-[1em] h-[1em] shrink-0">
+                      <path
+                        fill="currentColor"
+                        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+                      />
+                    </svg>
+                    GitHub
+                  </a>
+                  <span class="text-muted">/</span>
+                </>
+              )}
+              {/* @Takazudo link — present in the original Astro index.astro (refs #1453).
+                  The deploy was missing this trailing item, leaving a dangling "/" separator. */}
+              <a
+                href="https://x.com/Takazudo"
+                class="text-fg underline hover:text-accent"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                @Takazudo
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Sitemap grid — restored to the original SiteTreeNav island (refs #1453).
+          The Astro reference used <Island when="idle"><SiteTreeNav ...></Island>.
+          DocsSitemap (vertical <details> list) was incorrect; SiteTreeNav gives
+          the responsive multi-column grid the reference renders. */}
+      {Island({
+        when: "idle",
+        children: (
+          <SiteTreeNav
+            tree={groupedTree}
+            categoryOrder={categoryOrder}
+            categoryIgnore={["inbox", "develop"]}
+          />
+        ),
+      }) as unknown as VNode}
+
+      {settings.docTags && tagCount > 0 && (
+        <section class="mt-vsp-xl">
+          <h2 class="text-title font-bold mb-vsp-md">
+            {t("doc.allTags", locale)}
+          </h2>
+          <a href={withBase("/docs/tags")} class="text-accent underline hover:text-accent-hover">
+            {t("doc.allTags", locale)}
+          </a>
+        </section>
+      )}
+    </DocLayoutWithDefaults>
+  );
+}