ferst-core 0.2.5 → 0.2.7

package/components/BlockRenderer.astro

@@ -41,6 +41,7 @@ import LatestPosts from './recipes/LatestPosts.astro';
 import MapEmbed from './recipes/MapEmbed.astro';
 import Table from './recipes/Table.astro';
 import Notice from './recipes/Notice.astro';
+import MediaCards from './recipes/MediaCards.astro';
 
 interface Props {
   blocks: Block[];
@@ -84,6 +85,7 @@ const registry: Record<BlockType, any> = {
   mapEmbed: MapEmbed,
   table: Table,
   notice: Notice,
+  mediaCards: MediaCards,
 };
 ---
 

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/MediaCards.astro

@@ -0,0 +1,192 @@
+---
+/**
+ * MediaCards — a Level-2 recipe: a grid of rich content cards with the IMAGE as a
+ * header on top (cover-cropped to a uniform ratio, like PostCard), then an optional
+ * icon badge, a title, a meta line (e.g. "Sundays 10:45 · CTK"), a description, and
+ * an optional CTA link. The image-HEADER pattern (distinct from `tiles`, which puts
+ * the image BEHIND the text): use it for groups, team members, services or events —
+ * anywhere the photo and the copy both need to be fully legible. Whole card links
+ * when `href` is set. Token-driven, equal-height.
+ */
+import Icon from '../Icon.astro';
+import { isIconKey } from '../../lib/icons';
+import Heading from '../blocks/Heading.astro';
+
+interface Card {
+  image?: { src: string; alt?: string };
+  icon?: string;
+  title: string;
+  meta?: string;
+  text?: string;
+  href?: string;
+  linkLabel?: string;
+}
+interface Props {
+  title?: string;
+  intro?: string;
+  columns?: 2 | 3;
+  cards?: Card[];
+}
+const { title, intro, columns = 3, cards = [] } = Astro.props;
+---
+
+<section class="b-media-cards">
+  {(title || intro) && (
+    <div class="b-media-cards__head">
+      {title && <Heading text={title} level={2} />}
+      {intro && <p class="b-media-cards__intro">{intro}</p>}
+    </div>
+  )}
+  <div class="b-media-cards__grid" data-cols={columns}>
+    {cards.map((card) => (
+      <article class:list={['b-media-cards__card', card.href && 'is-link']}>
+        {card.image && (
+          <div class="b-media-cards__media">
+            <img src={card.image.src} alt={card.image.alt ?? ''} loading="lazy" />
+          </div>
+        )}
+        <div class="b-media-cards__body">
+          {card.icon && isIconKey(card.icon) && (
+            <span class="b-media-cards__badge" aria-hidden="true"><Icon name={card.icon} size={20} /></span>
+          )}
+          <h3 class="b-media-cards__title">
+            {card.href ? <a href={card.href}>{card.title}</a> : card.title}
+          </h3>
+          {card.meta && <p class="b-media-cards__meta">{card.meta}</p>}
+          {card.text && <p class="b-media-cards__text">{card.text}</p>}
+          {card.href && (
+            <span class="b-media-cards__cta" aria-hidden="true">{card.linkLabel ?? 'Learn more'} →</span>
+          )}
+        </div>
+      </article>
+    ))}
+  </div>
+</section>
+
+<style>
+  .b-media-cards {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    max-width: 72rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  .b-media-cards__head {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .b-media-cards__intro {
+    margin: 0;
+    color: var(--muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+    max-width: var(--max);
+  }
+  .b-media-cards__grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+  @media (min-width: 40em) {
+    .b-media-cards__grid[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
+    .b-media-cards__grid[data-cols='3'] { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (min-width: 60em) {
+    .b-media-cards__grid[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }
+  }
+  .b-media-cards__card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    background: var(--bg-surface);
+    border: var(--card-border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-sm);
+    overflow: hidden;
+    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
+  }
+  .b-media-cards__card.is-link:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+    border-color: var(--gold);
+  }
+  /* Image header — cover-cropped to a uniform 16:9 so any source ratio fits (the
+     PostCard technique; also out-specifies the global img{height:auto}). */
+  .b-media-cards__media {
+    position: relative;
+    aspect-ratio: 16 / 9;
+    overflow: hidden;
+    background: var(--bg-section);
+  }
+  .b-media-cards .b-media-cards__media img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+  .b-media-cards__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1.1rem 1.2rem 1.3rem;
+    flex: 1;
+  }
+  /* Icon badge — a small brand chip; slightly lifted over the image edge when an
+     image is present (the negative margin only bites inside a card with a header). */
+  .b-media-cards__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: 999px;
+    background: var(--gold-light);
+    color: var(--gold);
+    margin-top: -2.3rem;
+    margin-bottom: 0.2rem;
+    border: 3px solid var(--bg-surface);
+  }
+  /* No image → the badge sits normally at the top of the body. */
+  .b-media-cards__card:not(:has(.b-media-cards__media)) .b-media-cards__badge {
+    margin-top: 0;
+    border: none;
+  }
+  .b-media-cards__title {
+    margin: 0;
+    font-size: 1.2rem;
+    color: var(--fg);
+  }
+  .b-media-cards__card.is-link:hover .b-media-cards__title a { color: var(--gold); }
+  .b-media-cards__title a { color: var(--fg); }
+  /* Stretch the title link over the whole card so it's clickable. */
+  .b-media-cards__title a::after { content: ''; position: absolute; inset: 0; }
+  .b-media-cards__meta {
+    margin: 0;
+    align-self: flex-start;
+    padding: 0.2rem 0.6rem;
+    border-radius: 999px;
+    background: var(--bg-section);
+    color: var(--muted);
+    font-family: var(--font-heading);
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+  }
+  .b-media-cards__text {
+    margin: 0;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  .b-media-cards__cta {
+    margin-top: auto;
+    padding-top: 0.5rem;
+    font-family: var(--font-heading);
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--gold);
+  }
+</style>

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

@@ -442,6 +442,34 @@ export const noticeBlock = z.object({
   link: z.object({ label: z.string(), href: z.string() }).optional(),
 });
 
+/** MediaCards — a grid of rich content cards with the IMAGE as a header on top
+ *  (cover-cropped), then an optional icon badge, title, meta line, description and
+ *  CTA. The image-HEADER pattern (distinct from `tiles`, which puts the image
+ *  BEHIND the text) — for groups, team, services, events where the photo AND copy
+ *  must both stay legible. Whole card links when a card has `href`. */
+export const mediaCardsBlock = z.object({
+  type: z.literal('mediaCards'),
+  enabled: z.boolean().default(true),
+  title: z.string().optional(),
+  intro: z.string().optional(),
+  columns: z.union([z.literal(2), z.literal(3)]).default(3),
+  cards: z
+    .array(
+      z.object({
+        image: z.object({ src: z.string(), alt: z.string().default('') }).optional(),
+        icon: z.string().optional(),
+        title: z.string(),
+        /** A short meta line shown as a pill (e.g. "Sundays 10:45 · CTK"). */
+        meta: z.string().optional(),
+        text: z.string().optional(),
+        href: z.string().optional(),
+        /** CTA label when the card links (defaults to "Learn more"). */
+        linkLabel: z.string().optional(),
+      })
+    )
+    .default([]),
+});
+
 export type RecipeBlock =
   | z.infer<typeof heroBlock>
   | z.infer<typeof featureCardsBlock>
@@ -464,7 +492,8 @@ export type RecipeBlock =
   | z.infer<typeof latestPostsBlock>
   | z.infer<typeof mapEmbedBlock>
   | z.infer<typeof tableBlock>
-  | z.infer<typeof noticeBlock>;
+  | z.infer<typeof noticeBlock>
+  | z.infer<typeof mediaCardsBlock>;
 
 /* ── Level-1 layout / container primitives ─────────────────────────────────
  * These hold child blocks, so the schema is **recursive** (a container's
@@ -572,6 +601,7 @@ export const blockSchema = z.discriminatedUnion('type', [
   mapEmbedBlock,
   tableBlock,
   noticeBlock,
+  mediaCardsBlock,
   sectionBlock,
   gridBlock,
   stackBlock,

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/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.5",
+  "version": "0.2.7",
   "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",