hd-garden 0.8.0 → 0.8.2

package/app/lib/remark-a2.mjs

@@ -9,6 +9,14 @@ const ALERT_TITLE = {
   caution: "注意",
 };
 
+const ALERT_TITLE_EN = {
+  note: "Note",
+  tip: "Tip",
+  important: "Important",
+  warning: "Warning",
+  caution: "Caution",
+};
+
 const LEGACY_KIND = {
   info: "note",
   success: "tip",
@@ -47,13 +55,14 @@ function isBlankParagraph(node) {
   return node?.type === "paragraph" && toString(node).trim() === "" && meaningfulChildren(node).length === 0;
 }
 
-function alertTitle(kind, label) {
+function alertTitle(kind, label, lang = "zh") {
+  const titles = lang === "en" ? ALERT_TITLE_EN : ALERT_TITLE;
   return {
     type: "paragraph",
     data: { hName: "p", hProperties: { className: ["markdown-alert-title"] } },
     children: [
       { type: "html", value: ALERT_ICON[kind] },
-      { type: "text", value: label || ALERT_TITLE[kind] },
+      { type: "text", value: label || titles[kind] },
     ],
   };
 }
@@ -136,7 +145,7 @@ function strongOnlyText(node) {
   return toString(children[0]).trim();
 }
 
-function rewriteAlert(node) {
+function rewriteAlert(node, lang = "zh") {
   const children = node.children ?? [];
   const gfm = gfmAlert(children[0]);
   const legacy = gfm ? null : legacyAlert(children[0]);
@@ -156,7 +165,7 @@ function rewriteAlert(node) {
     }
   }
   while (rest.length && isBlankParagraph(rest[0])) rest.shift();
-  node.children = [alertTitle(kind, label), ...rest];
+  node.children = [alertTitle(kind, label, lang), ...rest];
   node.data ??= {};
   node.data.hProperties ??= {};
   const existing = node.data.hProperties.className;
@@ -203,17 +212,18 @@ function asFigure(node, imageSize) {
   };
 }
 
-function walk(node, imageSize) {
+function walk(node, imageSize, lang = "zh") {
   if (!node || typeof node !== "object" || !Array.isArray(node.children)) return;
-  if (node.type === "blockquote") rewriteAlert(node);
+  if (node.type === "blockquote") rewriteAlert(node, lang);
   node.children = node.children.map((child) => asFigure(child, imageSize) ?? child);
-  for (const child of node.children) walk(child, imageSize);
+  for (const child of node.children) walk(child, imageSize, lang);
 }
 
 /** Demo alert cards and captioned figures. Article rendering only. */
 export function remarkA2(options = {}) {
   const imageSize = typeof options?.imageSize === "function" ? options.imageSize : () => null;
+  const lang = options?.lang === "en" ? "en" : "zh";
   return (tree) => {
-    walk(tree, imageSize);
+    walk(tree, imageSize, lang);
   };
 }

package/app/lib/remark-link-card.mjs

@@ -76,10 +76,32 @@ function walk(parent, source, sameSite) {
   }
 }
 
+const SOURCE_MARKER = "{source}";
+
+/**
+ * `[research.google](https://research.google/...){source}` keeps the link in the
+ * sentence and draws it as a small source chip (site icon + the link text).
+ */
+function markSources(parent, source) {
+  const children = parent.children ?? [];
+  for (let index = 0; index < children.length; index += 1) {
+    const node = children[index];
+    if (node.type === "code" || node.type === "inlineCode" || node.type === "html") continue;
+    const next = children[index + 1];
+    if (node.type === "link" && next?.type === "text" && next.value.startsWith(SOURCE_MARKER) && isHttp(node.url) && writtenAsLink(node, source)) {
+      next.value = next.value.slice(SOURCE_MARKER.length);
+      node.data = { ...node.data, hProperties: { ...node.data?.hProperties, className: ["g-src-chip"], dataSource: "true" } };
+    }
+    if (node.children) markSources(node, source);
+  }
+  parent.children = children.filter((child) => !(child.type === "text" && child.value === ""));
+}
+
 export function remarkLinkCard(options = {}) {
   const sameSite = typeof options?.sameSite === "function" ? options.sameSite : () => null;
   return (tree, file) => {
     const source = typeof file?.value === "string" ? file.value : String(file?.value ?? "");
+    markSources(tree, source);
     walk(tree, source, sameSite);
   };
 }

package/app/lib/remark-ref-demos.mjs

@@ -0,0 +1,42 @@
+import { classifyFence } from "../../ui/garden/parse.mjs";
+
+/**
+ * Component reference pages: every garden fence becomes a demo that shows its
+ * source and the real rendered block side by side. Runs before remarkGarden,
+ * which then turns the second child into the block.
+ */
+/**
+ * The whole fence as the author writes it: info line (with any `#id`), the
+ * body, and the closing marker, so copying it reproduces the block. A `garden
+ * file` body was replaced by built `resolved:` data; show the original YAML.
+ */
+function fenceSource(child, block) {
+  const resolvedSource = block?.props?.resolved?.source;
+  const body = typeof resolvedSource === "string" ? resolvedSource : String(child.value ?? "");
+  const info = `${child.lang || ""} ${child.meta || ""}`.trim();
+  const longest = Math.max(2, ...(body.match(/`{3,}/gu) || []).map((run) => run.length));
+  const marker = "`".repeat(longest + 1);
+  return `${marker}${info}\n${body}\n${marker}`;
+}
+
+export function remarkRefDemos() {
+  return (tree) => {
+    const walk = (node) => {
+      if (!Array.isArray(node?.children)) return;
+      node.children = node.children.map((child) => {
+        walk(child);
+        if (child?.type !== "code") return child;
+        const lang = String(child.lang || "").toLowerCase();
+        const meta = String(child.meta || "");
+        const kind = classifyFence({ lang, meta, info: `${child.lang || ""} ${meta}`.trim(), body: child.value });
+        if (kind.kind !== "garden" || !kind.block?.name) return child;
+        return {
+          type: "refDemo",
+          data: { hName: "garden-refdemo", hProperties: { dataName: kind.block.name } },
+          children: [{ type: "code", lang: "markdown", meta: null, value: fenceSource(child, kind.block) }, child],
+        };
+      });
+    };
+    walk(tree);
+  };
+}

package/app/lib/tag-filter.ts

@@ -153,7 +153,14 @@ export function tagFilterHref(selected: readonly string[], pathname = "/blog") {
 export const ARTICLE_TAG_LIST = "/blog/";
 export const articleTagHref = (tag: string) => tagFilterHref([tag], ARTICLE_TAG_LIST);
 
-/** 「共 N 篇」, or 「2 个标签，共 5 篇」 with a selection. */
-export function tagSummary(selectedCount: number, resultCount: number) {
+/** 「共 N 篇」, or 「2 个标签，共 5 篇」 with a selection (or English equivalent when lang === "en"). */
+export function tagSummary(selectedCount: number, resultCount: number, lang: "zh" | "en" = "zh") {
+  if (lang === "en") {
+    const postsWord = resultCount === 1 ? "post" : "posts";
+    if (!selectedCount) return `${resultCount} ${postsWord}`;
+    const tagsWord = selectedCount === 1 ? "tag" : "tags";
+    return `${selectedCount} ${tagsWord}, ${resultCount} ${postsWord}`;
+  }
   return selectedCount ? `${selectedCount} 个标签，共 ${resultCount} 篇` : `共 ${resultCount} 篇`;
 }
+

package/app/not-found.tsx

@@ -1,15 +1,43 @@
+"use client";
+
 import Link from "next/link";
-import { ui } from "./lib/i18n";
+import { usePathname } from "next/navigation";
+import { useLayoutEffect } from "react";
+import { htmlLang, routeLang, ui } from "./lib/i18n";
+import { siteConfig } from "./site.config";
 
 export default function NotFound() {
-  const t = ui();
+  const pathname = usePathname();
+  const lang = routeLang(pathname);
+  const t = ui(lang);
+  const fullTitle = `${t.notFoundTitle} · ${siteConfig.name}`;
+  const ogLocale = lang === "en" ? "en_US" : "zh_CN";
+
+  useLayoutEffect(() => {
+    document.documentElement.lang = htmlLang(lang);
+    document.title = fullTitle;
+    const setMeta = (attr: string, key: string, value: string) => {
+      const el = document.querySelector<HTMLMetaElement>(`meta[${attr}="${key}"]`);
+      if (el) el.content = value;
+    };
+    setMeta("name", "description", t.notFoundDeck);
+    setMeta("property", "og:title", fullTitle);
+    setMeta("property", "og:description", t.notFoundDeck);
+    setMeta("property", "og:locale", ogLocale);
+    setMeta("property", "og:image:alt", fullTitle);
+    setMeta("name", "twitter:title", fullTitle);
+    setMeta("name", "twitter:description", t.notFoundDeck);
+  }, [fullTitle, lang, ogLocale, t.notFoundDeck]);
+
   return (
-    <main className="page-shell">
+    <main className="sh-main" id="garden-not-found">
       <header className="sh-head">
         <h1>{t.notFoundTitle}</h1>
         <p className="sh-deck">{t.notFoundDeck}</p>
       </header>
-      <p><Link href="/">{t.backHome}</Link></p>
+      <p>
+        <Link href="/">{t.backHome}</Link>
+      </p>
     </main>
   );
 }

package/app/page.tsx

@@ -1,7 +1,8 @@
 import Link from "next/link";
 import { CoverImage } from "./components/CoverImage";
-import { homeListDate } from "./lib/a2-meta";
-import { columns, formatDate, postHref, posts } from "./lib/content";
+import { fullListDate, homeListDate } from "./lib/a2-meta";
+import { columnStatusLabel, siteLang, ui } from "./lib/i18n";
+import { columns, postHref, posts } from "./lib/content";
 import { githubUrl, siteConfig } from "./site.config";
 import { siteHref } from "./lib/site-href";
 import { pageAlternates } from "./lib/page-alternates";
@@ -24,6 +25,7 @@ function day(value: string) {
 }
 
 export default function Home() {
+  const t = ui();
   const recentAll = [...posts].sort((left, right) => Date.parse(right.date) - Date.parse(left.date));
   const feature = recentAll[0];
   const recent = recentAll.filter((post) => post.path !== feature?.path);
@@ -43,9 +45,9 @@ export default function Home() {
         <h1>{siteConfig.pages.home.title}</h1>
         <p>{siteConfig.pages.home.subtitle || siteConfig.description}</p>
         <div className="links">
-          <Link href={siteHref("/about")}>关于我</Link>
+          <Link href={siteHref("/about")}>{t.homeAbout}</Link>
           <a href={githubUrl} rel="me">GitHub</a>
-          <a href="/rss.xml">RSS 订阅</a>
+          <a href={`${(process.env.NEXT_PUBLIC_BASE_PATH ?? "").replace(/\/+$/u, "")}/rss.xml`}>{t.homeRss}</a>
         </div>
       </section>
 
@@ -58,8 +60,8 @@ export default function Home() {
           ) : null}
           <div>
             <p className="kicker">
-              <span>最新文章</span>
-              <time className="num" dateTime={day(feature.date)}>{formatDate(feature.date)}</time>
+              <span>{t.homeLatestBadge}</span>
+              <time className="num" dateTime={day(feature.date)}>{fullListDate(feature.date, siteLang)}</time>
             </p>
             <h2 id="ft"><Link href={postHref(feature)}>{feature.title}</Link></h2>
             {feature.description ? <p>{feature.description}</p> : null}
@@ -73,13 +75,14 @@ export default function Home() {
       <div className="sh-home-grid">
         <section className="sh-section" aria-labelledby="h-recent">
           <div className="sh-sec-head">
-            <h2 id="h-recent">最近更新</h2>
-            <Link className="sh-more" href={siteHref("/blog")}>全部 {posts.length} 篇</Link>
+            <h2 id="h-recent">{t.homeRecentHeading}</h2>
+            {posts.length > 0 ? <Link className="sh-more" href={siteHref("/blog")}>{t.homeAllPosts(posts.length)}</Link> : null}
           </div>
+          {posts.length === 0 ? <p className="sh-empty">{t.emptyPostsTitle}</p> : null}
           <ol className="sh-rows">
             {recent.slice(0, 6).map((post) => (
               <li className="sh-row" key={post.path}>
-                <time className="num" dateTime={day(post.date)}>{homeListDate(post.date)}</time>
+                <time className="num" dateTime={day(post.date)}>{homeListDate(post.date, undefined, siteLang)}</time>
                 <h3><Link href={postHref(post)}>{post.title}</Link></h3>
                 {post.description ? <p>{post.description}</p> : null}
               </li>
@@ -88,12 +91,12 @@ export default function Home() {
         </section>
         {pinned.length > 0 ? (
           <section className="sh-section" aria-labelledby="h-pin">
-            <div className="sh-sec-head section-heading accent-heading"><h2 id="h-pin">置顶</h2></div>
+            <div className="sh-sec-head section-heading accent-heading"><h2 id="h-pin">{t.homePinned}</h2></div>
             <ul className="sh-side-list">
               {pinned.map((post) => (
                 <li key={post.path}>
                   <Link href={postHref(post)}>{post.title}</Link>
-                  <span><time className="num" dateTime={day(post.date)}>{formatDate(post.date)}</time></span>
+                  <span><time className="num" dateTime={day(post.date)}>{fullListDate(post.date, siteLang)}</time></span>
                 </li>
               ))}
             </ul>
@@ -104,8 +107,8 @@ export default function Home() {
       {columns[0] && series.length ? (
         <section className="sh-section" aria-labelledby="h-cols">
           <div className="sh-sec-head">
-            <h2 id="h-cols">专栏</h2>
-            <Link className="sh-more" href={siteHref("/columns")}>全部专栏</Link>
+            <h2 id="h-cols">{t.homeColumns}</h2>
+            <Link className="sh-more" href={siteHref("/columns")}>{t.homeAllColumns}</Link>
           </div>
           <div className="sh-cols">
             {series.map(([slug, entries]) => {
@@ -120,7 +123,7 @@ export default function Home() {
                   </div>
                   <div className="body">
                     <h3><Link href={siteHref(`/columns/#${slug}`)}>{first.columnTitle}</Link></h3>
-                    <p className="count">{entries.length} 篇，{first.columnStatus ?? "持续更新"}</p>
+                    <p className="count">{t.columnCount(entries.length, columnStatusLabel(first.columnStatus))}</p>
                     <p>{first.columnDescription ?? first.description}</p>
                   </div>
                 </article>

package/app/rss.xml/route.ts

@@ -5,6 +5,7 @@ import { configuredSiteUrl, siteDescription, siteName } from "../lib/site";
 import { contentForFeed } from "../../ui/core/transform.mjs";
 import { stripCardMarkers } from "../../ui/garden/markdown-links.mjs";
 import { withTrailingSlash } from "../../ui/garden/site-href.mjs";
+import { htmlLang, siteLang } from "../lib/i18n";
 
 const escapeXml = (value: string) =>
   value
@@ -72,7 +73,7 @@ export async function GET() {
     <link>${origin}</link>
     <atom:link href="${origin}/rss.xml" rel="self" type="application/rss+xml" />
     <description>${escapeXml(siteDescription)}</description>
-    <language>zh-CN</language>
+    <language>${htmlLang(siteLang)}</language>
     <lastBuildDate>${lastBuildDate}</lastBuildDate>
     ${items}
   </channel>