ferst-core 0.2.8 → 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

@@ -45,9 +45,11 @@ const fmt = (date: Date | string) => {
     : { iso: d.toISOString().slice(0, 10), label: d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' }) };
 };
 
-// "New" = published within `newWithinDays` of build time (recomputed each build;
-// a site rebuilds on publish, so this stays fresh). isRecent lives in the pure
-// posts module so it's unit-tested independently.
+// 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);
 ---
@@ -64,7 +66,7 @@ const isNew = (date: Date | string) => isRecent(date, newWithinDays, nowMs);
     <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);
@@ -82,7 +84,7 @@ const isNew = (date: Date | string) => isRecent(date, newWithinDays, nowMs);
               <h3 class="b-post-row__title"><a href={href}>{p.data.title}</a></h3>
             </div>
             <div class="b-post-row__aside">
-              {isNew(p.data.date) && <span class="b-post-row__new">New</span>}
+              {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>

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
@@ -396,8 +400,9 @@ export const latestPostsBlock = z.object({
   /** `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, flag posts newer than this many days with a "New"
-   *  badge (0 disables it). Ignored by the 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'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferst-core",
-  "version": "0.2.8",
+  "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",