ferst-core 0.7.6 → 0.7.8

package/components/recipes/Accordion.astro

@@ -1,91 +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 '../../lib/prose';
-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(item.body).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>
-          )}
-        </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 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/Document.astro

@@ -6,7 +6,7 @@
  * (links, bold, lists); `items` add a list. Print-friendly: the contents list is
  * dropped on paper.
  */
-import { proseParts } from '../../lib/prose';
+import ProseParts from '../ProseParts.astro';
 import { inlineMarkdown } from '../../lib/inline-markdown';
 import { longDate } from '../../lib/documents';
 import { pageSlugs, uniqueSlug } from '../../lib/slug';
@@ -44,11 +44,7 @@ const ids = sections.map((s) => uniqueSlug(s.title, used));
     {sections.map((s, i) => (
       <section class="b-doc__clause" id={ids[i]}>
         <h2 id={`clause-${i + 1}`}>{numbered && <span class="b-doc__num">{i + 1}.</span>} {s.title}</h2>
-        {proseParts(s.body).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>
-        )}
+        <ProseParts text={s.body} />
         {s.items && s.items.length > 0 && <ul>{s.items.map((x) => <li set:html={inlineMarkdown(x)} />)}</ul>}
       </section>
     ))}
@@ -135,14 +131,14 @@ const ids = sections.map((s) => uniqueSlug(s.title, used));
     color: var(--gold);
     font-variant-numeric: tabular-nums;
   }
