hd-garden 0.9.4 → 0.10.1

package/app/about/page.tsx

@@ -23,7 +23,7 @@ export const metadata = {
 
 export default function AboutPage() {
   return (
-    <main className="page-shell about-page">
+    <main className="sh-main about-page" id="content">
       <PageIntro
         eyebrow={t.aboutEyebrow}
         title={about.title}

package/app/blog/[...path]/page.tsx

@@ -1,34 +1,18 @@
-import Link from "next/link";
-import { CoverImage } from "../../components/CoverImage";
 import type { Metadata } from "next";
 import { FEED_ALTERNATES } from "../../lib/page-alternates";
 import { notFound } from "next/navigation";
 import {
-  extractHeadings,
-  estimateWordCount,
   findPost,
-  formatDate,
   postHref,
   posts,
 } from "../../lib/content";
-import { ArticleMeasure } from "../../components/ArticleMeasure";
-import { ArticleReferences } from "../../components/ArticleReferences";
-import { ArticleTitle, originalUrl } from "../../components/ArticleTitle";
-import { MarkdownArticle } from "../../components/MarkdownArticle";
-import { TableOfContents } from "../../components/TableOfContents";
-import { Comments } from "../../components/Comments";
-import { Webmentions } from "../../components/Webmentions";
-import { ArticleTags } from "../../components/ArticleTags";
-import { ArticlePager } from "../../components/ArticlePager";
+import { PostReadingView } from "../../components/PostReadingView";
 import { adjacentByDate } from "../../../ui/garden/adjacent.mjs";
 import {
   absoluteUrl,
   getSiteUrl,
-  webmentionApiEndpoint,
 } from "../../lib/site";
-import { githubUrl, siteConfig } from "../../site.config";
 import { isStaticPlaceholder, STATIC_PLACEHOLDER, staticParams } from "../../../ui/garden/static-params.mjs";
-import { siteLang, ui } from "../../lib/i18n";
 
 export function generateStaticParams() {
   return staticParams(posts.map((post) => ({ path: post.path.split("/") })), { path: [STATIC_PLACEHOLDER] });
@@ -80,72 +64,19 @@ export default async function PostPage({
     if (isStaticPlaceholder(path)) return null;
     notFound();
   }
-  const headings = extractHeadings(post.content, { numbering: post.numbering });
   const baseUrl = await getSiteUrl();
   const pathname = postHref(post);
   const canonicalUrl = absoluteUrl(pathname, baseUrl);
-  const wordCount = estimateWordCount(post.content);
   const { prev, next } = adjacentByDate(posts, (item: { path: string }) => item.path === post.path);
-  const t = ui();
 
   return (
-    <main className="reading-page post-reading-page">
-      <article className="post-article h-entry">
-        <Link className="u-url sr-only" href={pathname}>
-          {siteLang === "en" ? t.permalinkLabel(post.title) : <>{post.title} 永久链接</>}
-        </Link>
-        <a
-          className="p-author h-card sr-only"
-          href={githubUrl}
-          rel="author"
-        >
-          {siteConfig.author.name}
-        </a>
-        <header className="article-header article-summary-row hero">
-          <ArticleTitle title={post.title} />
-          <ul className="meta article-meta">
-            <li>{siteConfig.author.name}</li>
-            <li>
-              <time className="dt-published" dateTime={post.date}>
-                {formatDate(post.date)}
-              </time>
-            </li>
-            {post.updated ? <li>{siteLang === "en" ? t.updatedOn(formatDate(post.updated)) : <>更新于 {formatDate(post.updated)}</>}</li> : null}
-            <li>{t.wordCount(wordCount)}</li>
-            {originalUrl(post) ? (
-              <li>
-                <a className="orig ext" href={originalUrl(post)} target="_blank" rel="noopener noreferrer">{t.originalLink}</a>
-              </li>
-            ) : null}
-          </ul>
-          <ArticleTags tags={post.tags} />
-          {post.cover && (
-            <figure className="article-hero article-cover cover-card cover-img">
-              <CoverImage className="u-photo" src={post.cover} image={post.coverImage} alt={t.coverLabel(post.title)} sizes="(max-width: 852px) calc(100vw - 40px), 812px" priority />
-            </figure>
-          )}
-        </header>
-        <div className="article-reading-layout">
-          <div className="article-reading-column">
-            <ArticleMeasure />
-            <div className="e-content">
-              {post.description ? <p className="lead quote-plain p-summary">{post.description}</p> : null}
-              <MarkdownArticle content={post.content} numbering={post.numbering} />
-            </div>
-            <ArticleReferences references={post.references} />
-            <Webmentions
-              target={canonicalUrl}
-              endpoint={webmentionApiEndpoint()}
-            />
-            <ArticlePager
-              prev={prev ? { href: postHref(prev), title: prev.title } : null}
-              next={next ? { href: postHref(next), title: next.title } : null}
-            />
-            <Comments slug={post.path} />
-          </div>
-          <TableOfContents headings={headings} />
-        </div>
-      </article>
-    </main>
+    <PostReadingView
+      post={post}
+      pathname={pathname}
+      canonicalUrl={canonicalUrl}
+      commentsSlug={post.path}
+      prev={prev ? { href: postHref(prev), title: prev.title } : null}
+      next={next ? { href: postHref(next), title: next.title } : null}
+    />
   );
 }

package/app/blog/page.tsx

@@ -1,6 +1,7 @@
 import { Suspense } from "react";
 import { siteConfig, siteDocumentTitle } from "../site.config";
 import { BlogArchive, BlogArchiveFallback } from "../components/BlogArchive";
+import { PageIntro } from "../components/PageIntro";
 import { posts } from "../lib/content";
 import { archivePosts, archiveSeries } from "../lib/archive";
 import { pageAlternates } from "../lib/page-alternates";
@@ -16,12 +17,12 @@ export default function BlogIndex() {
   const t = ui();
   const list = archivePosts();
   const series = archiveSeries();
+  const deck =
+    siteConfig.pages.blog.subtitle?.trim() ||
+    (siteLang === "en" ? t.blogDeck(posts.length) : `阶段性的完整沉淀，关于工程、架构与技术思考。共 ${posts.length} 篇，按年份归档。`);
   return (
     <main className="sh-main" id="content">
-      <div className="sh-head">
-        <h1 id="sh-title">{t.blogHeading}</h1>
-        <p className="sh-deck">{siteLang === "en" ? t.blogDeck(posts.length) : <>阶段性的完整沉淀，关于工程、架构与技术思考。共 {posts.length} 篇，按年份归档。</>}</p>
-      </div>
+      <PageIntro eyebrow={t.blogEyebrow} title={t.blogHeading} subtitle={deck} />
       <Suspense fallback={<BlogArchiveFallback posts={list} series={series} />}>
         <BlogArchive posts={list} series={series} />
       </Suspense>

package/app/columns/[column]/[...path]/page.tsx

@@ -1,35 +1,21 @@
-import Link from "next/link";
-import { ArticlePager } from "../../../components/ArticlePager";
-import { CoverImage } from "../../../components/CoverImage";
 import type { Metadata } from "next";
 import { FEED_ALTERNATES } from "../../../lib/page-alternates";
 import { notFound } from "next/navigation";
-import { ArrowLeft } from "@phosphor-icons/react/ssr";
 import {
   columns,
-  extractHeadings,
   findColumnEntry,
-  formatDate,
   columnHref,
   columnEntryPath,
 } from "../../../lib/content";
-import { ArticleMeasure } from "../../../components/ArticleMeasure";
-import { ArticleReferences } from "../../../components/ArticleReferences";
-import { ArticleTitle, originalUrl } from "../../../components/ArticleTitle";
-import { MarkdownArticle } from "../../../components/MarkdownArticle";
-import { TableOfContents } from "../../../components/TableOfContents";
-import { Comments } from "../../../components/Comments";
-import { Webmentions } from "../../../components/Webmentions";
-import { ArticleTags } from "../../../components/ArticleTags";
+import { PostReadingView } from "../../../components/PostReadingView";
 import {
   absoluteUrl,
   getSiteUrl,
-  webmentionApiEndpoint,
 } from "../../../lib/site";
-import { githubUrl, siteConfig } from "../../../site.config";
-import { siteHref } from "../../../lib/site-href";
 import { isStaticPlaceholder, STATIC_PLACEHOLDER, staticParams } from "../../../../ui/garden/static-params.mjs";
-import { columnStatusLabel, siteLang, ui } from "../../../lib/i18n";
+import { columnStatusLabel, ui } from "../../../lib/i18n";
+
+const stripColumnIndex = (title: string) => title.replace(/^\d+\s*·\s*/u, "");
 
 export function generateStaticParams() {
   return staticParams(
@@ -51,14 +37,15 @@ export async function generateMetadata({
   if (!entry) return {};
   const baseUrl = await getSiteUrl();
   const pathname = columnHref(entry);
+  const title = stripColumnIndex(entry.title);
   return {
-    title: entry.title.replace(/^\d+\s*·\s*/u, ""),
+    title,
     description: entry.description,
     alternates: { canonical: pathname, types: FEED_ALTERNATES },
     openGraph: {
       type: "article",
       url: absoluteUrl(pathname, baseUrl),
-      title: entry.title.replace(/^\d+\s*·\s*/u, ""),
+      title,
       description: entry.description,
       publishedTime: new Date(entry.date).toISOString(),
       modifiedTime: entry.updated
@@ -69,7 +56,7 @@ export async function generateMetadata({
     },
     twitter: {
       card: "summary_large_image",
-      title: entry.title.replace(/^\d+\s*·\s*/u, ""),
+      title,
       description: entry.description,
       images: entry.cover ? [entry.cover] : ["/og.png"],
     },
@@ -92,81 +79,32 @@ export default async function ColumnEntryPage({
   const currentIndex = series.findIndex((item) => item.path === entry.path);
   const prev = series[currentIndex - 1] ?? null;
   const next = series[currentIndex + 1] ?? null;
-  const headings = extractHeadings(entry.content, { numbering: entry.numbering });
   const baseUrl = await getSiteUrl();
   const pathname = columnHref(entry);
   const canonicalUrl = absoluteUrl(pathname, baseUrl);
   const t = ui();
+  const displayTitle = stripColumnIndex(entry.title);
 
   return (
-    <main className="column-reading-page">
-      <aside className="series-nav">
-        <Link href={siteHref("/columns")} className="back-link">
-          <ArrowLeft size={15} />
-          {t.allColumnsBack}
-        </Link>
-        <p>{t.seriesEyebrow}</p>
-        <h2>{entry.columnTitle}</h2>
-        <ol>
-          {listed.map((item) => (
-            <li key={item.path} className={item.path === entry.path ? "active" : ""}>
-              <Link href={columnHref(item)}>{item.title}</Link>
-            </li>
-          ))}
-        </ol>
-        <small>{ui().columnSideCount(series.length, columnStatusLabel(entry.columnStatus))}</small>
-      </aside>
-
-      <article className="article-column series-article h-entry">
-        <Link className="u-url sr-only" href={pathname}>
-          {siteLang === "en" ? t.permalinkLabel(entry.title) : <>{entry.title} 永久链接</>}
-        </Link>
-        <a
-          className="p-author h-card sr-only"
-          href={githubUrl}
-          rel="author"
-        >
-          {siteConfig.author.name}
-        </a>
-        <header className="article-header hero">
-          <ArticleTitle title={entry.title.replace(/^\d+\s*·\s*/u, "")} />
-          <ul className="meta article-meta">
-            <li>{siteConfig.author.name}</li>
-            <li>
-              <time className="dt-published" dateTime={entry.date}>
-                {formatDate(entry.date)}
-              </time>
-            </li>
-            {originalUrl(entry) ? (
-              <li><a className="orig ext" href={originalUrl(entry)} target="_blank" rel="noopener noreferrer">{t.originalLink}</a></li>
-            ) : null}
-          </ul>
-          <ArticleTags tags={entry.tags} />
-          {entry.cover && (
-            <figure className="article-hero article-cover cover-img">
-              <CoverImage className="u-photo" src={entry.cover} image={entry.coverImage} alt={siteLang === "en" ? t.coverLabel(entry.title) : `${entry.title} 封面`} sizes="(max-width: 852px) calc(100vw - 40px), 812px" priority />
-            </figure>
-          )}
-        </header>
-        <ArticleMeasure />
-        <div className="e-content">
-          {entry.description ? <p className="lead p-summary">{entry.description}</p> : null}
-          <MarkdownArticle content={entry.content} numbering={entry.numbering} />
-        </div>
-        <ArticleReferences references={entry.references} />
-        <Webmentions
-          target={canonicalUrl}
-          endpoint={webmentionApiEndpoint()}
-        />
-        <ArticlePager
-          label={ui().columnPagerLabel}
-          prev={prev ? { href: columnHref(prev), title: prev.title } : null}
-          next={next ? { href: columnHref(next), title: next.title } : null}
-        />
-        <Comments slug={`${column}:${entry.path}`} />
-      </article>
-
-      <TableOfContents headings={headings} />
-    </main>
+    <PostReadingView
+      post={entry}
+      pathname={pathname}
+      canonicalUrl={canonicalUrl}
+      title={displayTitle}
+      commentsSlug={`${column}:${entry.path}`}
+      pagerLabel={t.columnPagerLabel}
+      prev={prev ? { href: columnHref(prev), title: stripColumnIndex(prev.title) } : null}
+      next={next ? { href: columnHref(next), title: stripColumnIndex(next.title) } : null}
+      series={{
+        columnTitle: entry.columnTitle ?? column,
+        statusLabel: t.columnSideCount(series.length, columnStatusLabel(entry.columnStatus)),
+        items: listed.map((item) => ({
+          path: item.path,
+          href: columnHref(item),
+          title: stripColumnIndex(item.title),
+          current: item.path === entry.path,
+        })),
+      }}
+    />
   );
 }

package/app/columns/page.tsx

@@ -2,6 +2,7 @@
 import Link from "next/link";
 import { columnHref, columns } from "../lib/content";
 import { ContentEmptyState } from "../components/ContentEmptyState";
+import { PageIntro } from "../components/PageIntro";
 import { siteConfig, siteDocumentTitle } from "../site.config";
 import { pageAlternates } from "../lib/page-alternates";
 import { columnStatusLabel, ui } from "../lib/i18n";
@@ -40,10 +41,11 @@ export default function ColumnsPage() {
 
   return (
     <main className="sh-main" id="content">
-      <div className="sh-head">
-        <h1>{siteConfig.pages.columns.title || t.homeColumns}</h1>
-        {siteConfig.pages.columns.subtitle ? <p className="sh-deck">{siteConfig.pages.columns.subtitle}</p> : null}
-      </div>
+      <PageIntro
+        eyebrow={t.columnsEyebrow}
+        title={siteConfig.pages.columns.title || t.homeColumns}
+        subtitle={siteConfig.pages.columns.subtitle}
+      />
       {grouped.length ? grouped.map(({ slug, first, entries }) => (
         <section className={first.columnCover ? "sh-series" : "sh-series no-cover"} aria-labelledby={slug} key={slug}>
           {first.columnCover ? (

package/app/components/PageIntro.tsx

@@ -7,15 +7,20 @@ type PageIntroProps = {
   children?: ReactNode;
 };
 
-/** Shared heading treatment for every top-level public page. */
+/**
+ * Shared heading for top-level list pages (blog / thoughts / columns).
+ * Same eyebrow + h1 + deck typography and padding so tab switches do not jump.
+ * Empty subtitle reserves no space.
+ */
 export function PageIntro({
   eyebrow,
   title,
   subtitle,
   children,
 }: PageIntroProps) {
+  const deck = subtitle?.trim();
   return (
-    <header className="page-intro">
+    <header className="page-intro sh-head">
       {eyebrow ? <p className="eyebrow">{eyebrow}</p> : null}
       <h1>
         {title.split("\n").map((line, index) => (
@@ -25,8 +30,8 @@ export function PageIntro({
           </span>
         ))}
       </h1>
-      {subtitle && <p>{subtitle}</p>}
-      {children && <div className="page-intro-actions">{children}</div>}
+      {deck ? <p className="sh-deck">{deck}</p> : null}
+      {children ? <div className="page-intro-actions">{children}</div> : null}
     </header>
   );
 }

package/app/components/PostReadingView.tsx

@@ -0,0 +1,133 @@
+import Link from "next/link";
+import { CoverImage } from "./CoverImage";
+import { ArticleMeasure } from "./ArticleMeasure";
+import { ArticleReferences } from "./ArticleReferences";
+import { ArticleTitle, originalUrl } from "./ArticleTitle";
+import { MarkdownArticle } from "./MarkdownArticle";
+import { TableOfContents } from "./TableOfContents";
+import { Comments } from "./Comments";
+import { Webmentions } from "./Webmentions";
+import { ArticleTags } from "./ArticleTags";
+import { ArticlePager } from "./ArticlePager";
+import { SeriesEdgeNav, type SeriesEdgeItem } from "./SeriesEdgeNav";
+import { formatDate, estimateWordCount, extractHeadings } from "../lib/content";
+import { githubUrl, siteConfig } from "../site.config";
+import { siteLang, ui } from "../lib/i18n";
+import { webmentionApiEndpoint } from "../lib/site";
+import type { ContentEntry } from "../lib/content";
+
+export type PostReadingPagerLink = { href: string; title: string } | null;
+
+export type PostReadingSeries = {
+  columnTitle: string;
+  statusLabel?: string;
+  items: SeriesEdgeItem[];
+};
+
+/**
+ * Shared article body for /blog/... and /columns/... .
+ * Column routes only differ by mounting SeriesEdgeNav on the left.
+ */
+export function PostReadingView({
+  post,
+  pathname,
+  canonicalUrl,
+  title,
+  commentsSlug,
+  prev,
+  next,
+  pagerLabel,
+  series,
+}: {
+  post: ContentEntry;
+  pathname: string;
+  canonicalUrl: string;
+  /** Display title; defaults to post.title */
+  title?: string;
+  commentsSlug: string;
+  prev?: PostReadingPagerLink;
+  next?: PostReadingPagerLink;
+  pagerLabel?: string;
+  series?: PostReadingSeries;
+}) {
+  const displayTitle = title ?? post.title;
+  const numbering = (post as ContentEntry & { numbering?: boolean }).numbering;
+  const headings = extractHeadings(post.content, { numbering });
+  const wordCount = estimateWordCount(post.content);
+  const t = ui();
+
+  return (
+    <main className="reading-page post-reading-page">
+      {series ? (
+        <SeriesEdgeNav
+          columnTitle={series.columnTitle}
+          statusLabel={series.statusLabel}
+          items={series.items}
+        />
+      ) : null}
+      <article className="post-article h-entry">
+        <Link className="u-url sr-only" href={pathname}>
+          {siteLang === "en" ? t.permalinkLabel(displayTitle) : <>{displayTitle} 永久链接</>}
+        </Link>
+        <a className="p-author h-card sr-only" href={githubUrl} rel="author">
+          {siteConfig.author.name}
+        </a>
+        <header className="article-header article-summary-row hero">
+          <ArticleTitle title={displayTitle} />
+          <ul className="meta article-meta">
+            <li>{siteConfig.author.name}</li>
+            <li>
+              <time className="dt-published" dateTime={post.date}>
+                {formatDate(post.date)}
+              </time>
+            </li>
+            {post.updated ? (
+              <li>
+                {siteLang === "en" ? t.updatedOn(formatDate(post.updated)) : <>更新于 {formatDate(post.updated)}</>}
+              </li>
+            ) : null}
+            <li>{t.wordCount(wordCount)}</li>
+            {originalUrl(post) ? (
+              <li>
+                <a className="orig ext" href={originalUrl(post)} target="_blank" rel="noopener noreferrer">
+                  {t.originalLink}
+                </a>
+              </li>
+            ) : null}
+          </ul>
+          <ArticleTags tags={post.tags} />
+          {post.cover ? (
+            <figure className="article-hero article-cover cover-card cover-img">
+              <CoverImage
+                className="u-photo"
+                src={post.cover}
+                image={post.coverImage}
+                alt={t.coverLabel(displayTitle)}
+                sizes="(max-width: 852px) calc(100vw - 40px), 812px"
+                priority
+              />
+            </figure>
+          ) : null}
+        </header>
+        <div className="article-reading-layout">
+          <div className="article-reading-column">
+            <ArticleMeasure />
+            <div className="e-content">
+              {post.description ? <p className="lead quote-plain p-summary">{post.description}</p> : null}
+              <MarkdownArticle content={post.content} numbering={numbering} />
+            </div>
+            <ArticleReferences references={post.references} />
+            <Webmentions target={canonicalUrl} endpoint={webmentionApiEndpoint()} />
+            <ArticlePager
+              label={pagerLabel}
+              prev={prev ?? null}
+              next={next ?? null}
+            />
+            <Comments slug={commentsSlug} />
+          </div>
+          <TableOfContents headings={headings} />
+        </div>
+      </article>
+    </main>
+  );
+}

package/app/components/SeriesEdgeNav.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import Link from "next/link";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type KeyboardEvent as ReactKeyboardEvent,
+} from "react";
+
+export type SeriesEdgeItem = {
+  path: string;
+  href: string;
+  title: string;
+  current?: boolean;
+};
+
+/**
+ * Left-edge Raschka ticks for column articles.
+ * Flyout is the article list only (no column chrome).
+ * Opens on hover or click; stays open until click-outside or Escape.
+ */
+export function SeriesEdgeNav({
+  columnTitle,
+  items,
+}: {
+  columnTitle: string;
+  items: SeriesEdgeItem[];
+  /** @deprecated kept optional so callers can pass it; not shown in the flyout */
+  statusLabel?: string;
+  lang?: string;
+}) {
+  const panelId = useId();
+  const rootRef = useRef<HTMLElement>(null);
+  const [open, setOpen] = useState(false);
+  const currentIndex = Math.max(0, items.findIndex((item) => item.current));
+
+  const close = useCallback(() => setOpen(false), []);
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event: PointerEvent) => {
+      const root = rootRef.current;
+      if (!root) return;
+      if (event.target instanceof Node && root.contains(event.target)) return;
+      close();
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") close();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [close, open]);
+
+  const onTicksKeyDown = (event: ReactKeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      setOpen((value) => !value);
+    } else if (event.key === "Escape") {
+      close();
+    }
+  };
+
+  return (
+    <nav
+      ref={rootRef}
+      className="series-edge"
+      aria-label={columnTitle}
+      data-open={open ? "true" : "false"}
+    >
+      <button
+        type="button"
+        className="series-edge-ticks"
+        aria-controls={panelId}
+        aria-expanded={open}
+        aria-label={columnTitle}
+        onPointerEnter={() => setOpen(true)}
+        onFocus={() => setOpen(true)}
+        onClick={() => setOpen(true)}
+        onKeyDown={onTicksKeyDown}
+      >
+        {items.map((item, index) => (
+          <i
+            key={item.path}
+            className={index === currentIndex ? "hot" : undefined}
+            aria-hidden="true"
+          />
+        ))}
+      </button>
+      {/* Hit bridge so the pointer can cross ticks → panel without a dead zone. */}
+      <div
+        className="series-edge-bridge"
+        aria-hidden="true"
+        onPointerEnter={() => setOpen(true)}
+      />
+      <div
+        className="series-edge-fly"
+        id={panelId}
+        onPointerEnter={() => setOpen(true)}
+      >
+        <ol className="series-edge-list">
+          {items.map((item) => (
+            <li key={item.path} className={item.current ? "cur" : undefined}>
+              <Link href={item.href} aria-current={item.current ? "page" : undefined}>
+                {item.title}
+              </Link>
+            </li>
+          ))}
+        </ol>
+      </div>
+    </nav>
+  );
+}

package/app/components/SiteChrome.tsx

@@ -5,14 +5,7 @@ import { inAppPath, isHandbookPath, routeLang, ui } from "../lib/i18n";
 import { SiteFooter } from "./SiteFooter";
 import { SiteHeader } from "./SiteHeader";
 
-export function SiteChrome({
-  children,
-  bookshelfSite = false,
-}: {
-  children: React.ReactNode;
-  /** True when the site has content/bookshelf.yaml. The package demo stays chrome-less. */
-  bookshelfSite?: boolean;
-}) {
+export function SiteChrome({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
   const lang = routeLang(pathname);
   // The skip link follows the route language too (/garden/en/ is English).
@@ -21,19 +14,12 @@ export function SiteChrome({
       {ui(lang).skipToContent}
     </a>
   );
-  // The package demo (no content/bookshelf.yaml) is the approved chrome-less viewport.
-  // A site shelf is a normal page, so it keeps the header and footer.
-  // Static export serves /bookshelf/ ; an exact "/bookshelf" check would miss it.
-  const path = inAppPath(pathname);
-  const shelfDemo = !bookshelfSite && (path === "/bookshelf" || path.startsWith("/bookshelf/"));
-  if (path.startsWith("/admin") || shelfDemo) {
-    return <>{skip}{children}</>;
-  }
+  if (inAppPath(pathname).startsWith("/admin")) return <>{skip}{children}</>;
 
   return (
     <>
       {skip}
-      <SiteHeader shelf={bookshelfSite} />
+      <SiteHeader />
       <div id="main-content">{children}</div>
       <SiteFooter docs={isHandbookPath(pathname)} lang={lang} />
     </>