ferst-core 0.7.2 → 0.7.5

package/components/blocks/Heading.astro

@@ -1,46 +1,51 @@
----
-interface Props {
-  text: string;
-  level?: number;
-  align?: 'start' | 'center' | 'end';
-  gradient?: boolean;
-}
-const { text, level = 2, align, gradient = false } = Astro.props;
-const Tag = `h${level}` as unknown as keyof HTMLElementTagNameMap;
----
-
-<Tag class="b-heading" data-align={align} data-gradient={gradient ? 'true' : 'false'}>{text}</Tag>
-
-<style>
-  /* By default a heading INHERITS the page/section content alignment (the
-     `--content-align` cascade set on `.site-main` / a `section`), so a whole
-     template stays coherent. An explicit `align` prop overrides it for this one
-     heading. (`text-align` inherits, and inheritance carries the resolved
-     alignment; the `[data-align]` rules win over it when set.) */
-  .b-heading {
-    color: var(--fg);
-    margin: 0;
-    text-wrap: balance;
-    line-height: 1.2;
-    text-align: inherit;
-  }
-  .b-heading[data-align='start'] {
-    text-align: start;
-  }
-  .b-heading[data-align='center'] {
-    text-align: center;
-  }
-  .b-heading[data-align='end'] {
-    text-align: end;
-  }
-  /* Gradient text — only clip to text where supported, so it never renders as
-     invisible/transparent on older browsers (it stays solid ink there). */
-  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
-    .b-heading[data-gradient='true'] {
-      background-image: linear-gradient(120deg, var(--gold), var(--accent-2, var(--gold)));
-      -webkit-background-clip: text;
-      background-clip: text;
-      color: transparent;
-    }
-  }
-</style>
+---
+import { pageSlugs, uniqueSlug } from '../../lib/slug';
+interface Props {
+  text: string;
+  level?: number;
+  align?: 'start' | 'center' | 'end';
+  gradient?: boolean;
+}
+const { text, level = 2, align, gradient = false } = Astro.props;
+const Tag = `h${level}` as unknown as keyof HTMLElementTagNameMap;
+// A readable, page-unique anchor so any heading can be linked to (#mass-times).
+const id = uniqueSlug(text, pageSlugs(Astro.locals));
+---
+
+<Tag class="b-heading" id={id} data-align={align} data-gradient={gradient ? 'true' : 'false'}>{text}</Tag>
+
+<style>
+  /* By default a heading INHERITS the page/section content alignment (the
+     `--content-align` cascade set on `.site-main` / a `section`), so a whole
+     template stays coherent. An explicit `align` prop overrides it for this one
+     heading. (`text-align` inherits, and inheritance carries the resolved
+     alignment; the `[data-align]` rules win over it when set.) */
+  .b-heading {
+    color: var(--fg);
+    margin: 0;
+    text-wrap: balance;
+    white-space: pre-line; /* a title typed over several lines keeps its breaks */
+    scroll-margin-top: 6rem; /* a linked heading stops clear of the sticky header */
+    line-height: 1.2;
+    text-align: inherit;
+  }
+  .b-heading[data-align='start'] {
+    text-align: start;
+  }
+  .b-heading[data-align='center'] {
+    text-align: center;
+  }
+  .b-heading[data-align='end'] {
+    text-align: end;
+  }
+  /* Gradient text — only clip to text where supported, so it never renders as
+     invisible/transparent on older browsers (it stays solid ink there). */
+  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
+    .b-heading[data-gradient='true'] {
+      background-image: linear-gradient(120deg, var(--gold), var(--accent-2, var(--gold)));
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+    }
+  }
+</style>

package/components/blocks/Prose.astro

@@ -2,14 +2,15 @@
 import { proseParts } from '../../lib/prose';
 interface Props {
   text: string;
+  variant?: 'body' | 'lead';
 }
-const { text } = Astro.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">
+<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>
@@ -38,6 +39,13 @@ const parts = proseParts(text);
   .b-prose > :last-child {
     margin-bottom: 0;
   }
