hd-garden 0.5.9 → 0.5.10

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

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

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 };
 }