ferst-core 0.7.5 → 0.7.7

package/components/blocks/Prose.astro

@@ -1,5 +1,5 @@
 ---
-import { proseParts } from '../../lib/prose';
+import ProseParts from '../ProseParts.astro';
 interface Props {
   text: string;
   variant?: 'body' | 'lead';
@@ -7,40 +7,35 @@ interface Props {
 const { text, variant = 'body' } = Astro.props;
 // Blank lines separate paragraphs; `- ` / `1. ` lines make lists; links, bold and
 // italic are rendered safely (lib/prose.ts → inlineMarkdown).
-const parts = proseParts(text);
 ---
 
 <div class="b-prose" data-variant={variant === 'lead' ? 'lead' : undefined}>
-  {parts.map((part) =>
-    part.kind === 'p' ? <p set:html={part.html} />
-    : part.kind === 'ul' ? <ul>{part.items.map((i) => <li set:html={i} />)}</ul>
-    : <ol>{part.items.map((i) => <li set:html={i} />)}</ol>
-  )}
+  <ProseParts text={text} />
 </div>
 
 <style>
   .b-prose {
     color: var(--fg);
   }
-  .b-prose p,
-  .b-prose ul,
-  .b-prose ol {
+  .b-prose :global(p),
+  .b-prose :global(ul),
+  .b-prose :global(ol) {
     margin: 0 0 1rem;
     line-height: 1.7;
     max-width: var(--max);
   }
-  .b-prose ul,
-  .b-prose ol {
+  .b-prose :global(ul),
+  .b-prose :global(ol) {
     padding-inline-start: 1.4em;
   }
-  .b-prose li + li {
+  .b-prose :global(li + li) {
     margin-top: 0.25rem;
   }
-  .b-prose > :last-child {
+  .b-prose > :global(:last-child) {
     margin-bottom: 0;
   }
   /* The page's introduction: larger, quieter, a narrower measure. */
-  .b-prose[data-variant='lead'] p {
+  .b-prose[data-variant='lead'] :global(p) {
     font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
     line-height: 1.6;
     color: var(--muted);
@@ -55,10 +50,10 @@ const parts = proseParts(text);
      section is centred (or end-aligned) re-anchor it so the text reads as
      deliberately centred, not centred inside a left column. Text-align itself
      is inherited from the content-align cascade. */
-  :global([data-content-align='center']) .b-prose > * {
+  :global([data-content-align='center']) .b-prose > :global(*) {
     margin-inline: auto;
   }
-  :global([data-content-align='end']) .b-prose > * {
+  :global([data-content-align='end']) .b-prose > :global(*) {
     margin-inline-start: auto;
   }
 </style>

package/components/recipes/Accordion.astro

@@ -4,7 +4,7 @@
  *  Native <details>/<summary> — accessible, interactive, zero JavaScript. */
 import Heading from '../blocks/Heading.astro';
 
-import { proseParts } from '../../lib/prose';
+import ProseParts from '../ProseParts.astro';
 interface Props {
   title?: string;
   items?: { heading: string; body: string }[];
@@ -19,11 +19,7 @@ const { title, items = [] } = Astro.props;
       <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>
-          )}
+          <ProseParts text={item.body} />
         </div>
       </details>
     ))}
@@ -85,7 +81,7 @@ const { title, items = [] } = Astro.props;
     color: var(--muted);
     line-height: 1.6;
   }
-  .b-accordion__body p {
+  .b-accordion__body :global(p) {
     margin: 0;
   }
 </style>

package/components/recipes/Contacts.astro

@@ -11,7 +11,7 @@ import Icon from '../Icon.astro';
 import { inlineMarkdown, textWithBreaks } from '../../lib/inline-markdown';
 import { mailtoHref, telHref } from '../../lib/links';
 
-interface Contact { role: string; name?: string; phone?: string; email?: string; emailSubject?: string; address?: string; hours?: string }
+interface Contact { role?: string; name?: string; phone?: string; email?: string; emailSubject?: string; address?: string; hours?: string }
 interface Props {
   title?: string;
   intro?: string;
@@ -38,8 +38,8 @@ const { title, intro, groups = [] } = Astro.props;
       <ul class="b-contacts__grid">
         {g.contacts.map((c) => (
           <li class="b-contacts__card">
-            <h3 class="b-contacts__role">{c.role}</h3>
-            {c.name && <p class="b-contacts__name">{c.name}</p>}
+            <h3 class="b-contacts__role">{c.role ?? c.name}</h3>
+            {c.role && c.name && <p class="b-contacts__name">{c.name}</p>}
             <div class="b-contacts__lines">
               {c.phone && <a class="b-contacts__line" href={telHref(c.phone)}><Icon name="phone" size={16} /><span>{c.phone}</span></a>}
               {c.email && <a class="b-contacts__line" href={mailtoHref(c.email, c.emailSubject)}><Icon name="email" size={16} /><span>{c.email}</span></a>}

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

@@ -8,7 +8,7 @@
 import Heading from '../blocks/Heading.astro';
 import Icon from '../Icon.astro';
 import { documentGroups, type DocumentItem } from '../../lib/documents';
-
+import { inlineMarkdown } from '../../lib/inline-markdown';
 interface Props {
   title?: string;
   intro?: string;
@@ -23,7 +23,7 @@ const groups = documentGroups(items, groupByYear);
   {(title || intro) && (
     <div class="b-docs__head">
       {title && <Heading text={title} level={2} />}
-      {intro && <p class="b-docs__intro">{intro}</p>}
+      {intro && <p class="b-docs__intro" set:html={inlineMarkdown(intro)} />}
     </div>
   )}
   {items.length === 0 ? (

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}
+/>

package/components/recipes/MediaText.astro

@@ -1,92 +1,88 @@
----
-/**
- * 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>
+---
+/**
+ * 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 '../ProseParts.astro';
+
+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={text} />
+    {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 :global(p),
+  .b-mediatext__text :global(ul),
+  .b-mediatext__text :global(ol) {
+    margin: 0;
+    line-height: 1.7;
+  }
+  .b-mediatext__text :global(ul),
+  .b-mediatext__text :global(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>