+  /* The page's introduction: larger, quieter, a narrower measure. */
+  .b-prose[data-variant='lead'] p {
+    font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
+    line-height: 1.6;
+    color: var(--muted);
+    max-width: 40em;
+  }
   .b-prose :global(a) {
     color: var(--accent);
     text-decoration: underline;

package/components/blocks/Quote.astro

@@ -1,38 +1,40 @@
----
-interface Props {
-  text: string;
-  cite?: string;
-}
-const { text, cite } = Astro.props;
----
-
-<figure class="b-quote">
-  <blockquote>{text}</blockquote>
-  {cite && <figcaption>— {cite}</figcaption>}
-</figure>
-
-<style>
-  .b-quote {
-    margin: 0;
-    border-inline-start: 3px solid var(--gold);
-    padding-inline-start: 1rem;
-  }
-  /* On a centred page/section the left rule reads as off-axis — drop it so the
-     quote centres cleanly. (Inherits text-align from the content-align cascade.) */
-  :global([data-content-align='center']) .b-quote {
-    border-inline-start: none;
-    padding-inline-start: 0;
-  }
-  .b-quote blockquote {
-    margin: 0;
-    color: var(--fg);
-    font-style: italic;
-    font-size: 1.125rem;
-    line-height: 1.6;
-  }
-  .b-quote figcaption {
-    color: var(--muted);
-    margin-top: 0.5rem;
-    font-size: 0.9375rem;
-  }
-</style>
+---
+import { inlineMarkdown } from '../../lib/inline-markdown';
+interface Props {
+  text: string;
+  cite?: string;
+}
+const { text, cite } = Astro.props;
+---
+
+<figure class="b-quote">
+  <blockquote set:html={inlineMarkdown(text)} />
+  {cite && <figcaption>— {cite}</figcaption>}
+</figure>
+
+<style>
+  /* inline markdown already turns single newlines into <br>: a prayer or verse keeps its lines. */
+  .b-quote {
+    margin: 0;
+    border-inline-start: 3px solid var(--gold);
+    padding-inline-start: 1rem;
+  }
+  /* On a centred page/section the left rule reads as off-axis — drop it so the
+     quote centres cleanly. (Inherits text-align from the content-align cascade.) */
+  :global([data-content-align='center']) .b-quote {
+    border-inline-start: none;
+    padding-inline-start: 0;
+  }
+  .b-quote blockquote {
+    margin: 0;
+    color: var(--fg);
+    font-style: italic;
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+  .b-quote figcaption {
+    color: var(--muted);
+    margin-top: 0.5rem;
+    font-size: 0.9375rem;
+  }
+</style>

package/components/recipes/Accordion.astro

@@ -1,84 +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';
-
-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"><p>{item.body}</p></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 '../../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>

package/components/recipes/Contacts.astro

@@ -0,0 +1,139 @@
+---
+/**
+ * Contacts — a compact directory of people or offices. Each card: the role as its title,
+ * the name, phone and email as tap targets (email with an optional subject), address and
+ * hours. A group can carry one shared note (e.g. office hours) instead of repeating it on
+ * every card. For one contact as a branded band use `contactCard`; for one contact's
+ * links in a row, `linkRow`.
+ */
+import Heading from '../blocks/Heading.astro';
+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 Props {
+  title?: string;
+  intro?: string;
+  groups: Array<{ heading?: string; note?: string; contacts: Contact[] }>;
+}
+const { title, intro, groups = [] } = Astro.props;
+---
+
+<section class="b-contacts">
+  {(title || intro) && (
+    <div class="b-contacts__head">
+      {title && <Heading text={title} level={2} />}
+      {intro && <p class="b-contacts__intro" set:html={inlineMarkdown(intro)} />}
+    </div>
+  )}
+  {groups.map((g) => (
+    <div class="b-contacts__group">
+      {(g.heading || g.note) && (
+        <div class="b-contacts__group-head">
+          {g.heading && <h3 class="b-contacts__group-title">{g.heading}</h3>}
+          {g.note && <p class="b-contacts__note" set:html={inlineMarkdown(g.note)} />}
+        </div>
+      )}
+      <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>}
+            <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>}
+              {c.address && <p class="b-contacts__line"><Icon name="map-pin" size={16} /><span set:html={textWithBreaks(c.address)} /></p>}
+              {c.hours && <p class="b-contacts__line"><Icon name="calendar" size={16} /><span set:html={textWithBreaks(c.hours)} /></p>}
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  ))}
+</section>
+
+<style>
+  .b-contacts {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    width: 100%;
+    max-width: 72rem;
+  }
+  .b-contacts__head,
+  .b-contacts__group-head {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    max-width: var(--max);
+  }
+  .b-contacts__intro,
+  .b-contacts__note {
+    margin: 0;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  .b-contacts__group {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .b-contacts__group-title {
+    margin: 0;
+    font-size: 1.15rem;
+  }
+  .b-contacts__grid {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
+  }
+  .b-contacts__card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    padding: 1.1rem 1.25rem;
+    border: var(--card-border);
+    border-radius: var(--radius);
+    background: var(--bg-surface);
+  }
+  .b-contacts__role {
+    margin: 0;
+    font-size: 1.05rem;
+  }
+  .b-contacts__name {
+    margin: 0;
+    font-size: 0.9375rem;
+    color: var(--muted);
+  }
+  .b-contacts__lines {
+    display: grid;
+    gap: 0.35rem;
+    margin-top: 0.35rem;
+  }
+  .b-contacts__line {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    margin: 0;
+    color: var(--fg);
+    text-decoration: none;
+    font-size: 0.9375rem;
+    overflow-wrap: anywhere;
+  }
+  .b-contacts__line :global(svg) {
+    flex: none;
+    margin-top: 0.2em;
+    color: var(--gold);
+  }
+  a.b-contacts__line:hover span {
+    text-decoration: underline;
+  }
+  a.b-contacts__line:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: 2px;
+  }
+</style>