hd-garden 0.7.0 → 0.8.1

package/app/components/GardenContentGuide.tsx

@@ -32,7 +32,15 @@ cover: writing/first-post.jpg
 
 ## 一个小标题
 
-可以继续插入图片、代码、公式和 Mermaid 图表。`;
+可以继续插入图片、代码、公式、Mermaid 图表，或用 \`garden\` 围栏写组件：
+
+\`\`\`garden list
+items:
+  - icon: idea
+    text: 记下为什么重新开始写
+  - icon: book
+    text: 先把旧笔记整理成目录
+\`\`\``;
 
 const thoughtSource = `---
 title: 雨后的散步
@@ -53,7 +61,7 @@ const columnSource = `columns:
   - slug: writing-system
     title: 写作系统
     description: 记录从选题到发布的完整写作过程。
-    status: 持续更新
+    status: ongoing
     cover: /images/columns/writing-system.webp
     coverAlt: 桌面上的笔记本与钢笔
     posts:

package/app/components/GardenDocsNav.tsx

@@ -6,18 +6,28 @@ import { BookOpenText, CaretRight, List, X } from "@phosphor-icons/react";
 import {
   COMPONENT_BADGE,
   groupHandbookDocs,
+  HANDBOOK_SECTIONS,
+  HANDBOOK_UI,
   NAV_SHORT_TITLE,
+  REFERENCE_SECTION,
+  isReferencePath,
+  handbookPath,
+  sectionTitle,
   type GardenDocNavItem,
+  type HandbookLang,
 } from "../lib/garden-docs-meta";
 import { siteHref } from "../lib/site-href";
 
 export function GardenDocsNav({
   docs,
   currentPath = "",
+  lang = "zh",
 }: {
   docs: GardenDocNavItem[];
   currentPath?: string;
+  lang?: HandbookLang;
 }) {
+  const t = HANDBOOK_UI[lang];
   const groups = groupHandbookDocs(docs);
   const currentDoc = docs.find((doc) => doc.path === currentPath);
   const currentSection = groups.find((group) =>
@@ -69,7 +79,7 @@ export function GardenDocsNav({
 
   return (
     <>
-      <div className="gdoc-mobile-bar" aria-label="说明书目录栏">
+      <div className="gdoc-mobile-bar" aria-label={t.mobileBar}>
         <button
           ref={triggerRef}
           type="button"
@@ -79,28 +89,28 @@ export function GardenDocsNav({
           onClick={() => setMobileOpen(true)}
         >
           <List size={16} weight="bold" aria-hidden="true" />
-          <span>说明目录</span>
+          <span>{t.sidebarShort}</span>
         </button>
         <a
           className="gdoc-nojs-trigger"
           id={`${drawerId}-open`}
           href={`#${drawerId}`}
-          aria-label="打开说明目录"
+          aria-label={t.openSidebar}
         >
           <List size={16} weight="bold" aria-hidden="true" />
-          <span>说明目录</span>
+          <span>{t.sidebarShort}</span>
         </a>
         <div className="gdoc-mobile-crumb" aria-hidden="true">
-          <span>{currentSection?.title ?? "Garden 使用说明"}</span>
+          <span>{sectionTitle(currentSection, lang) ?? t.name}</span>
           <CaretRight size={12} />
-          <strong>{currentDoc ? (NAV_SHORT_TITLE[currentDoc.path] ?? currentDoc.title) : "总览与快速入口"}</strong>
+          <strong>{currentDoc ? (lang === "en" ? currentDoc.navTitle ?? currentDoc.title : NAV_SHORT_TITLE[currentDoc.path] ?? currentDoc.title) : t.overviewHint}</strong>
         </div>
       </div>
 
       <button
         type="button"
         className="gdoc-backdrop"
-        aria-label="关闭说明目录"
+        aria-label={t.closeSidebar}
         tabIndex={mobileOpen ? 0 : -1}
         data-open={mobileOpen}
         onClick={() => closeMobile(true)}
@@ -109,27 +119,27 @@ export function GardenDocsNav({
       <aside
         id={drawerId}
         className="gdoc-sidebar"
-        aria-label="Garden 使用说明目录"
+        aria-label={t.sidebar}
         data-open={mobileOpen}
       >
         <div className="gdoc-sidebar-head">
           <Link
-            href={siteHref("/garden")}
+            href={siteHref(handbookPath(lang))}
             className="gdoc-overview-link"
             aria-current={isOverview ? "page" : undefined}
             onClick={() => closeMobile(false)}
           >
             <span className="gdoc-overview-mark">
               <BookOpenText size={16} weight="duotone" aria-hidden="true" />
-              <span>Garden 使用说明</span>
+              <span>{t.name}</span>
             </span>
-            <small>总览与快速入口</small>
+            <small>{t.overviewHint}</small>
           </Link>
           <button
             ref={closeRef}
             type="button"
             className="gdoc-mobile-close"
-            aria-label="关闭说明目录"
+            aria-label={t.closeSidebar}
             onClick={() => closeMobile(true)}
           >
             <X size={17} aria-hidden="true" />
@@ -137,35 +147,32 @@ export function GardenDocsNav({
           <a
             className="gdoc-nojs-close"
             href={`#${drawerId}-open`}
-            aria-label="关闭说明目录"
+            aria-label={t.closeSidebar}
           >
             <X size={17} aria-hidden="true" />
           </a>
         </div>
 
-        <nav className="gdoc-nav" aria-label="章节导航">
-          {groups.map((group) => (
+        <nav className="gdoc-nav" aria-label={t.chapters}>
+          {(isReferencePath(currentPath) ? [...groups].sort((a, b) => Number(b.id === REFERENCE_SECTION) - Number(a.id === REFERENCE_SECTION)) : groups).map((group) => (
             <div key={group.id} className="gdoc-nav-group">
-              <div className="gdoc-nav-group-head">
-                <h2>{group.title}</h2>
-                {group.note ? <span>{group.note}</span> : null}
-              </div>
+              <h2 className="gdoc-nav-group-head">{sectionTitle(HANDBOOK_SECTIONS.find((sec) => sec.id === group.id), lang) ?? group.title}</h2>
               <ol className="gdoc-nav-list">
                 {group.items.map((item) => {
                   const active = item.path === currentPath;
                   const badge = COMPONENT_BADGE[item.path];
-                  const label = NAV_SHORT_TITLE[item.path] ?? item.title;
+                  const label = lang === "en" ? item.navTitle ?? item.title : NAV_SHORT_TITLE[item.path] ?? item.title;
                   return (
                     <li key={item.path} className={active ? "is-active" : undefined}>
                       <Link
-                        href={siteHref(`/garden/${item.path}`)}
+                        href={siteHref(handbookPath(lang, item.path))}
                         aria-current={active ? "page" : undefined}
                         onClick={() => closeMobile(false)}
                       >
                         {badge ? (
                           <>
                             <code className="gdoc-comp-pill">{badge}</code>
-                            <span className="gdoc-comp-label">{label}</span>
+                            {group.id === REFERENCE_SECTION ? null : <span className="gdoc-comp-label">{label}</span>}
                           </>
                         ) : (
                           <span>{label}</span>

package/app/components/GiscusComments.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef } from "react";
 
 import type { GiscusConfig } from "../lib/giscus-config";
+import { ui } from "../lib/i18n";
 
 export type { GiscusConfig };
 
@@ -38,7 +39,7 @@ export function GiscusComments({
     script.dataset.emitMetadata = "0";
     script.dataset.inputPosition = "bottom";
     script.dataset.theme = currentGiscusTheme();
-    script.dataset.lang = "zh-CN";
+    script.dataset.lang = ui().giscusLang;
     script.dataset.loading = "lazy";
     container.append(script);
 

package/app/components/GithubLiveOverview.tsx

@@ -8,6 +8,7 @@ import {
   MapPin,
   Users,
 } from "@phosphor-icons/react";
+import { siteLang, ui } from "../lib/i18n";
 
 export type GithubPublicProfile = {
   avatar_url: string;
@@ -70,28 +71,29 @@ export function GithubLiveOverview({
     return () => controller.abort();
   }, [username]);
 
+  const t = ui();
   const displayName = visibleGithubText(profile.name ?? profile.login) || profile.login;
   const profileBio = profile.bio?.trim();
   const signature = statusMessage?.trim() || profileBio;
   const syncLabel = syncState === "synced"
-    ? "本次访问已同步"
+    ? (siteLang === "en" ? t.githubSyncSynced : "本次访问已同步")
     : syncState === "snapshot"
-      ? "暂用发布时快照"
-      : "正在同步当前资料";
+      ? t.githubSyncSnapshot
+      : t.githubSyncSyncing;
 
   return (
     <>
       <header className="github-overview">
         {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img src={profile.avatar_url} alt={`${profile.login} 的 GitHub 头像`} />
+        <img src={profile.avatar_url} alt={t.githubAvatarAlt(profile.login)} />
         <div className="github-identity">
-          <span className="eyebrow" aria-live="polite"><GithubLogo size={17} /> GitHub 公开资料 · {syncLabel}</span>
+          <span className="eyebrow" aria-live="polite"><GithubLogo size={17} />{` ${t.githubOverviewPrefix} · `}{syncLabel}</span>
           <h2>{displayName}</h2>
           {signature && <p>{signature}</p>}
           {profile.location && <span className="github-location"><MapPin size={14} />{profile.location}</span>}
         </div>
         <a href={profile.html_url} target="_blank" rel="noopener noreferrer">
-          查看 GitHub
+          {t.githubViewProfile}
           <ArrowUpRight size={16} />
         </a>
       </header>
@@ -99,7 +101,7 @@ export function GithubLiveOverview({
       <dl className="github-metrics">
         <div>
           <GithubLogo size={21} aria-hidden="true" />
-          <dt>公开仓库</dt>
+          <dt>{t.githubMetricRepos}</dt>
           <dd>{syncState === "synced" || initialLive ? profile.public_repos : "—"}</dd>
         </div>
         <div>
@@ -109,7 +111,7 @@ export function GithubLiveOverview({
         </div>
         <div>
           <GitCommit size={21} aria-hidden="true" />
-          <dt>近 30 天 commits</dt>
+          <dt>{t.githubMetricCommits}</dt>
           <dd>{recentCommits ?? "—"}</dd>
         </div>
       </dl>

package/app/components/GithubProfile.tsx

@@ -4,7 +4,9 @@ import {
   Star,
 } from "@phosphor-icons/react/ssr";
 import { githubUsername } from "../lib/site";
+import { hasRealGithubId } from "../lib/github-id.mjs";
 import { siteConfig } from "../site.config";
+import { ui } from "../lib/i18n";
 import { GithubLiveOverview, type GithubPublicProfile } from "./GithubLiveOverview";
 
 type GithubRepository = {
@@ -93,26 +95,31 @@ async function loadGithubUser(token?: string) {
 }
 
 function activityFromEvent(event: GithubEvent): GithubActivity | null {
+  const t = ui();
   const repository = event.repo.name;
   const repositoryUrl = `https://github.com/${repository}`;
 
   if (event.type === "PushEvent") {
-    return { id: event.id, label: "推送了代码", repository, date: event.created_at, url: `${repositoryUrl}/commits` };
+    return { id: event.id, label: t.githubEventPush, repository, date: event.created_at, url: `${repositoryUrl}/commits` };
   }
   if (event.type === "PullRequestEvent") {
-    const action = event.payload.action === "closed" ? "完成了 Pull Request" : "提交了 Pull Request";
+    const action = event.payload.action === "closed" ? t.githubEventPrClosed : t.githubEventPrOpen;
     return { id: event.id, label: action, repository, date: event.created_at, url: event.payload.pull_request?.html_url ?? repositoryUrl };
   }
   if (event.type === "IssuesEvent") {
-    const action = event.payload.action === "closed" ? "关闭了 Issue" : "参与了 Issue";
+    const action = event.payload.action === "closed" ? t.githubEventIssueClosed : t.githubEventIssueOpen;
     return { id: event.id, label: action, repository, date: event.created_at, url: event.payload.issue?.html_url ?? repositoryUrl };
   }
   if (event.type === "CreateEvent") {
-    const target = event.payload.ref_type === "repository" ? "创建了仓库" : `创建了${event.payload.ref_type === "tag" ? "标签" : "分支"}`;
+    const target = event.payload.ref_type === "repository"
+      ? t.githubEventCreateRepo
+      : event.payload.ref_type === "tag"
+        ? t.githubEventCreateTag
+        : t.githubEventCreateBranch;
     return { id: event.id, label: target, repository, date: event.created_at, url: repositoryUrl };
   }
   if (event.type === "ReleaseEvent") {
-    return { id: event.id, label: "发布了新版本", repository, date: event.created_at, url: event.payload.release?.html_url ?? `${repositoryUrl}/releases` };
+    return { id: event.id, label: t.githubEventRelease, repository, date: event.created_at, url: event.payload.release?.html_url ?? `${repositoryUrl}/releases` };
   }
   return null;
 }
@@ -220,7 +227,7 @@ async function loadGithubGraph(token?: string) {
 }
 
 function formatActivityDate(value: string) {
-  return new Intl.DateTimeFormat("zh-CN", { month: "2-digit", day: "2-digit" }).format(new Date(value));
+  return new Intl.DateTimeFormat(ui().dateLocale, { month: "2-digit", day: "2-digit" }).format(new Date(value));
 }
 
 function contributionLevelClass(level: string) {
@@ -228,6 +235,9 @@ function contributionLevelClass(level: string) {
 }
 
 export async function GithubProfile() {
+  // A new site still has the template id (or none): render the page without a profile and never call the API.
+  if (!hasRealGithubId(githubUsername)) return null;
+  const t = ui();
   const token = process.env.GITHUB_TOKEN;
   const [{ profile, live }, graph, activity] = await Promise.all([
     loadGithubUser(token),
@@ -240,7 +250,7 @@ export async function GithubProfile() {
   const calendarDays = graph?.year.contributionCalendar.weeks.flatMap((week) => week.contributionDays) ?? [];
 
   return (
-    <section className="github-profile" aria-label="GitHub 资料">
+    <section className="github-profile" aria-label={t.githubProfileAria}>
       <GithubLiveOverview
         username={githubUsername}
         initialProfile={profile}
@@ -252,8 +262,8 @@ export async function GithubProfile() {
       <section className="github-pinned" aria-labelledby="github-pinned-title">
         <header>
           <div>
-            <p className="eyebrow">PINNED / 置顶仓库</p>
-            <h3 id="github-pinned-title">正在做的项目</h3>
+            <p className="eyebrow">{t.githubPinnedEyebrow}</p>
+            <h3 id="github-pinned-title">{t.githubPinnedHeading}</h3>
           </div>
           <PushPin size={20} aria-hidden="true" />
         </header>
@@ -262,7 +272,7 @@ export async function GithubProfile() {
             {pinned.map((repository) => (
               <a href={repository.url} target="_blank" rel="noopener noreferrer" key={repository.nameWithOwner}>
                 <strong>{repository.nameWithOwner.split("/").at(-1)}</strong>
-                <p>{repository.description ?? "查看这个公开仓库的代码与最近更新。"}</p>
+                <p>{repository.description ?? t.githubPinnedFallbackDesc}</p>
                 <span>
                   {repository.primaryLanguage && <><i style={{ background: repository.primaryLanguage.color ?? undefined }} />{repository.primaryLanguage.name}</>}
                   <small><Star size={13} weight="fill" />{repository.stargazerCount}</small>
@@ -271,38 +281,38 @@ export async function GithubProfile() {
             ))}
           </div>
         ) : (
-          <p className="github-data-note">配置 GitHub Token 或 author.githubPinned 后，这里会展示置顶仓库。</p>
+          <p className="github-data-note">{t.githubPinnedEmpty}</p>
         )}
       </section>
 
       <section className="github-contributions" aria-labelledby="github-contributions-title">
         <header>
           <div>
-            <p className="eyebrow">CONTRIBUTIONS / 贡献</p>
-            <h3 id="github-contributions-title">过去一年的公开贡献</h3>
+            <p className="eyebrow">{t.githubContribEyebrow}</p>
+            <h3 id="github-contributions-title">{t.githubContribHeading}</h3>
           </div>
-          <strong>{graph ? `${graph.year.contributionCalendar.totalContributions} 次贡献` : "需要 GitHub Token"}</strong>
+          <strong>{graph ? t.githubContribCount(graph.year.contributionCalendar.totalContributions) : t.githubContribNeedToken}</strong>
         </header>
         {calendarDays.length > 0 ? (
-          <div className="github-calendar" role="img" aria-label={`过去一年 ${graph?.year.contributionCalendar.totalContributions ?? 0} 次公开贡献`}>
+          <div className="github-calendar" role="img" aria-label={t.githubContribAria(graph?.year.contributionCalendar.totalContributions ?? 0)}>
             {calendarDays.map((day) => (
               <span
                 className={`github-contribution-day level-${contributionLevelClass(day.contributionLevel)}`}
                 key={day.date}
-                title={`${day.date} · ${day.contributionCount} 次贡献`}
-                aria-label={`${day.date}，${day.contributionCount} 次贡献`}
+                title={t.githubContribDayTitle(day.date, day.contributionCount)}
+                aria-label={t.githubContribDayAria(day.date, day.contributionCount)}
               />
             ))}
           </div>
         ) : (
-          <p className="github-data-note">正式发布时会使用工作流的只读令牌生成贡献热点图。</p>
+          <p className="github-data-note">{t.githubContribEmpty}</p>
         )}
       </section>
 
       <section className="github-activity" aria-labelledby="github-activity-title">
         <header>
-          <p className="eyebrow">CONTRIBUTION ACTIVITY / 最近活动</p>
-          <h3 id="github-activity-title">最近在 GitHub 上做了什么</h3>
+          <p className="eyebrow">{t.githubActivityEyebrow}</p>
+          <h3 id="github-activity-title">{t.githubActivityHeading}</h3>
         </header>
         {activity.length > 0 ? (
           <ol>
@@ -318,7 +328,7 @@ export async function GithubProfile() {
             ))}
           </ol>
         ) : (
-          <p className="github-data-note">GitHub 暂时没有返回最近的公开贡献活动。</p>
+          <p className="github-data-note">{t.githubActivityEmpty}</p>
         )}
       </section>
     </section>

package/app/components/HandbookLangRedirect.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useEffect } from "react";
+import { HANDBOOK_LANG_KEY, type HandbookLang } from "../lib/garden-docs-meta";
+import { swapHandbookLang } from "../lib/handbook-path";
+
+/**
+ * First visit: follow the browser language. Afterwards: follow the reader's
+ * saved choice (set by the 中 / EN switch). Only moves to a page that exists,
+ * which the hreflang link in <head> tells us.
+ */
+export function HandbookLangRedirect({ lang }: { lang: HandbookLang }) {
+  useEffect(() => {
+    let saved: string | null = null;
+    try {
+      saved = localStorage.getItem(HANDBOOK_LANG_KEY);
+    } catch {}
+    const wanted: HandbookLang = saved === "en" || saved === "zh"
+      ? saved
+      : /^en\b/i.test(navigator.language || "") ? "en" : "zh";
+    if (wanted === lang) return;
+    const link = document.querySelector<HTMLLinkElement>(`link[rel="alternate"][hreflang="${wanted === "en" ? "en" : "zh-CN"}"]`);
+    if (!link?.href) return;
+    // The hreflang link says the page exists; the address comes from this one,
+    // so the origin and any basePath stay as they are.
+    const pathname = swapHandbookLang(location.pathname, wanted);
+    if (pathname && pathname !== location.pathname) location.replace(pathname + location.search + location.hash);
+  }, [lang]);
+  return null;
+}

package/app/components/HandbookLangSwitch.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+import { usePathname } from "next/navigation";
+import { HANDBOOK_LANG_KEY, handbookBase, type HandbookLang } from "../lib/garden-docs-meta";
+import { siteHref } from "../lib/site-href";
+import { swapHandbookLang } from "../lib/handbook-path";
+import { siteLang } from "../lib/i18n";
+import { handbookPageLang, handbookSwitchLabel, handbookSwitchTarget, handbookSwitchTitle } from "../lib/handbook-switch.mjs";
+
+const noSubscribe = () => () => {};
+
+/** The counterpart page from the hreflang link in <head>, on this origin. */
+function counterpartHref(target: HandbookLang) {
+  const link = document.querySelector<HTMLLinkElement>(`link[rel="alternate"][hreflang="${target === "en" ? "en" : "zh-CN"}"]`);
+  if (link?.href) return swapHandbookLang(location.pathname, target);
+  // English sites leave hreflang out of <head>; the handbook ships every page in both languages there.
+  if (siteLang === "en") return swapHandbookLang(location.pathname, target);
+  return target === "zh" ? siteHref(`${handbookBase("zh")}/`) : null;
+}
+
+/** 「中 / EN」 in the top bar on handbook pages. Goes to the counterpart page. */
+export function HandbookLangSwitch() {
+  const pathname = usePathname() ?? "";
+  const lang: HandbookLang = handbookPageLang(pathname);
+  const target: HandbookLang = handbookSwitchTarget(lang);
+  const href = useSyncExternalStore(
+    noSubscribe,
+    () => counterpartHref(target),
+    () => null,
+  );
+
+  const remember = () => {
+    try {
+      localStorage.setItem(HANDBOOK_LANG_KEY, target);
+    } catch {}
+  };
+  const label = (
+    <>
+      <span aria-current={lang === "zh" ? "true" : undefined}>中</span>
+      <span aria-hidden="true"> / </span>
+      <span aria-current={lang === "en" ? "true" : undefined}>EN</span>
+    </>
+  );
+  if (!href) {
+    return <span className="sh-lang is-disabled" title={handbookSwitchTitle(lang, siteLang)}>{label}</span>;
+  }
+  return (
+    <a className="sh-lang" href={href} hrefLang={target === "en" ? "en" : "zh-CN"} lang={target === "en" ? "en" : undefined} onClick={remember} aria-label={handbookSwitchLabel(lang)}>
+      {label}
+    </a>
+  );
+}