hd-garden 0.7.0 → 0.8.1

package/app/blog/page.tsx

@@ -4,6 +4,7 @@ import { BlogArchive, BlogArchiveFallback } from "../components/BlogArchive";
 import { posts } from "../lib/content";
 import { archivePosts, archiveSeries } from "../lib/archive";
 import { pageAlternates } from "../lib/page-alternates";
+import { siteLang, ui } from "../lib/i18n";
 
 export const metadata = {
   title: siteDocumentTitle,
@@ -12,13 +13,14 @@ export const metadata = {
 };
 
 export default function BlogIndex() {
+  const t = ui();
   const list = archivePosts();
   const series = archiveSeries();
   return (
     <main className="sh-main" id="content">
       <div className="sh-head">
-        <h1 id="sh-title">文章</h1>
-        <p className="sh-deck">阶段性的完整沉淀，关于工程、架构与技术思考。共 {posts.length} 篇，按年份归档。</p>
+        <h1 id="sh-title">{t.blogHeading}</h1>
+        <p className="sh-deck">{siteLang === "en" ? t.blogDeck(posts.length) : <>阶段性的完整沉淀，关于工程、架构与技术思考。共 {posts.length} 篇，按年份归档。</>}</p>
       </div>
       <Suspense fallback={<BlogArchiveFallback posts={list} series={series} />}>
         <BlogArchive posts={list} series={series} />

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

@@ -1,9 +1,10 @@
 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, ArrowRight } from "@phosphor-icons/react/ssr";
+import { ArrowLeft } from "@phosphor-icons/react/ssr";
 import {
   columns,
   extractHeadings,
@@ -28,6 +29,7 @@ import {
 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";
 
 export function generateStaticParams() {
   return staticParams(
@@ -88,20 +90,22 @@ export default async function ColumnEntryPage({
   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 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();
 
   return (
     <main className="column-reading-page">
       <aside className="series-nav">
         <Link href={siteHref("/columns")} className="back-link">
           <ArrowLeft size={15} />
-          所有专栏
+          {t.allColumnsBack}
         </Link>
-        <p>主题专栏</p>
+        <p>{t.seriesEyebrow}</p>
         <h2>{entry.columnTitle}</h2>
         <ol>
           {listed.map((item) => (
@@ -110,12 +114,12 @@ export default async function ColumnEntryPage({
             </li>
           ))}
         </ol>
-        <small>{series.length} 篇 · 持续更新</small>
+        <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}>
-          {entry.title} 永久链接
+          {siteLang === "en" ? t.permalinkLabel(entry.title) : <>{entry.title} 永久链接</>}
         </Link>
         <a
           className="p-author h-card sr-only"
@@ -134,13 +138,13 @@ export default async function ColumnEntryPage({
               </time>
             </li>
             {originalUrl(entry) ? (
-              <li><a className="orig ext" href={originalUrl(entry)} target="_blank" rel="noopener noreferrer">原文 ↗</a></li>
+              <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={`${entry.title} 封面`} sizes="(max-width: 852px) calc(100vw - 40px), 812px" priority />
+              <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>
@@ -150,20 +154,15 @@ export default async function ColumnEntryPage({
           <MarkdownArticle content={entry.content} numbering={entry.numbering} />
         </div>
         <ArticleReferences references={entry.references} />
-        {next && (
-          <Link
-            href={columnHref(next)}
-            className="next-entry"
-          >
-            <span>下一篇</span>
-            <strong>{next.title}</strong>
-            <ArrowRight size={20} />
-          </Link>
-        )}
         <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>
 

package/app/columns/page.tsx

@@ -4,6 +4,7 @@ import { columnHref, columns } from "../lib/content";
 import { ContentEmptyState } from "../components/ContentEmptyState";
 import { siteConfig, siteDocumentTitle } from "../site.config";
 import { pageAlternates } from "../lib/page-alternates";
+import { columnStatusLabel, ui } from "../lib/i18n";
 
 export const metadata = {
   title: siteDocumentTitle,
@@ -23,6 +24,7 @@ function day(value: string) {
 }
 
 export default function ColumnsPage() {
+  const t = ui();
   const grouped = Array.from(
     columns.reduce((result, entry) => {
       const existing = result.get(entry.column ?? "");
@@ -39,19 +41,21 @@ export default function ColumnsPage() {
   return (
     <main className="sh-main" id="content">
       <div className="sh-head">
-        <h1>{siteConfig.pages.columns.title || "专栏"}</h1>
+        <h1>{siteConfig.pages.columns.title || t.homeColumns}</h1>
         {siteConfig.pages.columns.subtitle ? <p className="sh-deck">{siteConfig.pages.columns.subtitle}</p> : null}
       </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>
+        <section className={first.columnCover ? "sh-series" : "sh-series no-cover"} aria-labelledby={slug} key={slug}>
+          {first.columnCover ? (
+            <div className="cover" style={{ background: "var(--well)" }}>
+              <img className="column-feature-cover" src={first.columnCover} alt={first.columnCoverAlt ?? t.columnCoverAlt(first.columnTitle)} />
+            </div>
+          ) : null}
           <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}，从新到旧`}>
+            <p className="count">{t.columnReadingList(entries.length, columnStatusLabel(first.columnStatus))}</p>
+            <p className="desc">{first.columnDescription ?? first.description ?? t.columnFallbackDesc}</p>
+            <ol aria-label={t.columnNewestFirst(first.columnTitle)}>
               {entries.map((entry) => (
                 <li key={entry.path}>
                   <Link href={columnHref(entry)}>{entry.title}</Link>

package/app/components/AdminUiShell.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 import type { ReactNode } from "react";
 import { getAdminUser } from "../lib/admin-auth";
+import { ui } from "../lib/i18n";
 
 const SECTIONS = [
   { href: "/admin", label: "总览" },
@@ -23,9 +24,9 @@ export function StaticAdminNotice() {
   return (
     <main className="admin-access-page">
       <div className="admin-access-card">
-        <h1>后台在另一个地址。</h1>
-        <p>公开博客上看不到这一页。写随想和改交互，去单独部署的后台。</p>
-        <Link href="/">返回公开博客</Link>
+        <h1>{ui().staticAdminHeading}</h1>
+        <p>{ui().staticAdminBody}</p>
+        <Link href="/">{ui().staticAdminBack}</Link>
       </div>
     </main>
   );

package/app/components/ArticlePager.tsx

@@ -0,0 +1,32 @@
+import Link from "next/link";
+import { ArrowLeft, ArrowRight } from "@phosphor-icons/react/ssr";
+import { ui } from "../lib/i18n";
+
+export type PagerTarget = { href: string; title: string } | null;
+
+/** 上一篇 / 下一篇, the same cards as the handbook pager. A missing side stays empty. */
+export function ArticlePager({ prev, next, label = ui().pagerLabel }: { prev: PagerTarget; next: PagerTarget; label?: string }) {
+  if (!prev && !next) return null;
+  return (
+    <nav className="gdoc-pager article-pager" aria-label={label}>
+      {prev ? (
+        <Link href={prev.href} className="gdoc-pager-card is-prev">
+          <span className="gdoc-pager-dir">
+            <ArrowLeft size={14} aria-hidden="true" />
+            {ui().prev}
+          </span>
+          <strong>{prev.title}</strong>
+        </Link>
+      ) : null}
+      {next ? (
+        <Link href={next.href} className="gdoc-pager-card is-next">
+          <span className="gdoc-pager-dir">
+            {ui().next}
+            <ArrowRight size={14} aria-hidden="true" />
+          </span>
+          <strong>{next.title}</strong>
+        </Link>
+      ) : null}
+    </nav>
+  );
+}

package/app/components/ArticleReferences.tsx

@@ -1,4 +1,5 @@
 import { referenceColumns, referenceDomain } from "../../ui/garden/references.mjs";
+import { ui, type UiLang } from "../lib/i18n";
 
 type ReferenceItem = {
   title: string;
@@ -8,8 +9,10 @@ type ReferenceItem = {
 
 export function ArticleReferences({
   references,
+  lang,
 }: {
   references?: ReferenceItem[];
+  lang?: UiLang;
 }) {
   if (!references?.length) return null;
   const split = referenceColumns(references.length) === 2;
@@ -19,7 +22,7 @@ export function ArticleReferences({
       className={split ? "article-references is-split" : "article-references"}
       aria-labelledby="article-references-heading"
     >
-      <h2 id="article-references-heading">参考</h2>
+      <h2 id="article-references-heading">{ui(lang).referencesHeading}</h2>
       <ol>
         {references.map((item, index) => {
           const domain = item.domain ?? referenceDomain(item.url);

package/app/components/ArticleTags.tsx

@@ -1,13 +1,14 @@
 import Link from "next/link";
 import { articleTagHref } from "../lib/tag-filter";
 import { siteHref } from "../lib/site-href";
+import { ui, type UiLang } from "../lib/i18n";
 
 /** Tags under an article title. Link, so following one is a client navigation like the rest of the site. */
-export function ArticleTags({ tags }: { tags?: string[] }) {
+export function ArticleTags({ tags, lang }: { tags?: string[]; lang?: UiLang }) {
   const list = (tags ?? []).filter(Boolean);
   if (!list.length) return null;
   return (
-    <ul className="article-tagrow" aria-label="标签">
+    <ul className="article-tagrow" aria-label={ui(lang).articleTagsLabel}>
       {list.map((tag) => (
         <li key={tag}>
           <Link className="tag-chip p-category" href={siteHref(articleTagHref(tag))}>

package/app/components/BlogArchive.tsx

@@ -17,6 +17,7 @@ import {
 } from "../lib/tag-filter";
 import { ContentEmptyState } from "./ContentEmptyState";
 import { siteHref } from "../lib/site-href";
+import { siteLang, ui } from "../lib/i18n";
 
 function day(value: string) {
   const date = new Date(value);
@@ -72,6 +73,7 @@ export function BlogArchiveFallback({ posts, series }: ArchiveData) {
 }
 
 function ArchiveView({ posts, series, selected, go }: ArchiveData & { selected: string[]; go: (next: string[]) => void }) {
+  const t = ui();
   const [compact, setCompact] = useState(false);
   const [expanded, setExpanded] = useState(false);
   const options = useMemo(() => tagOptions(posts, selected), [posts, selected]);
@@ -81,7 +83,7 @@ function ArchiveView({ posts, series, selected, go }: ArchiveData & { selected:
     .sort((left, right) => Date.parse(right.date) - Date.parse(left.date));
   const years = new Map<string, typeof filtered>();
   for (const post of filtered) {
-    const year = day(post.date).slice(0, 4) || "未知";
+    const year = day(post.date).slice(0, 4) || t.unknownYear;
     const list = years.get(year);
     if (list) list.push(post);
     else years.set(year, [post]);
@@ -92,7 +94,7 @@ function ArchiveView({ posts, series, selected, go }: ArchiveData & { selected:
       <div>
         {options.length ? (
           <div className="sh-tagfilter">
-            <ul className="sh-tagchips" aria-label="按标签筛选">
+            <ul className="sh-tagchips" aria-label={t.tagFilterLabel}>
               {shown.map((option) => (
                 <li key={option.tag}>
                   <button
@@ -111,7 +113,9 @@ function ArchiveView({ posts, series, selected, go }: ArchiveData & { selected:
               {hidden > 0 || expanded ? (
                 <li>
                   <button type="button" className="sh-tagmore" aria-expanded={expanded} onClick={() => setExpanded(!expanded)}>
-                    {expanded ? "收起" : `展开全部 ${options.length} 个标签`}
+                    {siteLang === "en"
+                      ? (expanded ? t.tagCollapse : t.tagExpandAll(options.length))
+                      : (expanded ? "收起" : `展开全部 ${options.length} 个标签`)}
                   </button>
                 </li>
               ) : null}
@@ -119,17 +123,17 @@ function ArchiveView({ posts, series, selected, go }: ArchiveData & { selected:
           </div>
         ) : null}
         <div className="sh-status">
-          <span aria-live="polite">{tagSummary(selected.length, filtered.length)}</span>
-          {selected.length ? <button type="button" onClick={() => go([])}>清除</button> : null}
-          <div className="sh-view" role="group" aria-label="列表密度">
-            <button type="button" aria-pressed={!compact} onClick={() => setCompact(false)}>摘要</button>
-            <button type="button" aria-pressed={compact} onClick={() => setCompact(true)}>紧凑</button>
+          <span aria-live="polite">{tagSummary(selected.length, filtered.length, siteLang)}</span>
+          {selected.length ? <button type="button" onClick={() => go([])}>{siteLang === "en" ? t.tagClear : "清除"}</button> : null}
+          <div className="sh-view" role="group" aria-label={t.densityLabel}>
+            <button type="button" aria-pressed={!compact} onClick={() => setCompact(false)}>{t.densityDetailed}</button>
+            <button type="button" aria-pressed={compact} onClick={() => setCompact(true)}>{t.densityCompact}</button>
           </div>
         </div>
         <div id="sh-list" className={compact ? "is-compact" : undefined}>
           {filtered.length ? [...years.entries()].map(([year, entries]) => (
             <section className="sh-year" id={`y${year}`} key={year} aria-labelledby={`yh${year}`}>
-              <h2 id={`yh${year}`}>{year}<span className="n">{entries.length} 篇</span></h2>
+              <h2 id={`yh${year}`}>{year}<span className="n">{siteLang === "en" ? t.yearPostCount(entries.length) : <>{entries.length} 篇</>}</span></h2>
               <ol className="sh-rows">
                 {entries.map((post) => (
                   <li className="sh-row" key={post.path}>
@@ -137,7 +141,7 @@ function ArchiveView({ posts, series, selected, go }: ArchiveData & { selected:
                     <div className="archive-copy">
                       <h3>
                         <Link href={postHref(post)}>{post.title}</Link>
-                        {post.pinned ? <span className="pin">置顶</span> : null}
+                        {post.pinned ? <span className="pin">{t.pinnedBadge}</span> : null}
                       </h3>
                       {post.description ? <p>{post.description}</p> : null}
                     </div>
@@ -148,19 +152,19 @@ function ArchiveView({ posts, series, selected, go }: ArchiveData & { selected:
             </section>
           )) : selected.length ? (
             <div className="sh-tagempty">
-              <p>没有同时带这些标签的文章。</p>
+              <p>{siteLang === "en" ? t.tagEmptyMatch : "没有同时带这些标签的文章。"}</p>
               <div className="acts">
                 {selected.length > 1 ? (
-                  <button type="button" onClick={() => go(selected.slice(0, -1))}>去掉「{selected[selected.length - 1]}」</button>
+                  <button type="button" onClick={() => go(selected.slice(0, -1))}>{t.tagDropLast(selected[selected.length - 1])}</button>
                 ) : null}
-                <button type="button" onClick={() => go([])}>看全部文章</button>
+                <button type="button" onClick={() => go([])}>{t.browseAllPosts}</button>
               </div>
             </div>
           ) : <ContentEmptyState kind="posts" />}
         </div>
       </div>
-      <aside className="sh-rail" aria-label="按年份跳转">
-        {years.size ? <h2>按年份</h2> : null}
+      <aside className="sh-rail" aria-label={t.railJumpByYear}>
+        {years.size ? <h2>{t.railByYear}</h2> : null}
         <ol>
           {[...years.keys()].map((year) => (
             <li key={year}>
@@ -170,7 +174,7 @@ function ArchiveView({ posts, series, selected, go }: ArchiveData & { selected:
         </ol>
         {series.length ? (
           <>
-            <h2>专栏</h2>
+            <h2>{t.railColumns}</h2>
             <ol>
               {series.map((column) => (
                 <li key={column.slug}>

package/app/components/Comments.tsx

@@ -1,20 +1,20 @@
 import { ChatCircle, GithubLogo } from "@phosphor-icons/react/ssr";
 import { readGiscusConfig } from "../lib/giscus-config";
 import { GiscusComments } from "./GiscusComments";
+import { ui } from "../lib/i18n";
 
 export function Comments({ slug }: { slug: string }) {
   const config = readGiscusConfig();
+  const t = ui();
 
   return (
     <section className="comments" aria-labelledby={`comments-heading-${slug}`}>
       <div className="comments-heading">
         <ChatCircle size={23} />
         <div>
-          <h2 id={`comments-heading-${slug}`}>评论</h2>
+          <h2 id={`comments-heading-${slug}`}>{t.comments}</h2>
           <p>
-            {config
-              ? "评论由 GitHub Discussions 保存和管理。"
-              : "评论还没开放。配好下面四项后，这里才会出现评论框。"}
+            {config ? t.commentsSummaryReady : t.commentsSummaryUnconfigured}
           </p>
         </div>
       </div>
@@ -25,14 +25,21 @@ export function Comments({ slug }: { slug: string }) {
         <div className="integration-notice">
           <GithubLogo size={20} weight="fill" />
           <p>
-            打开{" "}
-            <a href="https://giscus.app/zh-CN" target="_blank" rel="noreferrer">
+            {t.commentsSetupBefore}{" "}
+            <a href={t.commentsGiscusGuideUrl} target="_blank" rel="noreferrer">
               Giscus
             </a>
-            ，安装到一个已开启 Discussions 的公开仓库，把仓库、仓库 ID、分类、分类 ID
-            写入 <code>.env.local</code> 和 GitHub Actions Variables：
-            <code>GISCUS_REPO</code>、<code>GISCUS_REPO_ID</code>、
-            <code>GISCUS_CATEGORY</code>、<code>GISCUS_CATEGORY_ID</code>。
+            {t.commentsSetupMiddle}
+            <code>.env.local</code>
+            {t.commentsSetupAnd}
+            <code>GISCUS_REPO</code>
+            {t.commentsSetupJoin}
+            <code>GISCUS_REPO_ID</code>
+            {t.commentsSetupJoin}
+            <code>GISCUS_CATEGORY</code>
+            {t.commentsSetupJoin}
+            <code>GISCUS_CATEGORY_ID</code>
+            {t.commentsSetupEnd}
           </p>
         </div>
       )}

package/app/components/ContentEmptyState.tsx

@@ -3,35 +3,36 @@
 import Link from "next/link";
 import { ArrowRight, Article, Books, Quotes } from "@phosphor-icons/react/ssr";
 import { siteHref } from "../lib/site-href";
+import { ui } from "../lib/i18n";
 
-const emptyContent = {
-  posts: {
-    icon: Article,
-    eyebrow: "暂无博文",
-    title: "暂无博文。",
-    description: "文章会按时间排在这里。",
-    actionHref: "/",
-    actionLabel: "返回首页",
-  },
-  thoughts: {
-    icon: Quotes,
-    eyebrow: "暂无随想",
-    title: "暂无随想。",
-    description: "短笔记和链接会在这里。",
-    actionHref: "/blog",
-    actionLabel: "先读博文",
-  },
-  columns: {
-    icon: Books,
-    eyebrow: "暂无专栏",
-    title: "暂无专栏。",
-    description: "一组文章会按顺序列在这里。",
-    actionHref: "/blog",
-    actionLabel: "浏览全部博文",
-  },
-} as const;
-
-export function ContentEmptyState({ kind }: { kind: keyof typeof emptyContent }) {
+export function ContentEmptyState({ kind }: { kind: "posts" | "thoughts" | "columns" }) {
+  const s = ui();
+  const emptyContent = {
+    posts: {
+      icon: Article,
+      eyebrow: s.emptyPostsEyebrow,
+      title: s.emptyPostsTitle,
+      description: s.emptyPostsDesc,
+      actionHref: "/",
+      actionLabel: s.emptyPostsCta,
+    },
+    thoughts: {
+      icon: Quotes,
+      eyebrow: s.emptyThoughtsEyebrow,
+      title: s.emptyThoughtsTitle,
+      description: s.emptyThoughtsDesc,
+      actionHref: "/blog",
+      actionLabel: s.emptyThoughtsCta,
+    },
+    columns: {
+      icon: Books,
+      eyebrow: s.emptyColumnsEyebrow,
+      title: s.emptyColumnsTitle,
+      description: s.emptyColumnsDesc,
+      actionHref: "/blog",
+      actionLabel: s.emptyColumnsCta,
+    },
+  } as const;
   const content = emptyContent[kind];
   const Icon = content.icon;
 

package/app/components/ExternalEmbed.tsx

@@ -7,6 +7,7 @@ import {
   YoutubeLogo,
 } from "@phosphor-icons/react/ssr";
 import { parse } from "yaml";
+import { ui, type UiLang } from "../lib/i18n";
 
 type EmbedData = {
   url: string;
@@ -70,23 +71,23 @@ function playableUrl(provider: EmbedProvider, url: URL) {
   return null;
 }
 
-const providerCopy = {
-  youtube: { label: "YouTube", Icon: YoutubeLogo },
-  bilibili: { label: "Bilibili", Icon: VideoCamera },
-  x: { label: "X", Icon: XLogo },
-  wechat: { label: "微信公众号", Icon: WechatLogo },
-  website: { label: "网页摘要", Icon: LinkSimple },
-};
-
-export function ExternalEmbed({ source }: { source: string }) {
+export function ExternalEmbed({ source, lang }: { source: string; lang?: UiLang }) {
+  const s = ui(lang);
   const data = readEmbedData(source);
   if (!data) {
-    return <p className="external-embed-error">无法解析这个嵌入块，请检查 URL 与 YAML 格式。</p>;
+    return <p className="external-embed-error">{s.embedParseError}</p>;
   }
 
   const url = new URL(data.url);
   const provider = providerFor(url);
   const playerUrl = playableUrl(provider, url);
+  const providerCopy = {
+    youtube: { label: "YouTube", Icon: YoutubeLogo },
+    bilibili: { label: "Bilibili", Icon: VideoCamera },
+    x: { label: "X", Icon: XLogo },
+    wechat: { label: s.embedProviderWechat, Icon: WechatLogo },
+    website: { label: s.embedProviderWeb, Icon: LinkSimple },
+  };
   const { Icon, label } = providerCopy[provider];
 
   if (playerUrl) {
@@ -95,7 +96,7 @@ export function ExternalEmbed({ source }: { source: string }) {
         <div className="external-embed-frame">
           <iframe
             src={playerUrl}
-            title={data.title ?? `${label} 嵌入内容`}
+            title={data.title ?? s.embedFrameTitle(label)}
             loading="lazy"
             allow="accelerometer; autoplay; encrypted-media; fullscreen; picture-in-picture"
             referrerPolicy="strict-origin-when-cross-origin"
@@ -104,7 +105,7 @@ export function ExternalEmbed({ source }: { source: string }) {
         </div>
         <figcaption>
           <span><Icon size={17} />{label}</span>
-          <a href={data.url} target="_blank" rel="noopener noreferrer">在原网站打开<ArrowUpRight size={14} /></a>
+          <a href={data.url} target="_blank" rel="noopener noreferrer">{s.embedOpenOriginal}<ArrowUpRight size={14} /></a>
         </figcaption>
       </figure>
     );
@@ -118,8 +119,8 @@ export function ExternalEmbed({ source }: { source: string }) {
       )}
       <span className="external-embed-copy">
         <small><Icon size={16} />{label} · {url.hostname}</small>
-        <strong>{data.title ?? "打开这条外部内容"}</strong>
-        <p>{data.description ?? (provider === "x" || provider === "wechat" ? "平台不提供稳定的无脚本嵌入，Garden 会保留清晰、可访问的原文入口。" : "查看原网页中的完整内容与上下文。")}</p>
+        <strong>{data.title ?? s.embedFallbackTitle}</strong>
+        <p>{data.description ?? (provider === "x" || provider === "wechat" ? s.embedFallbackNoScript : s.embedFallbackWeb)}</p>
       </span>
       <ArrowUpRight size={21} />
     </a>

package/app/components/FeedMore.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+type Labels = { nextPage: string; loadingMore: string; loadFailed: string; feedEnd: string };
+
+/**
+ * The end of a feed page. Without JavaScript it is a plain 下一页 link to the
+ * next pre-rendered page. With JavaScript, when it scrolls near the viewport it
+ * fetches that page's HTML, appends its items to the list above and moves on.
+ */
+export function FeedMore({ next, streamSelector, labels }: { next: string | null; streamSelector: string; labels: Labels }) {
+  // Page links are written without the basePath; the pages fetched later carry it already.
+  const base = (process.env.NEXT_PUBLIC_BASE_PATH ?? "").replace(/\/+$/u, "");
+  const [href, setHref] = useState(next ? `${base}${next}` : null);
+  const [state, setState] = useState<"idle" | "loading" | "error">("idle");
+  const navRef = useRef<HTMLElement>(null);
+  const busy = useRef(false);
+
+  const load = useCallback(async () => {
+    if (!href || busy.current) return;
+    busy.current = true;
+    setState("loading");
+    try {
+      const response = await fetch(href, { headers: { Accept: "text/html" } });
+      if (!response.ok) throw new Error(String(response.status));
+      const page = new DOMParser().parseFromString(await response.text(), "text/html");
+      const incoming = page.querySelector(streamSelector);
+      const stream = navRef.current?.parentElement?.querySelector(streamSelector);
+      if (!incoming || !stream) throw new Error("feed markup");
+      stream.append(...Array.from(incoming.children).map((node) => document.importNode(node, true)));
+      setHref(page.querySelector<HTMLAnchorElement>("[data-feed-next]")?.getAttribute("href") ?? null);
+      setState("idle");
+    } catch {
+      setState("error");
+    } finally {
+      busy.current = false;
+    }
+  }, [href, streamSelector]);
+
+  useEffect(() => {
+    const node = navRef.current;
+    if (!node || !href || state !== "idle" || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) void load();
+    }, { rootMargin: "600px 0px" });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [href, state, load]);
+
+  return (
+    <nav ref={navRef} className="feed-more" aria-live="polite">
+      {href ? (
+        <a
+          href={href}
+          rel="next"
+          data-feed-next=""
+          onClick={(event) => {
+            event.preventDefault();
+            void load();
+          }}
+        >
+          {state === "loading" ? labels.loadingMore : state === "error" ? labels.loadFailed : labels.nextPage}
+        </a>
+      ) : (
+        <span className="feed-end">{labels.feedEnd}</span>
+      )}
+    </nav>
+  );
+}