hd-garden 0.5.10 → 0.5.12

package/app/components/SiteHeader.tsx

@@ -14,6 +14,7 @@ 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 } from "../../ui/garden/search-preview.mjs";
 import { createIdbStore, loadFullIndex, saveDataOn, whenIdleAfterLoad } from "../../ui/garden/search-full.mjs";
 import { siteConfig } from "../site.config";
 
@@ -106,38 +107,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 +122,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() {
@@ -495,7 +435,10 @@ export function SiteHeader() {
                       />
                     </strong>
                     <small>
+                      {/* The 「…」 sit outside the highlight. */}
+                      {preview.prefix}
                       <HighlightedText text={preview.text} ranges={preview.ranges} />
+                      {preview.suffix}
                     </small>
                   </Link>
                 );

package/app/globals.css

@@ -3718,6 +3718,13 @@ 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);

package/app/styles/shell.css

@@ -65,7 +65,10 @@ html[data-mod="other"] .sh-search .kbd-other{display:inline}
 .sh-icon{display:inline-grid;place-items:center;width:40px;height:40px;border:0;background:transparent;color:var(--soft);border-radius:var(--r);cursor:pointer;transition:background-color .15s ease,color .15s ease}
 @media (hover:hover){.sh-icon:hover{background:var(--tint);color:var(--ink)}}
 .sh-menu-btn,.sh-search-m{display:none}
-html[data-theme="dark"] .i-moon,html:not([data-theme="dark"]) .i-sun{display:none}
+.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}}
 .sh-menu{display:none}
 
 /* ---------- page frame ---------- */

package/build/dark-fallback-postcss.mjs

@@ -0,0 +1,93 @@
+// Dark fallback for pages without JavaScript.
+//
+// The theme script sets <html data-theme> before first paint. With scripting
+// off nothing sets it, so the page would stay light on a dark system. Every
+// rule written for `:root[data-theme="dark"]` or `html[data-theme="dark"]`
+// gets a twin right after it, inside `@media (prefers-color-scheme: dark)`,
+// that matches the root when it has no data-theme at all. The dark styles are
+// written once; a theme the user picked (data-theme set) always wins, and
+// the twin keeps the original specificity and source order.
+//
+// Any other use of data-theme that would leave a no-JS dark page wrong stops
+// the build with an error naming the selector, instead of being skipped.
+
+export const MEDIA = "(prefers-color-scheme: dark)";
+const DARK_ROOT = /^(:root|html)\[data-theme=(["']?)dark\2\]/;
+const ANY_THEME = /\[data-theme(?:([~|^$*]?=)\s*(["']?)([^"'\]]*)\2)?\s*\]/g;
+
+/**
+ * Sort one selector (no commas):
+ * - "dark": starts with the dark root, gets a twin;
+ * - "other": no data-theme on the page root's dark side (light root, scoped
+ *   components such as `.garden-ui-preview[data-theme="dark"]`), left alone;
+ * - throws for forms the twin cannot cover.
+ * `siblings` are the other selectors of the same rule.
+ */
+export function classify(selector, siblings = []) {
+  const value = selector.trim();
+  if (!value.includes("data-theme")) return "other";
+  const uses = [...value.matchAll(ANY_THEME)];
+  let dark = false;
+  for (const use of uses) {
+    const [whole, op, , theme] = use;
+    const before = value.slice(0, use.index);
+    const compound = before.match(/[^\s>+~(]*$/)[0];
+    if (op && op !== "=") throw new Error(`unsupported data-theme operator "${whole}" in "${value}"`);
+    if (!op) throw new Error(`data-theme without a value ("${whole}") in "${value}"`);
+    if (/:not\($/.test(before)) throw new Error(`negated theme "${whole}" in "${value}": write the dark case as a [data-theme="dark"] rule instead`);
+    if (theme !== "dark" && theme !== "light") throw new Error(`unknown theme "${theme}" in "${value}"`);
+    const isRoot = compound === ":root" || compound === "html";
+    if (isRoot) {
+      if (before !== compound) throw new Error(`root theme selector must start the selector: "${value}"`);
+      if (theme === "dark") dark = true;
+      continue;
+    }
+    if (compound === "") {
+      // Bare `[data-theme="dark"] .x` also matches the page root. Allowed only
+      // when the same rule lists the root form, whose twin covers the page.
+      const rest = value.slice(use.index + whole.length);
+      const covered = siblings.some((other) => other !== value && DARK_ROOT.test(other.trim()) && other.trim().replace(DARK_ROOT, "") === rest);
+      if (theme === "dark" && !covered) throw new Error(`bare "${whole}" in "${value}" also matches the page root; list ":root${whole}${rest}" in the same rule`);
+      continue;
+    }
+    if (/^[.#]/.test(compound)) continue; // scoped component with its own data-theme
+    throw new Error(`unsupported data-theme selector "${compound}${whole}" in "${value}"`);
+  }
+  return dark ? "dark" : "other";
+}
+
+/** `html[data-theme="dark"] .x` → `html:not([data-theme]) .x`. */
+export function fallbackSelector(selector) {
+  const value = selector.trim();
+  return DARK_ROOT.test(value) ? value.replace(DARK_ROOT, (_, root) => `${root}:not([data-theme])`) : null;
+}
+
+export default function darkFallback() {
+  return {
+    postcssPlugin: "garden-dark-fallback",
+    OnceExit(root, { AtRule }) {
+      root.walkRules((rule) => {
+        if (rule.parent?.type === "atrule" && rule.parent.name === "media" && rule.parent.params === MEDIA) return;
+        if (!rule.selector.includes("data-theme")) return;
+        const parts = rule.selectors;
+        const twins = [];
+        for (const part of parts) {
+          let kind;
+          try {
+            kind = classify(part, parts);
+          } catch (error) {
+            throw rule.error(`garden dark fallback: ${error.message}`, { word: part.trim() });
+          }
+          if (kind === "dark") twins.push(fallbackSelector(part));
+        }
+        if (!twins.length) return;
+        const next = rule.next();
+        if (next?.type === "atrule" && next.name === "media" && next.params === MEDIA) return; // already has its twin
+        const media = new AtRule({ name: "media", params: MEDIA });
+        media.append(rule.clone({ selectors: twins }));
+        rule.after(media);
+      });
+    },
+  };
+}
+darkFallback.postcss = true;

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

@@ -0,0 +1,41 @@
+// 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.
+
+const TARGET = /[\\/]vinext[\\/]dist[\\/]server[\\/]app-rsc-cache-busting\.js$/u;
+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);
+}
+
+export default function staticRscPath({ enabled = process.env.STATIC_EXPORT === "1" } = {}) {
+  let seen = false;
+  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" || !TARGET.test(id.split("?")[0])) return null;
+      seen = true;
+      return { code: exportRscAddress(code, id), map: 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) {
+        this.error("garden static RSC path: vinext's app-rsc-cache-busting.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.10",
+  "version": "0.5.12",
   "private": false,
   "description": "用 Markdown 写作、用 GitHub Pages 发布的个人博客引擎。",
   "license": "MIT",

package/postcss.config.mjs

@@ -1,7 +1,8 @@
+import tailwind from "@tailwindcss/postcss";
+import darkFallback from "./build/dark-fallback-postcss.mjs";
+
 const config = {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
+  plugins: [tailwind(), darkFallback()],
 };
 
 export default config;

package/ui/garden/search-preview.mjs

@@ -0,0 +1,69 @@
+// 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;
+}

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"] },