-  .b-doc__clause p,
-  .b-doc__clause ul,
-  .b-doc__clause ol {
+  .b-doc__clause :global(p),
+  .b-doc__clause :global(ul),
+  .b-doc__clause :global(ol) {
     margin: 0 0 0.75rem;
     line-height: 1.7;
   }
-  .b-doc__clause ul,
-  .b-doc__clause ol {
+  .b-doc__clause :global(ul),
+  .b-doc__clause :global(ol) {
     padding-inline-start: 1.4em;
   }
   .b-doc__clause :global(a) {

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">

package/components/recipes/FeatureCards.astro

@@ -1,112 +1,115 @@
----
-/**
- * FeatureCards — a Level-2 recipe: an optional section header over a responsive
- * grid of cards, each with an optional icon, a title, text, and an optional
- * link. Composes the Card, Icon, Heading and Button primitives.
- */
-import Heading from '../blocks/Heading.astro';
-import Card from '../Card.astro';
-import Icon from '../Icon.astro';
-import Button from '../Button.astro';
-import { isIconKey } from '../../lib/icons';
-
-import { inlineMarkdown } from '../../lib/inline-markdown';
-interface Props {
-  title?: string;
-  intro?: string;
-  columns?: 2 | 3 | 4;
-  cards?: { icon?: string; title: string; text?: string; href?: string }[];
-}
-const { title, intro, columns = 3, cards = [] } = Astro.props;
-// Never reserve more columns than there are cards (a lone card in a 3-col grid
-// would strand two empty cells); `data-single` centres a solitary card.
-const cols = Math.min(columns, Math.max(cards.length, 1)) as 1 | 2 | 3 | 4;
----
-
-<section class="b-feature-cards">
-  {(title || intro) && (
-    <div class="b-feature-cards__head">
-      {title && <Heading text={title} level={2} align="center" />}
-      {intro && <p class="b-feature-cards__intro" set:html={inlineMarkdown(intro)} />}
-    </div>
-  )}
-  <div class="b-feature-cards__grid" data-cols={cols} data-single={cards.length === 1 ? 'true' : undefined}>
-    {cards.map((card) => (
-      <Card>
-        {card.icon && isIconKey(card.icon) && (
-          <span class="b-feature-cards__icon"><Icon name={card.icon} size={28} /></span>
-        )}
-        <h3 class="b-feature-cards__title">{card.title}</h3>
-        {card.text && <p class="b-feature-cards__text" set:html={inlineMarkdown(card.text)} />}
-        {card.href && (
-          <span class="b-feature-cards__cta">
-            <Button href={card.href} variant="secondary" size="sm">Learn more</Button>
-          </span>
-        )}
-      </Card>
-    ))}
-  </div>
-</section>
-
-<style>
-  .b-feature-cards {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-    max-width: 72rem;
-    margin-inline: auto;
-    padding-inline: 1rem;
-  }
-  .b-feature-cards__head {
-    max-width: var(--max);
-    margin-inline: auto;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-  .b-feature-cards__intro {
-    margin: 0;
-    color: var(--muted);
-    font-size: 1.0625rem;
-    line-height: 1.6;
-  }
-  .b-feature-cards__grid {
-    display: grid;
-    grid-template-columns: 1fr; /* mobile-first */
-    gap: 1.5rem;
-  }
-  @media (min-width: 48em) {
-    .b-feature-cards__grid[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
-    .b-feature-cards__grid[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }
-    .b-feature-cards__grid[data-cols='4'] { grid-template-columns: repeat(2, 1fr); }
-  }
-  /* A solitary card is a centred feature, not a full-width slab. */
-  .b-feature-cards__grid[data-single] { max-width: 26rem; margin-inline: auto;
-  }
-  @media (min-width: 64em) {
-    .b-feature-cards__grid[data-cols='4'] { grid-template-columns: repeat(4, 1fr); }
-  }
-  .b-feature-cards__icon {
-    color: var(--gold);
-    margin-bottom: 0.5rem;
-    display: inline-flex;
-  }
-  .b-feature-cards__title {
-    margin: 0 0 0.5rem;
-    font-size: 1.125rem;
-    color: var(--fg);
-  }
-  .b-feature-cards__text {
-    margin: 0;
-    color: var(--muted);
-    line-height: 1.6;
-  }
-  /* Push the CTA to the bottom so a row of cards aligns its buttons regardless
-     of how much text each card has. Cards are equal height already (grid items
-     stretch), and Card is a flex column — margin-top:auto does the rest. */
-  .b-feature-cards__cta {
-    margin-top: auto;
-    padding-top: 1rem;
-  }
-</style>
+---
+/**
+ * FeatureCards — a Level-2 recipe: an optional section header over a responsive
+ * grid of cards, each with an optional icon, a title, text, and an optional
+ * link. Composes the Card, Icon, Heading and Button primitives.
+ */
+import Heading from '../blocks/Heading.astro';
+import Card from '../Card.astro';
+import Icon from '../Icon.astro';
+import Button from '../Button.astro';
+import { isIconKey } from '../../lib/icons';
+
+import { inlineMarkdown } from '../../lib/inline-markdown';
+interface Props {
+  title?: string;
+  intro?: string;
+  columns?: 2 | 3 | 4;
+  cards?: { icon?: string; title: string; text?: string; href?: string }[];
+}
+const { title, intro, columns = 3, cards = [] } = 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';
+// Never reserve more columns than there are cards (a lone card in a 3-col grid
+// would strand two empty cells); `data-single` centres a solitary card.
+const cols = Math.min(columns, Math.max(cards.length, 1)) as 1 | 2 | 3 | 4;
+---
+
+<section class="b-feature-cards">
+  {(title || intro) && (
+    <div class="b-feature-cards__head" data-recipe-head data-content-align={headAlign}>
+      {title && <Heading text={title} level={2} />}
+      {intro && <p class="b-feature-cards__intro" set:html={inlineMarkdown(intro)} />}
+    </div>
+  )}
+  <div class="b-feature-cards__grid" data-cols={cols} data-single={cards.length === 1 ? 'true' : undefined}>
+    {cards.map((card) => (
+      <Card>
+        {card.icon && isIconKey(card.icon) && (
+          <span class="b-feature-cards__icon"><Icon name={card.icon} size={28} /></span>
+        )}
+        <h3 class="b-feature-cards__title">{card.title}</h3>
+        {card.text && <p class="b-feature-cards__text" set:html={inlineMarkdown(card.text)} />}
+        {card.href && (
+          <span class="b-feature-cards__cta">
+            <Button href={card.href} variant="secondary" size="sm">Learn more</Button>
+          </span>
+        )}
+      </Card>
+    ))}
+  </div>
+</section>
+
+<style>
+  .b-feature-cards {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    max-width: 72rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  .b-feature-cards__head {
+    max-width: var(--max);
+    margin-inline: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .b-feature-cards__intro {
+    margin: 0;
+    color: var(--muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+  }
+  .b-feature-cards__grid {
+    display: grid;
+    grid-template-columns: 1fr; /* mobile-first */
+    gap: 1.5rem;
+  }
+  @media (min-width: 48em) {
+    .b-feature-cards__grid[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
+    .b-feature-cards__grid[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }
+    .b-feature-cards__grid[data-cols='4'] { grid-template-columns: repeat(2, 1fr); }
+  }
+  /* A solitary card is a centred feature, not a full-width slab. */
+  .b-feature-cards__grid[data-single] { max-width: 26rem; margin-inline: auto;
+  }
+  @media (min-width: 64em) {
+    .b-feature-cards__grid[data-cols='4'] { grid-template-columns: repeat(4, 1fr); }
+  }
+  .b-feature-cards__icon {
+    color: var(--gold);
+    margin-bottom: 0.5rem;
+    display: inline-flex;
+  }
+  .b-feature-cards__title {
+    margin: 0 0 0.5rem;
+    font-size: 1.125rem;
+    color: var(--fg);
+  }
+  .b-feature-cards__text {
+    margin: 0;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  /* Push the CTA to the bottom so a row of cards aligns its buttons regardless
+     of how much text each card has. Cards are equal height already (grid items
+     stretch), and Card is a flex column — margin-top:auto does the rest. */
+  .b-feature-cards__cta {
+    margin-top: auto;
+    padding-top: 1rem;
+  }
+</style>

package/components/recipes/Form.astro

@@ -0,0 +1,30 @@
+---
+/**
+ * Form — one of the organisation's forms from the Ferst portal, placed by id. Reads the
+ * form's fields, button and submit address from the platform at build time (lib/forms)
+ * and renders it with the ContactForm recipe, so it looks like every other form and a
+ * change made in the portal reaches the site on its next build.
+ */
+import ContactForm from './ContactForm.astro';
+import { loadFormDefinition } from '../../lib/forms';
+import { resolveGitBase } from '../../bin/cms-config.mjs';
+
+interface Props {
+  form: string;
+  title?: string;
+  intro?: string;
+  note?: string;
+}
+const { form, title, intro, note } = Astro.props;
+const def = await loadFormDefinition(form, { base: resolveGitBase() });
+---
+
+<ContactForm
+  title={title ?? def.name}
+  intro={intro}
+  action={def.action}
+  method="post"
+  submitLabel={def.submitLabel}
+  note={note}
+  fields={def.fields}
+/>