hd-garden 0.7.0 → 0.8.0

package/app/lib/i18n.ts

@@ -0,0 +1,222 @@
+import { siteConfig } from "../site.config";
+
+/**
+ * Framework chrome strings. The site language is chosen at build time with
+ * `locale` in site.config.yaml (zh_CN, en_US, ...); there is no runtime switch
+ * for the blog. The /garden/ handbook is the one bilingual area: its pages pass
+ * their own language explicitly.
+ */
+export type UiLang = "zh" | "en";
+
+export const langOf = (locale: string | undefined): UiLang => (/^en/i.test(locale ?? "") ? "en" : "zh");
+export const siteLang: UiLang = langOf(siteConfig.locale);
+export const htmlLang = (lang: UiLang) => (lang === "en" ? "en" : "zh-CN");
+
+const zh = {
+  toc: "本篇目录",
+  tocShort: "目录",
+  tocPage: "本页目录",
+  open: "打开",
+  close: "关闭",
+  currentSection: "，当前章节：",
+  prev: "上一篇",
+  next: "下一篇",
+  pagerLabel: "上一篇和下一篇",
+  columnPagerLabel: "专栏里的上一篇和下一篇",
+  comments: "评论",
+  webmentions: "来自开放网络的回应",
+  webmentionsLead: "引用、喜欢、转发和站外回复会通过 Webmention 回到这里。",
+  notFoundTitle: "找不到这一页",
+  notFoundDeck: "地址可能写错了，或者这篇已经不在了。",
+  backHome: "返回首页",
+  builtWith: ["基于 ", " 构建"],
+  search: "搜索",
+  searchArticles: "搜索文章",
+  toLight: "切换到浅色模式",
+  toDark: "切换到深色模式",
+  wordCount: (n: number) => `约 ${n.toLocaleString("en-US")} 字`,
+  dateLocale: "zh-CN",
+  handbook: "Garden 使用说明",
+  overview: "总览",
+  langSwitch: "切换语言",
+  nextPage: "下一页",
+  prevPage: "上一页",
+  loadingMore: "正在加载…",
+  loadFailed: "没能加载，点这里重试",
+  feedEnd: "已经到底了",
+  pageOf: (page: number, total: number) => `第 ${page} 页，共 ${total} 页`,
+  skipToContent: "跳到正文",
+  copyCode: "复制代码",
+  copied: "已复制",
+  copiedLive: "已复制到剪贴板",
+  diffAdded: "（新增）",
+  diffRemoved: "（删除）",
+  codeTabs: ["代码", "对比上一版"] as string[],
+  codeTabsLabel: "代码",
+  demo: "演示",
+  fullscreen: "全屏",
+  exitFullscreen: "退出全屏",
+  chart: "图表",
+  dataTable: "查看数据表",
+  item: "项目",
+  value: "数值",
+  part: (n: number) => `部分 ${n}`,
+  pickPart: "选择一个部分",
+  diagram: "结构图",
+  pickAnswer: "先选一个答案。",
+  correct: "✓ 答对了",
+  wrong: "✗ 再想想",
+  bytes: "字节",
+  htmlAt: (src: string) => `HTML 在 ${src}。发布时由同名目录读入。`,
+  interactive: "交互",
+  ideaLabel: "想法 · 发布前编译",
+  unknownBlock: (name: string) => `未知 Garden 块：${name}`,
+  file: "文件",
+  openInTab: "在新标签页打开",
+  openNamedInTab: (name: string) => `在新标签页打开 ${name}`,
+  download: "下载",
+  downloadNamed: (name: string) => `下载 ${name}`,
+  downloadFile: "下载文件",
+  closePreview: "关闭预览",
+  previewFailed: "预览没能载入。",
+  retry: "重试",
+  previewLoading: "正在载入预览…",
+  escClose: "Esc 关闭",
+  preview: "预览",
+  previewNamed: (name: string) => `预览 ${name}`,
+  viewImage: "查看原图",
+  zoomImage: (d: string) => `放大查看：${d}`,
+  closeImage: "关闭图片预览",
+  tableScroll: "表格，可横向滚动",
+  tocToggle: (collapsed: boolean, text: string) => `${collapsed ? "展开" : "收起"}「${text}」的子目录`,
+  siteNav: "站点导航",
+  siteNavMobile: "站点导航（移动端）",
+  openMenu: "打开菜单",
+  closeMenu: "关闭菜单",
+  darkMode: "深色模式",
+  searchTitle: "搜索站内内容",
+  searchPlaceholder: "搜索标题、主题或正文…",
+  searchInput: "模糊搜索",
+  closeSearch: "关闭搜索",
+  searchResults: "搜索结果",
+  resultCount: (n: number) => `${n} 篇相关文章`,
+  recent: "最近内容",
+  searchFailed: "搜索暂时打不开，请稍后再试。",
+  loading: "正在载入…",
+  fuzzy: "支持模糊匹配",
+  escToClose: "关闭",
+  noResults: (q: string) => (q ? `没有找到和「${q}」相关的文章` : "还没有可以搜索的内容"),
+  navLabels: { "/blog/": "文章", "/thoughts/": "随想", "/columns/": "专栏", "/tags/": "标签", "/about/": "关于" } as Record<string, string>,
+};
+
+const en: typeof zh = {
+  toc: "Contents",
+  tocShort: "Contents",
+  tocPage: "On this page",
+  open: "Open ",
+  close: "Close ",
+  currentSection: ", current section: ",
+  prev: "Previous",
+  next: "Next",
+  pagerLabel: "Previous and next post",
+  columnPagerLabel: "Previous and next in this column",
+  comments: "Comments",
+  webmentions: "Responses from the open web",
+  webmentionsLead: "Mentions, likes, reposts and replies from other sites arrive here through Webmention.",
+  notFoundTitle: "Page not found",
+  notFoundDeck: "The address may be wrong, or the page has moved.",
+  backHome: "Back to home",
+  builtWith: ["Built with ", ""],
+  search: "Search",
+  searchArticles: "Search posts",
+  toLight: "Switch to light mode",
+  toDark: "Switch to dark mode",
+  wordCount: (n: number) => `${n.toLocaleString("en-US")} words`,
+  dateLocale: "en-US",
+  handbook: "Garden Handbook",
+  overview: "Overview",
+  langSwitch: "Switch language",
+  nextPage: "Next page",
+  prevPage: "Previous page",
+  loadingMore: "Loading…",
+  loadFailed: "Could not load. Tap to retry",
+  feedEnd: "That is everything",
+  pageOf: (page: number, total: number) => `Page ${page} of ${total}`,
+  skipToContent: "Skip to content",
+  copyCode: "Copy code",
+  copied: "Copied",
+  copiedLive: "Copied to clipboard",
+  diffAdded: " (added)",
+  diffRemoved: " (removed)",
+  codeTabs: ["Code", "Diff from previous"],
+  codeTabsLabel: "Code",
+  demo: "Demo",
+  fullscreen: "Full screen",
+  exitFullscreen: "Exit full screen",
+  chart: "Chart",
+  dataTable: "Show data table",
+  item: "Item",
+  value: "Value",
+  part: (n: number) => `Part ${n}`,
+  pickPart: "Choose a part",
+  diagram: "Diagram",
+  pickAnswer: "Pick an answer first.",
+  correct: "✓ Correct",
+  wrong: "✗ Try again",
+  bytes: "bytes",
+  htmlAt: (src: string) => `HTML lives in ${src}. It is read from the folder of the same name at publish time.`,
+  interactive: "Interactive",
+  ideaLabel: "Idea · compiled before publishing",
+  unknownBlock: (name: string) => `Unknown Garden block: ${name}`,
+  file: "File",
+  openInTab: "Open in new tab",
+  openNamedInTab: (name: string) => `Open ${name} in a new tab`,
+  download: "Download",
+  downloadNamed: (name: string) => `Download ${name}`,
+  downloadFile: "Download file",
+  closePreview: "Close preview",
+  previewFailed: "The preview could not load.",
+  retry: "Retry",
+  previewLoading: "Loading preview…",
+  escClose: "Esc to close",
+  preview: "Preview",
+  previewNamed: (name: string) => `Preview ${name}`,
+  viewImage: "View full image",
+  zoomImage: (d: string) => `Enlarge: ${d}`,
+  closeImage: "Close image preview",
+  tableScroll: "Table, scrolls horizontally",
+  tocToggle: (collapsed: boolean, text: string) => `${collapsed ? "Expand" : "Collapse"} subsections of “${text}”`,
+  siteNav: "Site navigation",
+  siteNavMobile: "Site navigation (mobile)",
+  openMenu: "Open menu",
+  closeMenu: "Close menu",
+  darkMode: "Dark mode",
+  searchTitle: "Search this site",
+  searchPlaceholder: "Search titles, topics or text…",
+  searchInput: "Fuzzy search",
+  closeSearch: "Close search",
+  searchResults: "Search results",
+  resultCount: (n: number) => `${n} matching ${n === 1 ? "post" : "posts"}`,
+  recent: "Recent",
+  searchFailed: "Search is unavailable right now. Please try again later.",
+  loading: "Loading…",
+  fuzzy: "Fuzzy matching",
+  escToClose: "to close",
+  noResults: (q: string) => (q ? `No posts match “${q}”` : "Nothing to search yet"),
+  navLabels: { "/blog/": "Posts", "/thoughts/": "Thoughts", "/columns/": "Columns", "/tags/": "Tags", "/about/": "About" },
+};
+
+export const UI_STRINGS = { zh, en } as const;
+export const ui = (lang: UiLang = siteLang) => UI_STRINGS[lang];
+
+/**
+ * Chrome language for a route. The handbook follows its own URL (/garden/en/
+ * is English, the rest of /garden/ is Chinese); every other page uses the site
+ * language. `pathname` is the in-app path (no basePath), as usePathname gives.
+ */
+export function routeLang(pathname: string | null | undefined): UiLang {
+  const path = pathname || "/";
+  if (/^\/garden\/en(\/|$)/u.test(path)) return "en";
+  if (/^\/garden(\/|$)/u.test(path)) return "zh";
+  return siteLang;
+}

