@lettercamp/cli 0.1.12 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lettercamp/cli",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "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/layouts/SiteLayout.astro

@@ -21,8 +21,8 @@ import { googleAnalyticsScript } from '../lib/analytics';
 import Header from '../components/HeaderSlot.astro';
 import Footer from '../components/FooterSlot.astro';
 
-const { site, page, article = false } = Astro.props;
-const meta = pageMetadata(site, page, Astro.url, article, basePath);
+const { site, page, article = false, posts = [] } = Astro.props;
+const meta = pageMetadata(site, page, Astro.url, article, basePath, posts);
 const typography = site.design?.typography ?? {};
 const fonts = fontResources(typography, article ? 700 : 500);
 const fontSize = (value, fallback) => typeof value === 'number' && Number.isFinite(value) && value > 0 ? value : fallback;

package/renderer/src/lib/metadata.js

@@ -1,10 +1,26 @@
 // Generated from lettercamp/lib/page-metadata.ts.
-export function pageMetadata(site, page, url, article = false, basePath = "") {
+const text = (value) => typeof value === "string" ? value.trim() : "";
+function siteCover(site, posts) {
+    const timestamp = (value) => {
+        if (value && typeof value === "object" && "timestamp" in value && typeof value.timestamp === "number")
+            return value.timestamp;
+        const time = value ? new Date(String(value)).valueOf() : NaN;
+        return Number.isNaN(time) ? -Infinity : time;
+    };
+    const post = posts.filter(post => post.draft !== true && (text(post.image) || text(post.ogImage)))
+        .sort((a, b) => timestamp(b.date) - timestamp(a.date) || (a.href ?? "").localeCompare(b.href ?? ""))[0];
+    return post
+        ? { image: text(post.image) || text(post.ogImage), alt: (text(post.image) ? text(post.imageAlt) : text(post.ogImageAlt)) || text(post.title) }
+        : { image: text(site.logo), alt: text(site.name) };
+}
+export function pageMetadata(site, page, url, article = false, basePath = "", posts = []) {
     const seo = site.seo && typeof site.seo === "object" ? site.seo : {};
-    const text = (value) => typeof value === "string" ? value.trim() : "";
+    const homepage = !article && new URL(url).pathname.replace(/\/+$/, "") === basePath.replace(/\/+$/, "");
+    // Homepage overrides belong to the blog root, not posts or category pages.
+    if (homepage)
+        page = { ...seo, ...page };
     const title = text(page.title) || text(site.name);
     const pageTitle = title === site.name ? title : `${title} — ${text(site.name)}`;
-    const homepage = !article && new URL(url).pathname.replace(/\/+$/, "") === basePath.replace(/\/+$/, "");
     const documentTitle = text(page.metaTitle) || (homepage && text(seo.metaTitle)) || pageTitle;
     const description = text(page.metaDescription) || text(page.description) || text(site.description);
     const socialTitle = text(page.ogTitle) || (homepage && (text(seo.ogTitle) || text(seo.metaTitle))) || title;
@@ -21,8 +37,10 @@ export function pageMetadata(site, page, url, article = false, basePath = "") {
             return "";
         }
     };
-    const imageUrl = resolveUrl(page.ogImage || page.image || seo.ogImage);
-    const imageAlt = text(page.ogImageAlt) || (page.ogImage || page.image ? text(page.imageAlt) : text(seo.ogImageAlt));
+    const explicitImage = text(page.ogImage) || text(page.image) || text(seo.ogImage);
+    const fallback = homepage && !explicitImage ? siteCover(site, posts) : undefined;
+    const imageUrl = resolveUrl(explicitImage || fallback?.image);
+    const imageAlt = text(page.ogImageAlt) || (fallback ? fallback.alt : page.ogImage || page.image ? text(page.imageAlt) : text(seo.ogImageAlt));
     const twitterImageUrl = resolveUrl(page.twitterImage) || imageUrl;
     const language = text(page.language) || text(site.language) || "en";
     let locale = "";

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/pages/index.astro

@@ -2,9 +2,10 @@
 import SiteLayout from '../layouts/SiteLayout.astro';
 import BlogHome from '../components/BlogHome.astro';
 import site from '../site.js';
+import { getPosts } from '../lib/posts.js';
 const title = site.home.title ?? `${site.name} Blog`;
 ---
 
-<SiteLayout site={site} page={{ title }}>
+<SiteLayout site={site} page={{ title }} posts={getPosts(site.language, site.timeZone)}>
   <BlogHome site={site} />
 </SiteLayout>

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

@@ -1,22 +1,26 @@
 .post-search-trigger { position: relative; flex: 0 1 240px; min-width: 180px; margin-left: auto; }
+.blog-toolbar:not(:has(> .category-selector:not([hidden]))) > .post-search-trigger { margin-left: 0; }
 .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 +31,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; }

package/renderer/src/styles/site.css

@@ -73,7 +73,7 @@ html:has(.site-header[data-header-position='fixed']) { scroll-padding-top: 80px;
   .mobile-menu-toggle svg { transition: none; }
 }
 .blog-home { padding-block: 72px 100px; }
-.blog-heading { margin-bottom: 18px; }
+.blog-heading { margin-bottom: 40px; }
 .blog-home:not(:has(.blog-toolbar > :not([hidden], script, dialog))) > .blog-heading { margin-bottom: 64px; }
 .blog-heading h1 { margin-bottom: 0; }
 .article-category { margin: 0 0 20px; }
@@ -272,7 +272,7 @@ h1 { font-size: var(--text-title); font-weight: 500; line-height: 1.15; letter-s
   @media (prefers-reduced-motion: no-preference) { .mobile-navigation[open] .mobile-menu-panel { animation: mobile-menu-enter 180ms ease-out; } }
   .blog-home { padding-block: 46px 64px; }
   .blog-home:not(:has(.blog-toolbar > :not([hidden], script, dialog))) > .blog-heading { margin-bottom: 40px; }
-  .blog-toolbar { margin-bottom: 36px; }
+  .blog-heading, .blog-toolbar { margin-bottom: 36px; }
   .category-selector { gap: 4px 20px; }
   .post-list { grid-template-columns: 1fr; gap: 48px; }
   .related-posts { margin-top: 56px; padding-top: 32px; }