hd-garden 0.4.1 → 0.5.1

package/app/components/SiteHeader.tsx

@@ -10,11 +10,79 @@ import {
   useState,
   type KeyboardEvent,
 } from "react";
-import Fuse, { type FuseResultMatch } from "fuse.js";
+import type Fuse from "fuse.js";
 import { MagnifyingGlass, X } from "@phosphor-icons/react";
-import { searchRecords } from "../lib/content";
+import { searchFull, searchIndexUrl } from "@garden/site-config";
+import { createSearch } from "../../ui/garden/search-match.mjs";
+import { createIdbStore, loadFullIndex, saveDataOn, whenIdleAfterLoad } from "../../ui/garden/search-full.mjs";
 import { siteConfig } from "../site.config";
 
+/** One entry of /search-index.json: titles, tags, dates and a short excerpt, never the full body. */
+type SearchRecord = {
+  title: string;
+  description: string;
+  section: string;
+  path: string;
+  content: string;
+  tags?: string[];
+  date?: string;
+};
+
+type SearchEngine = { records: SearchRecord[]; fuse: Fuse<SearchRecord> };
+let engineLoad: Promise<SearchEngine> | null = null;
+
+type MatchRange = readonly [number, number];
+type SearchMatch = { key?: string; indices: readonly MatchRange[] };
+type SearchHit = { item: SearchRecord; matches?: readonly SearchMatch[] };
+
+let fullLoad: Promise<Map<string, string>> | null = null;
+
+/**
+ * Every body as plain text. Started in the background after the page has
+ * loaded, or when search opens first; read from IndexedDB when this version
+ * was fetched before.
+ */
+function loadFullText() {
+  const scope = searchFull.url.slice(0, searchFull.url.lastIndexOf("/"));
+  fullLoad ??= loadFullIndex({ url: searchFull.url, hash: searchFull.hash, store: createIdbStore(scope) })
+    .then((docs) => new Map(docs))
+    .catch((error: unknown) => {
+      fullLoad = null;
+      throw error;
+    });
+  return fullLoad;
+}
+
+/** Index and Fuse are fetched together, the first time search is about to open. */
+function loadSearchEngine() {
+  engineLoad ??= Promise.all([
+    fetch(searchIndexUrl).then((response) => {
+      if (!response.ok) throw new Error(`search index ${response.status}`);
+      return response.json() as Promise<SearchRecord[]>;
+    }),
+    import("fuse.js"),
+  ])
+    .then(([records, { default: FuseClass }]) => ({
+      records,
+      fuse: new FuseClass(records, {
+        keys: [
+          { name: "title", weight: 0.5 },
+          { name: "description", weight: 0.3 },
+          { name: "tags", weight: 0.2 },
+          { name: "content", weight: 0.15 },
+        ],
+        threshold: 0.36,
+        ignoreLocation: true,
+        includeMatches: true,
+      }),
+    }))
+    .catch((error) => {
+      engineLoad = null;
+      throw error;
+    });
+  return engineLoad;
+}
+
 const nav = [
   { href: "/blog", label: "文章" },
   { href: "/thoughts", label: "随想" },
@@ -23,10 +91,8 @@ const nav = [
   { href: "/about", label: "关于" },
 ];
 
-type MatchRange = readonly [number, number];
-
 function rangesFor(
-  matches: readonly FuseResultMatch[] | undefined,
+  matches: readonly SearchMatch[] | undefined,
   key: string,
 ): readonly MatchRange[] {
   return matches?.find((match) => match.key === key)?.indices ?? [];
@@ -119,8 +185,8 @@ function cropMatchedText(text: string, ranges: readonly MatchRange[]) {
 }
 
 function searchPreview(
-  item: (typeof searchRecords)[number],
-  matches: readonly FuseResultMatch[] | undefined,
+  item: SearchRecord,
+  matches: readonly SearchMatch[] | undefined,
 ): { text: string; ranges: readonly MatchRange[] } {
   const descriptionRanges = rangesFor(matches, "description");
   if (descriptionRanges.length) {
@@ -147,7 +213,25 @@ export function SiteHeader() {
   const resultRefs = useRef<Array<HTMLAnchorElement | null>>([]);
   const previousFocusRef = useRef<HTMLElement | null>(null);
 
+  const [engine, setEngine] = useState<SearchEngine | null>(null);
+  const [engineFailed, setEngineFailed] = useState(false);
+  const [fullText, setFullText] = useState<Map<string, string> | null>(null);
+  const prefetchSearch = useCallback(() => {
+    loadSearchEngine().then(setEngine, () => setEngineFailed(true));
+  }, []);
+
+  // Full text arrives quietly once the page is done; search upgrades when it lands.
+  useEffect(() => {
+    if (saveDataOn()) return;
+    return whenIdleAfterLoad(() => {
+      loadFullText().then(setFullText, () => {});
+    });
+  }, []);
+
   const openSearch = useCallback(() => {
+    setEngineFailed(false);
+    loadSearchEngine().then(setEngine, () => setEngineFailed(true));
+    loadFullText().then(setFullText, () => {});
     previousFocusRef.current =
       document.activeElement instanceof HTMLElement
         ? document.activeElement
@@ -190,25 +274,14 @@ export function SiteHeader() {
     return () => window.removeEventListener("keydown", onKey);
   }, [closeSearch, openSearch, searchOpen]);
 
-  const fuse = useMemo(
-    () =>
-      new Fuse(searchRecords, {
-        keys: [
-          { name: "title", weight: 0.5 },
-          { name: "description", weight: 0.3 },
-          { name: "content", weight: 0.15 },
-          { name: "topic", weight: 0.05 },
-        ],
-        threshold: 0.36,
-        ignoreLocation: true,
-        includeMatches: true,
-      }),
-    [],
-  );
-
-  const results = query.trim()
-    ? fuse.search(query).slice(0, 6)
-    : searchRecords.slice(0, 5).map((item) => ({ item, matches: [] }));
+  // Excerpts first, full text once it is here. Typos fall back to Fuse's fuzzy match.
+  const matcher = useMemo(() => (engine ? createSearch(engine.records, fullText) : null), [engine, fullText]);
+  const results: SearchHit[] = useMemo(() => {
+    if (!engine || !matcher) return [];
+    if (!query.trim()) return engine.records.slice(0, 5).map((item) => ({ item, matches: [] }));
+    const exact = matcher.search(query, 6) as unknown as SearchHit[];
+    return exact.length ? exact : engine.fuse.search(query).slice(0, 6);
+  }, [engine, matcher, query]);
 
   useEffect(() => {
     if (!searchOpen) return;
@@ -294,7 +367,7 @@ export function SiteHeader() {
             ))}
           </nav>
           <div className="sh-tools">
-            <button ref={searchTriggerRef} className="sh-search" type="button" onClick={openSearch} aria-label="搜索文章" aria-expanded={searchOpen} aria-controls="site-search-dialog">
+            <button ref={searchTriggerRef} className="sh-search" type="button" onClick={openSearch} onPointerEnter={prefetchSearch} onFocus={prefetchSearch} aria-label="搜索文章" aria-expanded={searchOpen} aria-controls="site-search-dialog">
               <svg viewBox="0 0 20 20" aria-hidden="true">
                 <circle cx="9" cy="9" r="5.8" />
                 <path d="M13.3 13.3 17 17" />
@@ -302,7 +375,7 @@ export function SiteHeader() {
               <span className="lbl">搜索文章</span>
               <kbd><span className="kbd-mod kbd-mac">⌘</span><span className="kbd-mod kbd-other">Ctrl</span>{" "}K</kbd>
             </button>
-            <button className="sh-icon sh-search-m" type="button" onClick={openSearch} aria-label="搜索文章">
+            <button className="sh-icon sh-search-m" type="button" onClick={openSearch} onPointerDown={prefetchSearch} aria-label="搜索文章">
               <svg viewBox="0 0 20 20" aria-hidden="true">
                 <circle cx="9" cy="9" r="5.8" />
                 <path d="M13.3 13.3 17 17" />
@@ -401,10 +474,7 @@ export function SiteHeader() {
                     className={`search-result${activeResult === index ? " active" : ""}`}
                   >
                     <span>
-                      <HighlightedText
-                        text={result.item.topic}
-                        ranges={rangesFor(result.matches, "topic")}
-                      />
+                      {result.item.section}
                     </span>
                     <strong>
                       <HighlightedText
@@ -419,7 +489,9 @@ export function SiteHeader() {
                 );
               })}
               {results.length === 0 && (
-                <p className="empty-state">没有找到，换个更宽松的关键词试试。</p>
+                <p className="empty-state">
+                  {engine ? "没有找到，换个更宽松的关键词试试。" : engineFailed ? "搜索暂时打不开，请稍后再试。" : "正在载入…"}
+                </p>
               )}
             </div>
             <footer className="search-footer">

package/app/components/TagRedirect.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+import { TAG_PARAM, selectedTags, tagFilterHref } from "../lib/tag-filter";
+
+/** Old `/tags?t=X` links open the same filter on `/blog?t=X`. */
+export function TagRedirect() {
+  const router = useRouter();
+  const params = useSearchParams();
+  const tags = selectedTags(params.getAll(TAG_PARAM));
+  const target = tags.length ? tagFilterHref(tags) : "";
+  useEffect(() => {
+    if (target) router.replace(target);
+  }, [router, target]);
+  return null;
+}

package/app/garden/page.tsx

@@ -7,7 +7,7 @@ import { siteConfig } from "../site.config";
 
 export const metadata = {
   title: "Garden",
-  description: "用 Markdown 写文章。推送到 GitHub 之后，页面、搜索和 RSS 一起生成。",
+  description: "用 Markdown 写文章。推送之后，页面、搜索和 RSS 一起更新。",
 };
 
 const jumps = [
@@ -45,7 +45,7 @@ const setupSteps = [
   {
     title: "发布",
     command: "make update",
-    body: "先检查，再提交并推送。main 更新后，网站、搜索和 RSS 会重新生成。",
+    body: "先检查，再提交并推送。main 更新后，网站、搜索和 RSS 会一起更新。",
   },
 ];
 
@@ -54,7 +54,7 @@ export default function GardenPage() {
     <main className="page-shell garden-page">
       <PageIntro title={siteConfig.pages.garden.title} subtitle={siteConfig.pages.garden.subtitle}>
         <p className="garden-lede">
-          文章放在你自己的仓库里。你改文件，GitHub 构建网站。
+          文章放在你自己的仓库里。你改文件，网站跟着更新。
         </p>
         <div className="garden-actions">
           <a
@@ -133,10 +133,10 @@ export default function GardenPage() {
         <header className="garden-section-heading">
           <h2 id="garden-after-title">推送之后</h2>
         </header>
-        <p className="garden-after-lead">你的仓库，到 GitHub 构建，再到公开网站。</p>
+        <p className="garden-after-lead">推送之后，网站公开更新。</p>
         <div className="garden-after-copy">
-          <p>框架画页面。你的文章不放在框架仓库里，而在你自己的内容仓库。读者打开的是生成出来的静态页。</p>
-          <p>同一次构建会带上正文、目录、前后篇、搜索、RSS 和 sitemap。后台和评论都可以以后再加，不接也能发布。</p>
+          <p>文章在你自己的仓库里。读者打开的是已经发布的页面。</p>
+          <p>一次更新会带上正文、目录、前后篇、搜索、RSS 和 sitemap。后台和评论都可以以后再加。</p>
         </div>
       </section>
 

package/app/garden-modules.d.ts

@@ -18,9 +18,8 @@ declare module "@garden/generated-content" {
     updated?: string;
     publishAt?: string;
     draft?: boolean;
-    topic?: string;
     tags?: string[];
-    references?: { title: string; url?: string }[];
+    references?: { title: string; url?: string; domain?: string }[];
     pinned?: boolean;
     readingTime?: string;
     kind: "post" | "column" | "thought";
@@ -34,6 +33,8 @@ declare module "@garden/generated-content" {
     columnCoverAlt?: string;
     order?: number;
     cover?: string;
+    /** Resized WebP copies of a local cover, when the build had sharp. */
+    coverImage?: { src: string; srcset: string; width: number; height: number };
     original?: string;
     mediaType?: "image" | "audio" | "video" | "link" | "text";
     media?: string | MediaItem[];
@@ -48,9 +49,22 @@ declare module "@garden/generated-content" {
   export const columns: ContentEntry[];
   export const thoughts: ContentEntry[];
   export const a2WordCounts: Record<string, number>;
+  export type LinkCardMeta = {
+    title: string;
+    description?: string;
+    siteName?: string;
+    author?: string;
+    publishedTime?: string;
+    image?: string;
+  };
+  export type LinkAssets = { favicons: Record<string, string>; cards: Record<string, LinkCardMeta> };
+  export const linkAssets: LinkAssets;
 }
 
 declare module "@garden/site-config" {
+  export const searchIndexUrl: string;
+  /** The full-text index file and the hash its contents are cached under. */
+  export const searchFull: { url: string; hash: string };
   export const siteConfig: {
     name: string;
     tagline: string;
@@ -59,6 +73,7 @@ declare module "@garden/site-config" {
     author: { name: string; github: string; githubBio: string; githubPinned?: string[] };
     pages: Record<string, Record<string, unknown>>;
     footer: string;
+    linkPreview?: { worker?: string };
   };
   export const githubUrl: string;
 }

package/app/globals.css

@@ -3,8 +3,8 @@
 @import "./admin-ui.css";
 
 :root {
-  --paper: #f8f8f6;
-  --paper-deep: #eeeeeb;
+  --paper: #faf9f5;
+  --paper-deep: #f0eee6;
   --card: #ffffff;
   --ink: #202124;
   --ink-soft: #34383d;
@@ -12,28 +12,28 @@
   --faint: #a1a6ad;
   --line: #deded9;
   --line-strong: #c9c9c2;
-  --accent: #d82d48;
-  --accent-soft: #f9e8eb;
-  --selection: #f3c9d1;
-  --font-mono: var(--font-geist-mono), "SFMono-Regular", Consolas,
+  --accent: #30302e;
+  --accent-soft: #f0eee6;
+  --selection: #e8e5db;
+  --font-mono: "SFMono-Regular", Consolas,
     "Liberation Mono", "Noto Sans Mono CJK SC", monospace;
-  --content: 700px;
+  --content: 740px;
   --wide: 1040px;
 }
 
 :root[data-theme="dark"] {
-  --paper: #171819;
-  --paper-deep: #202224;
-  --card: #1e2022;
+  --paper: #1f1e1d;
+  --paper-deep: #262624;
+  --card: #262624;
   --ink: #ededeb;
   --ink-soft: #d8d8d4;
   --muted: #a6adb6;
   --faint: #747b84;
   --line: #35383b;
   --line-strong: #4b4f54;
-  --accent: #ff5d76;
-  --accent-soft: #3b242a;
-  --selection: #68333e;
+  --accent: #eeece7;
+  --accent-soft: #30302e;
+  --selection: rgb(238 236 231 / 18%);
 }
 
 * {
@@ -252,11 +252,6 @@ button {
   margin-top: 72px;
 }
 
-.home-thought-list {
-  display: grid;
-  gap: 24px;
-}
-
 .section-heading {
   min-height: 40px;
   margin-bottom: 21px;
@@ -1423,32 +1418,6 @@ button {
   color: var(--accent);
 }
 
-.topic-strip {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin: 8px 0 38px;
-}
-
-.topic-strip a {
-  padding: 6px 10px;
-  background: var(--paper-deep);
-  color: var(--muted);
-  font-size: 11px;
-  border: 1px solid transparent;
-}
-
-.topic-strip a:hover,
-.topic-strip a:focus-visible {
-  color: var(--ink);
-  border-color: var(--line-strong);
-}
-
-.topic-strip a.active {
-  background: var(--ink);
-  color: var(--paper);
-}
-
 .archive-list {
   border-top: 1px solid var(--line-strong);
 }
@@ -1496,13 +1465,6 @@ button {
   border: 1px solid var(--line);
 }
 
-.archive-topic {
-  color: var(--accent);
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-}
-
 .pinned-badge {
   margin-left: 9px;
   display: inline-flex;
@@ -2089,12 +2051,14 @@ button {
 
 .markdown-body a {
   text-decoration: underline;
-  text-decoration-color: var(--accent);
+  text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent);
   text-underline-offset: 4px;
 }
 
+/* Links stay ink; hover darkens and thickens the underline instead. */
 .markdown-body a:hover {
-  color: var(--accent);
+  text-decoration-color: var(--ink);
+  text-decoration-thickness: 2px;
 }
 
 /* A per-line border stays continuous across inline code and descenders. */
@@ -2186,25 +2150,6 @@ button {
   color: var(--accent);
 }
 
-.markdown-body table {
-  width: 100%;
-  margin: 34px 0;
-  border-collapse: collapse;
-  font-size: 12px;
-}
-
-.markdown-body th,
-.markdown-body td {
-  padding: 11px 13px;
-  border: 1px solid var(--line);
-  text-align: left;
-}
-
-.markdown-body th {
-  background: var(--paper-deep);
-  color: var(--ink);
-}
-
 .markdown-body pre {
   position: relative;
   margin: 32px 0;
@@ -2818,84 +2763,107 @@ button {
   color: #7f8790;
 }
 
+/* References: one quiet warm-grey card after the article. */
 .article-references {
-  margin-top: 64px;
+  margin-top: 56px;
+  padding: 22px 24px 16px;
+  background: var(--card-hover);
+  border: 1px solid var(--rule);
+  border-radius: var(--r);
 }
 
-.article-references > p {
+:root[data-theme="dark"] .article-references,
+html[data-theme="dark"] .article-references {
+  background: var(--card);
+}
+
+.article-references > h2 {
   margin: 0 0 14px;
-  color: var(--accent);
-  font-size: 12px;
-  font-weight: 700;
+  padding: 0;
+  border: 0;
+  font: 600 17px / 1.4 var(--sans);
+  color: var(--ink);
 }
 
-.article-references table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12px;
+.article-references > h2::before {
+  content: none;
 }
 
-.article-references td {
+.article-references ol {
+  list-style: none;
+  margin: 0;
   padding: 0;
-  border: 1px solid var(--line);
-  color: var(--ink-soft);
-  text-align: left;
-  overflow-wrap: anywhere;
+  counter-reset: ref;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--soft);
 }
 
-.article-references td:first-child {
-  width: 1%;
-  color: var(--accent);
+.article-references li {
+  position: relative;
+  margin: 0 0 6px;
+  padding-left: 2.1em;
+  counter-increment: ref;
+  break-inside: avoid;
+}
+
+.article-references li::before {
+  content: counter(ref);
+  position: absolute;
+  top: 0.15em;
+  left: 0;
+  width: 1.5em;
+  color: var(--muted);
+  font-size: 12px;
   font-variant-numeric: tabular-nums;
   text-align: right;
-  white-space: nowrap;
 }
 
-.article-references td a,
-.article-references td > span {
-  display: block;
-  padding: 11px 13px;
+.article-references a,
+.article-references .ref-title {
+  color: var(--text);
 }
 
-.article-references td:first-child a,
-.article-references td:first-child > span {
-  padding-right: 8px;
-  color: var(--accent);
-  text-decoration: none;
+.article-references a {
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 4px;
+  text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent);
+  transition: text-decoration-color 0.15s ease;
 }
 
-.article-references td a {
-  color: inherit;
-  text-decoration: none;
+.article-references a:hover {
+  text-decoration-color: var(--ink);
+  text-decoration-thickness: 2px;
 }
 
-.article-references td a span {
-  text-decoration: underline;
-  text-decoration-color: var(--accent);
-  text-underline-offset: 4px;
+.article-references .ref-domain {
+  font-size: 12px;
+  color: var(--muted);
+  white-space: nowrap;
 }
 
-.article-references td a:hover span {
-  color: var(--accent);
+@media (min-width: 900px) {
+  .article-references.is-split ol {
+    columns: 2;
+    column-gap: 32px;
+  }
 }
 
-.article-references + .article-tags,
-.article-references + .next-entry {
-  margin-top: 36px;
+@media (max-width: 640px) {
+  .article-references {
+    padding: 18px 16px 12px;
+  }
 }
 
-.article-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin: 68px 0 24px;
+@media (prefers-reduced-motion: reduce) {
+  .article-references a {
+    transition: none;
+  }
 }
 
-.article-tags span {
-  padding: 4px 8px;
-  background: var(--paper-deep);
-  color: var(--muted);
-  font-size: 10px;
+.article-references + .next-entry {
+  margin-top: 36px;
 }
 
 .webmentions,
@@ -3078,7 +3046,7 @@ button {
   margin: 0 auto;
   padding: 58px 0 120px;
   display: grid;
-  grid-template-columns: var(--column-sidebar-width) minmax(0, 700px) var(--column-sidebar-width);
+  grid-template-columns: var(--column-sidebar-width) minmax(0, var(--content)) var(--column-sidebar-width);
   gap: 54px;
   justify-content: center;
 }
@@ -3697,12 +3665,6 @@ button {
   color: var(--accent);
 }
 
-.footer-framework a {
-  text-decoration: underline;
-  text-decoration-color: var(--line-strong);
-  text-underline-offset: 3px;
-}
-
 @media (max-width: 1080px) {
   .post-reading-page {
     --toc-width: 210px;
@@ -3917,7 +3879,7 @@ button {
   }
 
   .column-reading-page {
-    grid-template-columns: minmax(0, 700px);
+    grid-template-columns: minmax(0, var(--content));
   }
 
   .series-nav {
@@ -4202,8 +4164,7 @@ button {
     gap: 4px 9px;
   }
 
-  .archive-meta time,
-  .archive-topic {
+  .archive-meta time {
     font-size: 9px;
   }
 
@@ -4274,11 +4235,6 @@ button {
     font-size: 17px;
   }
 
-  .markdown-body table {
-    display: block;
-    overflow-x: auto;
-  }
-
   .markdown-body .external-embed-card,
   .markdown-body .external-embed-card:has(> img) {
     grid-template-columns: 1fr 22px;