ferst-core 0.7.2 → 0.7.5

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

@@ -0,0 +1,92 @@
+---
+/**
+ * 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>