hd-garden 0.5.8 → 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/components/garden/blocks.tsx

@@ -111,7 +111,7 @@ function CompareLine({ line }: { line: string }) {
   if (!split) return <p><Rich text={line} /></p>;
   return (
     <p className="g-cmp-line">
-      <span className="g-cmp-t"><Rich text={split.title} />{split.separator}</span>
+      <span className="g-cmp-h"><span className="g-cmp-t"><Rich text={split.title} /></span><span className="g-cmp-sep">{split.separator}</span></span>
       <Rich text={split.text} />
     </p>
   );

package/app/globals.css

@@ -1521,6 +1521,11 @@ button {
   border: 1px solid var(--line);
 }
 
+/* A thought opened from a link: only the border changes, in the ink accent. */
+.thought-card:target {
+  border-color: var(--accent);
+}
+
 .thought-card > header {
   display: flex;
   justify-content: space-between;
@@ -3530,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;
@@ -3538,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;
@@ -3631,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,
@@ -806,8 +805,10 @@ html[data-theme="dark"] .markdown-body .markdown-alert code {
   }
 
   /* A hidden TOC slides just past the right edge; clip it there so it does not
-     widen the page. clip (unlike hidden) keeps the sticky TOC working. */
-  html[data-toc-yield] #main-content {
+     widen the page. clip (unlike hidden) keeps the sticky TOC working. Not tied
+     to data-toc-yield: the attribute goes as the TOC starts sliding back, and
+     the page would widen for that 0.3s. */
+  #main-content:has(.toc) {
     overflow-x: clip;
   }
 }
@@ -997,8 +998,9 @@ html[data-theme="dark"] .markdown-body .markdown-alert code {
   margin-bottom: 0;
 }
 
-/* One-line cell 「X：Y」: X sits on its own line like a title, colon kept. */
-.g-cmp .g-cmp-t {
+/* One-line cell 「X：Y」: X sits on its own line like a title, colon kept.
+   .g-cmp-t holds the title only; the colon and its spaces are .g-cmp-sep. */
+.g-cmp .g-cmp-h {
   display: block;
   margin: 0 0 8px;
   font: 600 16px / 1.4 var(--sans);

package/app/styles/shell.css

@@ -199,7 +199,6 @@ html[data-theme="dark"] .sh-rail{color:var(--muted)}
 .sh-prose ul{margin:0;padding-left:1.2em}
 .sh-prose li{margin:.35em 0}
 .sh-prose a{color:var(--blue);text-underline-offset:4px;text-decoration-thickness:1px}
-.sh-note{font-size:var(--fs-meta);color:var(--muted);margin-top:12px}
 
 /* ---------- 404 ---------- */
 .sh-404{padding:96px 0 24px;max-width:var(--list)}
@@ -325,38 +324,10 @@ html[data-theme="dark"] .sh-pal-scrim{background:rgba(0,0,0,.55)}
 .sh-notice strong{color:var(--ink)}
 .sh-month > h2{font:700 var(--fs-lead)/1.3 var(--sans);color:var(--ink);margin:40px 0 0;padding:0 0 12px;border-bottom:1px solid var(--rule-strong);display:flex;align-items:baseline;gap:10px}
 .sh-month > h2 .n{font:400 var(--fs-meta)/1 var(--sans);color:var(--muted)}
-.sh-note{padding:28px 0 26px;border-bottom:1px solid var(--rule)}
-.sh-note:target{background:linear-gradient(var(--blue-tint),var(--blue-tint)) no-repeat;background-size:100% 100%;box-shadow:-16px 0 0 var(--blue-tint),16px 0 0 var(--blue-tint)}
-.sh-note h3{margin:0 0 6px;font:700 var(--fs-body)/1.55 var(--sans);color:var(--ink)}
-.sh-note-body p{margin:0 0 .7em;font-size:var(--fs-body);line-height:1.8;color:var(--text)}
-.sh-note-body p:last-child{margin-bottom:0}
-.sh-note-imgs{display:grid;gap:6px;margin:16px 0 0;border-radius:var(--r);overflow:hidden}
-.sh-note-imgs img{display:block;width:100%;height:100%;object-fit:cover;background:var(--well)}
-.sh-note-imgs.one img{aspect-ratio:3/2}
-.sh-note-imgs.two{grid-template-columns:1fr 1fr}.sh-note-imgs.two img{aspect-ratio:1/1}
-.sh-note-imgs.three{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:3/2}
-.sh-note-imgs.three img:first-child{grid-row:1 / 3}
-.sh-note-video{display:block;width:100%;aspect-ratio:16/9;margin:16px 0 0;border-radius:var(--r);background:#000;object-fit:cover}
-.sh-note-audio{margin:16px 0 0;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r);background:var(--card)}
-.sh-note-audio figcaption{font-size:var(--fs-meta);color:var(--muted);margin:0 0 8px}
-.sh-note-audio audio{display:block;width:100%;height:36px}
-.sh-note-link{display:grid;gap:2px;margin:16px 0 0;padding:14px 16px;border:1px solid var(--rule);border-radius:var(--r);background:var(--card);text-decoration:none;transition:background-color .15s ease,box-shadow .15s ease}
-@media (hover:hover){.sh-note-link:hover{background:var(--card-hover);box-shadow:var(--card-shadow)}}
-.sh-note-link .h{font-size:var(--fs-meta);color:var(--muted)}
-.sh-note-link .t{font:600 15px/1.5 var(--sans);color:var(--ink)}
-.sh-note-link .t::after{content:" ↗";color:var(--muted);font-weight:400}
-.sh-note-link .d{font-size:var(--fs-small);line-height:1.6;color:var(--soft)}
-.sh-note footer{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:14px;font-size:var(--fs-meta);color:var(--muted)}
-.sh-note .when{color:var(--muted);text-decoration:none;font-variant-numeric:tabular-nums;padding:4px 0}
-.sh-note .when:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
-.sh-note .tag{color:var(--soft)}
-.sh-note .ex{font-size:12px;line-height:1;color:var(--muted);border:1px dashed var(--rule-strong);border-radius:6px;padding:3px 6px}
-html[data-theme="dark"] .sh-note-imgs img,html[data-theme="dark"] .sh-note-video{filter:brightness(.92)}
 
 @media (max-width:820px){
   .sh-subs{flex-wrap:nowrap;overflow-x:auto;margin:6px -20px 4px;padding:12px 20px 0;scrollbar-width:none}
   .sh-subs::-webkit-scrollbar{display:none}
-  .sh-note:target{box-shadow:-20px 0 0 var(--blue-tint),20px 0 0 var(--blue-tint)}
 }
 
 
@@ -437,5 +408,5 @@ html[data-theme="dark"] .sh-repos > li.sk::after{background:linear-gradient(90de
 
 /* Cards answer hover with a warm fill and a faint shadow; nothing moves. */
 @media (prefers-reduced-motion:reduce){
-  .sh-col,.sh-note-link,.sh-repos > li,.sh-tagchip{transition:none}
+  .sh-col,.sh-repos > li,.sh-tagchip{transition:none}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-garden",
-  "version": "0.5.8",
+  "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 };
 }