ferst-core 0.7.0 → 0.7.4

package/components/recipes/MediaCards.astro

@@ -1,212 +1,213 @@
----
-/**
- * MediaCards — a Level-2 recipe: a grid of rich content cards with the IMAGE as a
- * header on top (cover-cropped to a uniform ratio, like PostCard), then an optional
- * icon badge, a title, a meta line (e.g. "Sundays 10:45 · Main hall"), a description, and
- * an optional CTA link. The image-HEADER pattern (distinct from `tiles`, which puts
- * the image BEHIND the text): use it for groups, team members, services or events —
- * anywhere the photo and the copy both need to be fully legible. Whole card links
- * when `href` is set. Token-driven, equal-height.
- */
-import Icon from '../Icon.astro';
-import { isIconKey } from '../../lib/icons';
-import Heading from '../blocks/Heading.astro';
-
-interface Card {
-  image?: { src: string; alt?: string };
-  icon?: string;
-  title: string;
-  meta?: string;
-  text?: string;
-  href?: string;
-  linkLabel?: string;
-}
-interface Props {
-  title?: string;
-  intro?: string;
-  columns?: 2 | 3;
-  cards?: Card[];
-}
-const { title, intro, columns = 3, cards = [] } = Astro.props;
-// Never reserve more columns than there are cards; `data-single` centres a lone one.
-const cols = Math.min(columns, Math.max(cards.length, 1)) as 1 | 2 | 3;
----
-
-<section class="b-media-cards">
-  {(title || intro) && (
-    <div class="b-media-cards__head">
-      {title && <Heading text={title} level={2} />}
-      {intro && <p class="b-media-cards__intro">{intro}</p>}
-    </div>
-  )}
-  <div class="b-media-cards__grid" data-cols={cols} data-single={cards.length === 1 ? 'true' : undefined}>
-    {cards.map((card) => {
-      // Surface a mailto:/tel: as visible, copyable text — a plain mailto does
-      // nothing on a device with no mail app, so the address must be readable too.
-      const email = card.href?.startsWith('mailto:') ? card.href.slice(7).split('?')[0] : null;
-      const phone = card.href?.startsWith('tel:') ? card.href.slice(4) : null;
-      return (
-      <article class:list={['b-media-cards__card', 'ferst-tile', 'ferst-tile--sm', card.href && 'is-link']}>
-        {card.image && (
-          <div class="b-media-cards__media">
-            <img src={card.image.src} alt={card.image.alt ?? ''} loading="lazy" />
-          </div>
-        )}
-        <div class="b-media-cards__body">
-          {card.icon && isIconKey(card.icon) && (
-            <span class="b-media-cards__badge" aria-hidden="true"><Icon name={card.icon} size={20} /></span>
-          )}
-          <h3 class="b-media-cards__title">
-            {card.href ? <a href={card.href}>{card.title}</a> : card.title}
-          </h3>
-          {card.meta && <p class="b-media-cards__meta">{card.meta}</p>}
-          {card.text && <p class="b-media-cards__text">{card.text}</p>}
-          {(email || phone) && (
-            <span class="b-media-cards__contact">{email ?? phone}</span>
-          )}
-          {card.href && !email && !phone && (
-            <span class="b-media-cards__cta" aria-hidden="true">{card.linkLabel ?? 'Learn more'} →</span>
-          )}
-        </div>
-      </article>
-      );
-    })}
-  </div>
-</section>
-
-<style>
-  .b-media-cards {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-    max-width: 72rem;
-    margin-inline: auto;
-    padding-inline: 1rem;
-  }
-  .b-media-cards__head {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-  .b-media-cards__intro {
-    margin: 0;
-    color: var(--muted);
-    font-size: 1.0625rem;
-    line-height: 1.6;
-    max-width: var(--max);
-  }
-  .b-media-cards__grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 1.5rem;
-  }
-  /* A solitary card is a centred feature, not a full-width slab. */
-  .b-media-cards__grid[data-single] { max-width: 28rem; margin-inline: auto; }
-  @media (min-width: 40em) {
-    .b-media-cards__grid[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
-    .b-media-cards__grid[data-cols='3'] { grid-template-columns: repeat(2, 1fr); }
-  }
-  @media (min-width: 60em) {
-    .b-media-cards__grid[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }
-  }
-  .b-media-cards__card {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    /* surface comes from .ferst-tile .ferst-tile--sm (bg/border/radius/shadow-sm) */
-    overflow: hidden;
-    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
-  }
-  .b-media-cards__card.is-link:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-md);
-    border-color: var(--gold);
-  }
-  /* Image header — cover-cropped to a uniform 16:9 so any source ratio fits (the
-     PostCard technique; also out-specifies the global img{height:auto}). */
-  .b-media-cards__media {
-    position: relative;
-    aspect-ratio: 16 / 9;
-    overflow: hidden;
-    background: var(--bg-section);
-  }
-  .b-media-cards .b-media-cards__media img {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-  }
-  .b-media-cards__body {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    padding: 1.1rem 1.2rem 1.3rem;
-    flex: 1;
-  }
-  /* Icon badge — a small brand chip; slightly lifted over the image edge when an
-     image is present (the negative margin only bites inside a card with a header). */
-  .b-media-cards__badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 2.25rem;
-    height: 2.25rem;
-    border-radius: 999px;
-    background: var(--gold-light);
-    color: var(--gold);
-    margin-top: -2.3rem;
-    margin-bottom: 0.2rem;
-    border: 3px solid var(--bg-surface);
-  }
-  /* No image → the badge sits normally at the top of the body. */
-  .b-media-cards__card:not(:has(.b-media-cards__media)) .b-media-cards__badge {
-    margin-top: 0;
-    border: none;
-  }
-  .b-media-cards__title {
-    margin: 0;
-    font-size: 1.2rem;
-    color: var(--fg);
-  }
-  .b-media-cards__card.is-link:hover .b-media-cards__title a { color: var(--gold); }
-  .b-media-cards__title a { color: var(--fg); }
-  /* Stretch the title link over the whole card so it's clickable. */
-  .b-media-cards__title a::after { content: ''; position: absolute; inset: 0; }
-  .b-media-cards__meta {
-    margin: 0;
-    align-self: flex-start;
-    padding: 0.2rem 0.6rem;
-    border-radius: 999px;
-    background: var(--bg-section);
-    color: var(--muted);
-    font-family: var(--font-heading);
-    font-size: 0.72rem;
-    font-weight: 600;
-    letter-spacing: 0.03em;
-  }
-  .b-media-cards__text {
-    margin: 0;
-    color: var(--muted);
-    line-height: 1.6;
-  }
-  .b-media-cards__cta {
-    margin-top: auto;
-    padding-top: 0.5rem;
-    font-family: var(--font-heading);
-    font-size: 0.85rem;
-    font-weight: 600;
-    color: var(--gold);
-  }
-  /* A mailto/tel shown as visible, copyable text (below any description). */
-  .b-media-cards__contact {
-    margin-top: auto;
-    padding-top: 0.5rem;
-    font-family: var(--font-heading);
-    font-size: 0.85rem;
-    font-weight: 600;
-    color: var(--gold);
-    overflow-wrap: anywhere;
-  }
-</style>
+---
+/**
+ * MediaCards — a Level-2 recipe: a grid of rich content cards with the IMAGE as a
+ * header on top (cover-cropped to a uniform ratio, like PostCard), then an optional
+ * icon badge, a title, a meta line (e.g. "Sundays 10:45 · Main hall"), a description, and
+ * an optional CTA link. The image-HEADER pattern (distinct from `tiles`, which puts
+ * the image BEHIND the text): use it for groups, team members, services or events —
+ * anywhere the photo and the copy both need to be fully legible. Whole card links
+ * when `href` is set. Token-driven, equal-height.
+ */
+import Icon from '../Icon.astro';
+import { isIconKey } from '../../lib/icons';
+import Heading from '../blocks/Heading.astro';
+
+import { inlineMarkdown, inlineMarkdownNoLinks } from '../../lib/inline-markdown';
+interface Card {
+  image?: { src: string; alt?: string };
+  icon?: string;
+  title: string;
+  meta?: string;
+  text?: string;
+  href?: string;
+  linkLabel?: string;
+}
+interface Props {
+  title?: string;
+  intro?: string;
+  columns?: 2 | 3;
+  cards?: Card[];
+}
+const { title, intro, columns = 3, cards = [] } = Astro.props;
+// Never reserve more columns than there are cards; `data-single` centres a lone one.
+const cols = Math.min(columns, Math.max(cards.length, 1)) as 1 | 2 | 3;
+---
+
+<section class="b-media-cards">
+  {(title || intro) && (
+    <div class="b-media-cards__head">
+      {title && <Heading text={title} level={2} />}
+      {intro && <p class="b-media-cards__intro" set:html={inlineMarkdown(intro)} />}
+    </div>
+  )}
+  <div class="b-media-cards__grid" data-cols={cols} data-single={cards.length === 1 ? 'true' : undefined}>
+    {cards.map((card) => {
+      // Surface a mailto:/tel: as visible, copyable text — a plain mailto does
+      // nothing on a device with no mail app, so the address must be readable too.
+      const email = card.href?.startsWith('mailto:') ? card.href.slice(7).split('?')[0] : null;
+      const phone = card.href?.startsWith('tel:') ? card.href.slice(4) : null;
+      return (
+      <article class:list={['b-media-cards__card', 'ferst-tile', 'ferst-tile--sm', card.href && 'is-link']}>
+        {card.image && (
+          <div class="b-media-cards__media">
+            <img src={card.image.src} alt={card.image.alt ?? ''} loading="lazy" />
+          </div>
+        )}
+        <div class="b-media-cards__body">
+          {card.icon && isIconKey(card.icon) && (
+            <span class="b-media-cards__badge" aria-hidden="true"><Icon name={card.icon} size={20} /></span>
+          )}
+          <h3 class="b-media-cards__title">
+            {card.href ? <a href={card.href}>{card.title}</a> : card.title}
+          </h3>
+          {card.meta && <p class="b-media-cards__meta">{card.meta}</p>}
+          {card.text && <p class="b-media-cards__text" set:html={card.href ? inlineMarkdownNoLinks(card.text) : inlineMarkdown(card.text)} />}
+          {(email || phone) && (
+            <span class="b-media-cards__contact">{email ?? phone}</span>
+          )}
+          {card.href && !email && !phone && (
+            <span class="b-media-cards__cta" aria-hidden="true">{card.linkLabel ?? 'Learn more'} →</span>
+          )}
+        </div>
+      </article>
+      );
+    })}
+  </div>
+</section>
+
+<style>
+  .b-media-cards {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    max-width: 72rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  .b-media-cards__head {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .b-media-cards__intro {
+    margin: 0;
+    color: var(--muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+    max-width: var(--max);
+  }
+  .b-media-cards__grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+  /* A solitary card is a centred feature, not a full-width slab. */
+  .b-media-cards__grid[data-single] { max-width: 28rem; margin-inline: auto; }
+  @media (min-width: 40em) {
+    .b-media-cards__grid[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
+    .b-media-cards__grid[data-cols='3'] { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (min-width: 60em) {
+    .b-media-cards__grid[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }
+  }
+  .b-media-cards__card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    /* surface comes from .ferst-tile .ferst-tile--sm (bg/border/radius/shadow-sm) */
+    overflow: hidden;
+    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
+  }
+  .b-media-cards__card.is-link:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+    border-color: var(--gold);
+  }
+  /* Image header — cover-cropped to a uniform 16:9 so any source ratio fits (the
+     PostCard technique; also out-specifies the global img{height:auto}). */
+  .b-media-cards__media {
+    position: relative;
+    aspect-ratio: 16 / 9;
+    overflow: hidden;
+    background: var(--bg-section);
+  }
+  .b-media-cards .b-media-cards__media img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+  .b-media-cards__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1.1rem 1.2rem 1.3rem;
+    flex: 1;
+  }
+  /* Icon badge — a small brand chip; slightly lifted over the image edge when an
+     image is present (the negative margin only bites inside a card with a header). */
+  .b-media-cards__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: 999px;
+    background: var(--gold-light);
+    color: var(--gold);
+    margin-top: -2.3rem;
+    margin-bottom: 0.2rem;
+    border: 3px solid var(--bg-surface);
+  }
+  /* No image → the badge sits normally at the top of the body. */
+  .b-media-cards__card:not(:has(.b-media-cards__media)) .b-media-cards__badge {
+    margin-top: 0;
+    border: none;
+  }
+  .b-media-cards__title {
+    margin: 0;
+    font-size: 1.2rem;
+    color: var(--fg);
+  }
+  .b-media-cards__card.is-link:hover .b-media-cards__title a { color: var(--gold); }
+  .b-media-cards__title a { color: var(--fg); }
+  /* Stretch the title link over the whole card so it's clickable. */
+  .b-media-cards__title a::after { content: ''; position: absolute; inset: 0; }
+  .b-media-cards__meta {
+    margin: 0;
+    align-self: flex-start;
+    padding: 0.2rem 0.6rem;
+    border-radius: 999px;
+    background: var(--bg-section);
+    color: var(--muted);
+    font-family: var(--font-heading);
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+  }
+  .b-media-cards__text {
+    margin: 0;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  .b-media-cards__cta {
+    margin-top: auto;
+    padding-top: 0.5rem;
+    font-family: var(--font-heading);
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--gold);
+  }
+  /* A mailto/tel shown as visible, copyable text (below any description). */
+  .b-media-cards__contact {
+    margin-top: auto;
+    padding-top: 0.5rem;
+    font-family: var(--font-heading);
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--gold);
+    overflow-wrap: anywhere;
+  }
+</style>

package/components/recipes/Notice.astro

@@ -1,89 +1,90 @@
----
-/**
- * Notice — a Level-2 recipe: an inline highlighted info box (optional icon +
- * title + body + optional link) that sets a passage apart from the surrounding
- * prose — a "reporting a concern", "please note", "how to book" callout. Two
- * tones (accent / neutral) in keeping with badge/announcement; token-driven, so
- * it follows the brand and both themes. The page-level sibling of the corner
- * StickyCallout (this one sits in the content flow).
- */
-import Icon from '../Icon.astro';
-import { isIconKey } from '../../lib/icons';
-
-interface Props {
-  tone?: 'accent' | 'neutral';
-  icon?: string;
-  title?: string;
-  text: string;
-  link?: { label: string; href: string };
-}
-const { tone = 'accent', icon, title, text, link } = Astro.props;
-const paras = text.split(/\n\s*\n/).map((p) => p.trim()).filter(Boolean);
----
-
-<aside class="b-notice" data-tone={tone}>
-  {icon && isIconKey(icon) && (
-    <span class="b-notice__icon" aria-hidden="true"><Icon name={icon} size={22} /></span>
-  )}
-  <div class="b-notice__body">
-    {title && <p class="b-notice__title">{title}</p>}
-    {paras.map((p) => <p class="b-notice__text">{p}</p>)}
-    {link && <a class="b-notice__link" href={link.href}>{link.label}</a>}
-  </div>
-</aside>
-
-<style>
-  .b-notice {
-    display: flex;
-    gap: 0.85rem;
-    align-items: flex-start;
-    max-width: var(--max);
-    margin-inline: auto;
-    padding: 1.1rem 1.25rem;
-    border-radius: var(--radius);
-    border-inline-start: 4px solid var(--gold);
-  }
-  .b-notice[data-tone='accent'] {
-    background: var(--gold-light);
-    border-inline-start-color: var(--gold);
-  }
-  .b-notice[data-tone='neutral'] {
-    background: var(--bg-section);
-    border-inline-start-color: var(--accent);
-  }
-  /* On a centred page, keep the box a readable width but centre it as a block;
-     text inside stays left (a centred info box reads badly). */
-  :global([data-content-align='center']) .b-notice {
-    text-align: start;
-  }
-  .b-notice__icon {
-    display: inline-flex;
-    color: var(--gold);
-    margin-top: 0.1rem;
-    flex-shrink: 0;
-  }
-  .b-notice__body {
-    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
-    min-width: 0;
-  }
-  .b-notice__title {
-    margin: 0;
-    font-family: var(--font-heading);
-    font-weight: 600;
-    font-size: 1.05rem;
-    color: var(--fg);
-  }
-  .b-notice__text {
-    margin: 0;
-    color: var(--muted);
-    line-height: 1.6;
-  }
-  .b-notice__link {
-    margin-top: 0.1rem;
-    align-self: flex-start;
-    color: var(--gold);
-    font-weight: 600;
-  }
-</style>
+---
+/**
+ * Notice — a Level-2 recipe: an inline highlighted info box (optional icon +
+ * title + body + optional link) that sets a passage apart from the surrounding
+ * prose — a "reporting a concern", "please note", "how to book" callout. Two
+ * tones (accent / neutral) in keeping with badge/announcement; token-driven, so
+ * it follows the brand and both themes. The page-level sibling of the corner
+ * StickyCallout (this one sits in the content flow).
+ */
+import Icon from '../Icon.astro';
+import { isIconKey } from '../../lib/icons';
+
+import { inlineMarkdown } from '../../lib/inline-markdown';
+interface Props {
+  tone?: 'accent' | 'neutral';
+  icon?: string;
+  title?: string;
+  text: string;
+  link?: { label: string; href: string };
+}
+const { tone = 'accent', icon, title, text, link } = Astro.props;
+const paras = text.split(/\n\s*\n/).map((p) => p.trim()).filter(Boolean);
+---
+
+<aside class="b-notice" data-tone={tone}>
+  {icon && isIconKey(icon) && (
+    <span class="b-notice__icon" aria-hidden="true"><Icon name={icon} size={22} /></span>
+  )}
+  <div class="b-notice__body">
+    {title && <p class="b-notice__title">{title}</p>}
+    {paras.map((p) => <p class="b-notice__text" set:html={inlineMarkdown(p)} />)}
+    {link && <a class="b-notice__link" href={link.href}>{link.label}</a>}
+  </div>
+</aside>
+
+<style>
+  .b-notice {
+    display: flex;
+    gap: 0.85rem;
+    align-items: flex-start;
+    max-width: var(--max);
+    margin-inline: auto;
+    padding: 1.1rem 1.25rem;
+    border-radius: var(--radius);
+    border-inline-start: 4px solid var(--gold);
+  }
+  .b-notice[data-tone='accent'] {
+    background: var(--gold-light);
+    border-inline-start-color: var(--gold);
+  }
+  .b-notice[data-tone='neutral'] {
+    background: var(--bg-section);
+    border-inline-start-color: var(--accent);
+  }
+  /* On a centred page, keep the box a readable width but centre it as a block;
+     text inside stays left (a centred info box reads badly). */
+  :global([data-content-align='center']) .b-notice {
+    text-align: start;
+  }
+  .b-notice__icon {
+    display: inline-flex;
+    color: var(--gold);
+    margin-top: 0.1rem;
+    flex-shrink: 0;
+  }
+  .b-notice__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    min-width: 0;
+  }
+  .b-notice__title {
+    margin: 0;
+    font-family: var(--font-heading);
+    font-weight: 600;
+    font-size: 1.05rem;
+    color: var(--fg);
+  }
+  .b-notice__text {
+    margin: 0;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  .b-notice__link {
+    margin-top: 0.1rem;
+    align-self: flex-start;
+    color: var(--gold);
+    font-weight: 600;
+  }
+</style>