ferst-core 0.7.4 → 0.7.6

package/components/recipes/MediaText.astro

@@ -0,0 +1,92 @@
+---
+/**
+ * MediaText — an image beside its text, on the start or end side; stacks (text, then image)
+ * on a phone. The text takes prose formatting (paragraphs, lists, links); the image keeps
+ * its own shape unless `ratio` sets one (cropped to fill). An optional button follows the
+ * text.
+ */
+import Heading from '../blocks/Heading.astro';
+import Button from '../Button.astro';
+import { proseParts } from '../../lib/prose';
+
+interface Props {
+  title?: string;
+  text: string;
+  image: { src: string; alt?: string; caption?: string };
+  imageSide?: 'start' | 'end';
+  ratio?: 'auto' | '1/1' | '4/3' | '3/2' | '16/9';
+  cta?: { label: string; href: string };
+}
+const { title, text, image, imageSide = 'end', ratio = 'auto', cta } = Astro.props;
+---
+
+<section class="b-mediatext" data-side={imageSide}>
+  <div class="b-mediatext__text">
+    {title && <Heading text={title} level={2} />}
+    {proseParts(text).map((part) =>
+      part.kind === 'p' ? <p set:html={part.html} />
+      : part.kind === 'ul' ? <ul>{part.items.map((x) => <li set:html={x} />)}</ul>
+      : <ol>{part.items.map((x) => <li set:html={x} />)}</ol>
+    )}
+    {cta && <div class="b-mediatext__cta"><Button href={cta.href} variant="primary">{cta.label}</Button></div>}
+  </div>
+  <figure class="b-mediatext__media">
+    <img src={image.src} alt={image.alt ?? ''} loading="lazy" decoding="async" style={ratio !== 'auto' ? `aspect-ratio: ${ratio}; object-fit: cover` : undefined} />
+    {image.caption && <figcaption>{image.caption}</figcaption>}
+  </figure>
+</section>
+
+<style>
+  .b-mediatext {
+    display: grid;
+    gap: clamp(1.5rem, 4vw, 3rem);
+    align-items: center;
+    width: 100%;
+    max-width: 72rem;
+  }
+  @media (min-width: 48em) {
+    .b-mediatext {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+    .b-mediatext[data-side='start'] .b-mediatext__media {
+      order: -1;
+    }
+  }
+  .b-mediatext__text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.9rem;
+  }
+  .b-mediatext__text p,
+  .b-mediatext__text ul,
+  .b-mediatext__text ol {
+    margin: 0;
+    line-height: 1.7;
+  }
+  .b-mediatext__text ul,
+  .b-mediatext__text ol {
+    padding-inline-start: 1.4em;
+  }
+  .b-mediatext__text :global(a:not(.btn)) {
+    color: var(--accent);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+  .b-mediatext__cta {
+    margin-top: 0.4rem;
+  }
+  .b-mediatext__media {
+    margin: 0;
+  }
+  .b-mediatext__media img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: var(--radius);
+  }
+  .b-mediatext__media figcaption {
+    margin-top: 0.5rem;
+    font-size: 0.875rem;
+    color: var(--muted);
+  }
+</style>

package/components/recipes/Steps.astro

