hd-garden 0.5.11 → 0.5.13

package/app/components/SiteHeader.tsx

@@ -14,6 +14,8 @@ import type Fuse from "fuse.js";
 import { MagnifyingGlass, X } from "@phosphor-icons/react";
 import { brand, searchFull, searchIndexUrl } from "@garden/site-config";
 import { createSearch } from "../../ui/garden/search-match.mjs";
+import { cropMatchedText, highlightParts, noResultsText } from "../../ui/garden/search-preview.mjs";
+import { resolveDark, themeSwitchProps } from "../../ui/garden/theme.mjs";
 import { createIdbStore, loadFullIndex, saveDataOn, whenIdleAfterLoad } from "../../ui/garden/search-full.mjs";
 import { siteConfig } from "../site.config";
 
@@ -106,38 +108,9 @@ function HighlightedText({
   ranges: readonly MatchRange[];
 }) {
   if (!ranges.length) return text;
-
-  const merged = [...ranges]
-    .sort((left, right) => left[0] - right[0])
-    .reduce<MatchRange[]>((result, range) => {
-      const previous = result.at(-1);
-      if (previous && range[0] <= previous[1] + 1) {
-        result[result.length - 1] = [
-          previous[0],
-          Math.max(previous[1], range[1]),
-        ];
-      } else {
-        result.push(range);
-      }
-      return result;
-    }, []);
-
-  const parts: Array<{ text: string; matched: boolean }> = [];
-  let cursor = 0;
-  merged.forEach(([start, end]) => {
-    if (start > cursor) {
-      parts.push({ text: text.slice(cursor, start), matched: false });
-    }
-    parts.push({ text: text.slice(start, end + 1), matched: true });
-    cursor = end + 1;
-  });
-  if (cursor < text.length) {
-    parts.push({ text: text.slice(cursor), matched: false });
-  }
-
   return (
     <>
-      {parts.map((part, index) =>
+      {highlightParts(text, ranges).map((part, index) =>
         part.matched ? (
           <mark className="search-match" key={`${part.text}-${index}`}>
             {part.text}
@@ -150,55 +123,23 @@ function HighlightedText({
   );
 }
 
-function cropMatchedText(text: string, ranges: readonly MatchRange[]) {
-  if (!ranges.length) return { text, ranges };
-
-  const [focusStart, focusEnd] = ranges[0];
-  let start = Math.max(0, focusStart - 42);
-  let end = Math.min(text.length, Math.max(focusEnd + 52, start + 112));
-
-  if (start > 0) {
-    const nextSpace = text.indexOf(" ", start);
-    if (nextSpace !== -1 && nextSpace < focusStart) start = nextSpace + 1;
-  }
-  if (end < text.length) {
-    const previousSpace = text.lastIndexOf(" ", end);
-    if (previousSpace > focusEnd) end = previousSpace;
-  }
-
-  const prefix = start > 0 ? "…" : "";
-  const suffix = end < text.length ? "…" : "";
-  const visibleRanges = ranges
-    .filter(([rangeStart, rangeEnd]) => rangeEnd >= start && rangeStart < end)
-    .map(
-      ([rangeStart, rangeEnd]) =>
-        [
-          Math.max(rangeStart, start) - start + prefix.length,
-          Math.min(rangeEnd, end - 1) - start + prefix.length,
-        ] as MatchRange,
-    );
-
-  return {
-    text: `${prefix}${text.slice(start, end)}${suffix}`,
-    ranges: visibleRanges,
-  };
-}
+type SearchPreview = { prefix: string; text: string; suffix: string; ranges: readonly MatchRange[] };
 
 function searchPreview(
   item: SearchRecord,
   matches: readonly SearchMatch[] | undefined,
-): { text: string; ranges: readonly MatchRange[] } {
+): SearchPreview {
   const descriptionRanges = rangesFor(matches, "description");
   if (descriptionRanges.length) {
-    return cropMatchedText(item.description, descriptionRanges);
+    return cropMatchedText(item.description, descriptionRanges) as SearchPreview;
   }
 
   const contentRanges = rangesFor(matches, "content");
   if (contentRanges.length) {
-    return cropMatchedText(item.content, contentRanges);
+    return cropMatchedText(item.content, contentRanges) as SearchPreview;
   }
 
-  return { text: item.description, ranges: [] };
+  return { prefix: "", text: item.description, suffix: "", ranges: [] };
 }
 
 export function SiteHeader() {
@@ -247,14 +188,22 @@ export function SiteHeader() {
     });
   }, []);
 
+  // One theme for the desktop button and the mobile menu switch. Until the
+  // reader picks one, it follows the system, also when the system changes.
   useEffect(() => {
-    const stored = window.localStorage.getItem("theme");
-    const useDark =
-      stored === "dark" ||
-      (!stored && window.matchMedia("(prefers-color-scheme: dark)").matches);
-    document.documentElement.dataset.theme = useDark ? "dark" : "light";
-    const frame = window.requestAnimationFrame(() => setDark(useDark));
-    return () => window.cancelAnimationFrame(frame);
+    const system = window.matchMedia("(prefers-color-scheme: dark)");
+    const apply = () => {
+      const stored = window.localStorage.getItem("theme");
+      const useDark = resolveDark(stored, system.matches);
+      document.documentElement.dataset.theme = useDark ? "dark" : "light";
+      setDark(useDark);
+    };
+    const frame = window.requestAnimationFrame(apply);
+    system.addEventListener("change", apply);
+    return () => {
+      window.cancelAnimationFrame(frame);
+      system.removeEventListener("change", apply);
+    };
   }, []);
 
   useEffect(() => {
@@ -411,6 +360,10 @@ export function SiteHeader() {
               {item.label}
             </Link>
           ))}
+          <button className="sh-menu-theme" {...themeSwitchProps(dark, toggleTheme)}>
+            <span>深色模式</span>
+            <span className="sh-switch" aria-hidden="true" />
+          </button>
         </nav>
       </header>
 
@@ -464,9 +417,11 @@ export function SiteHeader() {
               role="listbox"
               aria-label="搜索结果"
             >
-              <p className="search-label">
-                {query ? `${resultTotal} 篇相关文章` : "最近内容"}
-              </p>
+              {query && engine && resultTotal === 0 ? null : (
+                <p className="search-label">
+                  {query ? `${resultTotal} 篇相关文章` : "最近内容"}
+                </p>
+              )}
               {results.map((result, index) => {
                 const preview = searchPreview(result.item, result.matches);
                 return (
@@ -495,14 +450,18 @@ export function SiteHeader() {
                       />
                     </strong>
                     <small>
+                      {/* The 「…」 sit outside the highlight. */}
+                      {preview.prefix}
                       <HighlightedText text={preview.text} ranges={preview.ranges} />
+                      {preview.suffix}
                     </small>
                   </Link>
                 );
               })}
               {results.length === 0 && (
                 <p className="empty-state">
-                  {engine ? "没有找到，换个更宽松的关键词试试。" : engineFailed ? "搜索暂时打不开，请稍后再试。" : "正在载入…"}
+                  {/* The query is a React text child, so it is escaped. */}
+                  {engine ? noResultsText(query) : engineFailed ? "搜索暂时打不开，请稍后再试。" : "正在载入…"}
                 </p>
               )}
             </div>

package/app/globals.css

@@ -3718,11 +3718,24 @@ html[data-theme="dark"] .search-panel {
   -webkit-box-decoration-break: clone;
 }
 
+/* The excerpt is one line cut by text-overflow. Inside it a highlight is
+   atomic: it shows whole, or the line's 「…」 replaces it whole and is drawn
+   with the excerpt's colours, never inside the highlight. */
+.search-result small .search-match {
+  display: inline-block;
+}
+
 .empty-state {
   padding: 32px 12px;
   color: var(--muted);
   font-size: var(--fs-small);
   text-align: center;
+  overflow-wrap: anywhere;
+}
+
+/* No results: the one line sits in the middle of the list area. */
+.search-results:has(> .empty-state:only-child) {
+  align-content: center;
 }
 
 .search-footer {

package/app/styles/shell.css

@@ -68,7 +68,7 @@ html[data-mod="other"] .sh-search .kbd-other{display:inline}
 .i-sun,html[data-theme="dark"] .i-moon{display:none}
 html[data-theme="dark"] .i-sun{display:inline}
 /* No JavaScript: the theme cannot be switched, the page follows the system (build/dark-fallback-postcss.mjs). */
-@media (scripting:none){.sh-theme{display:none}}
+@media (scripting:none){.sh-theme,.sh-menu-theme{display:none}}
 .sh-menu{display:none}
 
 /* ---------- page frame ---------- */
@@ -272,8 +272,13 @@ html[data-theme="dark"] .sh-pal-scrim{background:rgba(0,0,0,.55)}
   .sh-menu.is-open{opacity:1;transform:none;visibility:visible;transition:opacity .18s ease,transform .18s var(--ease)}
   .sh-menu a{display:flex;align-items:center;min-height:52px;font-size:var(--fs-lead);color:var(--text);text-decoration:none;border-bottom:1px solid var(--rule)}
   .sh-menu a[aria-current="page"],.sh-menu a[aria-current="true"]{color:var(--blue);font-weight:600}
-  .sh-menu .theme-row{display:flex;align-items:center;justify-content:space-between;min-height:56px;font-size:15px;color:var(--soft)}
-  .sh-menu .theme-row button{font:400 15px/1 var(--sans);color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:0 14px;min-height:40px;cursor:pointer}
+  /* Theme switch at the bottom of the menu: the same toggle as the desktop button. */
+  .sh-menu a:last-of-type{border-bottom:0}
+  .sh-menu-theme{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;margin-top:8px;padding:0;border:0;border-top:1px solid var(--rule);background:none;font:400 var(--fs-body)/1 var(--sans);color:var(--text);cursor:pointer;text-align:left}
+  .sh-switch{position:relative;flex:none;width:40px;height:24px;border-radius:12px;background:var(--rule-strong);transition:background-color .18s ease}
+  .sh-switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--card);box-shadow:0 1px 2px rgb(20 20 19 / 18%);transition:transform .18s var(--ease)}
+  .sh-menu-theme[aria-checked="true"] .sh-switch{background:var(--ink)}
+  .sh-menu-theme[aria-checked="true"] .sh-switch::after{transform:translateX(16px);background:var(--paper)}
   .sh-theme{display:none}
   .sh-main{padding:0 20px}
   .sh-head{padding:40px 0 24px}

package/build/static-rsc-path-plugin.mjs

@@ -0,0 +1,78 @@
+// Static export: request the home page's RSC payload where the export writes it.
+//
+// vinext's client builds every RSC address as `<pathname>.rsc` (trailing slash
+// dropped), so the home page becomes `/.rsc`. The static export writes that
+// payload to `index.rsc` (vinext's getRscOutputPath maps "/" there). A static
+// host has no server to bridge the two, so every <Link href="/"> prefetch, and
+// any client navigation home, hit a 404. With output: "export" this plugin
+// changes the address builder (toRscRequestPath) so "/" asks for `/index.rsc`.
+// Every other path already matches the exported file. Prefetching stays on.
+//
+// Static hosts do not know the .rsc extension either: GitHub Pages serves it as
+// application/octet-stream, and vinext only accepts text/x-component, so every
+// client navigation fell back to a full page load, aimed at the payload URL
+// minus ".rsc" (for home that is "/index"). In the browser navigation code the
+// export also accepts application/octet-stream, and a fallback to "/index"
+// goes to "/". Only a 2xx response with a body counts: vinext's own
+// `!navResponse.ok` check stays in front, and the build stops if it is gone.
+//
+// Rewrites vinext 0.0.50. Remove this plugin once vinext fixes it upstream
+// (draft issue: /workspace/dev/vinext-issue.md); a vinext whose code no longer
+// matches stops the build.
+
+const TARGET = /[\\/]vinext[\\/]dist[\\/]server[\\/]app-rsc-cache-busting\.js$/u;
+const NAVIGATION = /[\\/]vinext[\\/]dist[\\/]server[\\/]app-browser-entry\.js$/u;
+const RSC_CHECK = 'const isRscResponse = (navResponse.headers.get("content-type") ?? "").startsWith("text/x-component");';
+const RSC_CHECK_EXPORTED = 'const isRscResponse = /^(text\\/x-component|application\\/octet-stream)/.test(navResponse.headers.get("content-type") ?? "");';
+const FALLBACK = "let pathname = stripRscSuffix(parsed.pathname);";
+// Must stay: any non-2xx response is a failure whatever its content-type.
+const FAILURE = "if (!navResponse.ok || !isRscResponse || !navResponse.body) {";
+const FALLBACK_EXPORTED = 'let pathname = stripRscSuffix(parsed.pathname); if (pathname === "/index") pathname = "/";';
+const ADDRESS = "return `${pathname.length > 1 && pathname.endsWith(\"/\") ? pathname.slice(0, -1) : pathname}.rsc${query}`;";
+const EXPORTED = "return `${pathname === \"/\" ? \"/index\" : pathname.length > 1 && pathname.endsWith(\"/\") ? pathname.slice(0, -1) : pathname}.rsc${query}`;";
+
+/** Rewrite vinext's RSC address builder; throws if vinext changed shape. */
+export function exportRscAddress(code, id = "app-rsc-cache-busting.js") {
+  if (!code.includes("function toRscRequestPath(") || !code.includes(ADDRESS)) {
+    throw new Error(`garden static RSC path: could not find vinext's RSC address builder in ${id}. vinext changed; update build/static-rsc-path-plugin.mjs so the home page asks for /index.rsc.`);
+  }
+  return code.replace(ADDRESS, EXPORTED);
+}
+
+/** Rewrite vinext's client navigation for static hosts; throws if vinext changed shape. */
+export function exportNavigation(code, id = "app-browser-entry.js") {
+  for (const needle of [RSC_CHECK, FALLBACK, FAILURE]) {
+    if (code.split(needle).length !== 2) {
+      throw new Error(`garden static RSC path: could not find \`${needle}\` exactly once in ${id}. vinext changed; update build/static-rsc-path-plugin.mjs (or remove it if vinext fixed static hosting).`);
+    }
+  }
+  return code.replace(RSC_CHECK, RSC_CHECK_EXPORTED).replace(FALLBACK, FALLBACK_EXPORTED);
+}
+
+export default function staticRscPath({ enabled = process.env.STATIC_EXPORT === "1" } = {}) {
+  const seen = new Set();
+  return {
+    name: "garden-static-rsc-path",
+    apply: "build",
+    transform(code, id) {
+      // Browser bundle only: the prerender server still answers "/.rsc" itself.
+      if (!enabled || this.environment?.name !== "client") return null;
+      const file = id.split("?")[0];
+      if (TARGET.test(file)) {
+        seen.add("address");
+        return { code: exportRscAddress(code, id), map: null };
+      }
+      if (NAVIGATION.test(file)) {
+        seen.add("navigation");
+        return { code: exportNavigation(code, id), map: null };
+      }
+      return null;
+    },
+    buildEnd(error) {
+      // The client build always pulls the address builder in; not seeing it means vinext moved it.
+      if (enabled && !error && this.environment?.name === "client" && seen.size < 2) {
+        this.error("garden static RSC path: vinext's app-rsc-cache-busting.js or app-browser-entry.js was not part of the client build; update build/static-rsc-path-plugin.mjs.");
+      }
+    },
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-garden",
-  "version": "0.5.11",
+  "version": "0.5.13",
   "private": false,
   "description": "用 Markdown 写作、用 GitHub Pages 发布的个人博客引擎。",
   "license": "MIT",

package/ui/garden/search-preview.mjs

@@ -0,0 +1,75 @@
+// Search result excerpts: crop around the first match and split into
+// highlighted parts. Match ranges are inclusive [start, end] offsets.
+
+/** Sort and join ranges that touch or overlap. */
+export function mergeRanges(ranges) {
+  return [...ranges]
+    .sort((left, right) => left[0] - right[0])
+    .reduce((result, range) => {
+      const previous = result.at(-1);
+      if (previous && range[0] <= previous[1] + 1) result[result.length - 1] = [previous[0], Math.max(previous[1], range[1])];
+      else result.push([range[0], range[1]]);
+      return result;
+    }, []);
+}
+
+// A term cut by the edge is kept whole when it adds at most this many characters.
+const KEEP_WHOLE = 16;
+
+/**
+ * Crop `text` to a window around the first match. The 「…」 marks come back
+ * apart from the text, so they are never inside a highlight, and a match the
+ * window would cut is either kept whole or left out whole.
+ * @returns {{ prefix: string, text: string, suffix: string, ranges: Array<[number, number]> }}
+ */
+export function cropMatchedText(text, ranges) {
+  const merged = mergeRanges(ranges).filter(([start, end]) => end >= start && start < text.length);
+  if (!merged.length) return { prefix: "", text, suffix: "", ranges: [] };
+
+  const [focusStart, focusEnd] = merged[0];
+  let start = Math.max(0, focusStart - 42);
+  let end = Math.min(text.length, Math.max(focusEnd + 52, start + 112));
+
+  if (start > 0) {
+    const nextSpace = text.indexOf(" ", start);
+    if (nextSpace !== -1 && nextSpace < focusStart) start = nextSpace + 1;
+  }
+  if (end < text.length) {
+    const previousSpace = text.lastIndexOf(" ", end);
+    if (previousSpace > focusEnd) end = previousSpace;
+  }
+
+  // No match may straddle a cut: widen to take it whole, or stop before it.
+  for (const [rangeStart, rangeEnd] of merged) {
+    if (rangeStart < start && rangeEnd >= start) start = start - rangeStart <= KEEP_WHOLE ? rangeStart : rangeEnd + 1;
+    if (rangeStart < end && rangeEnd >= end) end = rangeEnd + 1 - end <= KEEP_WHOLE ? Math.min(text.length, rangeEnd + 1) : rangeStart;
+  }
+
+  return {
+    prefix: start > 0 ? "…" : "",
+    text: text.slice(start, end),
+    suffix: end < text.length ? "…" : "",
+    ranges: merged
+      .filter(([rangeStart, rangeEnd]) => rangeStart >= start && rangeEnd < end)
+      .map(([rangeStart, rangeEnd]) => [rangeStart - start, rangeEnd - start]),
+  };
+}
+
+/** Split text into plain and matched parts. */
+export function highlightParts(text, ranges) {
+  const parts = [];
+  let cursor = 0;
+  for (const [start, end] of mergeRanges(ranges)) {
+    if (start > cursor) parts.push({ text: text.slice(cursor, start), matched: false });
+    parts.push({ text: text.slice(start, end + 1), matched: true });
+    cursor = end + 1;
+  }
+  if (cursor < text.length) parts.push({ text: text.slice(cursor), matched: false });
+  return parts;
+}
+
+/** The one line shown when a search finds nothing. Render it as text (React escapes it). */
+export function noResultsText(query) {
+  const value = String(query ?? "").trim();
+  return value ? `没有找到和「${value}」相关的文章` : "还没有可以搜索的内容";
+}

package/ui/garden/theme.mjs

@@ -0,0 +1,15 @@
+// Theme logic shared by the desktop button and the mobile menu switch.
+
+/** Dark when the reader chose dark, or chose nothing and the system is dark. */
+export function resolveDark(stored, systemDark) {
+  return stored === "dark" || (!stored && Boolean(systemDark));
+}
+
+/**
+ * Props for the menu's 「深色模式」 row: a native button, so the whole row is
+ * clickable and Space and Enter toggle it; role="switch" with aria-checked
+ * taken from the same state on every render.
+ */
+export function themeSwitchProps(dark, onToggle) {
+  return { type: "button", role: "switch", "aria-checked": Boolean(dark), onClick: onToggle };
+}

package/vite.config.ts

@@ -5,6 +5,7 @@ import vinext from "vinext";
 import { defineConfig } from "vite";
 import hostingConfig from "./.openai/hosting.json";
 import { sites } from "./build/sites-vite-plugin";
+import staticRscPath from "./build/static-rsc-path-plugin.mjs";
 import { gardenPackageRoot, gardenSiteRoot } from "./scripts/garden-paths.mjs";
 
 const SITE_CREATOR_PLACEHOLDER_DATABASE_ID =
@@ -121,6 +122,7 @@ export default defineConfig(async () => {
     plugins: [
       gardenContent(),
       vinext(),
+      staticRscPath(),
       sites(),
       cloudflare({
         viteEnvironment: { name: "rsc", childEnvironments: ["ssr"] },