ferst-core 0.2.7 → 0.2.9

package/components/recipes/Banner.astro

@@ -22,8 +22,9 @@ interface Props {
   overlay?: number;
   align?: 'start' | 'center' | 'end';
   parallax?: boolean;
+  fullBleed?: boolean;
 }
-const { image, eyebrow, title, text, cta, overlay = 50, align = 'start', parallax = true } = Astro.props;
+const { image, eyebrow, title, text, cta, overlay = 50, align = 'start', parallax = true, fullBleed = false } = Astro.props;
 const scrim = overlay / 100;
 ---
 
@@ -31,6 +32,7 @@ const scrim = overlay / 100;
   class="b-banner"
   data-align={align}
   data-parallax={parallax ? 'true' : 'false'}
+  data-full-bleed={fullBleed ? 'true' : 'false'}
   style={`--banner-image: url('${image}'); --banner-scrim: ${scrim};`}
 >
   <div class="b-banner__scrim" aria-hidden="true"></div>
@@ -60,6 +62,16 @@ const scrim = overlay / 100;
     background-position: center;
     background-repeat: no-repeat;
   }
+  /* Full-bleed: break out of the content column to the full viewport width, edges
+     squared off. Safe from a horizontal scrollbar because Base sets overflow-x:
+     clip on html/body. The card keeps a comfortable inset that tracks the content
+     column on wide screens, so it still lines up with the page below. */
+  .b-banner[data-full-bleed='true'] {
+    width: 100vw;
+    margin-inline: calc(50% - 50vw);
+    border-radius: 0;
+    padding-inline: max(clamp(1.25rem, 5vw, 4rem), calc((100vw - 72rem) / 2 + 2rem));
+  }
   /* Parallax: pin the image to the viewport so it slides under the content.
      Only on fine pointers with motion allowed — `fixed` is ignored/janky on
      touch (iOS) and unwelcome under reduced-motion. */

package/components/recipes/LatestPosts.astro

@@ -11,6 +11,7 @@ import PostCard from '../PostCard.astro';
 import Heading from '../blocks/Heading.astro';
 import Button from '../Button.astro';
 import { getIndexPosts, getPostsByTag } from '../../lib/posts';