@@ -1,120 +1,121 @@
----
-/** Steps — a Level-2 recipe: a numbered process. `horizontal` lays connected
- *  cards in a row; `vertical` a stacked timeline. Composes Heading + Icon. */
-import Heading from '../blocks/Heading.astro';
-import Icon from '../Icon.astro';
-import { isIconKey } from '../../lib/icons';
-
-interface Item { title: string; text?: string; icon?: string }
-interface Props {
-  title?: string;
-  intro?: string;
-  layout?: 'horizontal' | 'vertical';
-  items?: Item[];
-}
-const { title, intro, layout = 'horizontal', items = [] } = Astro.props;
----
-
-<section class="b-steps" data-layout={layout}>
-  {(title || intro) && (
-    <div class="b-steps__head">
-      {title && <Heading text={title} level={2} align="center" />}
-      {intro && <p class="b-steps__intro">{intro}</p>}
-    </div>
-  )}
-  <ol class="b-steps__list">
-    {items.map((item, i) => (
-      <li class="b-steps__item">
-        <span class="b-steps__marker" aria-hidden="true">
-          {item.icon && isIconKey(item.icon) ? <Icon name={item.icon} size={20} /> : i + 1}
-        </span>
-        <div class="b-steps__body">
-          <h3 class="b-steps__title">{item.title}</h3>
-          {item.text && <p class="b-steps__text">{item.text}</p>}
-        </div>
-      </li>
-    ))}
-  </ol>
-</section>
-
-<style>
-  .b-steps {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-    max-width: 72rem;
-    margin-inline: auto;
-    padding-inline: 1rem;
-  }
-  .b-steps__head {
-    max-width: var(--max);
-    margin-inline: auto;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-  .b-steps__intro { margin: 0; color: var(--muted); line-height: 1.6; }
-  .b-steps__list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: grid;
-    gap: 1.5rem;
-  }
-  /* Base (and mobile): marker left, body right. */
-  .b-steps__item {
-    display: flex;
-    gap: 1rem;
-    align-items: flex-start;
-  }
-  .b-steps__marker {
-    flex-shrink: 0;
-    width: 2.5rem;
-    height: 2.5rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--radius-pill);
-    background: var(--gold);
-    color: var(--text-light);
-    font-family: var(--font-heading);
-    font-weight: 700;
-    font-size: 1.05rem;
-  }
-  .b-steps__title { margin: 0 0 0.35rem; font-size: 1.1rem; color: var(--fg); }
-  .b-steps__text { margin: 0; color: var(--muted); line-height: 1.6; }
-
-  /* Vertical: a centred, stacked timeline. */
-  .b-steps[data-layout='vertical'] .b-steps__list { max-width: 40rem; margin-inline: auto; }
-
-  /* Horizontal (≥48em): connected cards in a row, marker over centred body. */
-  @media (min-width: 48em) {
-    .b-steps[data-layout='horizontal'] .b-steps__list {
-      grid-auto-flow: column;
-      grid-auto-columns: 1fr;
-      gap: 1rem;
-    }
-    .b-steps[data-layout='horizontal'] .b-steps__item {
-      flex-direction: column;
-      align-items: center;
-      text-align: center;
-      gap: 0.85rem;
-      position: relative;
-    }
-    /* Connector from this marker's right edge to the next marker's left edge.
-       The +1.5rem / -2rem account for the 2.5rem marker AND the 1rem grid gap,
-       so the line sits centred between markers (not falling short). */
-    .b-steps[data-layout='horizontal'] .b-steps__item:not(:last-child)::after {
-      content: '';
-      position: absolute;
-      top: calc(1.25rem - 1px);
-      left: calc(50% + 1.5rem);
-      width: calc(100% - 2rem);
-      height: 2px;
-      background: var(--border);
-      z-index: 0;
-    }
-    .b-steps[data-layout='horizontal'] .b-steps__marker { position: relative; z-index: 1; }
-  }
-</style>
+---
+/** Steps — a Level-2 recipe: a numbered process. `horizontal` lays connected
+ *  cards in a row; `vertical` a stacked timeline. Composes Heading + Icon. */
+import Heading from '../blocks/Heading.astro';
+import Icon from '../Icon.astro';
+import { isIconKey } from '../../lib/icons';
+
+import { inlineMarkdown } from '../../lib/inline-markdown';
+interface Item { title: string; text?: string; icon?: string }
+interface Props {
+  title?: string;
+  intro?: string;
+  layout?: 'horizontal' | 'vertical';
+  items?: Item[];
+}
+const { title, intro, layout = 'horizontal', items = [] } = Astro.props;
+---
+
+<section class="b-steps" data-layout={layout}>
+  {(title || intro) && (
+    <div class="b-steps__head">
+      {title && <Heading text={title} level={2} align="center" />}
+      {intro && <p class="b-steps__intro" set:html={inlineMarkdown(intro)} />}
+    </div>
+  )}
+  <ol class="b-steps__list">
+    {items.map((item, i) => (
+      <li class="b-steps__item">
+        <span class="b-steps__marker" aria-hidden="true">
+          {item.icon && isIconKey(item.icon) ? <Icon name={item.icon} size={20} /> : i + 1}
+        </span>
+        <div class="b-steps__body">
+          <h3 class="b-steps__title">{item.title}</h3>
+          {item.text && <p class="b-steps__text">{item.text}</p>}
+        </div>
+      </li>
+    ))}
+  </ol>
+</section>
+
+<style>
+  .b-steps {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    max-width: 72rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  .b-steps__head {
+    max-width: var(--max);
+    margin-inline: auto;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .b-steps__intro { margin: 0; color: var(--muted); line-height: 1.6; }
+  .b-steps__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 1.5rem;
+  }
+  /* Base (and mobile): marker left, body right. */
+  .b-steps__item {
+    display: flex;
+    gap: 1rem;
+    align-items: flex-start;
+  }
+  .b-steps__marker {
+    flex-shrink: 0;
+    width: 2.5rem;
+    height: 2.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-pill);
+    background: var(--gold);
+    color: var(--text-light);
+    font-family: var(--font-heading);
+    font-weight: 700;
+    font-size: 1.05rem;
+  }
+  .b-steps__title { margin: 0 0 0.35rem; font-size: 1.1rem; color: var(--fg); }
+  .b-steps__text { margin: 0; color: var(--muted); line-height: 1.6; }
+
+  /* Vertical: a centred, stacked timeline. */
+  .b-steps[data-layout='vertical'] .b-steps__list { max-width: 40rem; margin-inline: auto; }
+
+  /* Horizontal (≥48em): connected cards in a row, marker over centred body. */
+  @media (min-width: 48em) {
+    .b-steps[data-layout='horizontal'] .b-steps__list {
+      grid-auto-flow: column;
+      grid-auto-columns: 1fr;
+      gap: 1rem;
+    }
+    .b-steps[data-layout='horizontal'] .b-steps__item {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      gap: 0.85rem;
+      position: relative;
+    }
+    /* Connector from this marker's right edge to the next marker's left edge.
+       The +1.5rem / -2rem account for the 2.5rem marker AND the 1rem grid gap,
+       so the line sits centred between markers (not falling short). */
+    .b-steps[data-layout='horizontal'] .b-steps__item:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      top: calc(1.25rem - 1px);
+      left: calc(50% + 1.5rem);
+      width: calc(100% - 2rem);
+      height: 2px;
+      background: var(--border);
+      z-index: 0;
+    }
+    .b-steps[data-layout='horizontal'] .b-steps__marker { position: relative; z-index: 1; }
+  }
+</style>

