hd-garden 0.3.13 → 0.4.0

package/app/a2/[slug]/page.tsx

@@ -0,0 +1,61 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { ArticleMeasure } from "../../components/ArticleMeasure";
+import { ArticleTitle } from "../../components/ArticleTitle";
+import { MarkdownArticle } from "../../components/MarkdownArticle";
+import { TableOfContents } from "../../components/TableOfContents";
+import { a2WordCounts } from "@garden/generated-content";
+import { demoDateLabel, demoDateTime } from "../../lib/a2-meta";
+import { extractHeadings } from "../../lib/content";
+import { a2Slugs, readA2Article } from "../../lib/a2-preview";
+
+export function generateStaticParams() {
+  return a2Slugs().map((slug) => ({ slug }));
+}
+
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
+  const { slug } = await params;
+  const article = readA2Article(slug);
+  if (!article) return { robots: { index: false, follow: false } };
+  return { title: article.title, description: article.description, robots: { index: false, follow: false } };
+}
+
+export default async function A2ArticlePage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const article = readA2Article(slug);
+  if (!article) notFound();
+  const headings = extractHeadings(article.content);
+  const wordCount = a2WordCounts[slug] ?? 0;
+  return (
+    <main className="reading-page post-reading-page">
+      <article className="post-article">
+        <header className="article-header article-summary-row hero">
+          <ArticleTitle title={article.title.replace(/（互动版）$/u, "")} />
+          <ul className="meta article-meta">
+            <li>Hedon</li>
+            {article.date ? <li><time dateTime={demoDateTime(article.date)}>{demoDateLabel(article.date)}</time></li> : null}
+            <li>约 {wordCount.toLocaleString("en-US")} 字</li>
+            {article.topic ? <li><span className="cat">{article.topic}</span></li> : null}
+            {article.original ? <li><a className="orig ext" href={article.original} target="_blank" rel="noopener noreferrer">原文 ↗</a></li> : null}
+          </ul>
+          {article.cover ? (
+            <figure className="article-hero article-cover cover-card cover-img">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src={article.cover} alt="" />
+            </figure>
+          ) : null}
+        </header>
+        <div className="article-reading-layout">
+          <div className="article-reading-column">
+            <ArticleMeasure />
+            <div className="e-content">
+              {article.description ? <p className="lead quote-plain">{article.description}</p> : null}
+              <MarkdownArticle content={article.content} />
+            </div>
+          </div>
+          <TableOfContents headings={headings} />
+        </div>
+      </article>
+    </main>
+  );
+}

package/app/a2/page.tsx

@@ -0,0 +1,27 @@
+import Link from "next/link";
+import { a2Slugs, readA2Article } from "../lib/a2-preview";
+
+export const metadata = {
+  title: "A2 对照",
+  robots: { index: false, follow: false },
+};
+
+export default function A2Index() {
+  const articles = a2Slugs().map((slug) => readA2Article(slug)).filter((item) => item !== null);
+  return (
+    <main className="page-shell index-page">
+      <header className="sh-head">
+        <h1>A2 对照</h1>
+        <p className="sh-deck">用这套组件渲染参考文章，对照线上演示。正文没有改字。</p>
+      </header>
+      <ul className="sh-rows">
+        {articles.map((article) => (
+          <li className="sh-row" key={article.slug}>
+            <h3><Link href={`/a2/${article.slug}`}>{article.title}</Link></h3>
+            <p>{article.description}</p>
+          </li>
+        ))}
+      </ul>
+    </main>
+  );
+}

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