+import { isRecent } from '../../content/posts';
 
 interface Props {
   title?: string;
@@ -18,6 +19,8 @@ interface Props {
   limit?: number;
   tag?: string;
   layout?: 'grid' | 'list';
+  /** In the list layout, badge posts newer than this many days as "New" (0 = off). */
+  newWithinDays?: number;
   viewAllHref?: string;
   viewAllLabel?: string;
 }
@@ -27,6 +30,7 @@ const {
   limit = 3,
   tag,
   layout = 'grid',
+  newWithinDays = 14,
   viewAllHref = '/posts',
   viewAllLabel = 'All posts',
 } = Astro.props;
@@ -40,6 +44,14 @@ const fmt = (date: Date | string) => {
     ? { iso: undefined as string | undefined, label: '' }
     : { iso: d.toISOString().slice(0, 10), label: d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' }) };
 };
+
+// The "New" badge marks only the single most-recent post, and only if it was
+// published within `newWithinDays` of build time — so a site that posts often
+// doesn't end up flagging every row (which would make the badge meaningless).
+// Recomputed each build (a site rebuilds on publish, so it stays fresh); isRecent
+// lives in the pure posts module so it's unit-tested independently.
+const nowMs = Date.now();
+const isNew = (date: Date | string) => isRecent(date, newWithinDays, nowMs);
 ---
 
 <section class="b-latest-posts">
@@ -54,15 +66,28 @@ const fmt = (date: Date | string) => {
     <p class="b-latest-posts__empty">No posts yet.</p>
   ) : layout === 'list' ? (
     <ul class="b-latest-posts__list">
-      {posts.map((p) => {
+      {posts.map((p, i) => {
         const { iso, label } = fmt(p.data.date);
+        const href = `/posts/${p.slug}`;
+        const cats = (p.data.tags ?? []).slice(0, 2);
         return (
-          <li class="b-latest-posts__row">
-            <a class="b-latest-posts__row-link" href={`/posts/${p.slug}`}>
-              <span class="b-latest-posts__row-title">{p.data.title}</span>
-              {label && <time class="b-latest-posts__row-date" datetime={iso}>{label}</time>}
-            </a>
-            {p.data.summary && <p class="b-latest-posts__row-summary">{p.data.summary}</p>}
+          <li class="b-post-row">
+            {p.data.heroImage && (
+              <a class="b-post-row__media" href={href} tabindex="-1" aria-hidden="true">
+                <img src={p.data.heroImage} alt="" loading="lazy" />
+              </a>
+            )}
+            <div class="b-post-row__main">
+              {cats.length > 0 && (
+                <span class="b-post-row__cat">{cats.join(' · ')}</span>
+              )}
+              <h3 class="b-post-row__title"><a href={href}>{p.data.title}</a></h3>
+            </div>
+            <div class="b-post-row__aside">
+              {i === 0 && isNew(p.data.date) && <span class="b-post-row__new">New</span>}
+              {label && <time class="b-post-row__date" datetime={iso}>{label}</time>}
+              <span class="b-post-row__chevron" aria-hidden="true">&rsaquo;</span>
+            </div>
           </li>
         );
       })}
@@ -122,7 +147,9 @@ const fmt = (date: Date | string) => {
   @media (min-width: 60em) {
     .b-latest-posts__grid { grid-template-columns: repeat(3, 1fr); }
   }
-  /* Compact list — no images; a tidy dated index for sidebars or short homepages. */
+  /* Compact miniature list — a thumbnail + category + title per row with the date
+     (and an optional "New" badge) on the right, split by hairlines. Stays short
+     however many posts it shows; the whole row is one click target. */
   .b-latest-posts__list {
     list-style: none;
     margin: 0;
@@ -130,40 +157,118 @@ const fmt = (date: Date | string) => {
     display: flex;
     flex-direction: column;
   }
-  .b-latest-posts__row {
-    padding: 0.9rem 0;
-    border-top: var(--card-border);
+  .b-post-row {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.85rem 0;
+    border-top: 1px solid var(--border);
   }
-  .b-latest-posts__row:first-child {
+  .b-post-row:first-child {
     border-top: 0;
   }
-  .b-latest-posts__row-link {
+  /* Thumbnail — a small square, cover-cropped (never stretched). */
+  .b-post-row__media {
+    flex: 0 0 auto;
+    display: block;
+    width: 3.25rem;
+    height: 3.25rem;
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    background: var(--bg-section);
+  }
+  .b-post-row .b-post-row__media img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+  .b-post-row__main {
+    flex: 1 1 auto;
+    min-width: 0;
     display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 0.25rem 1rem;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  /* Category chip — the post's tags, joined, as a small brand-tinted pill. */
+  .b-post-row__cat {
+    align-self: flex-start;
+    max-width: 100%;
+    padding: 0.1rem 0.5rem;
+    border-radius: var(--radius-pill);
+    background: var(--bg-tag);
+    color: var(--muted);
+    font-family: var(--font-heading);
+    font-size: 0.66rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .b-post-row__title {
+    margin: 0;
+    font-size: 1.05rem;
+    line-height: 1.35;
+  }
+  .b-post-row__title a {
     color: var(--fg);
-    text-decoration: none;
+    font-family: var(--font-heading);
+    font-weight: 600;
   }
-  .b-latest-posts__row-link:hover .b-latest-posts__row-title {
+  .b-post-row:hover .b-post-row__title a {
     color: var(--gold);
   }
-  .b-latest-posts__row-title {
+  /* Stretch the title link across the whole row so any part of it is clickable. */
+  .b-post-row__title a::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+  .b-post-row__aside {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 0.6rem 0.8rem;
+  }
+  .b-post-row__new {
+    padding: 0.12rem 0.45rem;
+    border-radius: var(--radius-pill);
+    background: var(--gold);
+    color: var(--text-light);
     font-family: var(--font-heading);
-    font-weight: 600;
-    font-size: 1.05rem;
+    font-size: 0.62rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
   }
-  .b-latest-posts__row-date {
+  .b-post-row__date {
     color: var(--muted);
     font-size: 0.85rem;
     white-space: nowrap;
+    font-variant-numeric: tabular-nums;
   }
-  .b-latest-posts__row-summary {
-    margin: 0.35rem 0 0;
+  .b-post-row__chevron {
     color: var(--muted);
-    font-size: 0.95rem;
-    line-height: 1.55;
+    font-size: 1.25rem;
+    line-height: 1;
+  }
+  .b-post-row:hover .b-post-row__chevron {
+    color: var(--gold);
+  }
+  /* On narrow screens keep the title on the left and let the date tuck under the
+     "New" badge if needed; the chevron drops (touch targets are the whole row). */
+  @media (max-width: 30rem) {
+    .b-post-row__chevron {
+      display: none;
+    }
+    .b-post-row__aside {
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 0.25rem;
+    }
   }
   .b-latest-posts__empty {
     margin: 0;

package/content/blocks.ts

@@ -268,6 +268,10 @@ export const bannerBlock = z.object({
   overlay: z.number().min(0).max(100).default(50),
   align: z.enum(['start', 'center', 'end']).default('start'),
   parallax: z.boolean().default(true),
+  /** Break the band out to the full viewport width (edge-to-edge, no rounded
+   *  corners); the card stays aligned to the page's content column. Great for a
+   *  homepage hero. Off by default (the band sits inside the content column). */
+  fullBleed: z.boolean().default(false),
 });
 
 /** Stats — a band of headline numbers (value + label + optional note), over an
@@ -393,7 +397,13 @@ export const latestPostsBlock = z.object({
   limit: z.number().int().min(1).max(12).default(3),
   /** Filter to a single tag slug; omit for the main index (minus excluded tags). */
   tag: z.string().optional(),
+  /** `grid` = full image cards; `list` = a compact miniature index (thumbnail +
+   *  category + date per row) that stays short even with many posts. */
   layout: z.enum(['grid', 'list']).default('grid'),
+  /** In the `list` layout, badge the most-recent post as "New" when it was
+   *  published within this many days (0 disables it). Only the newest row is ever
+   *  flagged, so a frequently-posting site doesn't mark every row. Grid ignores it. */
+  newWithinDays: z.number().int().min(0).max(365).default(14),
   /** "View all" target + label (the posts index by default). */
   viewAllHref: z.string().default('/posts'),
   viewAllLabel: z.string().default('All posts'),

package/content/posts.ts

@@ -87,3 +87,17 @@ export function tagCounts(posts: Array<{ data: { tags?: string[] } }>): Record<s
   for (const p of posts) for (const t of p.data.tags ?? []) counts[t] = (counts[t] ?? 0) + 1;
   return counts;
 }
+
+/**
+ * Whether a post date is within the last `days` of `now` — used to flag a "New"
+ * badge in the compact latest-posts list. `days <= 0` disables it; a future or
+ * unparseable date is never "new". Pure; `now` is injectable for tests.
+ */
+export function isRecent(date: Date | string, days: number, now: number = Date.now()): boolean {
+  if (!days || days <= 0) return false;
+  const d = date instanceof Date ? date : new Date(date);
+  const t = d.valueOf();
+  if (Number.isNaN(t)) return false;
+  const ageMs = now - t;
+  return ageMs >= 0 && ageMs <= days * 86_400_000;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferst-core",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "type": "module",
   "description": "Ferst Core — the shared, brand-agnostic client-site system: Astro components, layouts, content schemas, the layered config resolver, and a neutral styling architecture that every client overrides.",
   "license": "BUSL-1.1",