ferst-core 0.7.7 → 0.7.9

package/bin/ferst-modules.mjs

@@ -9,9 +9,25 @@
 // Forms and calendars live in the portal, never in the repo: place a form with a
 // `{ "type": "form", "form": "<id>" }` block, and show the calendar by setting
 // calendarSettings.embedUrl to the address printed here.
-import { readFileSync } from 'node:fs';
+import { readFileSync, realpathSync } from 'node:fs';
 import { resolve } from 'node:path';
-import { isDirectInvocation, resolveGitBase } from './cms-config.mjs';
+import { pathToFileURL } from 'node:url';
+import { resolveGitBase } from './cms-config.mjs';
+
+/**
+ * True when THIS file is run as a CLI (not imported). Each bin needs its own copy:
+ * `import.meta.url` is per file, so one borrowed from another bin only ever matches that
+ * bin (0.7.7 printed nothing). Handles npm's `node_modules/.bin` symlink via realpath.
+ */
+export function isDirectInvocation(argv1) {
+  if (!argv1) return false;
+  if (import.meta.url === pathToFileURL(argv1).href) return true;
+  try {
+    return import.meta.url === pathToFileURL(realpathSync(argv1)).href;
+  } catch {
+    return false;
+  }
+}
 
 /** The site to ask about: `--site <ref>`, else ferst-site.json's siteId, else null. */
 export function moduleRef(argv, siteMeta) {

package/components/BlockRenderer.astro

@@ -1,119 +1,125 @@
----
-/**
- * Renders an ordered list of blocks by mapping each block's `type` to its
- * component via a registry. Disabled blocks are skipped. The registry is typed
- * `Record<BlockType, …>`, so adding a block type to the union without a renderer
- * here is a compile error — no silent `undefined` component at runtime.
- */
-import type { Block, BlockType } from '../content/blocks';
-import Heading from './blocks/Heading.astro';
-import Prose from './blocks/Prose.astro';
-import ImageBlock from './blocks/ImageBlock.astro';
-import ButtonBlock from './blocks/ButtonBlock.astro';
-import Quote from './blocks/Quote.astro';
-import Divider from './blocks/Divider.astro';
-import Spacer from './blocks/Spacer.astro';
-import Badge from './blocks/Badge.astro';
-import Stat from './blocks/Stat.astro';
-import List from './blocks/List.astro';
-import Section from './blocks/Section.astro';
-import Grid from './blocks/Grid.astro';
-import Stack from './blocks/Stack.astro';
-import Hero from './recipes/Hero.astro';
-import FeatureCards from './recipes/FeatureCards.astro';
-import Cta from './recipes/Cta.astro';
-import Faq from './recipes/Faq.astro';
-import Gallery from './recipes/Gallery.astro';
-import Testimonial from './recipes/Testimonial.astro';
-import ContactForm from './recipes/ContactForm.astro';
-import Form from './recipes/Form.astro';
-import Accordion from './recipes/Accordion.astro';
-import Tiles from './recipes/Tiles.astro';
-import Banner from './recipes/Banner.astro';
-import Stats from './recipes/Stats.astro';
-import Steps from './recipes/Steps.astro';
-import Pricing from './recipes/Pricing.astro';
-import Logos from './recipes/Logos.astro';
-import Tabs from './recipes/Tabs.astro';
-import Announcement from './recipes/Announcement.astro';
-import Bento from './recipes/Bento.astro';
-import Marquee from './recipes/Marquee.astro';
-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';
-import ContactCard from './recipes/ContactCard.astro';
-import Locations from './recipes/Locations.astro';
-import Video from './recipes/Video.astro';
-import Documents from './recipes/Documents.astro';
-import LinkRow from './recipes/LinkRow.astro';
-import DocumentRecipe from './recipes/Document.astro';
-import Timetable from './recipes/Timetable.astro';
-import Contacts from './recipes/Contacts.astro';
-import MediaText from './recipes/MediaText.astro';
-
-interface Props {
-  blocks: Block[];
-}
-
-const { blocks } = Astro.props;
-
-const registry: Record<BlockType, any> = {
-  heading: Heading,
-  prose: Prose,
-  image: ImageBlock,
-  button: ButtonBlock,
-  quote: Quote,
-  divider: Divider,
-  spacer: Spacer,
-  badge: Badge,
-  stat: Stat,
-  list: List,
-  section: Section,
-  grid: Grid,
-  stack: Stack,
-  hero: Hero,
-  featureCards: FeatureCards,
-  cta: Cta,
-  faq: Faq,
-  gallery: Gallery,
-  testimonial: Testimonial,
-  contactForm: ContactForm,
-  form: Form,
-  accordion: Accordion,
-  tiles: Tiles,
-  banner: Banner,
-  stats: Stats,
-  steps: Steps,
-  pricing: Pricing,
-  logos: Logos,
-  tabs: Tabs,
-  announcement: Announcement,
-  bento: Bento,
-  marquee: Marquee,
-  latestPosts: LatestPosts,
-  mapEmbed: MapEmbed,
-  table: Table,
-  notice: Notice,
-  mediaCards: MediaCards,
-  contactCard: ContactCard,
-  locations: Locations,
-  video: Video,
-  documents: Documents,
-  linkRow: LinkRow,
-  document: DocumentRecipe,
-  timetable: Timetable,
-  contacts: Contacts,
-  mediaText: MediaText,
-};
----
-
-{
-  blocks
-    .filter((block) => block.enabled !== false)
-    .map((block) => {
-      const Component = registry[block.type];
-      return <Component {...block} />;
-    })
-}
+---
+/**
+ * Renders an ordered list of blocks by mapping each block's `type` to its
+ * component via a registry. Disabled blocks are skipped. The registry is typed
+ * `Record<BlockType, …>`, so adding a block type to the union without a renderer
+ * here is a compile error — no silent `undefined` component at runtime.
+ */
+import type { Block, BlockType } from '../content/blocks';
+import Heading from './blocks/Heading.astro';
+import Prose from './blocks/Prose.astro';
+import ImageBlock from './blocks/ImageBlock.astro';
+import ButtonBlock from './blocks/ButtonBlock.astro';
+import Quote from './blocks/Quote.astro';
+import Divider from './blocks/Divider.astro';
+import Spacer from './blocks/Spacer.astro';
+import Badge from './blocks/Badge.astro';
+import Stat from './blocks/Stat.astro';
+import List from './blocks/List.astro';
+import Section from './blocks/Section.astro';
+import Grid from './blocks/Grid.astro';
+import Stack from './blocks/Stack.astro';
+import Hero from './recipes/Hero.astro';
+import FeatureCards from './recipes/FeatureCards.astro';
+import Cta from './recipes/Cta.astro';
+import Faq from './recipes/Faq.astro';
+import Gallery from './recipes/Gallery.astro';
+import Testimonial from './recipes/Testimonial.astro';
+import ContactForm from './recipes/ContactForm.astro';
+import Form from './recipes/Form.astro';
+import Accordion from './recipes/Accordion.astro';
+import Tiles from './recipes/Tiles.astro';
+import Banner from './recipes/Banner.astro';
+import Stats from './recipes/Stats.astro';
+import Steps from './recipes/Steps.astro';
+import Pricing from './recipes/Pricing.astro';
+import Logos from './recipes/Logos.astro';
+import Tabs from './recipes/Tabs.astro';
+import Announcement from './recipes/Announcement.astro';
+import Bento from './recipes/Bento.astro';
+import Marquee from './recipes/Marquee.astro';
+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';
+import ContactCard from './recipes/ContactCard.astro';
+import Locations from './recipes/Locations.astro';
+import Video from './recipes/Video.astro';
+import Documents from './recipes/Documents.astro';
+import LinkRow from './recipes/LinkRow.astro';
+import DocumentRecipe from './recipes/Document.astro';
+import Timetable from './recipes/Timetable.astro';
+import Contacts from './recipes/Contacts.astro';
+import MediaText from './recipes/MediaText.astro';
+
+interface Props {
+  blocks: Block[];
+}
+
+const { blocks } = Astro.props;
+
+const registry: Record<BlockType, any> = {
+  heading: Heading,
+  prose: Prose,
+  image: ImageBlock,
+  button: ButtonBlock,
+  quote: Quote,
+  divider: Divider,
+  spacer: Spacer,
+  badge: Badge,
+  stat: Stat,
+  list: List,
+  section: Section,
+  grid: Grid,
+  stack: Stack,
+  hero: Hero,
+  featureCards: FeatureCards,
+  cta: Cta,
+  faq: Faq,
+  gallery: Gallery,
+  testimonial: Testimonial,
+  contactForm: ContactForm,
+  form: Form,
+  accordion: Accordion,
+  tiles: Tiles,
+  banner: Banner,
+  stats: Stats,
+  steps: Steps,
+  pricing: Pricing,
+  logos: Logos,
+  tabs: Tabs,
+  announcement: Announcement,
+  bento: Bento,
+  marquee: Marquee,
+  latestPosts: LatestPosts,
+  mapEmbed: MapEmbed,
+  table: Table,
+  notice: Notice,
+  mediaCards: MediaCards,
+  contactCard: ContactCard,
+  locations: Locations,
+  video: Video,
+  documents: Documents,
+  linkRow: LinkRow,
+  document: DocumentRecipe,
+  timetable: Timetable,
+  contacts: Contacts,
+  mediaText: MediaText,
+};
+---
+
+{
+  blocks
+    .filter((block) => block.enabled !== false)
+    .map((block) => {
+      const Component = registry[block.type];
+      // A block's own `align` sets the alignment cascade for everything inside it. The
+      // wrapper is `display: contents`, so it adds no box and the layout is unchanged;
+      // heading / banner / section handle their own `align`.
+      const own = block.type === 'heading' || block.type === 'banner' || block.type === 'section';
+      return block.align && !own
+        ? <div class="block-align" data-content-align={block.align}><Component {...block} /></div>
+        : <Component {...block} />;
+    })
+}

package/components/Button.astro

@@ -159,7 +159,7 @@ const {
     align-items: center;
     justify-content: center;
     margin-top: auto;
-    align-self: flex-start;
+    align-self: var(--content-self, flex-start);
     background: var(--gold);
     color: var(--text-light);
     border: none;

package/components/CalendarEmbed.astro

@@ -1,4 +1,5 @@
 ---
+import { inlineMarkdown } from '../lib/inline-markdown';
 /**
  * CalendarEmbed — a consent-gated external calendar embed (e.g. Google Calendar).
  * Nothing loads from the provider until the visitor clicks "Load calendar", so no
@@ -38,7 +39,7 @@ const safe = isSafeEmbedUrl(finalEmbedUrl);
 
 <section class="b-calendar">
   {title && <h2 class="b-calendar__title">{title}</h2>}
-  {intro && <p class="b-calendar__intro">{intro}</p>}
+  {intro && <p class="b-calendar__intro" set:html={inlineMarkdown(intro)} />}
 
   {!finalEmbedUrl ? (
     <p class="b-calendar__note">The calendar isn't set up yet.</p>

package/components/Card.astro

@@ -27,6 +27,8 @@ const { as: Tag = 'div', hover = true, padding = '1.25rem 1.5rem', overflow = 'h
     padding: var(--card-padding);
     display: flex;
     flex-direction: column;
+    /* Children follow the page / section alignment (Base: --content-items). */
+    align-items: var(--content-items, stretch);
   }
 
   .card--hover {

package/components/SiteHeader.astro

@@ -1026,6 +1026,29 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     window.addEventListener('scroll', onScrollCompact, { passive: true });
   }
 
+  // The header's full height, published as --header-h on <html> so a full-screen opener
+  // fills the screen BELOW the sticky header (Hero size "screen"). Only the full-size header
+  // counts: while it's condensed on scroll, or animating between sizes, the last full value
+  // stays, so the opener never resizes as the page scrolls.
+  let headerAnimating = false;
+  function syncHeaderHeight() {
+    if (!siteHeader || headerAnimating || siteHeader.classList.contains('is-compact')) return;
+    document.documentElement.style.setProperty('--header-h', `${siteHeader.getBoundingClientRect().height}px`);
+  }
+  if (siteHeader) {
+    siteHeader.addEventListener('transitionrun', (e) => {
+      if (e.target === siteHeader && e.propertyName === 'height') headerAnimating = true;
+    });
+    const settled = (e: TransitionEvent) => {
+      if (e.target !== siteHeader || e.propertyName !== 'height') return;
+      headerAnimating = false;
+      syncHeaderHeight();
+    };
+    siteHeader.addEventListener('transitionend', settled);
+    siteHeader.addEventListener('transitioncancel', settled);
+    syncHeaderHeight();
+  }
+
   // Crowding (#11): on desktop the menu is centred on the header. When the site name (or
   // the right-hand buttons) would run into it, give the menu its own row instead. Decided
   // by measuring the real layout, so it adapts to any name and any number of links.
@@ -1048,6 +1071,7 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     const queue = () => { if (!queued) { queued = true; requestAnimationFrame(() => { queued = false; fitCheck(); }); } };
     if (brand) new ResizeObserver(queue).observe(brand);
     new ResizeObserver(queue).observe(siteHeader);
+    new ResizeObserver(syncHeaderHeight).observe(siteHeader);
     desktop.addEventListener('change', queue);
     document.fonts?.ready.then(queue);
     fitCheck();

package/components/recipes/Accordion.astro

@@ -1,87 +1,91 @@
----
-/** Accordion — a Level-2 recipe: an optional heading over expand/collapse rows
- *  (title + body). Generic sibling of FAQ (which is question/answer-flavoured).
- *  Native <details>/<summary> — accessible, interactive, zero JavaScript. */
-import Heading from '../blocks/Heading.astro';
-
-import ProseParts from '../ProseParts.astro';
-interface Props {
-  title?: string;
-  items?: { heading: string; body: string }[];
-}
-const { title, items = [] } = Astro.props;
----
-
-<section class="b-accordion">
-  {title && <Heading text={title} level={2} align="center" />}
-  <div class="b-accordion__list">
-    {items.map((item) => (
-      <details class="b-accordion__item">
-        <summary class="b-accordion__head">{item.heading}</summary>
-        <div class="b-accordion__body">
-          <ProseParts text={item.body} />
-        </div>
-      </details>
-    ))}
-  </div>
-</section>
-
-<style>
-  .b-accordion {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    padding-inline: 1rem;
-  }
-  .b-accordion__list {
-    max-width: var(--max);
-    margin-inline: auto;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-  .b-accordion__item {
-    border: var(--card-border);
-    border-radius: var(--radius-sm);
-    padding: 0.25rem 1rem;
-    background: var(--bg-surface);
-  }
-  .b-accordion__head {
-    cursor: pointer;
-    font-weight: 600;
-    color: var(--fg);
-    padding: 0.85rem 0;
-    list-style: none;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.75rem;
-  }
-  .b-accordion__head::-webkit-details-marker {
-    display: none;
-  }
-  .b-accordion__head::after {
-    content: '+';
-    color: var(--gold);
-    font-weight: 700;
-    font-size: 1.25rem;
-    line-height: 1;
-    transition: transform 0.2s ease;
-  }
-  .b-accordion__item[open] .b-accordion__head::after {
-    content: '\2013'; /* en dash */
-  }
-  .b-accordion__head:focus-visible {
-    outline: 2px solid var(--gold);
-    outline-offset: 2px;
-  }
-  .b-accordion__body {
-    padding: 0 0 0.9rem;
-    color: var(--muted);
-    line-height: 1.6;
-  }
-  .b-accordion__body :global(p) {
-    margin: 0;
-  }
-</style>
+---
+/** Accordion — a Level-2 recipe: an optional heading over expand/collapse rows
+ *  (title + body). Generic sibling of FAQ (which is question/answer-flavoured).
+ *  Native <details>/<summary> — accessible, interactive, zero JavaScript. */
+import Heading from '../blocks/Heading.astro';
+
+import ProseParts from '../ProseParts.astro';
+interface Props {
+  title?: string;
+  items?: { heading: string; body: string }[];
+}
+const { title, items = [] } = Astro.props;
+// Alignment overrides (BlockLayout): the title + intro default to centred; the block's
+// own `align`, or `headingAlign` for the title alone, overrides it from the page data.
+const { align: blockAlign, headingAlign } = Astro.props as { align?: 'start' | 'center' | 'end'; headingAlign?: 'start' | 'center' | 'end' };
+const headAlign = headingAlign ?? blockAlign ?? 'center';
+---
+
+<section class="b-accordion">
+  {title && <Heading text={title} level={2} align={headAlign} />}
+  <div class="b-accordion__list">
+    {items.map((item) => (
+      <details class="b-accordion__item">
+        <summary class="b-accordion__head">{item.heading}</summary>
+        <div class="b-accordion__body">
+          <ProseParts text={item.body} />
+        </div>
+      </details>
+    ))}
+  </div>
+</section>
+
+<style>
+  .b-accordion {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    padding-inline: 1rem;
+  }
+  .b-accordion__list {
+    max-width: var(--max);
+    margin-inline: auto;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .b-accordion__item {
+    border: var(--card-border);
+    border-radius: var(--radius-sm);
+    padding: 0.25rem 1rem;
+    background: var(--bg-surface);
+  }
+  .b-accordion__head {
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--fg);
+    padding: 0.85rem 0;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+  }
+  .b-accordion__head::-webkit-details-marker {
+    display: none;
+  }
+  .b-accordion__head::after {
+    content: '+';
+    color: var(--gold);
+    font-weight: 700;
+    font-size: 1.25rem;
+    line-height: 1;
+    transition: transform 0.2s ease;
+  }
+  .b-accordion__item[open] .b-accordion__head::after {
+    content: '\2013'; /* en dash */
+  }
+  .b-accordion__head:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: 2px;
+  }
+  .b-accordion__body {
+    padding: 0 0 0.9rem;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  .b-accordion__body :global(p) {
+    margin: 0;
+  }
+</style>

package/components/recipes/Bento.astro

@@ -23,12 +23,16 @@ interface Props {
   items?: Item[];
 }
 const { title, intro, items = [] } = Astro.props;
+// Alignment overrides (BlockLayout): the title + intro default to centred; the block's
+// own `align`, or `headingAlign` for the title alone, overrides it from the page data.
+const { align: blockAlign, headingAlign } = Astro.props as { align?: 'start' | 'center' | 'end'; headingAlign?: 'start' | 'center' | 'end' };
+const headAlign = headingAlign ?? blockAlign ?? 'center';
 ---
 
 <section class="b-bento">
   {(title || intro) && (
-    <div class="b-bento__head">
-      {title && <Heading text={title} level={2} align="center" />}
+    <div class="b-bento__head" data-recipe-head data-content-align={headAlign}>
+      {title && <Heading text={title} level={2} />}
       {intro && <p class="b-bento__intro">{intro}</p>}
     </div>
   )}
@@ -62,7 +66,6 @@ const { title, intro, items = [] } = Astro.props;
   .b-bento__head {
     max-width: var(--max);
     margin-inline: auto;
-    text-align: center;
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
@@ -91,6 +94,7 @@ const { title, intro, items = [] } = Astro.props;
     position: relative;
     display: flex;
     flex-direction: column;
+    align-items: var(--content-items, stretch); /* follows the page / section alignment */
     gap: 0.4rem;
     padding: 1.5rem;
     border-radius: var(--radius);

package/components/recipes/ContactForm.astro

@@ -37,12 +37,16 @@ const {
   note,
   fields = [],
 } = Astro.props;
+// Alignment overrides (BlockLayout): the title + intro default to centred; the block's
+// own `align`, or `headingAlign` for the title alone, overrides it from the page data.
+const { align: blockAlign, headingAlign } = Astro.props as { align?: 'start' | 'center' | 'end'; headingAlign?: 'start' | 'center' | 'end' };
+const headAlign = headingAlign ?? blockAlign ?? 'center';
 ---
 
 <section class="b-contact-form">
   {(title || intro) && (
-    <div class="b-contact-form__head">
-      {title && <Heading text={title} level={2} align="center" />}
+    <div class="b-contact-form__head" data-recipe-head data-content-align={headAlign}>
+      {title && <Heading text={title} level={2} />}
       {intro && <p class="b-contact-form__intro">{intro}</p>}
     </div>
   )}
@@ -81,7 +85,6 @@ const {
     padding-inline: 1rem;
   }
   .b-contact-form__head {
-    text-align: center;
     display: flex;
     flex-direction: column;
     gap: 0.75rem;

package/components/recipes/Cta.astro

@@ -11,11 +11,15 @@ interface Props {
   background?: 'muted' | 'accent';
 }
 const { title, text, cta, background = 'accent' } = Astro.props;
+// Alignment overrides (BlockLayout): the title + intro default to centred; the block's
+// own `align`, or `headingAlign` for the title alone, overrides it from the page data.
+const { align: blockAlign, headingAlign } = Astro.props as { align?: 'start' | 'center' | 'end'; headingAlign?: 'start' | 'center' | 'end' };
+const headAlign = headingAlign ?? blockAlign ?? 'center';
 ---
 
 <section class="b-cta" data-bg={background}>
   <div class="b-cta__inner">
-    <Heading text={title} level={2} align="center" />
+    <Heading text={title} level={2} align={headAlign} />
     {text && <p class="b-cta__text">{text}</p>}
     <div class="b-cta__action">
       <Button href={cta.href} variant="primary">{cta.label}</Button>

package/components/recipes/Faq.astro

@@ -10,13 +10,17 @@ interface Props {
   items?: { question: string; answer: string }[];
 }
 const { title, items = [] } = Astro.props;
+// Alignment overrides (BlockLayout): the title + intro default to centred; the block's
+// own `align`, or `headingAlign` for the title alone, overrides it from the page data.
+const { align: blockAlign, headingAlign } = Astro.props as { align?: 'start' | 'center' | 'end'; headingAlign?: 'start' | 'center' | 'end' };
+const headAlign = headingAlign ?? blockAlign ?? 'center';
 // Answers may carry a link or bold via a tiny markdown subset (inlineMarkdown),
 // split into paragraphs on blank lines. Trusted editor/CMS text, sanitised.
 const paragraphs = (answer: string) => answer.split(/\n\s*\n/).map((p) => p.trim()).filter(Boolean);
 ---
 
 <section class="b-faq">
-  {title && <Heading text={title} level={2} align="center" />}
+  {title && <Heading text={title} level={2} align={headAlign} />}
   <div class="b-faq__list">
     {items.map((item) => (
       <details class="b-faq__item">