@lettercamp/cli 0.1.13 → 0.1.14

package/package.json

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

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/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,4 +1,5 @@
 .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 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); }

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