@lettercamp/cli 0.1.12 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lettercamp/cli",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "The repository for the Lettercamp CLI",
   "keywords": [
     "lettercamp",

package/renderer/src/components/PostSearch.astro

@@ -6,6 +6,7 @@ const { posts } = Astro.props;
 // inert JSON script: article text may contain a literal closing script tag.
 const index = JSON.stringify(posts.map(post => ({
   title: String(post.title), href: post.href,
+  image: post.image ?? post.ogImage,
   summary: typeof post.description === 'string' ? post.description : '',
   text: typeof post.searchText === 'string' ? post.searchText : '',
   category: post.category, date: post.date.label,
@@ -14,7 +15,7 @@ const index = JSON.stringify(posts.map(post => ({
 
 <div class="post-search-trigger" hidden>
   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5" /><path d="m16 16 4.5 4.5" /></svg>
-  <input type="search" readonly placeholder="Search articles…" aria-label="Search articles" aria-haspopup="dialog" aria-controls="post-search-dialog" />
+  <button type="button" aria-label="Search articles" aria-haspopup="dialog" aria-controls="post-search-dialog">Search articles…</button>
 </div>
 <dialog id="post-search-dialog" class="post-search-dialog" aria-label="Search articles">
   <div class="post-search-header">

package/renderer/src/lib/post-search.ts

@@ -3,7 +3,7 @@ export const postSearchScript = String.raw`(() => {
   const dialog = document.querySelector('#post-search-dialog');
   const data = document.querySelector('[data-post-search-index]');
   if (!trigger || !dialog || !data || typeof dialog.showModal !== 'function') return;
-  const opener = trigger.querySelector('input');
+  const opener = trigger.querySelector('button');
   const input = dialog.querySelector('input');
   const results = dialog.querySelector('.post-search-results');
   const status = dialog.querySelector('.post-search-status');
@@ -13,7 +13,6 @@ export const postSearchScript = String.raw`(() => {
   const normalized = [];
   let generation = 0;
   let timer;
-  let restoringFocus = false;
   const normalize = text => text.normalize('NFKD').replace(/\p{M}/gu, '').toLowerCase().replace(/\s+/g, ' ').trim();
   const element = (tag, className, text) => {
     const node = document.createElement(tag);
@@ -80,11 +79,24 @@ export const postSearchScript = String.raw`(() => {
       const row = document.createElement('li');
       const link = element('a', 'post-search-result', '');
       link.href = post.href;
-      link.append(highlighted('post-search-title', post.title, terms));
+      if (post.image) {
+        const image = element('img', 'post-search-image', '');
+        image.src = post.image;
+        image.alt = '';
+        image.width = 1200;
+        image.height = 630;
+        image.loading = 'lazy';
+        image.decoding = 'async';
+        image.addEventListener('error', () => image.remove(), { once: true });
+        link.append(image);
+      }
+      const content = element('span', 'post-search-content', '');
+      content.append(highlighted('post-search-title', post.title, terms));
       const meta = [post.category, post.date].filter(Boolean).join(' · ');
-      if (meta) link.append(element('span', 'post-search-meta', meta));
+      if (meta) content.append(element('span', 'post-search-meta', meta));
       const excerpt = terms.length ? snippet(post, terms, normalized[index]) : post.summary;
-      if (excerpt) link.append(highlighted('post-search-excerpt', excerpt, terms));
+      if (excerpt) content.append(highlighted('post-search-excerpt', excerpt, terms));
+      link.append(content);
       row.append(link);
       fragment.append(row);
     }
@@ -93,7 +105,7 @@ export const postSearchScript = String.raw`(() => {
     results.removeAttribute('aria-busy');
     empty.hidden = count > 0;
     empty.textContent = posts.length ? 'No articles found. Try a different word or title.' : 'No articles here yet.';
-    status.textContent = !terms.length ? 'Recent articles' : count > limit
+    status.textContent = !terms.length ? '' : count > limit
       ? 'Showing ' + limit + ' of ' + count + ' matching articles. Keep typing to narrow your search.'
       : count + (count === 1 ? ' article found' : ' articles found');
   }
@@ -143,7 +155,7 @@ export const postSearchScript = String.raw`(() => {
     timer = setTimeout(step, 0);
   }
   function open() {
-    if (restoringFocus || dialog.open) return;
+    if (dialog.open) return;
     if (!posts) {
       posts = JSON.parse(data.textContent);
       data.textContent = '';
@@ -153,19 +165,12 @@ export const postSearchScript = String.raw`(() => {
     search();
   }
   function close() {
-    restoringFocus = true;
     ++generation;
     clearTimeout(timer);
     dialog.close();
     opener.focus({ preventScroll: true });
-    // Native dialog focus restoration must not immediately reopen the search.
-    queueMicrotask(() => { restoringFocus = false; });
   }
-  opener.addEventListener('focus', open);
   opener.addEventListener('click', open);
-  opener.addEventListener('keydown', event => {
-    if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); open(); }
-  });
   input.addEventListener('input', event => { if (!event.isComposing) search(); });
   input.addEventListener('compositionend', search);
   dialog.querySelector('.post-search-close').addEventListener('click', close);

package/renderer/src/styles/post-search.css

@@ -1,22 +1,25 @@
 .post-search-trigger { position: relative; flex: 0 1 240px; min-width: 180px; margin-left: auto; }
 .post-search-trigger svg { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--site-text-muted); pointer-events: none; }
-.post-search-trigger input { width: 100%; height: 36px; padding: 0 14px 0 38px; border: 1px solid var(--site-border-strong); border-radius: 999px; background: var(--site-background); color: var(--site-foreground); font: 400 var(--text-label)/1.5 var(--font-family); cursor: text; }
-.post-search-trigger input::placeholder, .post-search-header input::placeholder { color: var(--site-text-secondary); opacity: 1; }
-.post-search-trigger input:focus-visible { outline: 2px solid var(--site-foreground); outline-offset: 3px; }
+.post-search-trigger button { width: 100%; height: 36px; padding: 0 14px 0 38px; border: 0; border-radius: 999px; background: var(--site-surface-hover); color: var(--site-text-secondary); font: 400 var(--text-label)/1.5 var(--font-family); text-align: left; cursor: pointer; }
+.post-search-trigger button:hover { background: var(--site-surface-active); color: var(--site-foreground); }
+.post-search-header input::placeholder { color: var(--site-text-secondary); opacity: 1; }
+.post-search-trigger button:focus-visible { outline: 1px solid var(--site-border-strong); outline-offset: 3px; border-radius: 999px; background: var(--site-surface-active); }
 html:has(.post-search-dialog[open]) { overflow: hidden; }
 .post-search-dialog { position: fixed; inset: 0; width: min(620px, calc(100vw - 32px)); max-width: none; max-height: min(440px, calc(100dvh - 48px)); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--site-border); border-radius: 14px; background: var(--site-background); color: var(--site-foreground); box-shadow: 0 20px 80px #0003; font: 400 var(--text-label)/1.5 var(--font-family); }
 .post-search-dialog[open] { display: flex; flex-direction: column; }
 .post-search-dialog::backdrop { background: color-mix(in srgb, var(--site-background) 65%, transparent); backdrop-filter: blur(3px); }
-.post-search-header { display: flex; flex-shrink: 0; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--site-border); }
+.post-search-header { display: flex; flex-shrink: 0; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--site-surface, #fafafa); }
 .post-search-header > svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--site-text-secondary); }
 .post-search-header input { min-width: 0; width: 100%; padding: 2px 0; border: 0; outline: none; background: transparent; color: inherit; font: 400 max(16px, var(--text-small))/1.5 var(--font-family); }
-.post-search-header:focus-within { border-bottom-color: var(--site-border-strong); }
 .post-search-close { display: grid; flex-shrink: 0; place-items: center; width: 28px; height: 28px; padding: 4px; border: 0; background: transparent; color: var(--site-text-secondary); }
 .post-search-close:hover { color: var(--site-foreground); }
 .post-search-close svg { width: 20px; height: 20px; }
 .post-search-status { flex-shrink: 0; margin: 0; padding: 8px 16px 4px; color: var(--site-text-secondary); font-size: var(--text-meta); }
+.post-search-status:empty { padding: 0; }
 .post-search-results { flex: 0 1 auto; min-height: 0; margin: 0; padding: 0 6px 6px; overflow: auto; overscroll-behavior: contain; list-style: none; }
-.post-search-result { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
+.post-search-result { display: flex; align-items: flex-start; gap: 12px; padding: 8px 10px; border-radius: 8px; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
+.post-search-image { flex: 0 0 64px; width: 64px; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 4px; background: var(--site-surface); }
+.post-search-content { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
 .post-search-result:is(:hover, :focus-visible) { outline: none; background: var(--site-surface-active); border-radius: 8px; }
 .post-search-title { font-size: var(--text-label); font-weight: 500; }
 .post-search-meta { color: var(--site-text-secondary); font-size: var(--text-meta); }
@@ -27,6 +30,8 @@ html:has(.post-search-dialog[open]) { overflow: hidden; }
   .post-search-trigger { flex-basis: 100%; min-width: 0; }
   .post-search-dialog { width: calc(100vw - 24px); max-height: min(440px, calc(100dvh - 24px)); }
   .post-search-header { padding: 10px 12px; }
+  .post-search-result { gap: 10px; }
+  .post-search-image { flex-basis: 56px; width: 56px; }
 }
 @media (prefers-reduced-motion: no-preference) {
   .post-search-dialog[open] { animation: post-search-enter 140ms ease-out; }