hd-garden 0.5.9 → 0.5.11

package/app/components/SiteHeader.tsx

@@ -276,11 +276,17 @@ export function SiteHeader() {
 
   // 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);
+  // The list shows the best few; the label counts every match.
+  const { hits: results, total: resultTotal } = useMemo((): { hits: SearchHit[]; total: number } => {
+    if (!engine || !matcher) return { hits: [], total: 0 };
+    if (!query.trim()) {
+      const recent = engine.records.slice(0, 5).map((item) => ({ item, matches: [] }));
+      return { hits: recent, total: recent.length };
+    }
+    const exact = matcher.find(query, 6) as unknown as { hits: SearchHit[]; total: number };
+    if (exact.total) return exact;
+    const fuzzy = engine.fuse.search(query);
+    return { hits: fuzzy.slice(0, 6), total: fuzzy.length };
   }, [engine, matcher, query]);
 
   useEffect(() => {
@@ -459,7 +465,7 @@ export function SiteHeader() {
               aria-label="搜索结果"
             >
               <p className="search-label">
-                {query ? `${results.length} 个相关结果` : "最近内容"}
+                {query ? `${resultTotal} 篇相关文章` : "最近内容"}
               </p>
               {results.map((result, index) => {
                 const preview = searchPreview(result.item, result.matches);
@@ -477,9 +483,11 @@ export function SiteHeader() {
                     aria-selected={activeResult === index}
                     className={`search-result${activeResult === index ? " active" : ""}`}
                   >
-                    <span>
-                      {result.item.section}
-                    </span>
+                    {result.item.section ? (
+                      <span className="search-chip">
+                        {result.item.section}
+                      </span>
+                    ) : null}
                     <strong>
                       <HighlightedText
                         text={result.item.title}
@@ -500,7 +508,7 @@ export function SiteHeader() {
             </div>
             <footer className="search-footer">
               <span>支持模糊匹配</span>
-              <span>ESC 关闭</span>
+              <span><kbd>ESC</kbd> 关闭</span>
             </footer>
           </section>
         </div>

package/app/globals.css

@@ -3535,6 +3535,8 @@ html[data-theme="dark"] .article-references {
   font-size: 12px;
 }
 
+/* Search dialog (A2): a paper sheet with soft depth. No hard rules inside:
+   rows are separated by space, the active row by a warm tint. */
 .search-backdrop {
   position: fixed;
   inset: 0;
@@ -3543,92 +3545,173 @@ html[data-theme="dark"] .article-references {
   display: flex;
   justify-content: center;
   align-items: flex-start;
-  background: rgb(20 21 22 / 72%);
-  backdrop-filter: blur(4px);
+  background: rgb(20 19 18 / 32%);
+  animation: search-fade 0.14s ease-out;
+}
+
+html[data-theme="dark"] .search-backdrop {
+  background: rgb(0 0 0 / 55%);
 }
 
 .search-panel {
   width: min(640px, 100%);
-  max-height: 78vh;
+  max-height: min(600px, 80vh);
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
+  background: var(--paper);
+  border: 1px solid var(--rule);
+  border-radius: 16px;
+  box-shadow: 0 18px 48px rgb(27 26 24 / 16%), 0 2px 8px rgb(27 26 24 / 6%);
+  color: var(--text);
+  animation: search-fade 0.14s ease-out;
+}
+
+html[data-theme="dark"] .search-panel {
   background: var(--card);
-  border: 1px solid var(--line-strong);
-  box-shadow: 0 24px 80px rgb(0 0 0 / 25%);
+  box-shadow: 0 18px 48px rgb(0 0 0 / 45%), 0 2px 8px rgb(0 0 0 / 25%);
 }
 
 .search-input-wrap {
-  min-height: 58px;
-  padding: 0 16px;
+  flex: none;
+  padding: 10px 10px 4px 20px;
   display: grid;
-  grid-template-columns: 24px 1fr 30px;
+  grid-template-columns: 20px 1fr 36px;
   align-items: center;
-  gap: 8px;
-  border-bottom: 1px solid var(--line);
+  gap: 12px;
+  color: var(--muted);
 }
 
 .search-input-wrap input {
   width: 100%;
-  height: 57px;
+  min-width: 0;
+  height: 48px;
+  padding: 0;
   border: 0;
   background: transparent;
   outline: 0;
-  font-size: 13px;
+  color: var(--ink);
+  caret-color: var(--ink);
+  font: 400 17px / 1.4 var(--sans);
+}
+
+.search-input-wrap input::placeholder {
+  color: var(--muted);
 }
 
 .search-input-wrap button {
-  padding: 5px;
+  width: 36px;
+  height: 36px;
+  padding: 0;
   display: grid;
   place-items: center;
-  background: transparent;
   border: 0;
+  border-radius: 10px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.search-input-wrap button:hover {
+  background: var(--tint);
+  color: var(--ink);
+}
+
+.search-input-wrap button:focus-visible {
+  border-radius: 10px;
 }
 
 .search-results {
-  max-height: 58vh;
-  padding: 12px;
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 2px 10px 10px;
+  display: grid;
+  align-content: start;
+  gap: 2px;
   overflow-y: auto;
+  overscroll-behavior: contain;
 }
 
 .search-label {
-  margin: 5px 8px 9px;
-  color: var(--faint);
-  font-size: 9px;
+  margin: 6px 10px 6px;
+  color: var(--muted);
+  font: 400 var(--fs-meta) / 1.4 var(--sans);
 }
 
 .search-result {
-  padding: 12px;
+  padding: 10px 12px;
   display: grid;
-  grid-template-columns: 88px 1fr;
-  gap: 2px 10px;
-  border-top: 1px solid var(--line);
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 4px 8px;
+  border-radius: 10px;
+  color: var(--text);
+  text-decoration: none;
+  scroll-margin: 8px;
+  transition: background-color 0.12s ease, box-shadow 0.12s ease;
 }
 
 .search-result:hover,
-.search-result:focus-visible,
 .search-result.active {
-  background: var(--paper-deep);
+  background: var(--card-hover);
+  box-shadow: var(--card-shadow);
+  text-decoration: none;
 }
 
-.search-result > span {
-  grid-row: 1 / 3;
-  color: var(--accent);
-  font-size: 9px;
+/* Keyboard focus keeps the row's radius and adds a faint ink ring. */
+.search-result:focus-visible {
+  outline: none;
+  border-radius: 10px;
+  background: var(--card-hover);
+  box-shadow: var(--card-shadow), inset 0 0 0 1px var(--blue-line);
 }
 
 .search-result strong {
-  font-size: 12px;
+  grid-column: 1 / -1;
+  grid-row: 1;
+  color: var(--ink);
+  font: 600 15px / 1.5 var(--sans);
+}
+
+.search-result > .search-chip {
+  grid-column: 1;
+  grid-row: 2;
+  max-width: 12em;
+  padding: 1px 8px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--chip);
+  color: var(--soft);
+  font: 400 12px / 1.6 var(--sans);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.search-result:hover > .search-chip,
+.search-result.active > .search-chip {
+  background: var(--chip-hover);
 }
 
 .search-result small {
+  grid-column: 2;
+  grid-row: 2;
+  min-width: 0;
   color: var(--muted);
   overflow: hidden;
-  font-size: 10px;
+  font: 400 var(--fs-meta) / 1.6 var(--sans);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+/* A post in no column has no chip: its excerpt takes the whole line. */
+.search-result:not(:has(> .search-chip)) small {
+  grid-column: 1 / -1;
+}
+
 .search-match {
   padding: 0 1px;
+  border-radius: 3px;
   background: var(--selection);
   color: var(--ink);
   box-decoration-break: clone;
@@ -3636,19 +3719,86 @@ html[data-theme="dark"] .article-references {
 }
 
 .empty-state {
-  padding: 30px 12px;
+  padding: 32px 12px;
   color: var(--muted);
-  font-size: 11px;
+  font-size: var(--fs-small);
   text-align: center;
 }
 
 .search-footer {
-  padding: 9px 16px;
+  flex: none;
+  padding: 10px 20px;
   display: flex;
   justify-content: space-between;
+  gap: 16px;
+  border-radius: 0 0 15px 15px;
+  background: var(--card-hover);
+  color: var(--muted);
+  font: 400 12px / 1.5 var(--sans);
+}
+
+html[data-theme="dark"] .search-footer {
   background: var(--paper-deep);
-  color: var(--faint);
-  font-size: 9px;
+}
+
+.search-footer kbd {
+  padding: 1px 6px;
+  border-radius: 6px;
+  background: var(--chip);
+  color: var(--soft);
+  font: inherit;
+}
+
+@keyframes search-fade {
+  from {
+    opacity: 0;
+  }
+}
+
+/* Phones: a sheet from the bottom, nearly full height, rounded on top. */
+@media (max-width: 640px) {
+  .search-backdrop {
+    padding: 0;
+    align-items: flex-end;
+  }
+
+  .search-panel {
+    width: 100%;
+    height: calc(100dvh - 16px);
+    max-height: none;
+    border-bottom: 0;
+    border-radius: 16px 16px 0 0;
+  }
+
+  .search-input-wrap {
+    padding: 8px 8px 2px 18px;
+    grid-template-columns: 20px 1fr 44px;
+  }
+
+  .search-input-wrap button {
+    width: 44px;
+    height: 44px;
+  }
+
+  .search-results {
+    padding: 2px 8px calc(12px + env(safe-area-inset-bottom));
+  }
+
+  .search-footer {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .search-backdrop,
+  .search-panel {
+    animation: none;
+  }
+
+  .search-result,
+  .search-input-wrap button {
+    transition: none;
+  }
 }
 
 .site-footer {

package/app/styles/a2.css

@@ -62,7 +62,6 @@ body {
 }
 
 .icon-button,
-.search-panel,
 .column-feature,
 .archive-card,
 .thought-card,

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-garden",
-  "version": "0.5.9",
+  "version": "0.5.11",
   "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-index.mjs

@@ -58,8 +58,18 @@ const excerpt = (text, length = EXCERPT_LENGTH) => {
 const columnEntryPath = (entry) =>
   entry.column && entry.path.startsWith(`${entry.column}/`) ? entry.path.slice(entry.column.length + 1) : entry.path;
 
-/** Records in the same order the header has always listed them: posts, column entries, thoughts. */
-export function buildSearchIndex({ posts = [], columns = [], thoughts = [] }, { length = EXCERPT_LENGTH } = {}) {
+const entryKey = (item) => item.sourcePath ?? item.path;
+const columnKey = (item) => item.sourcePath ?? columnEntryPath(item);
+
+/**
+ * One search entry per piece of writing, as `{ item, record }`, in the order
+ * the header lists them: posts, then column entries that are not also posts,
+ * then thoughts. A post that sits in a column is listed once, at its /blog/
+ * URL, with the column's title as its section; a post in no column has an
+ * empty section. A column entry is only listed on its own when no post has
+ * the same source (a column-only page).
+ */
+function searchEntries({ posts = [], columns = [], thoughts = [] }, { length = EXCERPT_LENGTH } = {}) {
   const record = (item, extra) => {
     const text = searchableText(item.content ?? "");
     return {
@@ -71,25 +81,37 @@ export function buildSearchIndex({ posts = [], columns = [], thoughts = [] }, {
       ...extra(text),
     };
   };
+  const postKeys = new Set(posts.map(entryKey));
+  const columnOf = new Map();
+  for (const item of columns) {
+    const key = columnKey(item);
+    if (postKeys.has(key) && !columnOf.has(key)) columnOf.set(key, item.columnTitle ?? "专栏");
+  }
   return [
-    ...posts.map((item) => record(item, () => ({ section: "文章", path: `/blog/${item.path}` }))),
-    ...columns.map((item) => record(item, () => ({ section: item.columnTitle ?? "专栏", path: `/columns/${item.column}/${columnEntryPath(item)}` }))),
-    ...thoughts.map((item) => record(item, (text) => ({ section: "随想", path: `/thoughts/${item.slug}`, description: excerpt(text, length) }))),
+    ...posts.map((item) => ({ item, record: record(item, () => ({ section: columnOf.get(entryKey(item)) ?? "", path: `/blog/${item.path}` })) })),
+    ...columns
+      .filter((item) => !postKeys.has(columnKey(item)))
+      .map((item) => ({ item, record: record(item, () => ({ section: item.columnTitle ?? "专栏", path: `/columns/${item.column}/${columnEntryPath(item)}` })) })),
+    ...thoughts.map((item) => ({ item, record: record(item, (text) => ({ section: "随想", path: `/thoughts/${item.slug}`, description: excerpt(text, length) })) })),
   ];
 }
 
+/** The small index: one record per piece of writing (see searchEntries). */
+export function buildSearchIndex(content, options) {
+  return searchEntries(content, options).map(({ record }) => record);
+}
+
 /**
  * The full-text file: `{ hash, texts, docs }`, where docs is
- * `[[path, textIndex], ...]` in the small index's order. A post that also
- * sits in a column has one body under two paths, so texts are stored once.
+ * `[[path, textIndex], ...]` in the small index's order. Identical bodies
+ * are stored once.
  * The hash is of the contents, so the file name changes exactly when they do.
  */
 export function buildFullIndex({ posts = [], columns = [], thoughts = [] }) {
-  const items = [...posts, ...columns, ...thoughts];
   const texts = [];
   const seen = new Map();
-  const docs = buildSearchIndex({ posts, columns, thoughts }).map((record, index) => {
-    const text = fullText(items[index].content ?? "");
+  const docs = searchEntries({ posts, columns, thoughts }).map(({ item, record }) => {
+    const text = fullText(item.content ?? "");
     if (!seen.has(text)) {
       seen.set(text, texts.length);
       texts.push(text);

package/ui/garden/search-match.mjs

@@ -55,9 +55,10 @@ export function createSearch(records, bodies = null) {
     };
   });
 
-  function search(query, limit = 6) {
+  /** The best `limit` hits, plus how many records match in all. */
+  function find(query, limit = 6) {
     const terms = queryTerms(query);
-    if (!terms.length) return [];
+    if (!terms.length) return { hits: [], total: 0 };
     const hits = [];
     for (const doc of docs) {
       let score = 0;
@@ -89,8 +90,10 @@ export function createSearch(records, bodies = null) {
       hits.push({ score, order: doc.order, item: doc.item, matches });
     }
     hits.sort((a, b) => b.score - a.score || a.order - b.order);
-    return hits.slice(0, limit).map(({ item, matches }) => ({ item, matches }));
+    return { hits: hits.slice(0, limit).map(({ item, matches }) => ({ item, matches })), total: hits.length };
   }
 
-  return { full: Boolean(bodies), search };
+  const search = (query, limit = 6) => find(query, limit).hits;
+
+  return { full: Boolean(bodies), find, search };
 }