package/app/lib/page-alternates.ts

@@ -9,6 +9,6 @@ export const FEED_ALTERNATES = { "application/rss+xml": "/rss.xml" } as const;
  * resolved against metadataBase, plus the feed. A page that sets `alternates`
  * replaces the layout's, so the feed link is repeated here.
  */
-export function pageAlternates(pathname: string) {
-  return { canonical: siteHref(pathname), types: FEED_ALTERNATES };
+export function pageAlternates(pathname: string, languages?: Record<string, string>) {
+  return { canonical: siteHref(pathname), types: FEED_ALTERNATES, ...(languages ? { languages } : {}) };
 }

package/app/not-found.tsx

@@ -1,13 +1,15 @@
 import Link from "next/link";
+import { ui } from "./lib/i18n";
 
 export default function NotFound() {
+  const t = ui();
   return (
     <main className="page-shell">
       <header className="sh-head">
-        <h1>找不到这一页</h1>
-        <p className="sh-deck">地址可能写错了，或者这篇已经不在了。</p>
+        <h1>{t.notFoundTitle}</h1>
+        <p className="sh-deck">{t.notFoundDeck}</p>
       </header>
-      <p><Link href="/">返回首页</Link></p>
+      <p><Link href="/">{t.backHome}</Link></p>
     </main>
   );
 }

package/app/site.config.ts

@@ -22,7 +22,7 @@ export type SiteConfig = {
   pages: {
     home: PageCopy;
     blog: PageCopy;
-    thoughts: PageCopy;
+    thoughts: PageCopy & { pageSize?: number };
     columns: PageCopy;
     about: AboutPage;
     garden: PageCopy;

package/app/styles/a2.css

@@ -702,7 +702,7 @@ html[data-theme="dark"] .markdown-body > p > img:not([class]) {
 }
 
 .markdown-body .fig-card {
-  background: var(--card);
+  background: transparent;
   border: 1px solid var(--rule);
   border-radius: 16px;
   padding: 12px;
@@ -886,7 +886,7 @@ html[data-theme="dark"] .markdown-body > p > img:not([class]) {
   border: 1px solid var(--rule);
   border-radius: var(--r);
   padding: 12px 14px 14px;
-  background: var(--card);
+  background: transparent;
   max-width: 100%;
 }
 
@@ -964,7 +964,7 @@ html[data-theme="dark"] .markdown-body > p > img:not([class]) {
 .g-html {
   border: 1px solid var(--rule);
   border-radius: var(--r);
-  background: var(--card);
+  background: transparent;
 }
 
 .g-card,
@@ -1111,7 +1111,7 @@ html[data-theme="dark"] .markdown-body > p > img:not([class]) {
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background: var(--card);
+  background: var(--paper);
   border: 2px solid var(--blue);
 }
 
@@ -1238,6 +1238,37 @@ html[data-theme="dark"] .markdown-body > p > img:not([class]) {
   background: transparent;
 }
 
+/* One diff line per row; the marker column stays out of the copied text. */
+.g-diff code > span {
+  display: block;
+  padding: 0 12px 0 0;
+  white-space: pre;
+}
+
+.g-diff .d-m {
+  display: inline-block;
+  width: 2ch;
+  color: var(--muted);
+  user-select: none;
+}
+
+.g-diff .d-add {
+  background: var(--tint);
+}
+
+.g-diff .d-add .d-m {
+  color: var(--ink);
+}
+
+.g-diff .d-del {
+  background: var(--red-tint);
+  color: var(--soft);
+}
+
+.g-diff .d-del .d-m {
+  color: var(--red-text);
+}
+
 .ux-btn {
   display: inline-grid;
   place-items: center;
@@ -1246,7 +1277,7 @@ html[data-theme="dark"] .markdown-body > p > img:not([class]) {
   padding: 0;
   border: 1px solid var(--rule);
   border-radius: 8px;
-  background: var(--card);
+  background: transparent;
   color: var(--muted);
   cursor: pointer;
   font: 500 12px / 1 var(--sans);
@@ -1585,14 +1616,14 @@ html[data-theme="dark"] .hljs-params {
 .g-quiz label { display: flex; gap: 10px; align-items: center; padding: 8px 0; cursor: pointer; min-height: 44px; }
 .g-quiz input { accent-color: var(--blue); width: 18px; height: 18px; margin: 0; }
 .g-quiz-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px; }
-.g-quiz button { font: 600 14px/1 var(--sans); padding: 11px 16px; border-radius: 8px; border: 1px solid var(--rule-strong); background: var(--card); color: var(--ink); cursor: pointer; min-height: 44px; }
+.g-quiz button { font: 600 14px/1 var(--sans); padding: 11px 16px; border-radius: 8px; border: 1px solid var(--rule-strong); background: transparent; color: var(--ink); cursor: pointer; min-height: 44px; }
 .g-quiz-out { margin: 0; font-size: 14px; }
 .g-quiz-out.ok { color: #2d6a3e; }
 .g-quiz-out.no { color: #b4213a; }
 html[data-theme="dark"] .g-quiz-out.ok { color: #8fd1a0; }
 html[data-theme="dark"] .g-quiz-out.no { color: #f29aab; }
 .g-quiz-ex { margin-top: 8px; font-size: 15px; color: var(--soft); }
-.g-play { border: 1px solid var(--rule); border-radius: var(--r); padding: 14px 16px; margin: 24px 0; background: var(--card); }
+.g-play { border: 1px solid var(--rule); border-radius: var(--r); padding: 14px 16px; margin: 24px 0; background: transparent; }
 .g-play-f { margin: 0 0 10px; font-size: 14px; color: var(--soft); }
 .g-range { display: grid; grid-template-columns: 110px minmax(0, 1fr) 64px; gap: 12px; align-items: center; font-size: 14px; color: var(--muted); margin: 6px 0; }
 .g-range input { width: 100%; accent-color: var(--blue); min-height: 32px; }
@@ -1604,20 +1635,20 @@ html[data-theme="dark"] .g-quiz-out.no { color: #f29aab; }
 .kv-seg legend { float: left; font-size: 14px; color: var(--soft); margin-right: 10px; min-width: 3.2em; padding: 0; }
 .kv-seg label { position: relative; cursor: pointer; }
 .kv-seg input { position: absolute; opacity: 0; inset: 0; }
-.kv-seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 5px 10px; border: 1px solid var(--rule-strong); border-radius: 8px; font-size: 14px; background: var(--card); }
+.kv-seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 5px 10px; border: 1px solid var(--rule-strong); border-radius: 8px; font-size: 14px; background: transparent; }
 .kv-seg input:checked + span { border-color: var(--blue); background: var(--blue-tint); color: var(--blue); }
 .kv-seg input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
 .dx-tok { font: 500 14px ui-monospace, Menlo, monospace; fill: var(--ink); }
 .dx-l { font: 600 13px var(--sans); fill: var(--ink); }
 .dx-cap { font: 12px var(--sans); fill: var(--muted); }
-.dx-k, .dx-v, .dx-q, .dx-o { fill: var(--card); stroke: var(--rule-strong); }
+.dx-k, .dx-v, .dx-q, .dx-o { fill: transparent; stroke: var(--rule-strong); }
 .dx-k, .dx-v { fill: var(--blue-tint); stroke: var(--blue-line); }
-.dx-new { fill: var(--card); stroke: var(--blue); stroke-dasharray: 4 3; }
+.dx-new { fill: transparent; stroke: var(--blue); stroke-dasharray: 4 3; }
 .dx-cache { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 6 4; }
 .dx-attn line { stroke: var(--muted); stroke-width: 1; }
 .dx-q { stroke: var(--blue); stroke-width: 2; }
 .g-flow .fl-group { fill: none; stroke: var(--rule-strong); stroke-dasharray: 5 4; }
-.g-flow .fl-n { fill: var(--card); stroke: var(--rule-strong); stroke-width: 1.2; }
+.g-flow .fl-n { fill: transparent; stroke: var(--rule-strong); stroke-width: 1.2; }
 .g-flow .fl-m { fill: var(--blue-tint); stroke: var(--blue-line); }
 .g-flow .fl-e line, .g-flow .fl-e1 { stroke: var(--muted); stroke-width: 1.3; fill: none; }
 .g-flow .fl-ah { fill: var(--muted); }
@@ -1659,7 +1690,7 @@ html[data-theme="dark"] .g-quiz-out.no { color: #f29aab; }
 }
 
 /* ---- garden file: a download card, a group of rows, a preview drawer ---- */
-.gf { margin: 24px 0; border: 1px solid var(--rule); border-radius: 12px; background: var(--card); font-family: var(--sans); }
+.gf { margin: 24px 0; border: 1px solid var(--rule); border-radius: 12px; background: transparent; font-family: var(--sans); }
 .gf-title { padding: 14px 16px 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--muted); }
 .gf-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
 .gf-row + .gf-row { border-top: 1px solid var(--rule); }
@@ -1686,7 +1717,7 @@ html[data-theme="dark"] .gf-scrim { background: rgb(0 0 0 / 45%); }
 .gf-dh { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--rule); }
 .gf-dh .gf-act { gap: 2px; }
 .gf-db { flex: 1; min-height: 0; overflow: auto; padding: 28px 32px 40px; font-size: 15px; line-height: 1.75; overscroll-behavior: contain; }
-.gf-db-frame { padding: 0; overflow: hidden; background: var(--card); }
+.gf-db-frame { padding: 0; overflow: hidden; background: transparent; }
 .gf-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
 .gf-drawer[data-preview="pdf"] .gf-frame { background: var(--paper-deep); }
 /* Focus catchers around the iframe: reachable by Tab, never seen. */
@@ -1833,25 +1864,10 @@ html[data-theme="dark"] .gf-scrim { background: rgb(0 0 0 / 45%); }
 }
 
 .gdoc-nav-group-head {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 8px;
+  margin: 0 0 6px;
   padding: 0 10px;
-  margin-bottom: 6px;
-}
-
-.gdoc-nav-group-head h2 {
-  margin: 0;
-  font: 600 12px/1.4 var(--sans);
-  letter-spacing: 0.02em;
-  color: var(--muted);
-}
-
-.gdoc-nav-group-head span {
-  font: 400 11px/1.3 var(--mono);
-  color: var(--muted);
-  opacity: 0.8;
+  font: 600 15px/1.45 var(--sans);
+  color: var(--ink);
 }
 
 .gdoc-nav-list {
@@ -2008,7 +2024,7 @@ html[data-theme="dark"] .gf-scrim { background: rgb(0 0 0 / 45%); }
   padding: 16px 18px;
   border: 1px solid var(--rule);
   border-radius: 12px;
-  background: var(--card);
+  background: transparent;
   text-decoration: none;
   transition: border-color 0.15s ease, background-color 0.15s ease;
 }
@@ -2033,6 +2049,10 @@ html[data-theme="dark"] .gf-scrim { background: rgb(0 0 0 / 45%); }
 }
 
 .gdoc-pager-card strong {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
   font-size: 15px;
   font-weight: 600;
   line-height: 1.45;
@@ -2229,3 +2249,52 @@ html[data-theme="dark"] .gf-scrim { background: rgb(0 0 0 / 45%); }
   }
 }
 
+
+/* English handbook pages: same 740px column, tighter leading than Chinese. */
+.garden-doc-page:lang(en) .markdown-body,
+.garden-doc-page:lang(en) .gdoc-article-deck {
+  line-height: 1.6;
+}
+
+/* Article pager: no rule above (the Webmention block ends the section); the comments keep theirs. */
+.gdoc-pager.article-pager {
+  border-top: 0;
+  padding-top: 0;
+}
+
+/* 随想 feed: the 下一页 link doubles as the loading trigger. */
+.feed-more {
+  display: flex;
+  justify-content: center;
+  margin: 32px 0 8px;
+}
+
+.feed-more a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 40px;
+  padding: 0 18px;
+  border: 1px solid var(--rule);
+  border-radius: 999px;
+  color: var(--soft);
+  font: 400 14px/1 var(--sans);
+  text-decoration: none;
+}
+
+.feed-more a:hover {
+  border-color: var(--rule-strong);
+  color: var(--ink);
+}
+
+.feed-end {
+  color: var(--muted);
+  font: 400 13px/1 var(--sans);
+}
+
+.feed-prev {
+  display: flex;
+  justify-content: space-between;
+  margin: 24px 0 0;
+  color: var(--muted);
+  font: 400 13px/1.4 var(--sans);
+}

package/app/styles/shell.css

@@ -437,3 +437,9 @@ html[data-theme="dark"] .sh-repos > li.sk::after{background:linear-gradient(90de
 @media (prefers-reduced-motion:reduce){
   .sh-col,.sh-repos > li,.sh-tagchip{transition:none}
 }
+/* Handbook language switch: plain text 「中 / EN」, the current one in ink. */
+.sh-lang{display:inline-flex;align-items:center;height:34px;padding:0 8px;color:var(--muted);font:400 14px/1 var(--sans);text-decoration:none;white-space:nowrap;border-radius:8px}
+.sh-lang [aria-current]{color:var(--ink);font-weight:600}
+a.sh-lang:hover{color:var(--ink)}
+a.sh-lang:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
+.sh-lang.is-disabled{opacity:.55;cursor:default}

package/app/thoughts/page/[n]/page.tsx

@@ -0,0 +1,44 @@
+import { notFound } from "next/navigation";
+import { PageIntro } from "../../../components/PageIntro";
+import { ThoughtFeed, thoughtsPageCount, thoughtsPageSize } from "../../../components/ThoughtFeed";
+import { getPublishedThoughts } from "../../../lib/public-thoughts";
+import { ui } from "../../../lib/i18n";
+import { pageAlternates } from "../../../lib/page-alternates";
+import { siteConfig } from "../../../site.config";
+import { extraPages, pagePath } from "../../../../ui/garden/paging.mjs";
+import { isStaticPlaceholder, STATIC_PLACEHOLDER, staticParams } from "../../../../ui/garden/static-params.mjs";
+
+export function generateStaticParams() {
+  return staticParams(
+    extraPages(getPublishedThoughts().length, thoughtsPageSize()).map((page: number) => ({ n: String(page) })),
+    { n: STATIC_PLACEHOLDER },
+  );
+}
+
+const pageNumber = (value: string) => (/^\d+$/u.test(value) ? Number(value) : NaN);
+
+export async function generateMetadata({ params }: { params: Promise<{ n: string }> }) {
+  const { n } = await params;
+  const page = pageNumber(n);
+  if (!(page >= 2 && page <= thoughtsPageCount())) return {};
+  return {
+    title: `${siteConfig.pages.thoughts.title} · ${ui().pageOf(page, thoughtsPageCount())}`,
+    description: siteConfig.pages.thoughts.subtitle || siteConfig.description,
+    alternates: pageAlternates(pagePath("/thoughts", page)),
+  };
+}
+
+export default async function ThoughtsPage({ params }: { params: Promise<{ n: string }> }) {
+  const { n } = await params;
+  const page = pageNumber(n);
+  if (!(page >= 2 && page <= thoughtsPageCount())) {
+    if (isStaticPlaceholder(n)) return null;
+    notFound();
+  }
+  return (
+    <main className="page-shell thoughts-page">
+      <PageIntro eyebrow="THOUGHTS / 随想" title={siteConfig.pages.thoughts.title} subtitle={siteConfig.pages.thoughts.subtitle} />
+      <ThoughtFeed page={page} />
+    </main>
+  );
+}

package/app/thoughts/page.tsx

@@ -1,5 +1,5 @@
 import { getPublishedThoughts } from "../lib/public-thoughts";
-import { ThoughtCard } from "../components/ThoughtCard";
+import { ThoughtFeed } from "../components/ThoughtFeed";
 import { ContentEmptyState } from "../components/ContentEmptyState";
 import { PageIntro } from "../components/PageIntro";
 import { siteConfig, siteDocumentTitle } from "../site.config";
@@ -22,11 +22,7 @@ export default function ThoughtsPage() {
         subtitle={siteConfig.pages.thoughts.subtitle}
       />
       {thoughts.length > 0 ? (
-        <div className="thought-stream">
-          {thoughts.map((thought) => (
-            <ThoughtCard key={thought.slug} thought={thought} />
-          ))}
-        </div>
+        <ThoughtFeed page={1} />
       ) : (
         <ContentEmptyState kind="thoughts" />
       )}

package/bin/garden.mjs

@@ -398,6 +398,10 @@ switch (command) {
       // What the export wrote for empty dynamic routes (ui/garden/static-params.mjs).
       runNode("scripts/static-placeholders.mjs");
       runNode("scripts/redirects.mjs");
+      // <html lang="en"> on the English handbook pages.
+      runNode("scripts/html-lang.mjs");
+      // 404.html also under basePath when the host serves that folder alone.
+      runNode("scripts/static-404.mjs");
     }
     break;
   case "links":