ferst-core 0.6.2 → 0.7.2

package/components/recipes/ContactCard.astro

@@ -1,170 +1,172 @@
----
-/**
- * ContactCard — a Level-2 recipe: a rich, branded "get in touch" band. A display-
- * type title + subtitle on the left, the contact channels as tappable tiles on the
- * right, and a closing note across the bottom. For a contact or find-us page — the
- * polished alternative to a plain notice box.
- *
- * Fully THEME-ADAPTIVE (composes in light AND dark): the panel is `--bg-section`
- * with a soft `--gold` corner wash for brand presence, text is `--fg`/`--accent`/
- * `--muted`, tiles are `--bg-surface` recesses, icons + hovers use `--gold`. Every
- * one of those tokens flips per theme, so the band re-composes correctly in each
- * mode (never the old always-dark band) and a CMS colour change recolours it.
- * Contrast-safe: brand gold is used only decoratively (wash, rule, icons, hovers),
- * never as body/label text — those use the ink/text tokens that meet AA on the
- * panel in both themes. Whole tile links when `href` is set.
- */
-import Icon from '../Icon.astro';
-import { isIconKey } from '../../lib/icons';
-
-interface Item {
-  icon?: string;
-  value: string;
-  href?: string;
-}
-interface Props {
-  eyebrow?: string;
-  title: string;
-  subtitle?: string;
-  note?: string;
-  items?: Item[];
-}
-const { eyebrow, title, subtitle, note, items = [] } = Astro.props;
-const rel = (href?: string) => (href && /^https?:\/\//.test(href) ? 'noopener' : undefined);
-const target = (href?: string) => (href && /^https?:\/\//.test(href) ? '_blank' : undefined);
----
-
-<section class="b-contact">
-  <div class="b-contact__panel">
-    <div class="b-contact__head">
-      {eyebrow && <p class="b-contact__eyebrow">{eyebrow}</p>}
-      <h2 class="b-contact__title">{title}</h2>
-      {subtitle && <p class="b-contact__subtitle">{subtitle}</p>}
-    </div>
-
-    {items.length > 0 && (
-      <ul class="b-contact__items">
-        {items.map((item) => {
-          const inner = (
-            <>
-              {item.icon && isIconKey(item.icon) && (
-                <span class="b-contact__icon" aria-hidden="true"><Icon name={item.icon} size={18} /></span>
-              )}
-              <span class="b-contact__value">{item.value}</span>
-            </>
-          );
-          return (
-            <li>
-              {item.href ? (
-                <a class="b-contact__item" href={item.href} target={target(item.href)} rel={rel(item.href)}>{inner}</a>
-              ) : (
-                <div class="b-contact__item">{inner}</div>
-              )}
-            </li>
-          );
-        })}
-      </ul>
-    )}
-
-    {note && <p class="b-contact__note">{note}</p>}
-  </div>
-</section>
-
-<style>
-  .b-contact {
-    max-width: 72rem;
-    margin-inline: auto;
-    padding-inline: 1rem;
-  }
-  /* Adaptive panel: a section surface that flips light↔dark with the theme, lifted
-     off the page by a border + shadow, with a soft brand-gold wash for presence. */
-  .b-contact__panel {
-    position: relative;
-    isolation: isolate;
-    overflow: hidden;
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 1.5rem 2.5rem;
-    padding: clamp(1.75rem, 4vw, 3rem);
-    border-radius: var(--radius);
-    background: var(--bg-section);
-    color: var(--fg);
-    border: 1px solid var(--border);
-    box-shadow: var(--shadow-md);
-  }
-  /* Brand wash — a gold glow in the top-right, behind the content (z-index below the
-     panel's own children via isolation). Adds brand presence in both themes without
-     tinting the text ground, so contrast is never at risk. */
-  .b-contact__panel::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    background: radial-gradient(115% 130% at 100% 0%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 62%);
-    pointer-events: none;
-  }
-  @media (min-width: 48rem) {
-    .b-contact__panel { grid-template-columns: 1.2fr 1fr; align-items: center; }
-  }
-  .b-contact__head { display: flex; flex-direction: column; gap: 0.5rem; }
-  .b-contact__eyebrow {
-    margin: 0;
-    display: inline-flex; align-items: center; gap: 0.6rem;
-    font-family: var(--font-heading);
-    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
-    color: var(--accent);
-  }
-  /* Short gold rule carries the brand into the eyebrow without colouring the text. */
-  .b-contact__eyebrow::before {
-    content: ''; flex: 0 0 auto; width: 1.5rem; height: 2px; border-radius: 2px;
-    background: var(--gold);
-  }
-  .b-contact__title {
-    margin: 0;
-    font-family: var(--font-display, var(--font-heading));
-    font-size: clamp(1.9rem, 4vw, 2.8rem);
-    line-height: 1.05;
-    text-wrap: balance;
-    color: var(--fg);
-  }
-  .b-contact__subtitle {
-    margin: 0.15rem 0 0;
-    font-family: var(--font-heading);
-    font-weight: 600;
-    color: var(--accent);
-  }
-  .b-contact__items {
-    list-style: none;
-    margin: 0; padding: 0;
-    display: flex; flex-direction: column; gap: 0.6rem;
-  }
-  .b-contact__item {
-    display: flex; align-items: center; gap: 0.75rem;
-    padding: 0.7rem 1rem;
-    border-radius: var(--radius-sm);
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
-    color: var(--fg);
-    font-family: var(--font-heading);
-    font-weight: 600;
-    font-size: 0.95rem;
-    text-decoration: none;
-    transition: border-color 0.15s ease, background 0.15s ease;
-  }
-  a.b-contact__item:hover {
-    border-color: var(--gold);
-    background: color-mix(in srgb, var(--gold) 8%, var(--bg-surface));
-  }
-  a.b-contact__item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
-  .b-contact__icon { display: inline-flex; color: var(--gold); flex: 0 0 auto; }
-  .b-contact__value { min-width: 0; overflow-wrap: anywhere; }
-  .b-contact__note {
-    grid-column: 1 / -1;
-    margin: 0;
-    padding-top: 1.25rem;
-    border-top: 1px solid var(--border);
-    color: var(--muted);
-    font-size: 0.9rem;
-    line-height: 1.6;
-  }
-</style>
+---
+/**
+ * ContactCard — a Level-2 recipe: a rich, branded "get in touch" band. A display-
+ * type title + subtitle on the left, the contact channels as tappable tiles on the
+ * right, and a closing note across the bottom. For a contact or find-us page — the
+ * polished alternative to a plain notice box.
+ *
+ * Fully THEME-ADAPTIVE (composes in light AND dark): the panel is `--bg-section`
+ * with a soft `--gold` corner wash for brand presence, text is `--fg`/`--accent`/
+ * `--muted`, tiles are `--bg-surface` recesses, icons + hovers use `--gold`. Every
+ * one of those tokens flips per theme, so the band re-composes correctly in each
+ * mode (never the old always-dark band) and a CMS colour change recolours it.
+ * Contrast-safe: brand gold is used only decoratively (wash, rule, icons, hovers),
+ * never as body/label text — those use the ink/text tokens that meet AA on the
+ * panel in both themes. Whole tile links when `href` is set.
+ */
+import Icon from '../Icon.astro';
+import { isIconKey } from '../../lib/icons';
+import { inlineMarkdown, textWithBreaks } from '../../lib/inline-markdown';
+
+interface Item {
+  icon?: string;
+  value: string;
+  href?: string;
+}
+interface Props {
+  eyebrow?: string;
+  title: string;
+  subtitle?: string;
+  note?: string;
+  items?: Item[];
+}
+const { eyebrow, title, subtitle, note, items = [] } = Astro.props;
+const rel = (href?: string) => (href && /^https?:\/\//.test(href) ? 'noopener' : undefined);
+const target = (href?: string) => (href && /^https?:\/\//.test(href) ? '_blank' : undefined);
+---
+
+<section class="b-contact">
+  <div class="b-contact__panel">
+    <div class="b-contact__head">
+      {eyebrow && <p class="b-contact__eyebrow">{eyebrow}</p>}
+      <h2 class="b-contact__title">{title}</h2>
+      {subtitle && <p class="b-contact__subtitle" set:html={inlineMarkdown(subtitle)} />}
+    </div>
+
+    {items.length > 0 && (
+      <ul class="b-contact__items">
+        {items.map((item) => {
+          const inner = (
+            <>
+              {item.icon && isIconKey(item.icon) && (
+                <span class="b-contact__icon" aria-hidden="true"><Icon name={item.icon} size={18} /></span>
+              )}
+              {/* A linked item holds plain text (no nested links); an unlinked one may carry links. */}
+              <span class="b-contact__value" set:html={item.href ? textWithBreaks(item.value) : inlineMarkdown(item.value)} />
+            </>
+          );
+          return (
+            <li>
+              {item.href ? (
+                <a class="b-contact__item" href={item.href} target={target(item.href)} rel={rel(item.href)}>{inner}</a>
+              ) : (
+                <div class="b-contact__item">{inner}</div>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    )}
+
+    {note && <p class="b-contact__note" set:html={inlineMarkdown(note)} />}
+  </div>
+</section>
+
+<style>
+  .b-contact {
+    max-width: 72rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  /* Adaptive panel: a section surface that flips light↔dark with the theme, lifted
+     off the page by a border + shadow, with a soft brand-gold wash for presence. */
+  .b-contact__panel {
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.5rem 2.5rem;
+    padding: clamp(1.75rem, 4vw, 3rem);
+    border-radius: var(--radius);
+    background: var(--bg-section);
+    color: var(--fg);
+    border: 1px solid var(--border);
+    box-shadow: var(--shadow-md);
+  }
+  /* Brand wash — a gold glow in the top-right, behind the content (z-index below the
+     panel's own children via isolation). Adds brand presence in both themes without
+     tinting the text ground, so contrast is never at risk. */
+  .b-contact__panel::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: radial-gradient(115% 130% at 100% 0%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 62%);
+    pointer-events: none;
+  }
+  @media (min-width: 48rem) {
+    .b-contact__panel { grid-template-columns: 1.2fr 1fr; align-items: center; }
+  }
+  .b-contact__head { display: flex; flex-direction: column; gap: 0.5rem; }
+  .b-contact__eyebrow {
+    margin: 0;
+    display: inline-flex; align-items: center; gap: 0.6rem;
+    font-family: var(--font-heading);
+    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
+    color: var(--accent);
+  }
+  /* Short gold rule carries the brand into the eyebrow without colouring the text. */
+  .b-contact__eyebrow::before {
+    content: ''; flex: 0 0 auto; width: 1.5rem; height: 2px; border-radius: 2px;
+    background: var(--gold);
+  }
+  .b-contact__title {
+    margin: 0;
+    font-family: var(--font-display, var(--font-heading));
+    font-size: clamp(1.9rem, 4vw, 2.8rem);
+    line-height: 1.05;
+    text-wrap: balance;
+    color: var(--fg);
+  }
+  .b-contact__subtitle {
+    margin: 0.15rem 0 0;
+    font-family: var(--font-heading);
+    font-weight: 600;
+    color: var(--accent);
+  }
+  .b-contact__items {
+    list-style: none;
+    margin: 0; padding: 0;
+    display: flex; flex-direction: column; gap: 0.6rem;
+  }
+  .b-contact__item {
+    display: flex; align-items: center; gap: 0.75rem;
+    padding: 0.7rem 1rem;
+    border-radius: var(--radius-sm);
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    color: var(--fg);
+    font-family: var(--font-heading);
+    font-weight: 600;
+    font-size: 0.95rem;
+    text-decoration: none;
+    transition: border-color 0.15s ease, background 0.15s ease;
+  }
+  a.b-contact__item:hover {
+    border-color: var(--gold);
+    background: color-mix(in srgb, var(--gold) 8%, var(--bg-surface));
+  }
+  a.b-contact__item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
+  .b-contact__icon { display: inline-flex; color: var(--gold); flex: 0 0 auto; }
+  .b-contact__value { min-width: 0; overflow-wrap: anywhere; }
+  .b-contact__note {
+    grid-column: 1 / -1;
+    margin: 0;
+    padding-top: 1.25rem;
+    border-top: 1px solid var(--border);
+    color: var(--muted);
+    font-size: 0.9rem;
+    line-height: 1.6;
+  }
+</style>

package/components/recipes/Documents.astro

@@ -0,0 +1,146 @@
+---
+/**
+ * Documents — a tidy list of files (newsletters, minutes, policies, forms): each row
+ * a type badge, the title, its date and an optional note, newest first, optionally
+ * grouped by year. Files open in the browser's own viewer (a PDF in a new tab) rather
+ * than an in-page viewer, which works poorly on phones. Logic lives in lib/documents.
+ */
+import Heading from '../blocks/Heading.astro';
+import Icon from '../Icon.astro';
+import { documentGroups, type DocumentItem } from '../../lib/documents';
+
+interface Props {
+  title?: string;
+  intro?: string;
+  groupByYear?: boolean;
+  items?: DocumentItem[];
+}
+const { title, intro, groupByYear = false, items = [] } = Astro.props;
+const groups = documentGroups(items, groupByYear);
+---
+
+<section class="b-docs">
+  {(title || intro) && (
+    <div class="b-docs__head">
+      {title && <Heading text={title} level={2} />}
+      {intro && <p class="b-docs__intro">{intro}</p>}
+    </div>
+  )}
+  {items.length === 0 ? (
+    <p class="b-docs__intro">No documents yet.</p>
+  ) : (
+    groups.map((g) => (
+      <div class="b-docs__group">
+        {g.year && <h3 class="b-docs__year">{g.year}</h3>}
+        <ul class="b-docs__list">
+          {g.items.map((d) => (
+            <li>
+              <a class="b-docs__row" href={d.file} target={d.kind === 'PDF' ? '_blank' : undefined} rel={d.kind === 'PDF' ? 'noopener' : undefined}>
+                <span class="b-docs__icon" aria-hidden="true"><Icon name="document" size={22} /></span>
+                <span class="b-docs__body">
+                  <span class="b-docs__title">{d.title}</span>
+                  {(d.dateLabel || d.note) && (
+                    <span class="b-docs__meta">{[d.dateLabel, d.note].filter(Boolean).join(' · ')}</span>
+                  )}
+                </span>
+                <span class="b-docs__kind">{d.kind}</span>
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    ))
+  )}
+</section>
+
+<style>
+  .b-docs {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    max-width: var(--max);
+    margin-inline: auto;
+    padding-inline: 1rem;
+    width: 100%;
+  }
+  .b-docs__head {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .b-docs__intro {
+    margin: 0;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  .b-docs__group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .b-docs__year {
+    margin: 0;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--muted);
+  }
+  .b-docs__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    border: var(--card-border);
+    border-radius: var(--radius);
+    background: var(--bg-surface);
+    overflow: hidden;
+  }
+  .b-docs__list li + li {
+    border-top: var(--card-border);
+  }
+  .b-docs__row {
+    display: flex;
+    align-items: center;
+    gap: 0.9rem;
+    padding: 0.85rem 1rem;
+    color: var(--fg);
+    text-decoration: none;
+  }
+  .b-docs__row:hover {
+    background: var(--bg-section);
+  }
+  .b-docs__row:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: -2px;
+  }
+  .b-docs__icon {
+    flex: none;
+    color: var(--gold);
+    display: grid;
+  }
+  .b-docs__body {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+  }
+  .b-docs__title {
+    font-weight: 600;
+    overflow-wrap: anywhere;
+  }
+  .b-docs__meta {
+    font-size: 0.875rem;
+    color: var(--muted);
+  }
+  .b-docs__kind {
+    flex: none;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    padding: 0.2rem 0.55rem;
+    border-radius: 999px;
+    background: var(--bg-tag);
+    color: var(--fg);
+  }
+</style>