ferst-core 0.2.6 → 0.2.8

package/components/CalendarEmbed.astro

@@ -9,7 +9,7 @@
  * The embed URL is required to be https (isSafeEmbedUrl) before it can reach the
  * iframe; an unset or unsafe URL degrades to a friendly note + optional link.
  */
-import { isSafeEmbedUrl } from '../content/calendar';
+import { isSafeEmbedUrl, withWeekStart } from '../content/calendar';
 
 interface Props {
   title?: string;
@@ -18,6 +18,8 @@ interface Props {
   publicUrl?: string;
   height?: number;
   provider?: string;
+  /** First day of the weekly view (Google Calendar embeds only). Default Monday. */
+  weekStart?: 'monday' | 'sunday';
 }
 const {
   title = 'Calendar',
@@ -26,16 +28,19 @@ const {
   publicUrl = '',
   height = 600,
   provider = 'Google Calendar',
+  weekStart = 'monday',
 } = Astro.props;
 
-const safe = isSafeEmbedUrl(embedUrl);
+// Apply the week-start preference to the embed (no-op for non-Google URLs).
+const finalEmbedUrl = withWeekStart(embedUrl, weekStart);
+const safe = isSafeEmbedUrl(finalEmbedUrl);
 ---
 
 <section class="b-calendar">
   {title && <h2 class="b-calendar__title">{title}</h2>}
   {intro && <p class="b-calendar__intro">{intro}</p>}
 
-  {!embedUrl ? (
+  {!finalEmbedUrl ? (
     <p class="b-calendar__note">The calendar isn't set up yet.</p>
   ) : !safe ? (
     <p class="b-calendar__note">
@@ -47,7 +52,7 @@ const safe = isSafeEmbedUrl(embedUrl);
   ) : (
     <div
       class="b-calendar__embed"
-      data-embed-url={embedUrl}
+      data-embed-url={finalEmbedUrl}
       data-height={String(height)}
       data-title={title}
     >

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,12 @@ 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' }) };
 };
+
+// "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.
+const nowMs = Date.now();
+const isNew = (date: Date | string) => isRecent(date, newWithinDays, nowMs);
 ---
 
 <section class="b-latest-posts">
@@ -56,13 +66,26 @@ const fmt = (date: Date | string) => {
     <ul class="b-latest-posts__list">
       {posts.map((p) => {
         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">
+              {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 +145,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 +155,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/components/recipes/Table.astro

@@ -75,7 +75,7 @@ const { title, intro, columns = [], rows = [] } = Astro.props;
     padding: 0.7rem 0.9rem;
     text-align: start;
     vertical-align: top;
-    border-bottom: 1px solid var(--line, var(--card-border-color, rgba(0,0,0,0.08)));
+    border-bottom: 1px solid var(--border);
   }
   .b-table__table thead th {
     font-family: var(--font-heading);

package/content/blocks.ts

@@ -393,7 +393,12 @@ 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, flag posts newer than this many days with a "New"
+   *  badge (0 disables it). Ignored by the grid. */
+  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/calendar.ts

@@ -21,10 +21,37 @@ export const calendarSettingsSchema = z.object({
   height: z.number().int().min(200).max(2000).default(600),
   /** Provider name, shown in the consent notice ("shared with …"). */
   provider: z.string().default('Google Calendar'),
+  /** First day of the week in the weekly view. UK convention is Monday, so that is
+   *  the default; sites with a US/Sunday-first audience can switch it. Applied to
+   *  Google Calendar embeds via `wkst` (other providers ignore it). */
+  weekStart: z.enum(['monday', 'sunday']).default('monday'),
 });
 
 export type CalendarSettings = z.infer<typeof calendarSettingsSchema>;
 
+/** Google Calendar's `wkst` numbering: 1 = Sunday, 2 = Monday, … 7 = Saturday. */
+const WKST: Record<'monday' | 'sunday', string> = { monday: '2', sunday: '1' };
+
+/**
+ * Return `embedUrl` with the week-start applied. Only Google Calendar embed URLs
+ * carry a `wkst` param, so we touch nothing else — a non-Google URL (or an
+ * unparseable one) is returned unchanged. Any existing `wkst` is overridden so the
+ * CMS setting always wins. Pure + testable.
+ */
+export function withWeekStart(embedUrl: string, weekStart: 'monday' | 'sunday' = 'monday'): string {
+  if (!embedUrl) return embedUrl;
+  try {
+    const u = new URL(embedUrl);
+    const isGoogleCalendar =
+      u.hostname.endsWith('google.com') && u.pathname.includes('/calendar/embed');
+    if (!isGoogleCalendar) return embedUrl;
+    u.searchParams.set('wkst', WKST[weekStart]);
+    return u.toString();
+  } catch {
+    return embedUrl;
+  }
+}
+
 /**
  * Whether an embed URL is safe to load into an iframe. The value is trusted repo /
  * CMS data, but we still require `https:` so a stray `javascript:` / `http:` value

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/layouts/Base.astro

@@ -313,14 +313,23 @@ const metaDescription = description ?? identity.description;
       article :where(img, picture, video, table, figure, iframe) {
         max-width: 100%;
       }
-      article img:not(.group-card__img) {
+      /* Prose images — editor/markdown images dropped into long-form body content
+         get a centred block treatment (rounded, soft shadow). Scoped to the real
+         prose containers (post body, Prose block) so it never leaks onto STRUCTURAL
+         component images — cards, banners, media headers — which own their own
+         framing and crop absolutely. (A leaked `margin` pushes an inset image down
+         inside its overflow-hidden box, exposing a strip above it — the "empty
+         space above the image" a bare `article img` rule caused.) */
+      .b-post__body img,
+      .b-prose img {
         display: block;
         margin: 1.5rem auto;
         border-radius: 8px;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
       }
       @media (min-width: 44em) {
-        article img:not(.group-card__img) {
+        .b-post__body img,
+        .b-prose img {
           border-radius: 12px;
         }
       }
@@ -340,11 +349,10 @@ const metaDescription = description ?? identity.description;
       }
 
       /* ── Fluid media: never overflow container ── */
-      img:not(.group-card__img):not(.primary-logo), picture, video {
-        max-width: 100%;
-        height: auto;
-      }
-      .group-card__img {
+      /* The logo is exempt: it carries a fixed height in SiteHeader that `height:
+         auto` would collapse. Card/media images set their own size at higher
+         specificity, so this only ever backstops loose images. */
+      img:not(.primary-logo), picture, video {
         max-width: 100%;
         height: auto;
       }

package/package.json

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