ferst-core 0.7.0 → 0.7.4

package/components/recipes/FeatureCards.astro

@@ -1,111 +1,112 @@
----
-/**
- * FeatureCards — a Level-2 recipe: an optional section header over a responsive
- * grid of cards, each with an optional icon, a title, text, and an optional
- * link. Composes the Card, Icon, Heading and Button primitives.
- */
-import Heading from '../blocks/Heading.astro';
-import Card from '../Card.astro';
-import Icon from '../Icon.astro';
-import Button from '../Button.astro';
-import { isIconKey } from '../../lib/icons';
-
-interface Props {
-  title?: string;
-  intro?: string;
-  columns?: 2 | 3 | 4;
-  cards?: { icon?: string; title: string; text?: string; href?: string }[];
-}
-const { title, intro, columns = 3, cards = [] } = Astro.props;
-// Never reserve more columns than there are cards (a lone card in a 3-col grid
-// would strand two empty cells); `data-single` centres a solitary card.
-const cols = Math.min(columns, Math.max(cards.length, 1)) as 1 | 2 | 3 | 4;
----
-
-<section class="b-feature-cards">
-  {(title || intro) && (
-    <div class="b-feature-cards__head">
-      {title && <Heading text={title} level={2} align="center" />}
-      {intro && <p class="b-feature-cards__intro">{intro}</p>}
-    </div>
-  )}
-  <div class="b-feature-cards__grid" data-cols={cols} data-single={cards.length === 1 ? 'true' : undefined}>
-    {cards.map((card) => (
-      <Card>
-        {card.icon && isIconKey(card.icon) && (
-          <span class="b-feature-cards__icon"><Icon name={card.icon} size={28} /></span>
-        )}
-        <h3 class="b-feature-cards__title">{card.title}</h3>
-        {card.text && <p class="b-feature-cards__text">{card.text}</p>}
-        {card.href && (
-          <span class="b-feature-cards__cta">
-            <Button href={card.href} variant="secondary" size="sm">Learn more</Button>
-          </span>
-        )}
-      </Card>
-    ))}
-  </div>
-</section>
-
-<style>
-  .b-feature-cards {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-    max-width: 72rem;
-    margin-inline: auto;
-    padding-inline: 1rem;
-  }
-  .b-feature-cards__head {
-    max-width: var(--max);
-    margin-inline: auto;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-  .b-feature-cards__intro {
-    margin: 0;
-    color: var(--muted);
-    font-size: 1.0625rem;
-    line-height: 1.6;
-  }
-  .b-feature-cards__grid {
-    display: grid;
-    grid-template-columns: 1fr; /* mobile-first */
-    gap: 1.5rem;
-  }
-  @media (min-width: 48em) {
-    .b-feature-cards__grid[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
-    .b-feature-cards__grid[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }
-    .b-feature-cards__grid[data-cols='4'] { grid-template-columns: repeat(2, 1fr); }
-  }
-  /* A solitary card is a centred feature, not a full-width slab. */
-  .b-feature-cards__grid[data-single] { max-width: 26rem; margin-inline: auto;
-  }
-  @media (min-width: 64em) {
-    .b-feature-cards__grid[data-cols='4'] { grid-template-columns: repeat(4, 1fr); }
-  }
-  .b-feature-cards__icon {
-    color: var(--gold);
-    margin-bottom: 0.5rem;
-    display: inline-flex;
-  }
-  .b-feature-cards__title {
-    margin: 0 0 0.5rem;
-    font-size: 1.125rem;
-    color: var(--fg);
-  }
-  .b-feature-cards__text {
-    margin: 0;
-    color: var(--muted);
-    line-height: 1.6;
-  }
-  /* Push the CTA to the bottom so a row of cards aligns its buttons regardless
-     of how much text each card has. Cards are equal height already (grid items
-     stretch), and Card is a flex column — margin-top:auto does the rest. */
-  .b-feature-cards__cta {
-    margin-top: auto;
-    padding-top: 1rem;
-  }
-</style>
+---
+/**
+ * FeatureCards — a Level-2 recipe: an optional section header over a responsive
+ * grid of cards, each with an optional icon, a title, text, and an optional
+ * link. Composes the Card, Icon, Heading and Button primitives.
+ */
+import Heading from '../blocks/Heading.astro';
+import Card from '../Card.astro';
+import Icon from '../Icon.astro';
+import Button from '../Button.astro';
+import { isIconKey } from '../../lib/icons';
+
+import { inlineMarkdown } from '../../lib/inline-markdown';
+interface Props {
+  title?: string;
+  intro?: string;
+  columns?: 2 | 3 | 4;
+  cards?: { icon?: string; title: string; text?: string; href?: string }[];
+}
+const { title, intro, columns = 3, cards = [] } = Astro.props;
+// Never reserve more columns than there are cards (a lone card in a 3-col grid
+// would strand two empty cells); `data-single` centres a solitary card.
+const cols = Math.min(columns, Math.max(cards.length, 1)) as 1 | 2 | 3 | 4;
+---
+
+<section class="b-feature-cards">
+  {(title || intro) && (
+    <div class="b-feature-cards__head">
+      {title && <Heading text={title} level={2} align="center" />}
+      {intro && <p class="b-feature-cards__intro" set:html={inlineMarkdown(intro)} />}
+    </div>
+  )}
+  <div class="b-feature-cards__grid" data-cols={cols} data-single={cards.length === 1 ? 'true' : undefined}>
+    {cards.map((card) => (
+      <Card>
+        {card.icon && isIconKey(card.icon) && (
+          <span class="b-feature-cards__icon"><Icon name={card.icon} size={28} /></span>
+        )}
+        <h3 class="b-feature-cards__title">{card.title}</h3>
+        {card.text && <p class="b-feature-cards__text" set:html={inlineMarkdown(card.text)} />}
+        {card.href && (
+          <span class="b-feature-cards__cta">
+            <Button href={card.href} variant="secondary" size="sm">Learn more</Button>
+          </span>
+        )}
+      </Card>
+    ))}
+  </div>
+</section>
+
+<style>
+  .b-feature-cards {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    max-width: 72rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  .b-feature-cards__head {
+    max-width: var(--max);
+    margin-inline: auto;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .b-feature-cards__intro {
+    margin: 0;
+    color: var(--muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+  }
+  .b-feature-cards__grid {
+    display: grid;
+    grid-template-columns: 1fr; /* mobile-first */
+    gap: 1.5rem;
+  }
+  @media (min-width: 48em) {
+    .b-feature-cards__grid[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
+    .b-feature-cards__grid[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }
+    .b-feature-cards__grid[data-cols='4'] { grid-template-columns: repeat(2, 1fr); }
+  }
+  /* A solitary card is a centred feature, not a full-width slab. */
+  .b-feature-cards__grid[data-single] { max-width: 26rem; margin-inline: auto;
+  }
+  @media (min-width: 64em) {
+    .b-feature-cards__grid[data-cols='4'] { grid-template-columns: repeat(4, 1fr); }
+  }
+  .b-feature-cards__icon {
+    color: var(--gold);
+    margin-bottom: 0.5rem;
+    display: inline-flex;
+  }
+  .b-feature-cards__title {
+    margin: 0 0 0.5rem;
+    font-size: 1.125rem;
+    color: var(--fg);
+  }
+  .b-feature-cards__text {
+    margin: 0;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  /* Push the CTA to the bottom so a row of cards aligns its buttons regardless
+     of how much text each card has. Cards are equal height already (grid items
+     stretch), and Card is a flex column — margin-top:auto does the rest. */
+  .b-feature-cards__cta {
+    margin-top: auto;
+    padding-top: 1rem;
+  }
+</style>

package/components/recipes/Hero.astro

@@ -13,7 +13,7 @@
  */
 import Heading from '../blocks/Heading.astro';
 import Button from '../Button.astro';
-import { videoEmbed } from '../../lib/video';
+import { backgroundEmbed, videoEmbed } from '../../lib/video';
 
 interface Props {
   eyebrow?: string;
@@ -24,20 +24,27 @@ interface Props {
   media?: { image?: string; images?: string[]; video?: string; poster?: string; overlay?: number; link?: string; linkLabel?: string };
   layout?: 'centered' | 'split' | 'media';
   size?: 'standard' | 'tall' | 'screen';
+  parallax?: boolean;
   background?: 'none' | 'mesh';
 }
-const { eyebrow, title, subtitle, cta, image, media, layout = 'centered', size = 'standard', background = 'none' } = Astro.props;
+const { eyebrow, title, subtitle, cta, image, media, layout = 'centered', size = 'standard', parallax = false, background = 'none' } = Astro.props;
+// A YouTube / Vimeo link plays as an embedded background (after consent); anything else
+// in `video` is a file for a native <video>.
+const embed = media?.video ? backgroundEmbed(media.video) : null;
 const slides = !media?.video && (media?.images?.length ?? 0) >= 2 ? media!.images! : [];
 const still = media?.image ?? media?.images?.[0];
 const isMedia = layout === 'media' && media && (media.video || slides.length || still);
-const motion = isMedia && (media?.video || slides.length) ? (media?.video ? 'video' : 'slides') : undefined;
+const motion = isMedia ? (embed ? 'embed' : media?.video ? 'video' : slides.length ? 'slides' : undefined) : undefined;
 const overlay = (media?.overlay ?? 45) / 100;
 const isMesh = background === 'mesh' && !isMedia;
 // The background can lead somewhere — e.g. the full video on YouTube (new tab; the app on phones).
-const bgLink = isMedia && media?.link && /^(https?:\/\/|\/)/i.test(media.link) ? media.link : undefined;
+const linkTo = media?.link ?? embed?.watchUrl; // an embedded video links to itself by default
+const bgLink = isMedia && linkTo && /^(https?:\/\/|\/)/i.test(linkTo) ? linkTo : undefined;
 const provider = bgLink ? videoEmbed(bgLink)?.provider : undefined;
 const watchLabel = media?.linkLabel || (provider ? `Watch the full video on ${provider}` : 'Watch the full video');
-const bgImage = isMedia && !media?.video && !slides.length && still ? `--hero-image: url('${still}')` : '';
+// The still: the image (no motion), or an embed's poster until the player may load.
+const stillSrc = embed ? media?.poster ?? still : !media?.video && !slides.length ? still : undefined;
+const bgImage = isMedia && stillSrc ? `--hero-image: url('${stillSrc}')` : '';
 ---
 
 <section
@@ -47,11 +54,13 @@ const bgImage = isMedia && !media?.video && !slides.length && still ? `--hero-im
   data-bg={isMesh ? 'mesh' : undefined}
   data-motion={motion}
   data-linked={bgLink ? 'true' : undefined}
+  data-parallax={isMedia && parallax ? 'true' : undefined}
   style={isMedia ? `--hero-overlay: ${overlay}; ${bgImage}` : undefined}
 >
   {isMedia && (
     <div class="b-hero__bg" aria-hidden="true">
-      {media?.video ? (
+      {embed && <div class="b-hero__embed" data-embed-url={embed.embedUrl} data-provider={embed.provider}></div>}
+      {media?.video && !embed ? (
         <video autoplay muted loop playsinline poster={media.poster} preload="metadata">
           <source src={media.video} />
         </video>
@@ -80,7 +89,7 @@ const bgImage = isMedia && !media?.video && !slides.length && still ? `--hero-im
     </a>
   )}
   {motion && (
-    <button type="button" class="b-hero__pause" aria-pressed="false" aria-label="Pause background">
+    <button type="button" class="b-hero__pause" aria-pressed="false" aria-label="Pause background" hidden={motion === 'embed'}>
       <span class="b-hero__pause-icon" aria-hidden="true"></span>
     </button>
   )}
@@ -92,13 +101,50 @@ const bgImage = isMedia && !media?.video && !slides.length && still ? `--hero-im
 </section>
 
 <script>
-  // Moving hero backgrounds: pause button, reduced-motion, and the slideshow timer.
+  // Moving hero backgrounds: pause button, reduced-motion, the slideshow timer, and an
+  // embedded (YouTube / Vimeo) background that loads only once the visitor consents.
+  import { hasConsent, onConsentChange } from '../../lib/consent-client';
+  import { playerStarted } from '../../lib/video';
   const SLIDE_MS = 6000;
   const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
   for (const hero of document.querySelectorAll<HTMLElement>('.b-hero[data-motion]')) {
     const button = hero.querySelector<HTMLButtonElement>('.b-hero__pause');
     const video = hero.querySelector('video');
     const slides = [...hero.querySelectorAll<HTMLElement>('.b-hero__slide')];
+    const embedSlot = hero.querySelector<HTMLElement>('.b-hero__embed');
+    let player: HTMLIFrameElement | null = null;
+    // Play / pause an embedded player by message, with no provider API script.
+    const command = (play: boolean) => {
+      if (!player?.contentWindow) return;
+      const msg = embedSlot!.dataset.provider === 'Vimeo'
+        ? { method: play ? 'play' : 'pause' }
+        : { event: 'command', func: play ? 'playVideo' : 'pauseVideo', args: [] };
+      player.contentWindow.postMessage(JSON.stringify(msg), new URL(player.src).origin);
+    };
+    const loadPlayer = () => {
+      if (player || !embedSlot || reduce) return; // reduced motion keeps the still
+      player = document.createElement('iframe');
+      player.src = embedSlot.dataset.embedUrl!;
+      player.title = 'Background video';
+      player.tabIndex = -1;
+      player.setAttribute('aria-hidden', 'true');
+      player.allow = 'autoplay; encrypted-media; picture-in-picture';
+      // Keep the poster up until the player says it is PLAYING, then cross-fade: no black,
+      // loading player on screen. Ask it to report (YouTube 'listening' / Vimeo listener).
+      const provider = embedSlot.dataset.provider!;
+      const origin = new URL(player.src).origin;
+      window.addEventListener('message', (e) => {
+        if (e.origin !== origin || e.source !== player!.contentWindow) return;
+        if (playerStarted(provider, e.data)) embedSlot.classList.add('is-on');
+      });
+      player.addEventListener('load', () => {
+        const hello = provider === 'Vimeo' ? { method: 'addEventListener', value: 'play' } : { event: 'listening', id: 1, channel: 'widget' };
+        player!.contentWindow?.postMessage(JSON.stringify(hello), origin);
+      });
+      embedSlot.appendChild(player);
+      if (button) button.hidden = false;
+      sync();
+    };
     let paused = reduce;
     let visible = true;
     let index = 0;
@@ -115,6 +161,7 @@ const bgImage = isMedia && !media?.video && !slides.length && still ? `--hero-im
         if (run) void video.play().catch(() => {});
         else video.pause();
       }
+      if (player) command(run);
       if (slides.length > 1) {
         window.clearInterval(timer);
         timer = run ? window.setInterval(tick, SLIDE_MS) : undefined;
@@ -128,8 +175,41 @@ const bgImage = isMedia && !media?.video && !slides.length && still ? `--hero-im
     button?.addEventListener('click', () => { paused = !paused; sync(); });
     document.addEventListener('visibilitychange', sync);
     new IntersectionObserver(([e]) => { visible = e.isIntersecting; sync(); }).observe(hero);
+    if (embedSlot) {
+      // Warm the connection the moment it's allowed, so the video starts sooner.
+      const preconnect = () => {
+        const href = new URL(embedSlot.dataset.embedUrl!).origin;
+        if (document.querySelector(`link[rel="preconnect"][href="${href}"]`)) return;
+        const l = document.createElement('link');
+        l.rel = 'preconnect';
+        l.href = href;
+        document.head.appendChild(l);
+      };
+      if (hasConsent()) { preconnect(); loadPlayer(); }
+      onConsentChange((allowed) => { if (allowed) { preconnect(); loadPlayer(); } });
+    }
     sync();
   }
+  // Parallax: the background drifts more slowly than the page. Transform-based, so it works
+  // for an image, slides, a <video> or an embedded player alike. Off on touch devices
+  // (coarse pointers) and under reduced motion; only runs while the hero is on screen.
+  const fine = window.matchMedia('(pointer: fine)').matches;
+  for (const hero of document.querySelectorAll<HTMLElement>('.b-hero[data-parallax]')) {
+    const bg = hero.querySelector<HTMLElement>('.b-hero__bg');
+    if (!bg || reduce || !fine) continue;
+    hero.classList.add('is-parallax');
+    let ticking = false;
+    let onScreen = true;
+    const move = () => {
+      ticking = false;
+      const top = hero.getBoundingClientRect().top;
+      bg.style.transform = `translate3d(0, ${Math.round(Math.max(0, -top) * 0.35)}px, 0)`;
+    };
+    const queue = () => { if (onScreen && !ticking) { ticking = true; requestAnimationFrame(move); } };
+    new IntersectionObserver(([e]) => { onScreen = e.isIntersecting; if (onScreen) queue(); }).observe(hero);
+    window.addEventListener('scroll', queue, { passive: true });
+    move();
+  }
 </script>
 
 <style>
@@ -246,11 +326,43 @@ const bgImage = isMedia && !media?.video && !slides.length && still ? `--hero-im
     background-position: center;
     background-color: var(--bg-section);
   }
+  /* Parallax: give the background room to drift without uncovering an edge. */
+  .b-hero.is-parallax .b-hero__bg {
+    inset: 0 0 -35% 0;
+    will-change: transform;
+  }
   .b-hero__bg video {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
+  /* An embedded background player, sized to COVER the hero like object-fit (16:9 kept,
+     overflow cropped). Never interactive; fades in once it has started. */
+  .b-hero__embed {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+    container-type: size;
+    opacity: 0;
+    transition: opacity 1.2s ease;
+  }
+  .b-hero__embed.is-on {
+    opacity: 1;
+  }
+  .b-hero__embed :global(iframe) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: max(100cqw, 177.78cqh);
+    height: max(100cqh, 56.25cqw);
+    max-width: none; /* the global media reset caps iframes at 100%: cover must overflow */
+    transform: translate(-50%, -50%);
+    border: 0;
+  }
+  .b-hero__pause[hidden] {
+    display: none;
+  }
   .b-hero__slide {
     position: absolute;
     inset: 0;

package/components/recipes/LinkRow.astro

@@ -0,0 +1,91 @@
+---
+/**
+ * LinkRow — a titled row of links as tappable pills (phone, email, web), each with the
+ * icon its link implies (lib/links), plus an optional intro and footnote. For a contact
+ * who doesn't need a whole contact card: "Vocations — phone · email · website".
+ */
+import Heading from '../blocks/Heading.astro';
+import Icon from '../Icon.astro';
+import { linkIcon } from '../../lib/links';
+import { inlineMarkdown } from '../../lib/inline-markdown';
+
+interface Props {
+  title?: string;
+  intro?: string;
+  links: Array<{ label: string; href: string }>;
+  note?: string;
+}
+const { title, intro, links = [], note } = Astro.props;
+const external = (href: string) => /^https?:\/\//i.test(href);
+---
+
+<section class="b-linkrow">
+  {title && <Heading text={title} level={3} />}
+  {intro && <p class="b-linkrow__intro" set:html={inlineMarkdown(intro)} />}
+  <ul class="b-linkrow__links">
+    {links.map((l) => (
+      <li>
+        <a class="b-linkrow__pill" href={l.href} target={external(l.href) ? '_blank' : undefined} rel={external(l.href) ? 'noopener' : undefined}>
+          <Icon name={linkIcon(l.href)} size={18} />
+          <span>{l.label}</span>
+        </a>
+      </li>
+    ))}
+  </ul>
+  {note && <p class="b-linkrow__note" set:html={inlineMarkdown(note)} />}
+</section>
+
+<style>
+  .b-linkrow {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    max-width: var(--max);
+  }
+  :global([data-content-align='center']) .b-linkrow {
+    margin-inline: auto;
+    align-items: center;
+    text-align: center;
+  }
+  .b-linkrow__intro,
+  .b-linkrow__note {
+    margin: 0;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  .b-linkrow__note {
+    font-size: 0.9375rem;
+  }
+  .b-linkrow__links {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.6rem;
+  }
+  .b-linkrow__pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.55rem 1rem;
+    border-radius: 999px;
+    border: var(--card-border);
+    background: var(--bg-surface);
+    color: var(--fg);
+    font-weight: 600;
+    text-decoration: none;
+    overflow-wrap: anywhere;
+  }
+  .b-linkrow__pill :global(svg) {
+    color: var(--gold);
+    flex: none;
+  }
+  .b-linkrow__pill:hover {
+    background: var(--bg-section);
+  }
+  .b-linkrow__pill:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: 2px;
+  }
+</style>