@@ -9,7 +9,9 @@ import {
   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";
@@ -87,32 +89,41 @@ export default async function PostPage({
         >
           {siteConfig.author.name}
         </a>
-        {post.cover && (
-          <figure className="article-hero article-cover">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              className="u-photo"
-              src={post.cover}
-              alt={`${post.title} 封面`}
-            />
-          </figure>
-        )}
-        <header className="article-header article-summary-row">
-          <p className="eyebrow">{post.topic}</p>
-          <h1 className="p-name">{post.title}</h1>
-          <p className="article-deck p-summary">{post.description}</p>
-          <div className="article-meta">
-            <time className="dt-published" dateTime={post.date}>
-              发布于 {formatDate(post.date)}
-            </time>
-            {post.updated && <span>更新于 {formatDate(post.updated)}</span>}
-            <span>{post.readingTime}</span>
-            <span>约 {wordCount.toLocaleString("zh-CN")} 字</span>
-          </div>
+        <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>更新于 {formatDate(post.updated)}</li> : null}
+            <li>{post.readingTime}</li>
+            <li>约 {wordCount.toLocaleString("en-US")} 字</li>
+            {post.topic ? (
+              <li>
+                <a className="cat" href={`/blog?topic=${encodeURIComponent(post.topic)}`}>{post.topic}</a>
+              </li>
+            ) : null}
+            {originalUrl(post) ? (
+              <li>
+                <a className="orig ext" href={originalUrl(post)} target="_blank" rel="noopener noreferrer">原文 ↗</a>
+              </li>
+            ) : null}
+          </ul>
+          {post.cover && (
+            <figure className="article-hero article-cover cover-card cover-img">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img className="u-photo" src={post.cover} alt={`${post.title} 封面`} />
+            </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} />
             </div>
             <ArticleReferences references={post.references} />

package/app/blog/page.tsx

@@ -1,7 +1,7 @@
 import { Suspense } from "react";
 import { siteConfig, siteDocumentTitle } from "../site.config";
 import { BlogArchive } from "../components/BlogArchive";
-import { PageIntro } from "../components/PageIntro";
+import { posts } from "../lib/content";
 
 export const metadata = {
   title: siteDocumentTitle,
@@ -10,12 +10,11 @@ export const metadata = {
 
 export default function BlogIndex() {
   return (
-    <main className="page-shell index-page">
-      <PageIntro
-        eyebrow="POSTS / 博文"
-        title={siteConfig.pages.blog.title}
-        subtitle={siteConfig.pages.blog.subtitle}
-      />
+    <main className="sh-main" id="content">
+      <div className="sh-head">
+        <h1 id="sh-title">文章</h1>
+        <p className="sh-deck">阶段性的完整沉淀，关于工程、架构与技术思考。共 {posts.length} 篇，按年份归档。</p>
+      </div>
       <Suspense>
         <BlogArchive />
       </Suspense>

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

@@ -10,7 +10,9 @@ import {
   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";
@@ -73,6 +75,7 @@ export default async function ColumnEntryPage({
   const entry = findColumnEntry(column, path.join("/"));
   if (!entry) notFound();
   const series = columns.filter((item) => item.column === column);
+  const listed = [...series].sort((left, right) => Date.parse(right.date) - Date.parse(left.date));
   const currentIndex = series.findIndex((item) => item.path === entry.path);
   const next = series[currentIndex + 1];
   const headings = extractHeadings(entry.content);
@@ -90,7 +93,7 @@ export default async function ColumnEntryPage({
         <p>主题专栏</p>
         <h2>{entry.columnTitle}</h2>
         <ol>
-          {series.map((item) => (
+          {listed.map((item) => (
             <li key={item.path} className={item.path === entry.path ? "active" : ""}>
               <Link href={columnHref(item)}>{item.title}</Link>
             </li>
@@ -110,32 +113,37 @@ export default async function ColumnEntryPage({
         >
           {siteConfig.author.name}
         </a>
-        {entry.cover && (
-          <figure className="article-hero article-cover">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              className="u-photo"
-              src={entry.cover}
-              alt={`${entry.title} 封面`}
-            />
-          </figure>
-        )}
-        <header className="article-header">
-          <p className="eyebrow">
-            {entry.columnTitle} · 第 {currentIndex + 1} 篇
-          </p>
-          <h1 className="p-name">
-            {entry.title.replace(/^\d+\s*·\s*/u, "")}
-          </h1>
-          <p className="article-deck p-summary">{entry.description}</p>
-          <div className="article-meta">
-            <time className="dt-published" dateTime={entry.date}>
-              {formatDate(entry.date)}
-            </time>
-            <span>{entry.readingTime}</span>
-          </div>
+        <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>
+            <li>{entry.readingTime}</li>
+            {entry.topic && entry.topic !== entry.columnTitle ? (
+              <li><a className="cat" href={`/blog?topic=${encodeURIComponent(entry.topic)}`}>{entry.topic}</a></li>
+            ) : null}
+            {originalUrl(entry) ? (
+              <li><a className="orig ext" href={originalUrl(entry)} target="_blank" rel="noopener noreferrer">原文 ↗</a></li>
+            ) : null}
+          </ul>
+          {entry.cover && (
+            <figure className="article-hero article-cover cover-img">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                className="u-photo"
+                src={entry.cover}
+                alt={`${entry.title} 封面`}
+              />
+            </figure>
+          )}
         </header>
+        <ArticleMeasure />
         <div className="e-content">
+          {entry.description ? <p className="lead p-summary">{entry.description}</p> : null}
           <MarkdownArticle content={entry.content} />
         </div>
         <ArticleReferences references={entry.references} />

package/app/columns/page.tsx

@@ -1,16 +1,25 @@
 /* eslint-disable @next/next/no-img-element -- static GitHub Pages assets must keep their exact paths. */
 import Link from "next/link";
-import { ArrowRight } from "@phosphor-icons/react/ssr";
 import { columnHref, columns } from "../lib/content";
-import { PageIntro } from "../components/PageIntro";
 import { ContentEmptyState } from "../components/ContentEmptyState";
 import { siteConfig, siteDocumentTitle } from "../site.config";
 
 export const metadata = {
   title: siteDocumentTitle,
-  description: siteConfig.pages.columns.subtitle || siteConfig.description,
+  description: "专栏是按主题整理的阅读清单，与文章分类相互独立；清单内按发布时间从新到旧排列。",
 };
 
+function day(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value.slice(0, 10);
+  return new Intl.DateTimeFormat("en-CA", {
+    timeZone: "Asia/Shanghai",
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  }).format(date);
+}
+
 export default function ColumnsPage() {
   const grouped = Array.from(
     columns.reduce((result, entry) => {
@@ -21,59 +30,36 @@ export default function ColumnsPage() {
     }, new Map<string, typeof columns>()),
   ).map(([slug, entries]) => ({
     slug,
-    entries,
     first: entries[0],
+    entries: [...entries].sort((left, right) => Date.parse(right.date) - Date.parse(left.date)),
   }));
 
   return (
-    <main className="page-shell index-page">
-      <PageIntro
-        eyebrow="COLUMNS / 专栏"
-        title={siteConfig.pages.columns.title}
-        subtitle={siteConfig.pages.columns.subtitle}
-      />
-
-      {grouped.length > 0 ? <div className="column-feature-list">
-        {grouped.map(({ slug, entries, first }, index) => {
-          const cover = first.columnCover
-            ? { src: first.columnCover, alt: first.columnCoverAlt ?? `${first.columnTitle} 专栏封面` }
-            : undefined;
-          return (
-            <Link
-              href={columnHref(first)}
-              className="column-feature"
-              key={slug}
-            >
-              <div className="column-feature-copy">
-                <span>
-                  {first.columnStatus ?? "持续更新"} · {entries.length} 篇 ·{" "}
-                  {first.topic ?? "主题写作"}
-                </span>
-                <h2>{first.columnTitle}</h2>
-                <p>
-                  {first.columnDescription ??
-                    first.description ??
-                    "按顺序组织的专题文章系列。"}
-                </p>
-                <strong>
-                  从第一篇开始
-                  <ArrowRight size={17} />
-                </strong>
-              </div>
-              <div className="column-feature-index">
-                {cover && (
-                  <img className="column-feature-cover" src={cover.src} alt={cover.alt} />
-                )}
-                <div className="column-feature-index-label">
-                  <span>主题专栏</span>
-                  <strong>{String(index + 1).padStart(2, "0")}</strong>
-                  <small>{slug.replaceAll("-", " ").toUpperCase()}</small>
-                </div>
-              </div>
-            </Link>
-          );
-        })}
-      </div> : <ContentEmptyState kind="columns" />}
+    <main className="sh-main" id="content">
+      <div className="sh-head">
+        <h1>{siteConfig.pages.columns.title || "专栏"}</h1>
+        <p className="sh-deck">专栏是按主题整理的阅读清单，与文章分类相互独立；清单内按发布时间从新到旧排列。</p>
+      </div>
+      {grouped.length ? grouped.map(({ slug, first, entries }) => (
+        <section className="sh-series" aria-labelledby={slug} key={slug}>
+          <div className="cover" style={{ background: "var(--well)" }}>
+            {first.columnCover ? <img className="column-feature-cover" src={first.columnCover} alt={first.columnCoverAlt ?? `${first.columnTitle} 封面`} /> : null}
+          </div>
+          <div className="body">
+            <h2 id={slug}>{first.columnTitle}</h2>
+            <p className="count">阅读清单，{entries.length} 篇，{first.columnStatus ?? "持续更新"}</p>
+            <p className="desc">{first.columnDescription ?? first.description ?? "按顺序组织的专题文章系列。"}</p>
+            <ol aria-label={`${first.columnTitle}，从新到旧`}>
+              {entries.map((entry) => (
+                <li key={entry.path}>
+                  <Link href={columnHref(entry)}>{entry.title}</Link>
+                  <time dateTime={day(entry.date)}>{day(entry.date)}</time>
+                </li>
+              ))}
+            </ol>
+          </div>
+        </section>
+      )) : <ContentEmptyState kind="columns" />}
     </main>
   );
 }

package/app/components/ArticleMeasure.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { useEffect } from "react";
+import { tableBreakout, tocShift } from "../../ui/garden/enhance.mjs";
+
+function translatedX(element: Element) {
+  const value = new DOMMatrix(getComputedStyle(element).transform).m41;
+  return Number.isFinite(value) ? value : 0;
+}
+
+export function ArticleMeasure() {
+  useEffect(() => {
+    const article = document.querySelector("article");
+    const toc = document.querySelector<HTMLElement>(".toc");
+    if (!article) return undefined;
+    const root = document.documentElement;
+    let frame = 0;
+
+    const layout = () => {
+      const articleBox = article.getBoundingClientRect();
+      const viewport = root.clientWidth;
+      article.querySelectorAll<HTMLElement>(".table-wrap").forEach((wrap) => {
+        const table = wrap.querySelector("table");
+        wrap.classList.remove("ux-wide");
+        wrap.style.removeProperty("--wl");
+        wrap.style.removeProperty("--wr");
+        if (!table) return;
+        const margin = tableBreakout({
+          viewport,
+          articleLeft: articleBox.left,
+          articleRight: articleBox.right,
+          tableClient: wrap.clientWidth,
+          tableScroll: table.scrollWidth,
+        });
+        if (margin.left > 0) {
+          wrap.style.setProperty("--wl", `${margin.left}px`);
+          wrap.style.setProperty("--wr", `${margin.right}px`);
+          wrap.classList.add("ux-wide");
+        }
+      });
+
+      if (!toc) {
+        root.removeAttribute("data-toc-yield");
+        return;
+      }
+      const box = toc.getBoundingClientRect();
+      const dx = translatedX(toc);
+      const originalLeft = box.left - dx;
+      const overlapRights: number[] = [];
+      article.querySelectorAll<HTMLElement>(".ux-wide").forEach((element) => {
+        const wide = element.getBoundingClientRect();
+        const overlaps = wide.bottom > box.top - 12 && wide.top < box.bottom + 12 && wide.right > originalLeft - 12;
+        if (overlaps) overlapRights.push(wide.right);
+      });
+      const shift = tocShift({
+        tocLeft: originalLeft,
+        tocWidth: box.width,
+        viewport,
+        overlapRights,
+      });
+      if (shift.shift > 0) {
+        root.style.setProperty("--tocshift", `${shift.shift}px`);
+        root.toggleAttribute("data-toc-hide", shift.hide);
+        root.setAttribute("data-toc-yield", "");
+      } else {
+        root.removeAttribute("data-toc-yield");
+        root.removeAttribute("data-toc-hide");
+      }
+    };
+
+    const schedule = () => {
+      if (frame) return;
+      frame = window.requestAnimationFrame(() => {
+        frame = 0;
+        layout();
+      });
+    };
+
+    layout();
+    window.addEventListener("resize", schedule);
+    window.addEventListener("scroll", schedule, { passive: true });
+    window.addEventListener("load", schedule);
+    const observer = new ResizeObserver(schedule);
+    observer.observe(article);
+    article.querySelectorAll("img").forEach((image) => image.addEventListener("load", schedule));
+    return () => {
+      window.removeEventListener("resize", schedule);
+      window.removeEventListener("scroll", schedule);
+      window.removeEventListener("load", schedule);
+      observer.disconnect();
+      if (frame) window.cancelAnimationFrame(frame);
+    };
+  }, []);
+  return null;
+}

package/app/components/ArticleTitle.tsx

@@ -0,0 +1,20 @@
+import { splitTitle, titleLineScale } from "../../ui/garden/title.mjs";
+
+export function ArticleTitle({ title, className = "" }: { title: string; className?: string }) {
+  const split = splitTitle(title);
+  if (!split.split) {
+    return <h1 className={`p-name${className ? ` ${className}` : ""}`}>{title}</h1>;
+  }
+  const scale = titleLineScale(split.lines);
+  return (
+    <h1 className={`p-name h1-br${className ? ` ${className}` : ""}`} style={{ ["--l" as string]: scale }}>
+      <span className="h1-line">{split.lines[0]}</span>
+      <span className="vh">{split.separator}</span>
+      <span className="h1-line">{split.lines[1]}</span>
+    </h1>
+  );
+}
+
+export function originalUrl(entry: { original?: unknown }) {
+  return typeof entry.original === "string" && /^https?:\/\//iu.test(entry.original) ? entry.original : "";
+}