hd-garden 0.10.0 → 0.10.2

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] });
@@ -61,10 +45,10 @@ export async function generateMetadata({
       images: post.cover ? [{ url: post.cover, alt: post.title }] : undefined,
     },
     twitter: {
-      card: "summary_large_image",
+      card: post.cover ? "summary_large_image" : "summary",
       title: post.title,
       description: post.description,
-      images: post.cover ? [post.cover] : ["/og.png"],
+      images: post.cover ? [post.cover] : undefined,
     },
   } satisfies Metadata;
 }
@@ -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
@@ -68,10 +55,10 @@ export async function generateMetadata({
       images: entry.cover ? [{ url: entry.cover, alt: entry.title }] : undefined,
     },
     twitter: {
-      card: "summary_large_image",
-      title: entry.title.replace(/^\d+\s*·\s*/u, ""),
+      card: entry.cover ? "summary_large_image" : "summary",
+      title,
       description: entry.description,
-      images: entry.cover ? [entry.cover] : ["/og.png"],
+      images: entry.cover ? [entry.cover] : undefined,
     },
   } satisfies Metadata;
 }
@@ -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/HandbookView.tsx

@@ -64,8 +64,8 @@ export async function handbookOverviewMetadata(lang: HandbookLang, indexDoc: Gar
       images: [
         {
           url: "/og.png",
-          width: 1731,
-          height: 909,
+          width: 1200,
+          height: 630,
           alt: imageAlt,
         },
       ],
@@ -94,8 +94,8 @@ export async function handbookDocMetadata(lang: HandbookLang, doc: GardenDocEntr
         images: [
           {
             url: "/og.png",
-            width: 1731,
-            height: 909,
+            width: 1200,
+            height: 630,
             alt: fullTitle,
           },
         ],
@@ -125,8 +125,8 @@ export async function handbookDocMetadata(lang: HandbookLang, doc: GardenDocEntr
       images: [
         {
           url: "/og.png",
-          width: 1731,
-          height: 909,
+          width: 1200,
+          height: 630,
           alt: `${siteConfig.name} · ${docTitle}`,
         },
       ],

package/app/components/MarkdownArticle.tsx

@@ -292,7 +292,7 @@ export function MarkdownArticle({ content, numbering, lang, fieldTables, refDemo
     <FaviconProvider favicons={linkAssets?.favicons}>
     <div className="markdown-body prose">
       <ReactMarkdown
-        remarkPlugins={[...(refDemos ? [remarkRefDemos] : []), ...markdownPlugins, [remarkLinkCard, { sameSite }], [remarkA2, { imageSize: (src: string) => lookupImageSize(imageSizes, src), lang: lang ?? siteLang }]]}
+        remarkPlugins={[...(refDemos ? [remarkRefDemos] : []), ...markdownPlugins, remarkLinkCard, [remarkA2, { imageSize: (src: string) => lookupImageSize(imageSizes, src), lang: lang ?? siteLang }]]}
         rehypePlugins={[
           rehypeRaw,
           rehypeKatex,
@@ -311,11 +311,18 @@ export function MarkdownArticle({ content, numbering, lang, fieldTables, refDemo
             const only = nodes.length === 1 && isValidElement<{ href?: string; children?: ReactNode }>(nodes[0]) ? nodes[0] : null;
             const href = only?.props.href;
             const text = only ? headingText(only.props.children).trim() : "";
-            if (href && text === href && /^https?:\/\//iu.test(href) && !sameSite(href)) return <LinkCard href={href} />;
+            // Bare http(s) URL alone in a paragraph → link card (same path for every jump link).
+            if (href && text === href && /^https?:\/\//iu.test(href)) return <LinkCard href={href} />;
             return <p {...domProps}>{children}</p>;
           },
           a: ({ href: written, children, ...props }) => {
-            const { href, external } = articleLink(written, sameSite);
+            const label = headingText(children).trim();
+            // Bare URL jump links stay absolute so the paragraph card path is one pipeline
+            // for same-site and external alike. Titled same-site prose still uses Link.
+            const bareJump = Boolean(written && label === written && /^https?:\/\//iu.test(written));
+            const { href, external } = bareJump
+              ? { href: written as string, external: true }
+              : articleLink(written, sameSite);
             const domProps = { ...props };
             Reflect.deleteProperty(domProps, "node");
             // A link to another page of the site navigates in place, like the header and lists do.

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>
+  );
+}