hd-garden 0.8.0 → 0.8.2

package/app/components/HandbookView.tsx

@@ -17,11 +17,13 @@ import {
   HANDBOOK_SECTIONS,
   HANDBOOK_UI,
   handbookPath,
+  isReferencePath,
   orderedHandbookDocs,
   sectionTitle,
   toHandbookNavItems,
   type HandbookLang,
 } from "../lib/garden-docs-meta";
+import { UI_STRINGS, siteLang } from "../lib/i18n";
 import { siteConfig } from "../site.config";
 
 const other = (lang: HandbookLang): HandbookLang => (lang === "en" ? "zh" : "en");
@@ -29,6 +31,7 @@ const hreflang = (lang: HandbookLang) => (lang === "en" ? "en" : "zh-CN");
 
 /** canonical + hreflang links; the counterpart is listed only when it exists. */
 export function handbookLanguages(lang: HandbookLang, docPath: string) {
+  if (siteLang === "en") return undefined;
   if (!hasHandbookPage(other(lang), docPath)) return undefined;
   const zh = siteHref(handbookPath("zh", docPath));
   const en = siteHref(handbookPath("en", docPath));
@@ -38,21 +41,101 @@ export function handbookLanguages(lang: HandbookLang, docPath: string) {
 export const handbookAlternates = (lang: HandbookLang, docPath: string) =>
   pageAlternates(handbookPath(lang, docPath), handbookLanguages(lang, docPath));
 
+export async function handbookOverviewMetadata(lang: HandbookLang, indexDoc: GardenDocEntry | null | undefined) {
+  const t = HANDBOOK_UI[lang];
+  const baseUrl = await getSiteUrl();
+  const pathname = siteHref(handbookPath(lang, "index"));
+  const description = indexDoc?.description ?? "";
+  const fullTitle = `${t.name} · ${siteConfig.name}`;
+  const imageAlt =
+    lang === "en"
+      ? `${siteConfig.name} · ${indexDoc?.title || t.name}`
+      : `${siteConfig.name} · ${siteConfig.pages.home.title.replace("\n", "")}`;
+  return {
+    title: t.name,
+    description,
+    alternates: pageAlternates(handbookPath(lang), handbookLanguages(lang, "index")),
+    openGraph: {
+      type: "website",
+      url: absoluteUrl(pathname, baseUrl),
+      title: fullTitle,
+      description,
+      locale: lang === "en" ? "en_US" : "zh_CN",
+      images: [
+        {
+          url: "/og.png",
+          width: 1731,
+          height: 909,
+          alt: imageAlt,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: fullTitle,
+      description,
+      images: ["/og.png"],
+    },
+  } satisfies Metadata;
+}
+
 export async function handbookDocMetadata(lang: HandbookLang, doc: GardenDocEntry | undefined) {
-  if (!doc) return {};
+  if (!doc) {
+    const copy = UI_STRINGS[lang];
+    const fullTitle = `${copy.notFoundTitle} · ${siteConfig.name}`;
+    return {
+      title: copy.notFoundTitle,
+      description: copy.notFoundDeck,
+      openGraph: {
+        type: "website",
+        title: fullTitle,
+        description: copy.notFoundDeck,
+        locale: lang === "en" ? "en_US" : "zh_CN",
+        images: [
+          {
+            url: "/og.png",
+            width: 1731,
+            height: 909,
+            alt: fullTitle,
+          },
+        ],
+      },
+      twitter: {
+        card: "summary_large_image",
+        title: fullTitle,
+        description: copy.notFoundDeck,
+        images: ["/og.png"],
+      },
+    } satisfies Metadata;
+  }
   const t = HANDBOOK_UI[lang];
   const baseUrl = await getSiteUrl();
   const pathname = siteHref(handbookPath(lang, doc.path));
+  const docTitle = `${doc.title} · ${t.name}`;
   return {
-    title: `${doc.title} · ${t.name}`,
+    title: docTitle,
     description: doc.description,
     alternates: handbookAlternates(lang, doc.path),
     openGraph: {
       type: "article",
       url: absoluteUrl(pathname, baseUrl),
-      title: `${doc.title} · ${t.name}`,
+      title: docTitle,
       description: doc.description,
       locale: lang === "en" ? "en_US" : "zh_CN",
+      images: [
+        {
+          url: "/og.png",
+          width: 1731,
+          height: 909,
+          alt: `${siteConfig.name} · ${docTitle}`,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: docTitle,
+      description: doc.description,
+      images: ["/og.png"],
     },
   } satisfies Metadata;
 }
@@ -66,7 +149,7 @@ export function HandbookOverview({ lang }: { lang: HandbookLang }) {
   const content = indexDoc?.content ?? "";
   const headings = extractHeadings(content);
   // The site config title/subtitle is written in the site's own language.
-  const configured = lang === "zh" ? siteConfig.pages.garden : { title: "", subtitle: "" };
+  const configured = lang === siteLang ? siteConfig.pages.garden : { title: "", subtitle: "" };
   const title = configured.title?.trim() || indexDoc?.title || t.name;
   const subtitle = configured.subtitle?.trim() || indexDoc?.description || "";
 
@@ -89,10 +172,10 @@ export function HandbookOverview({ lang }: { lang: HandbookLang }) {
         <ArticleMeasure />
 
         <div className="e-content">
-          <MarkdownArticle content={content} lang={lang} />
+          <MarkdownArticle content={content} lang={lang} fieldTables handbook />
         </div>
 
-        <ArticleReferences references={indexDoc?.references} />
+        <ArticleReferences references={indexDoc?.references} lang={lang} />
 
         {firstDoc ? (
           <nav className="gdoc-pager" aria-label={t.pager}>
@@ -125,7 +208,7 @@ export function HandbookDoc({ lang, doc }: { lang: HandbookLang; doc: GardenDocE
   const componentBadge = COMPONENT_BADGE[doc.path];
 
   return (
-    <main className="column-reading-page garden-doc-page" lang={hreflang(lang)}>
+    <main className={`column-reading-page garden-doc-page${isReferencePath(doc.path) ? " is-reference" : ""}`} lang={hreflang(lang)}>
       <HandbookLangRedirect lang={lang} />
       <GardenDocsNav docs={navItems} currentPath={doc.path} lang={lang} />
 
@@ -146,10 +229,10 @@ export function HandbookDoc({ lang, doc }: { lang: HandbookLang; doc: GardenDocE
         <ArticleMeasure />
 
         <div className="e-content">
-          <MarkdownArticle content={doc.content} lang={lang} />
+          <MarkdownArticle content={doc.content} lang={lang} fieldTables handbook refDemos={isReferencePath(doc.path)} />
         </div>
 
-        <ArticleReferences references={doc.references} />
+        <ArticleReferences references={doc.references} lang={lang} />
 
         <nav className="gdoc-pager" aria-label={t.pager}>
           {prev ? (

package/app/components/MarkdownArticle.tsx

@@ -1,5 +1,5 @@
 import { UiLangProvider } from "./UiLang";
-import { ui, type UiLang } from "../lib/i18n";
+import { siteLang, ui, type UiLang } from "../lib/i18n";
 import { markdownPlugins } from "../lib/markdown-plugins";
 import { remarkA2 } from "../lib/remark-a2.mjs";
 import { remarkLinkCard } from "../lib/remark-link-card.mjs";
@@ -24,6 +24,8 @@ import { CodeCopy } from "./garden/chrome";
 import { CodeDiff } from "./garden/chrome";
 import { GardenBlock } from "./garden/GardenBlock";
 import { GardenFile } from "./garden/GardenFile";
+import { RefDemo } from "./garden/RefDemo";
+import { remarkRefDemos } from "../lib/remark-ref-demos.mjs";
 import { readGardenPayload } from "../lib/remark-garden.mjs";
 import { imageSizes, linkAssets } from "@garden/generated-content";
 import { imageDimensions, lookupImageSize } from "../../ui/garden/image-dims.mjs";
@@ -33,6 +35,8 @@ import { columnRedirects, internalLinkResolver, readRedirects } from "../../ui/g
 import { columnHref, columns, gardenDocHref, gardenDocs, gardenDocsEn, postHref, posts, thoughts } from "../lib/content";
 import { LinkCardRefresh } from "./LinkCardRefresh";
 import { linkHost } from "../../scripts/link-meta-core.mjs";
+import { FaviconProvider, SourceMark } from "./garden/patterns";
+import { rehypeFieldTables } from "../lib/rehype-field-tables.mjs";
 import { cardDate } from "../../ui/garden/card-refresh.mjs";
 import { siteHref } from "../lib/site-href";
 import { codeLanguageLabel, fenceLanguage } from "../../ui/garden/code-language.mjs";
@@ -42,7 +46,7 @@ const sameSite = sameSiteMatcher(siteLinks?.address ?? "", siteLinks?.basePath ?
 
 // Links to other pages of the site render as Link. A link to an old address listed under
 // redirects is rewritten to the page it moved to; a link that lands on no known page stays a plain anchor.
-const internalRoute = internalLinkResolver({
+const siteRoute = internalLinkResolver({
   redirects: [
     ...readRedirects(siteConfig),
     ...columnRedirects({ columns: [...new Set(columns.map((entry) => entry.column).filter(Boolean))].map((slug) => ({ slug })) }),
@@ -60,6 +64,18 @@ const internalRoute = internalLinkResolver({
   format: siteHref,
 });
 
+// The handbook ships with the framework and its links are written without
+// any base path (/garden/…); Link adds the site's own prefix.
+const handbookRoute = internalLinkResolver({
+  redirects: [],
+  routes: [
+    "/garden", "/garden/en",
+    ...gardenDocs.map(gardenDocHref),
+    ...gardenDocsEn.map((doc) => siteHref(`/garden/en/${doc.path}`)),
+  ],
+  format: siteHref,
+});
+
 /** The site's favicon, downloaded at build time; nothing when there is none. */
 function Favicon({ href }: { href: string }) {
   const src = linkAssets?.favicons?.[linkHost(href)];
@@ -211,7 +227,8 @@ const headingText = (children: ReactNode) => {
   return parts.join("");
 };
 
-export function MarkdownArticle({ content, numbering, lang }: { content: string; numbering?: boolean; lang?: UiLang }) {
+export function MarkdownArticle({ content, numbering, lang, fieldTables, refDemos, handbook }: { content: string; numbering?: boolean; lang?: UiLang; fieldTables?: boolean; refDemos?: boolean; handbook?: boolean }) {
+  const internalRoute = handbook ? handbookRoute : siteRoute;
   const t = ui(lang);
   // Optional layer 2: a Worker that refreshes card text. Without it, cards stay as built.
   const cardWorker = content.includes("{card}") ? siteConfig.linkPreview?.worker : undefined;
@@ -255,6 +272,7 @@ export function MarkdownArticle({ content, numbering, lang }: { content: string;
       if (block?.name === "file" && !block.error) return <GardenFile props={(block.props ?? {}) as Record<string, unknown>} lang={lang} />;
       return <GardenBlock dataPayload={payload} />;
     },
+    "garden-refdemo": (props: { children?: ReactNode; "data-name"?: string }) => <RefDemo lang={lang === "en" ? "en" : "zh"} name={props["data-name"]}>{props.children}</RefDemo>,
     "garden-codediff": (props: {
       children?: ReactNode;
       dataDiff?: string;
@@ -271,9 +289,10 @@ export function MarkdownArticle({ content, numbering, lang }: { content: string;
   };
   return (
     <UiLangProvider lang={lang}>
+    <FaviconProvider favicons={linkAssets?.favicons}>
     <div className="markdown-body prose">
       <ReactMarkdown
-        remarkPlugins={[...markdownPlugins, [remarkLinkCard, { sameSite }], [remarkA2, { imageSize: (src: string) => lookupImageSize(imageSizes, src) }]]}
+        remarkPlugins={[...(refDemos ? [remarkRefDemos] : []), ...markdownPlugins, [remarkLinkCard, { sameSite }], [remarkA2, { imageSize: (src: string) => lookupImageSize(imageSizes, src), lang: lang ?? siteLang }]]}
         rehypePlugins={[
           rehypeRaw,
           rehypeKatex,
@@ -281,6 +300,8 @@ export function MarkdownArticle({ content, numbering, lang }: { content: string;
           // Not rehype-autolink-headings "wrap": a heading with a link in it would nest <a> in <a> (React #418).
           [rehypeHeadingAnchors, { className: ["h-anchor"] }],
           rehypeHighlight,
+          // Handbook only: field tables become cards on narrow screens.
+          ...(fieldTables ? [rehypeFieldTables] : []),
         ]}
         components={{
           p: ({ children, ...props }) => {
@@ -312,10 +333,12 @@ export function MarkdownArticle({ content, numbering, lang }: { content: string;
                 href={href}
                 {...domProps}
                 {...(external
-                  ? { className: "ext", target: "_blank", rel: "noopener noreferrer" }
+                  ? { ...(domProps.className ? { className: `ext ${domProps.className}` } : { className: "ext" }), target: "_blank", rel: "noopener noreferrer" }
                   : {})}
               >
-                {external && href ? <WithFavicon href={href}>{children}</WithFavicon> : children}
+                {external && href && /\bg-src-chip\b/u.test(String(domProps.className ?? ""))
+                  ? <><SourceMark href={href} /><span>{children}</span></>
+                  : <>{external && href ? <WithFavicon href={href}>{children}</WithFavicon> : children}</>}
               </a>
             );
           },
@@ -325,7 +348,7 @@ export function MarkdownArticle({ content, numbering, lang }: { content: string;
             return <MarkdownImage {...props} {...dims} style={{ ...props.style, ...dims.style }} />;
           },
           table: ({ children, ...props }) => (
-            <div className="table-wrap" role="region" aria-label={t.tableScroll} tabIndex={0}>
+            <div className={/\bfield-table\b/u.test(String(props.className ?? "")) ? "table-wrap field-wrap" : "table-wrap"} role="region" aria-label={t.tableScroll} tabIndex={0}>
               <table {...props}>{children}</table>
             </div>
           ),
@@ -361,6 +384,7 @@ export function MarkdownArticle({ content, numbering, lang }: { content: string;
       </ReactMarkdown>
       {cardWorker ? <LinkCardRefresh endpoint={cardWorker} /> : null}
     </div>
+    </FaviconProvider>
     </UiLangProvider>
   );
 }

package/app/components/MermaidDiagram.tsx

@@ -25,10 +25,11 @@ function renderMermaid(source: string, id: string) {
       themeVariables: {
         darkMode: dark,
         background: token("--paper"),
-        primaryColor: token("--card"),
-        primaryBorderColor: token("--rule-strong"),
+        primaryColor: token("--paper"),
+        primaryBorderColor: token("--ink"),
         primaryTextColor: token("--ink"),
-        lineColor: token("--muted"),
+        textColor: token("--ink"),
+        lineColor: token("--ink"),
         secondaryColor: token("--well"),
         tertiaryColor: token("--well"),
         fontSize: "14px",

package/app/components/SiteChrome.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { usePathname } from "next/navigation";
-import { routeLang, ui } from "../lib/i18n";
+import { inAppPath, isHandbookPath, routeLang, ui } from "../lib/i18n";
 import { SiteFooter } from "./SiteFooter";
 import { SiteHeader } from "./SiteHeader";
 
@@ -14,14 +14,14 @@ export function SiteChrome({ children }: { children: React.ReactNode }) {
       {ui(lang).skipToContent}
     </a>
   );
-  if (pathname?.startsWith("/admin")) return <>{skip}{children}</>;
+  if (inAppPath(pathname).startsWith("/admin")) return <>{skip}{children}</>;
 
   return (
     <>
       {skip}
       <SiteHeader />
       <div id="main-content">{children}</div>
-      <SiteFooter docs={pathname?.startsWith("/garden") ?? false} lang={lang} />
+      <SiteFooter docs={isHandbookPath(pathname)} lang={lang} />
     </>
   );
 }

package/app/components/SiteFooter.tsx

@@ -23,7 +23,7 @@ export function SiteFooter({ docs = false, lang }: { docs?: boolean; lang?: UiLa
             <GithubLogo size={16} aria-hidden="true" />
             GitHub
           </a>
-          <a href="/rss.xml">
+          <a href={`${(process.env.NEXT_PUBLIC_BASE_PATH ?? "").replace(/\/+$/u, "")}/rss.xml`}>
             <Rss size={16} aria-hidden="true" />
             RSS
           </a>

package/app/components/SiteHeader.tsx

@@ -17,7 +17,7 @@ import { createSearch } from "../../ui/garden/search-match.mjs";
 import { cropMatchedText, highlightParts } from "../../ui/garden/search-preview.mjs";
 import { resolveDark, themeSwitchProps } from "../../ui/garden/theme.mjs";
 import { SITE_NAV, isCurrentNav } from "../../ui/garden/site-nav.mjs";
-import { routeLang, ui } from "../lib/i18n";
+import { isHandbookPath, routeLang, ui } from "../lib/i18n";
 import { HandbookLangSwitch } from "./HandbookLangSwitch";
 import { createIdbStore, loadFullIndex, saveDataOn, whenIdleAfterLoad } from "../../ui/garden/search-full.mjs";
 import { siteConfig } from "../site.config";
@@ -192,7 +192,12 @@ export function SiteHeader() {
   useEffect(() => {
     const system = window.matchMedia("(prefers-color-scheme: dark)");
     const apply = () => {
-      const stored = window.localStorage.getItem("theme");
+      let stored: string | null = null;
+      try {
+        stored = window.localStorage.getItem("theme");
+      } catch {
+        // Storage blocked (cookies off, opaque origin): follow the system.
+      }
       const useDark = resolveDark(stored, system.matches);
       document.documentElement.dataset.theme = useDark ? "dark" : "light";
       setDark(useDark);
@@ -298,7 +303,11 @@ export function SiteHeader() {
     const next = !dark;
     setDark(next);
     document.documentElement.dataset.theme = next ? "dark" : "light";
-    window.localStorage.setItem("theme", next ? "dark" : "light");
+    try {
+      window.localStorage.setItem("theme", next ? "dark" : "light");
+    } catch {
+      // Storage blocked: the choice lasts for this page only.
+    }
   };
 
   const current = (href: string) => isCurrentNav(pathname, href);
@@ -338,7 +347,7 @@ export function SiteHeader() {
                 <path d="M13.3 13.3 17 17" />
               </svg>
             </button>
-            {pathname?.startsWith("/garden") ? <HandbookLangSwitch /> : null}
+            {isHandbookPath(pathname) ? <HandbookLangSwitch /> : null}
             <button className="sh-icon sh-theme" type="button" onClick={toggleTheme} aria-label={dark ? t.toLight : t.toDark}>
               <svg className="i-moon" viewBox="0 0 20 20" aria-hidden="true">
                 <path d="M16.5 12.2A6.8 6.8 0 0 1 7.8 3.5a6.8 6.8 0 1 0 8.7 8.7Z" />

package/app/components/ThoughtCard.tsx

@@ -15,6 +15,7 @@ import {
 import { githubUrl, siteConfig } from "../site.config";
 import { MarkdownArticle } from "./MarkdownArticle";
 import { siteHref } from "../lib/site-href";
+import { siteLang, ui } from "../lib/i18n";
 
 const icons = {
   image: ImageSquare,
@@ -66,11 +67,12 @@ export function ThoughtCard({
   const isMixed = media.length > 1;
   const Icon = isMixed ? SquaresFour : icons[thought.mediaType ?? "text"];
   const mediaGroups = groupMedia(media);
+  const t = ui();
 
   return (
     <article id={thought.slug} className="thought-card h-entry">
       <Link className="u-url sr-only" href={siteHref(`/thoughts/${thought.slug}`)}>
-        {thought.title} 永久链接
+        {siteLang === "en" ? t.permalinkLabel(thought.title) : <>{thought.title} 永久链接</>}
       </Link>
       <a
         className="p-author h-card sr-only"
@@ -83,16 +85,16 @@ export function ThoughtCard({
         <span className="thought-kind">
           <Icon size={16} />
           {isMixed
-            ? `混合记录 · ${media.length} 个附件`
+            ? t.thoughtMixedLabel(media.length)
             : thought.mediaType === "image"
-            ? "一张照片"
+            ? t.thoughtImageLabel
             : thought.mediaType === "audio"
-              ? "一段声音"
+              ? t.thoughtAudioLabel
               : thought.mediaType === "video"
-                ? "一段影像"
+                ? t.thoughtVideoLabel
                 : thought.mediaType === "link"
-                  ? "一个链接"
-                  : "随想"}
+                  ? t.thoughtLinkLabel
+                  : t.thoughtTextLabel}
         </span>
         <time className="dt-published" dateTime={thought.date}>
           {formatDate(thought.date, true)}
@@ -112,7 +114,7 @@ export function ThoughtCard({
                 <div
                   className={`thought-gallery thought-gallery-${Math.min(group.items.length, 3)}`}
                   key={`images-${groupIndex}`}
-                  aria-label={`${group.items.length} 张照片`}
+                  aria-label={t.thoughtGalleryLabel(group.items.length)}
                 >
                   {group.items.map((item, index) => (
                     // eslint-disable-next-line @next/next/no-img-element
@@ -120,7 +122,7 @@ export function ThoughtCard({
                       key={`${item.src}-${index}`}
                       className="thought-image u-photo"
                       src={item.src}
-                      alt={item.alt ?? `${thought.title} · 照片 ${index + 1}`}
+                      alt={item.alt ?? t.thoughtPhotoAlt(thought.title, index + 1)}
                       loading="lazy"
                     />
                   ))}
@@ -132,14 +134,14 @@ export function ThoughtCard({
                 <div className="audio-embed" key={`${group.item.src}-${groupIndex}`}>
                   <MusicNotes size={28} />
                   <div>
-                    <strong>{group.item.title ?? `当前播放 · ${thought.title}`}</strong>
+                    <strong>{group.item.title ?? t.thoughtNowPlaying(thought.title)}</strong>
                     <audio
                       className="u-audio"
                       controls
                       preload="none"
                       src={group.item.src}
                     >
-                      你的浏览器不支持音频播放。
+                      {t.audioFallback}
                     </audio>
                   </div>
                 </div>
@@ -194,14 +196,14 @@ export function ThoughtCard({
         <div className="audio-embed">
           <MusicNotes size={28} />
           <div>
-            <strong>当前播放 · {thought.title}</strong>
+            <strong>{t.thoughtNowPlaying(thought.title)}</strong>
             <audio
               className="u-audio"
               controls
               preload="none"
               src={thought.media}
             >
-              你的浏览器不支持音频播放。
+              {t.audioFallback}
             </audio>
           </div>
         </div>
@@ -234,7 +236,7 @@ export function ThoughtCard({
 
       {showPermalink && (
         <Link className="thought-permalink" href={siteHref(`/thoughts/${thought.slug}`)}>
-          永久链接
+          {t.thoughtPermalinkShort}
           <ArrowUpRight size={15} />
         </Link>
       )}

package/app/components/UiBlock.tsx

@@ -1,9 +1,10 @@
 import { readPayload } from "../../ui/core/compile.mjs";
 import { IntentCard, UiErrorCard, UiFigure, type Diagnostic, type UiPayload } from "../../ui/react";
+import { ui, type UiLang } from "../lib/i18n";
 
-export function UiBlock({ source }: { source: string }) {
+export function UiBlock({ source, lang }: { source: string; lang?: UiLang }) {
   const payload = readPayload(source) as UiPayload | null;
-  if (!payload) return <p className="external-embed-error">这块交互的数据损坏了，请重新运行 garden sync。</p>;
+  if (!payload) return <p className="external-embed-error">{ui(lang).uiBlockCorrupt}</p>;
   return <UiFigure payload={payload} />;
 }
 

package/app/components/Webmentions.tsx

@@ -8,7 +8,7 @@ import {
   Quotes,
   Repeat,
 } from "@phosphor-icons/react";
-import { ui } from "../lib/i18n";
+import { siteLang, ui } from "../lib/i18n";
 
 type WebmentionEntry = {
   author?: {
@@ -102,26 +102,26 @@ export function Webmentions({
       {!endpoint && (
         <div className="integration-notice">
           <Quotes size={20} weight="fill" />
-          <p>接收与展示代码已经就绪，注册正式域名后即可开始收集回应。</p>
+          <p>{ui().webmentionIdleNote}</p>
         </div>
       )}
 
       {endpoint && loading && (
         <p className="integration-status" role="status">
-          正在读取开放网络回应…
+          {ui().webmentionLoading}
         </p>
       )}
 
       {endpoint && failed && (
         <p className="integration-status" role="status">
-          暂时无法读取回应，稍后会自动恢复。
+          {ui().webmentionUnavailable}
         </p>
       )}
 
       {endpoint && !loading && !failed && entries.length === 0 && (
         <div className="integration-notice">
           <Quotes size={20} weight="fill" />
-          <p>还没有站外回应。任何链接到这篇文章的网站都可以向它发送 Webmention。</p>
+          <p>{ui().webmentionEmpty}</p>
         </div>
       )}
 
@@ -130,15 +130,15 @@ export function Webmentions({
           <span>
             <Heart size={16} weight="fill" />
             <Repeat size={16} />
-            {reactions.length} 个喜欢、转发或收藏
+            {ui().webmentionReactionCount(reactions.length)}
           </span>
-          <div className="webmention-facepile" aria-label="回应者">
+          <div className="webmention-facepile" aria-label={ui().webmentionRespondersLabel}>
             {reactions.slice(0, 16).map((entry, index) => (
               <a
                 href={entry.url}
                 target="_blank"
                 rel="noopener noreferrer"
-                aria-label={entry.author?.name ?? "查看站外回应"}
+                aria-label={entry.author?.name ?? ui().webmentionViewResponse}
                 key={`${entry.url}-${index}`}
               >
                 {entry.author?.photo ? (
@@ -165,10 +165,10 @@ export function Webmentions({
             return (
               <article key={`${entry.url}-${index}`}>
                 <header>
-                  <strong>{entry.author?.name ?? "开放网络访客"}</strong>
+                  <strong>{entry.author?.name ?? ui().webmentionAuthorFallback}</strong>
                   {received && (
                     <time dateTime={received}>
-                      {new Intl.DateTimeFormat("zh-CN", {
+                      {new Intl.DateTimeFormat(siteLang === "en" ? "en-US" : "zh-CN", {
                         year: "numeric",
                         month: "2-digit",
                         day: "2-digit",
@@ -182,7 +182,7 @@ export function Webmentions({
                   target="_blank"
                   rel="noopener noreferrer"
                 >
-                  查看原文
+                  {ui().webmentionViewOriginal}
                   <ArrowSquareOut size={14} />
                 </a>
               </article>

package/app/components/WidgetChart.tsx

@@ -3,6 +3,7 @@
 import { ArrowUpRight, Browser, CaretDown, FilePdf } from "@phosphor-icons/react";
 import { useEffect, useRef, useState } from "react";
 import { parse } from "yaml";
+import { ui, type UiLang } from "../lib/i18n";
 
 type WidgetKind = "chart" | "html" | "pdf";
 
@@ -79,7 +80,8 @@ function DocumentThumb({ kind }: { kind: "html" | "pdf" }) {
   );
 }
 
-export function WidgetChart({ source }: { source: string }) {
+export function WidgetChart({ source, lang }: { source: string; lang?: UiLang }) {
+  const s = ui(lang);
   const data = readWidgetData(source);
   const src = data?.src;
   const kind = data?.kind;
@@ -132,7 +134,7 @@ export function WidgetChart({ source }: { source: string }) {
   if (!data) {
     return (
       <p className="external-embed-error">
-        无法解析这个嵌入块。请在与 Markdown 同名的目录里放一份 .html 或 .pdf，并在围栏中写 src 与 caption。
+        {s.widgetParseError}
       </p>
     );
   }
@@ -156,7 +158,7 @@ export function WidgetChart({ source }: { source: string }) {
         <figcaption>
           <span>{data.caption}</span>
           <a href={data.src} target="_blank" rel="noopener noreferrer">
-            打开页面
+            {s.widgetOpenPage}
           </a>
         </figcaption>
         <noscript>
@@ -167,8 +169,8 @@ export function WidgetChart({ source }: { source: string }) {
   }
 
   const Icon = data.kind === "pdf" ? FilePdf : Browser;
-  const kindLabel = data.kind === "pdf" ? "PDF" : "页面";
-  const openLabel = data.kind === "pdf" ? "打开 PDF" : "打开页面";
+  const kindLabel = data.kind === "pdf" ? "PDF" : s.widgetPageKind;
+  const openLabel = data.kind === "pdf" ? s.widgetOpenPdf : s.widgetOpenPage;
 
   return (
     <figure
@@ -197,7 +199,7 @@ export function WidgetChart({ source }: { source: string }) {
             <strong>{data.caption}</strong>
           </span>
           <span className="garden-doc-action">
-            {expanded ? "收起" : "展开"}
+            {expanded ? s.widgetCollapse : s.widgetExpand}
             <CaretDown size={14} className="garden-doc-caret" />
           </span>
         </button>

package/app/components/garden/FilePreview.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useId, useRef, useState, type FocusEvent, type MouseEvent } from "react";
 import { createPortal } from "react-dom";
-import { ui, type UiLang } from "../../lib/i18n";
+import { siteLang, ui, type UiLang } from "../../lib/i18n";
 import { previewBody, previewFrameProps } from "../../../ui/garden/file-block.mjs";
 import { ActionGlyph, FileGlyph } from "./file-icons";
 
@@ -119,7 +119,7 @@ export function FilePreview({ file, compact, lang }: { file: PreviewFile; compac
     if (file.preview === "md" && loaded.state !== "ready" && loaded.state !== "loading") load();
   };
 
-  const frame = previewFrameProps(file) as { src: string; title: string; referrerPolicy: "no-referrer"; sandbox?: string } | null;
+  const frame = previewFrameProps(file, lang ?? siteLang) as { src: string; title: string; referrerPolicy: "no-referrer"; sandbox?: string } | null;
   const drawer = open
     ? createPortal(
         <div className="gf-layer">