package/components/recipes/Table.astro

@@ -8,6 +8,8 @@
 import Heading from '../blocks/Heading.astro';
 
 import { inlineMarkdown } from '../../lib/inline-markdown';
+import { filledColumns } from '../../lib/table';
+import { proseParts } from '../../lib/prose';
 interface Props {
   title?: string;
   intro?: string;
@@ -15,25 +17,27 @@ interface Props {
   rows?: string[][];
 }
 const { title, intro, columns = [], rows = [] } = Astro.props;
+// Columns empty in every row (an unused "Evening") are dropped, not shown blank.
+const keep = filledColumns(columns, rows);
 ---
 
 <section class="b-table">
   {(title || intro) && (
     <div class="b-table__head">
       {title && <Heading text={title} level={2} />}
-      {intro && <p class="b-table__intro" set:html={inlineMarkdown(intro)} />}
+      {intro && proseParts(intro).map((part) => part.kind === 'p' ? <p class="b-table__intro" set:html={part.html} /> : <ul class="b-table__intro">{part.items.map((x) => <li set:html={x} />)}</ul>)}
     </div>
   )}
   <div class="b-table__scroll">
     <table class="b-table__table">
       {columns.length > 0 && (
         <thead>
-          <tr>{columns.map((c) => <th scope="col">{c}</th>)}</tr>
+          <tr>{keep.map((i) => <th scope="col">{columns[i]}</th>)}</tr>
         </thead>
       )}
       <tbody>
         {rows.map((row) => (
-          <tr>{row.map((cell) => <td set:html={inlineMarkdown(cell)} />)}</tr>
+          <tr>{(columns.length ? keep : row.map((_, i) => i)).map((i) => <td set:html={inlineMarkdown(row[i] ?? '')} />)}</tr>
         ))}
       </tbody>
     </table>

package/components/recipes/Video.astro

@@ -38,7 +38,7 @@ const safeLink = /^https:\/\//i.test(url) ? url : undefined;
         </div>
         <div class="b-video__frame"></div>
       </div>
-      {caption && <figcaption class="b-video__caption">{caption}</figcaption>}
+      {caption && <figcaption class="b-video__caption" set:html={inlineMarkdown(caption)} />}
     </figure>
     {/* Always visible, before AND after the player loads: the way to the provider. */}
     <div class="b-video__footer">

package/content/blocks.ts

@@ -1,4 +1,5 @@
 import { z } from 'zod';
+import { iconKeys, isIconKey } from '../lib/icons';
 
 /**
  * The block palette — the heart of the Ferst page model (see
@@ -14,6 +15,12 @@ import { z } from 'zod';
 
 /** Every block shares a `type` discriminant and an `enabled` flag (keep a block
  *  in the page data without rendering it). */
+/** An icon name from the engine's registry (lib/icons). An unknown name fails validation,
+ *  and so the build, with the valid names listed, instead of rendering nothing silently. */
+const iconName = z.string().refine(isIconKey, (v) => ({
+  message: `Unknown icon "${v}". Use one of: ${iconKeys.join(', ')}.`,
+}));
+
 export const headingBlock = z.object({
   type: z.literal('heading'),
   enabled: z.boolean().default(true),
@@ -159,7 +166,7 @@ export const featureCardsBlock = z.object({
   cards: z
     .array(
       z.object({
-        icon: z.string().optional(),
+        icon: iconName.optional(),
         title: z.string(),
         text: z.string().optional(),
         href: z.string().optional(),
@@ -261,7 +268,7 @@ export const tilesBlock = z.object({
     .array(
       z
         .object({
-          icon: z.string().optional(),
+          icon: iconName.optional(),
           eyebrow: z.string().optional(),
           /** Optional only for a picture tile: with an image and no text, the tile is
            *  the picture alone (no scrim) — a linked poster/logo — named by its alt. */
@@ -319,7 +326,7 @@ export const stepsBlock = z.object({
   title: z.string().optional(),
   intro: z.string().optional(),
   layout: z.enum(['horizontal', 'vertical']).default('horizontal'),
-  items: z.array(z.object({ title: z.string(), text: z.string().optional(), icon: z.string().optional() })).default([]),
+  items: z.array(z.object({ title: z.string(), text: z.string().optional(), icon: iconName.optional() })).default([]),
 });
 
 /** Pricing — a row of plan cards (name, price, period, feature list, CTA). One
@@ -388,7 +395,7 @@ export const bentoBlock = z.object({
       z.object({
         size: z.enum(['sm', 'wide', 'tall', 'lg']).default('sm'),
         variant: z.enum(['surface', 'filled', 'gradient', 'image']).default('surface'),
-        icon: z.string().optional(),
+        icon: iconName.optional(),
         eyebrow: z.string().optional(),
         title: z.string(),
         text: z.string().optional(),
@@ -471,7 +478,7 @@ export const noticeBlock = z.object({
   type: z.literal('notice'),
   enabled: z.boolean().default(true),
   tone: z.enum(['accent', 'neutral']).default('accent'),
-  icon: z.string().optional(),
+  icon: iconName.optional(),
   title: z.string().optional(),
   text: z.string(),
   link: z.object({ label: z.string(), href: z.string() }).optional(),
@@ -492,7 +499,7 @@ export const mediaCardsBlock = z.object({
     .array(
       z.object({
         image: z.object({ src: z.string(), alt: z.string().default('') }).optional(),
-        icon: z.string().optional(),
+        icon: iconName.optional(),
         title: z.string(),
         /** A short meta line shown as a pill (e.g. "Sundays 10:45 · Main hall"). */
         meta: z.string().optional(),
@@ -517,7 +524,7 @@ export const contactCardBlock = z.object({
   items: z
     .array(
       z.object({
-        icon: z.string().optional(),
+        icon: iconName.optional(),
         value: z.string(),
         href: z.string().optional(),
       })
@@ -631,6 +638,51 @@ export const timetableBlock = z.object({
     .min(1),
 });
 
+/** Contacts — a compact directory of people or offices: role as the card title, phone and
+ *  email as tap targets (email with an optional subject), address and hours, and a shared
+ *  note per group (e.g. office hours) instead of repeating it on every card. */
+export const contactsBlock = z.object({
+  type: z.literal('contacts'),
+  enabled: z.boolean().default(true),
+  title: z.string().optional(),
+  intro: z.string().optional(),
+  groups: z
+    .array(
+      z.object({
+        heading: z.string().optional(),
+        note: z.string().optional(),
+        contacts: z
+          .array(
+            z.object({
+              role: z.string().optional(),
+              name: z.string().optional(),
+              phone: z.string().optional(),
+              email: z.string().optional(),
+              emailSubject: z.string().optional(),
+              address: z.string().optional(),
+              hours: z.string().optional(),
+            })
+            .refine((c) => !!c.role || !!c.name, { message: 'A contact needs a role or a name', path: ['role'] })
+          )
+          .min(1),
+      })
+    )
+    .min(1),
+});
+
+/** MediaText — an image beside its text (start or end), stacking on a phone. The text takes
+ *  prose formatting; the image keeps its shape (`ratio` crops to a set shape); optional CTA. */
+export const mediaTextBlock = z.object({
+  type: z.literal('mediaText'),
+  enabled: z.boolean().default(true),
+  title: z.string().optional(),
+  text: z.string(),
+  image: z.object({ src: z.string(), alt: z.string().default(''), caption: z.string().optional() }),
+  imageSide: z.enum(['start', 'end']).default('end'),
+  ratio: z.enum(['auto', '1/1', '4/3', '3/2', '16/9']).default('auto'),
+  cta: z.object({ label: z.string(), href: z.string() }).optional(),
+});
+
 export type RecipeBlock =
   | z.infer<typeof heroBlock>
   | z.infer<typeof featureCardsBlock>
@@ -661,7 +713,9 @@ export type RecipeBlock =
   | z.infer<typeof documentsBlock>
   | z.infer<typeof linkRowBlock>
   | z.infer<typeof documentBlock>
-  | z.infer<typeof timetableBlock>;
+  | z.infer<typeof timetableBlock>
+  | z.infer<typeof contactsBlock>
+  | z.infer<typeof mediaTextBlock>;
 
 /* ── Level-1 layout / container primitives ─────────────────────────────────
  * These hold child blocks, so the schema is **recursive** (a container's
@@ -777,6 +831,8 @@ export const blockSchema = z.discriminatedUnion('type', [
   linkRowBlock,
   documentBlock,
   timetableBlock,
+  contactsBlock,
+  mediaTextBlock,
   sectionBlock,
   gridBlock,
   stackBlock,