ferst-core 0.7.2 → 0.7.5

package/components/recipes/Timetable.astro

@@ -0,0 +1,189 @@
+---
+/**
+ * Timetable — weekly times for one or more places: worship times, opening hours,
+ * sessions, classes. `cards` (default): a card per place with its days and times, days
+ * with no times left out, notes (inline markdown) under each. `table`: places side by
+ * side, days down the side; a day nobody uses is dropped. Logic in lib/timetable.
+ */
+import Heading from '../blocks/Heading.astro';
+import { daysWithTimes, timetableRows } from '../../lib/timetable';
+import { inlineMarkdown } from '../../lib/inline-markdown';
+
+interface Place {
+  name: string;
+  address?: string;
+  href?: string;
+  schedule: Array<{ day: string; times: string[] }>;
+  notes?: string;
+}
+interface Props {
+  title?: string;
+  intro?: string;
+  layout?: 'cards' | 'table';
+  places: Place[];
+}
+const { title, intro, layout = 'cards', places = [] } = Astro.props;
+const rows = layout === 'table' ? timetableRows(places) : [];
+const cols = Math.min(places.length, 3);
+---
+
+<section class="b-tt" data-layout={layout}>
+  {(title || intro) && (
+    <div class="b-tt__head">
+      {title && <Heading text={title} level={2} />}
+      {intro && <p class="b-tt__intro" set:html={inlineMarkdown(intro)} />}
+    </div>
+  )}
+
+  {layout === 'table' ? (
+    <div class="b-tt__scroll">
+      <table>
+        <thead>
+          <tr>
+            <td></td>
+            {places.map((p) => <th scope="col">{p.name}</th>)}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((r) => (
+            <tr>
+              <th scope="row">{r.day}</th>
+              {r.cells.map((times) => <td>{times.length ? times.join(', ') : <span class="b-tt__none" aria-label="none">—</span>}</td>)}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  ) : (
+    <div class="b-tt__grid" data-cols={cols}>
+      {places.map((p) => (
+        <article class="b-tt__place">
+          <h3 class="b-tt__name">{p.href ? <a href={p.href}>{p.name}</a> : p.name}</h3>
+          {p.address && <p class="b-tt__address">{p.address}</p>}
+          <dl class="b-tt__days">
+            {daysWithTimes(p.schedule).map((d) => (
+              <div class="b-tt__day">
+                <dt>{d.day}</dt>
+                <dd>{d.times.join(' · ')}</dd>
+              </div>
+            ))}
+          </dl>
+          {p.notes && <p class="b-tt__notes" set:html={inlineMarkdown(p.notes)} />}
+        </article>
+      ))}
+    </div>
+  )}
+</section>
+
+<style>
+  .b-tt {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    width: 100%;
+    max-width: 72rem;
+  }
+  .b-tt__head {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    max-width: var(--max);
+  }
+  .b-tt__intro {
+    margin: 0;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  .b-tt__grid {
+    display: grid;
+    gap: 1.25rem;
+    grid-template-columns: 1fr;
+  }
+  @media (min-width: 48em) {
+    .b-tt__grid[data-cols='2'],
+    .b-tt__grid[data-cols='3'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  }
+  @media (min-width: 64em) {
+    .b-tt__grid[data-cols='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  }
+  .b-tt__grid[data-cols='1'] {
+    max-width: 32rem;
+  }
+  .b-tt__place {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 1.25rem 1.4rem;
+    border: var(--card-border);
+    border-radius: var(--radius);
+    background: var(--bg-surface);
+  }
+  .b-tt__name {
+    margin: 0;
+    font-size: 1.2rem;
+  }
+  .b-tt__name a {
+    color: inherit;
+  }
+  .b-tt__address {
+    margin: -0.4rem 0 0;
+    font-size: 0.9rem;
+    color: var(--muted);
+  }
+  .b-tt__days {
+    margin: 0;
+    display: grid;
+  }
+  .b-tt__day {
+    display: grid;
+    grid-template-columns: minmax(6.5rem, auto) 1fr;
+    gap: 0.75rem;
+    padding: 0.5rem 0;
+    border-top: var(--card-border);
+  }
+  .b-tt__day:first-child {
+    border-top: 0;
+  }
+  .b-tt__day dt {
+    font-weight: 600;
+  }
+  .b-tt__day dd {
+    margin: 0;
+    font-variant-numeric: tabular-nums;
+  }
+  .b-tt__notes {
+    margin: 0;
+    font-size: 0.9375rem;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  .b-tt__notes :global(a) {
+    color: var(--accent);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+  .b-tt__scroll {
+    overflow-x: auto;
+  }
+  .b-tt table {
+    border-collapse: collapse;
+    min-width: 100%;
+    font-variant-numeric: tabular-nums;
+  }
+  .b-tt th,
+  .b-tt td {
+    padding: 0.7rem 1rem;
+    text-align: start;
+    border-bottom: var(--card-border);
+  }
+  .b-tt thead th {
+    font-size: 0.875rem;
+    color: var(--muted);
+  }
+  .b-tt tbody th {
+    font-weight: 600;
+  }
+  .b-tt__none {
+    color: var(--muted);
+  }
+</style>

package/components/recipes/Video.astro

@@ -1,157 +1,177 @@
----
-/**
- * Video — a consent-gated YouTube / Vimeo player (including a channel's live stream),
- * the sibling of the map embed. The editor pastes the ordinary link; lib/video turns it
- * into a privacy-friendly embed (youtube-nocookie, Vimeo dnt). Nothing loads from the
- * provider until the visitor agrees, then the player fills a fixed-ratio frame. An
- * unrecognised link degrades to a plain "watch" link.
- */
-import { videoEmbed } from '../../lib/video';
-
-interface Props {
-  title?: string;
-  caption?: string;
-  url: string;
-  ratio?: '16/9' | '4/3' | '1/1' | '9/16';
-}
-const { title = '', caption = '', url, ratio = '16/9' } = Astro.props;
-const v = videoEmbed(url);
-const safeLink = /^https:\/\//i.test(url) ? url : undefined;
----
-
-<section class="b-video">
-  {title && <h2 class="b-video__title">{title}</h2>}
-  {v ? (
-    <figure class="b-video__figure">
-      <div class="b-video__embed" style={`aspect-ratio: ${ratio}`} data-embed-url={v.embedUrl} data-title={title || `Video on ${v.provider}`}>
-        <div class="b-video__consent">
-          <p class="b-video__consent-text">
-            This video is provided by <strong>{v.provider}</strong>. Playing it here shares your
-            device's data (such as your IP address) with {v.provider}.
-          </p>
-          <div class="b-video__actions">
-            <button type="button" class="b-video__load">Show video</button>
-            <a class="b-video__link" href={v.watchUrl} target="_blank" rel="noopener">Watch on {v.provider} instead</a>
-          </div>
-        </div>
-        <div class="b-video__frame"></div>
-      </div>
-      {caption && <figcaption class="b-video__caption">{caption}</figcaption>}
-    </figure>
-  ) : (
-    <p class="b-video__note">
-      {safeLink ? <a href={safeLink} target="_blank" rel="noopener">Watch the video</a> : "The video isn't set up yet."}
-    </p>
-  )}
-</section>
-
-<script>
-  import { initEmbedConsent, makeEmbedFrame } from '../../lib/embed-consent';
-
-  initEmbedConsent({
-    root: '.b-video__embed',
-    frame: '.b-video__frame',
-    consent: '.b-video__consent',
-    button: '.b-video__load',
-    buildFrame: (el, url) => {
-      const f = makeEmbedFrame(url, { title: el.dataset.title || 'Video', height: '100%' });
-      f.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen';
-      f.allowFullscreen = true;
-      return f;
-    },
-  });
-</script>
-
-<style>
-  .b-video {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    max-width: 60rem;
-    margin-inline: auto;
-    padding-inline: 1rem;
-    width: 100%;
-  }
-  .b-video__title {
-    margin: 0;
-  }
-  .b-video__figure {
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 0.6rem;
-  }
-  .b-video__embed {
-    position: relative;
-    width: 100%;
-    max-width: 100%;
-    border-radius: var(--radius);
-    overflow: hidden;
-    background: var(--bg-section);
-    border: var(--card-border);
-  }
-  .b-video__frame {
-    position: absolute;
-    inset: 0;
-  }
-  .b-video__frame :global(iframe) {
-    display: block;
-  }
-  .b-video__consent {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    align-items: center;
-    justify-content: center;
-    padding: 1.5rem;
-    text-align: center;
-  }
-  .b-video__consent[hidden] {
-    display: none;
-  }
-  .b-video__consent-text {
-    margin: 0;
-    max-width: 46ch;
-    color: var(--muted);
-    line-height: 1.6;
-  }
-  .b-video__actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.75rem 1.25rem;
-    align-items: center;
-    justify-content: center;
-  }
-  .b-video__load {
-    font: inherit;
-    font-family: var(--font-heading);
-    font-weight: 600;
-    padding: 0.6rem 1.4rem;
-    border: none;
-    border-radius: var(--radius-sm);
-    background: var(--gold);
-    color: var(--text-light);
-    cursor: pointer;
-  }
-  .b-video__load:hover {
-    filter: brightness(0.94);
-  }
-  .b-video__load:focus-visible {
-    outline: 2px solid var(--gold);
-    outline-offset: 2px;
-  }
-  .b-video__link,
-  .b-video__note a {
-    color: var(--gold);
-    font-weight: 600;
-  }
-  .b-video__caption,
-  .b-video__note {
-    margin: 0;
-    color: var(--muted);
-    font-size: 0.9375rem;
-  }
-</style>
+---
+/**
+ * Video — a consent-gated YouTube / Vimeo player (including a channel's live stream),
+ * the sibling of the map embed. The editor pastes the ordinary link; lib/video turns it
+ * into a privacy-friendly embed (youtube-nocookie, Vimeo dnt). Nothing loads from the
+ * provider until the visitor agrees, then the player fills a fixed-ratio frame. An
+ * unrecognised link degrades to a plain "watch" link.
+ */
+import { videoEmbed } from '../../lib/video';
+import { inlineMarkdown } from '../../lib/inline-markdown';
+
+interface Props {
+  title?: string;
+  caption?: string;
+  note?: string;
+  url: string;
+  ratio?: '16/9' | '4/3' | '1/1' | '9/16';
+}
+const { title = '', caption = '', note = '', url, ratio = '16/9' } = Astro.props;
+const v = videoEmbed(url);
+const safeLink = /^https:\/\//i.test(url) ? url : undefined;
+---
+
+<section class="b-video" data-live={v?.live ? 'true' : undefined}>
+  {title && <h2 class="b-video__title">{title}</h2>}
+  {v ? (
+    <>
+    <figure class="b-video__figure">
+      <div class="b-video__embed" style={`aspect-ratio: ${ratio}`} data-embed-url={v.embedUrl} data-title={title || `Video on ${v.provider}`} data-on-demand={v.live ? 'true' : undefined}>
+        <div class="b-video__consent">
+          <p class="b-video__consent-text">
+            {v.live ? 'This live stream' : 'This video'} is provided by <strong>{v.provider}</strong>. Playing it here
+            shares your device's data (such as your IP address) with {v.provider}.
+          </p>
+          <div class="b-video__actions">
+            <button type="button" class="b-video__load">{v.live ? 'Show the live stream' : 'Show video'}</button>
+          </div>
+        </div>
+        <div class="b-video__frame"></div>
+      </div>
+      {caption && <figcaption class="b-video__caption">{caption}</figcaption>}
+    </figure>
+    {/* Always visible, before AND after the player loads: the way to the provider. */}
+    <div class="b-video__footer">
+      {note && <p class="b-video__note-text" set:html={inlineMarkdown(note)} />}
+      <a class="b-video__link" href={v.watchUrl} target="_blank" rel="noopener">Watch on {v.provider} &#8599;</a>
+    </div>
+    </>
+  ) : (
+    <p class="b-video__note">
+      {safeLink ? <a href={safeLink} target="_blank" rel="noopener">Watch the video</a> : "The video isn't set up yet."}
+    </p>
+  )}
+</section>
+
+<script>
+  import { initEmbedConsent, makeEmbedFrame } from '../../lib/embed-consent';
+
+  initEmbedConsent({
+    root: '.b-video__embed',
+    frame: '.b-video__frame',
+    consent: '.b-video__consent',
+    button: '.b-video__load',
+    buildFrame: (el, url) => {
+      const f = makeEmbedFrame(url, { title: el.dataset.title || 'Video', height: '100%' });
+      f.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen';
+      f.allowFullscreen = true;
+      return f;
+    },
+  });
+</script>
+
+<style>
+  .b-video {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    max-width: 60rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+    width: 100%;
+  }
+  .b-video__title {
+    margin: 0;
+  }
+  .b-video__figure {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+  }
+  .b-video__embed {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    border-radius: var(--radius);
+    overflow: hidden;
+    background: var(--bg-section);
+    border: var(--card-border);
+  }
+  .b-video__frame {
+    position: absolute;
+    inset: 0;
+  }
+  .b-video__frame :global(iframe) {
+    display: block;
+  }
+  .b-video__consent {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+    justify-content: center;
+    padding: 1.5rem;
+    text-align: center;
+  }
+  .b-video__consent[hidden] {
+    display: none;
+  }
+  .b-video__consent-text {
+    margin: 0;
+    max-width: 46ch;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  .b-video__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem 1.25rem;
+    align-items: center;
+    justify-content: center;
+  }
+  .b-video__load {
+    font: inherit;
+    font-family: var(--font-heading);
+    font-weight: 600;
+    padding: 0.6rem 1.4rem;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: var(--gold);
+    color: var(--text-light);
+    cursor: pointer;
+  }
+  .b-video__load:hover {
+    filter: brightness(0.94);
+  }
+  .b-video__load:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: 2px;
+  }
+  .b-video__link,
+  .b-video__note a {
+    color: var(--gold);
+    font-weight: 600;
+  }
+  .b-video__footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.5rem 1.25rem;
+  }
+  .b-video__note-text {
+    margin: 0;
+    color: var(--fg);
+    line-height: 1.6;
+  }
+  .b-video__caption,
+  .b-video__note {
+    margin: 0;
+    color: var(--muted);
+    font-size: 0.9375rem;
+  }
+</style>

package/content/blocks.ts

@@ -33,6 +33,9 @@ export const proseBlock = z.object({
   /** Blank lines separate paragraphs; `- ` / `1. ` lines make lists; inline
    *  `[links](href)` (incl. tel:/mailto:), `**bold**` and `*italic*` (lib/prose.ts). */
   text: z.string(),
+  /** `lead` = the page's introduction: larger and quieter than body text, for the
+   *  paragraph straight under the hero. */
+  variant: z.enum(['body', 'lead']).default('body'),
 });
 
 export const imageBlock = z.object({
@@ -139,6 +142,9 @@ export const heroBlock = z.object({
   /** How much of the screen a `media` hero takes: `standard` (a band), `tall`,
    *  or `screen` — the full first screen, edge to edge (e.g. a video opener). */
   size: z.enum(['standard', 'tall', 'screen']).default('standard'),
+  /** A `media` hero's background drifts more slowly than the page as it scrolls (any
+   *  background: image, slides or video). Off on touch devices and under reduced motion. */
+  parallax: z.boolean().default(false),
   /** Ambient background for centered/split heroes: `mesh` = a soft, slowly
    *  drifting brand gradient behind the text (static under reduced-motion). */
   background: z.enum(['none', 'mesh']).default('none'),
@@ -548,6 +554,8 @@ export const videoBlock = z.object({
   enabled: z.boolean().default(true),
   title: z.string().optional(),
   caption: z.string().optional(),
+  /** A short note under the player (inline markdown), e.g. a live stream's schedule. */
+  note: z.string().optional(),
   url: z.string(),
   ratio: z.enum(['16/9', '4/3', '1/1', '9/16']).default('16/9'),
 });
@@ -573,6 +581,100 @@ export const documentsBlock = z.object({
     .default([]),
 });
 
+/** LinkRow — a titled row of contact or reference links as tappable pills (phone, email,
+ *  web), each with the icon its link implies, plus an optional intro and footnote. For a
+ *  contact who isn't worth a whole contact card (e.g. "Vocations: phone · email · site"). */
+export const linkRowBlock = z.object({
+  type: z.literal('linkRow'),
+  enabled: z.boolean().default(true),
+  title: z.string().optional(),
+  intro: z.string().optional(),
+  links: z.array(z.object({ label: z.string(), href: z.string() })).min(1),
+  note: z.string().optional(),
+});
+
+/** Document — a policy or legal text as ONE block: sections numbered automatically, a
+ *  contents list linking to each (sticky beside the text on wide screens), an optional
+ *  "last updated" date (YYYY-MM-DD), and print-friendly. Section bodies take prose
+ *  formatting; `items` add a list. Replaces dozens of hand-numbered headings + paragraphs. */
+export const documentBlock = z.object({
+  type: z.literal('document'),
+  enabled: z.boolean().default(true),
+  intro: z.string().optional(),
+  updated: z.string().optional(),
+  numbered: z.boolean().default(true),
+  toc: z.boolean().default(true),
+  sections: z
+    .array(z.object({ title: z.string(), body: z.string().optional(), items: z.array(z.string()).optional() }))
+    .min(1),
+});
+
+/** Timetable — weekly times for one or more places (worship times, opening hours,
+ *  sessions, classes). `cards`: a card per place, days with no times left out, notes
+ *  (inline markdown) under each. `table`: places side by side, days down the side. */
+export const timetableBlock = z.object({
+  type: z.literal('timetable'),
+  enabled: z.boolean().default(true),
+  title: z.string().optional(),
+  intro: z.string().optional(),
+  layout: z.enum(['cards', 'table']).default('cards'),
+  places: z
+    .array(
+      z.object({
+        name: z.string(),
+        address: z.string().optional(),
+        href: z.string().optional(),
+        schedule: z.array(z.object({ day: z.string(), times: z.array(z.string()).default([]) })).default([]),
+        notes: z.string().optional(),
+      })
+    )
+    .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(),
+              name: z.string().optional(),
+              phone: z.string().optional(),
+              email: z.string().optional(),
+              emailSubject: z.string().optional(),
+              address: z.string().optional(),
+              hours: z.string().optional(),
+            })
+          )
+          .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>
@@ -600,7 +702,12 @@ export type RecipeBlock =
   | z.infer<typeof contactCardBlock>
   | z.infer<typeof locationsBlock>
   | z.infer<typeof videoBlock>
-  | z.infer<typeof documentsBlock>;
+  | z.infer<typeof documentsBlock>
+  | z.infer<typeof linkRowBlock>
+  | z.infer<typeof documentBlock>
+  | 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
@@ -713,6 +820,11 @@ export const blockSchema = z.discriminatedUnion('type', [
   locationsBlock,
   videoBlock,
   documentsBlock,
+  linkRowBlock,
+  documentBlock,
+  timetableBlock,
+  contactsBlock,
+  mediaTextBlock,
   sectionBlock,
   gridBlock,
   stackBlock,