ferst-core 0.7.8 → 0.7.9

package/components/CalendarEmbed.astro

@@ -1,4 +1,5 @@
 ---
+import { inlineMarkdown } from '../lib/inline-markdown';
 /**
  * CalendarEmbed — a consent-gated external calendar embed (e.g. Google Calendar).
  * Nothing loads from the provider until the visitor clicks "Load calendar", so no
@@ -38,7 +39,7 @@ const safe = isSafeEmbedUrl(finalEmbedUrl);
 
 <section class="b-calendar">
   {title && <h2 class="b-calendar__title">{title}</h2>}
-  {intro && <p class="b-calendar__intro">{intro}</p>}
+  {intro && <p class="b-calendar__intro" set:html={inlineMarkdown(intro)} />}
 
   {!finalEmbedUrl ? (
     <p class="b-calendar__note">The calendar isn't set up yet.</p>

package/components/recipes/Hero.astro

@@ -23,11 +23,13 @@ interface Props {
   image?: { src: string; alt?: string };
   media?: { image?: string; images?: string[]; video?: string; poster?: string; overlay?: number; link?: string; linkLabel?: string };
   layout?: 'centered' | 'split' | 'media';
-  size?: 'standard' | 'tall' | 'screen';
+  size?: 'compact' | 'standard' | 'tall' | 'screen';
   parallax?: boolean;
   background?: 'none' | 'mesh';
+  fullBleed?: boolean;
+  focus?: string;
 }
-const { eyebrow, title, subtitle, cta, image, media, layout = 'centered', size = 'standard', parallax = false, background = 'none' } = Astro.props;
+const { eyebrow, title, subtitle, cta, image, media, layout = 'centered', size = 'standard', parallax = false, background = 'none', fullBleed = false, focus } = 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;
@@ -55,7 +57,8 @@ const bgImage = isMedia && stillSrc ? `--hero-image: url('${stillSrc}')` : '';
   data-motion={motion}
   data-linked={bgLink ? 'true' : undefined}
   data-parallax={isMedia && parallax ? 'true' : undefined}
-  style={isMedia ? `--hero-overlay: ${overlay}; ${bgImage}` : undefined}
+  data-full-bleed={isMedia && fullBleed ? 'true' : undefined}
+  style={isMedia ? `--hero-overlay: ${overlay}; ${bgImage}${focus ? `; --hero-focus: ${focus}` : ''}` : undefined}
 >
   {isMedia && (
     <div class="b-hero__bg" aria-hidden="true">
@@ -307,6 +310,21 @@ const bgImage = isMedia && stillSrc ? `--hero-image: url('${stillSrc}')` : '';
     overflow: hidden;
     isolation: isolate;
   }
+  /* A narrow band for a short, wide header strip: close to the strip's own shape, so it
+     isn't cropped to its middle and blown up. Less padding and a smaller title to fit. */
+  .b-hero[data-size='compact'] {
+    min-height: clamp(8rem, 18vw, 16rem);
+    padding-block: clamp(1.25rem, 3vw, 2.25rem);
+  }
+  .b-hero[data-size='compact'] :global(h1) {
+    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
+  }
+  /* Edge to edge across the screen, like a full-bleed banner. */
+  .b-hero[data-full-bleed='true'] {
+    width: 100vw;
+    margin-inline: calc(50% - 50vw);
+    border-radius: 0;
+  }
   .b-hero[data-size='tall'] {
     min-height: min(85vh, 52rem);
   }
@@ -330,7 +348,7 @@ const bgImage = isMedia && stillSrc ? `--hero-image: url('${stillSrc}')` : '';
     z-index: -1;
     background-image: var(--hero-image, none);
     background-size: cover;
-    background-position: center;
+    background-position: var(--hero-focus, center);
     background-color: var(--bg-section);
   }
   /* Parallax: give the background room to drift without uncovering an edge. */
@@ -342,6 +360,7 @@ const bgImage = isMedia && stillSrc ? `--hero-image: url('${stillSrc}')` : '';
     width: 100%;
     height: 100%;
     object-fit: cover;
+    object-position: var(--hero-focus, center);
   }
   /* 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. */
@@ -374,7 +393,7 @@ const bgImage = isMedia && stillSrc ? `--hero-image: url('${stillSrc}')` : '';
     position: absolute;
     inset: 0;
     background-size: cover;
-    background-position: center;
+    background-position: var(--hero-focus, center);
     opacity: 0;
     transition: opacity 1.6s ease-in-out;
   }

package/content/blocks.ts

@@ -146,9 +146,19 @@ export const heroBlock = z.object({
     })
     .optional(),
   layout: z.enum(['centered', 'split', 'media']).default('centered'),
-  /** How much of the screen a `media` hero takes: `standard` (a band), `tall`,
-   *  or `screen` — the full first screen, edge to edge (e.g. a video opener). */
-  size: z.enum(['standard', 'tall', 'screen']).default('standard'),
+  /** How much of the screen a `media` hero takes: `compact` (a narrow band for a short,
+   *  wide header strip, e.g. 1000 × 175), `standard` (a band), `tall`, or `screen` — the
+   *  full first screen, edge to edge (e.g. a video opener). */
+  size: z.enum(['compact', 'standard', 'tall', 'screen']).default('standard'),
+  /** A `media` hero runs edge to edge across the screen, like a full-bleed banner
+   *  (`screen` always does). */
+  fullBleed: z.boolean().default(false),
+  /** Which part of the background image shows when it's cropped: one or two positions,
+   *  keywords or percentages (e.g. `center 30%`, `top`, `left 20%`). Default `center`. */
+  focus: z
+    .string()
+    .regex(/^(?:left|center|right|top|bottom|\d{1,3}%)(?: (?:left|center|right|top|bottom|\d{1,3}%))?$/, 'focus is one or two of left / center / right / top / bottom / a percentage, e.g. "center 30%"')
+    .optional(),
   /** A `media` hero's background drifts more slowly than the page as it scrolls (any
    *  background: image, slides or video). Off on touch devices and under reduced motion. */
   parallax: z.boolean().default(false),

package/layouts/Base.astro

@@ -431,6 +431,7 @@ const metaDescription = description ?? identity.description;
       /* A full-bleed opener (a full-screen hero, a full-bleed banner) as the page's first
          block sits flush under the header, not below the main's top padding. */
       .site-main:has(> .b-hero[data-size='screen']:first-child),
+      .site-main:has(> .b-hero[data-full-bleed='true']:first-child),
       .site-main:has(> .b-banner[data-full-bleed='true']:first-child) {
         padding-block-start: 0;
       }

package/lib/inline-markdown.ts

@@ -69,3 +69,16 @@ export function inlineMarkdown(text: string | undefined | null): string {
   out += inlineFormat(escapeHtml(text.slice(last)));
   return out;
 }
+
+/** The words of formatted copy with the formatting gone (a link becomes its label): for
+ *  places that must be plain text, like a page's meta description. */
+export function plainText(text: string | undefined | null): string {
+  if (!text) return '';
+  return text
+    .replace(LINK_RE, '$1')
+    .replace(/\*\*([^*]+)\*\*/g, '$1')
+    .replace(/(^|[^*\w])\*(?![\s*])([^*]*?[^\s*])\*(?!\*)/g, '$1$2')
+    .replace(/(^|[^\w])_(?![\s_])([^_]*?[^\s_])_(?!\w)/g, '$1$2')
+    .replace(/\s*\n\s*/g, ' ')
+    .trim();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferst-core",
-  "version": "0.7.8",
+  "version": "0.7.9",
   "type": "module",
   "description": "Ferst Core \u2014 the shared, brand-agnostic client-site system: Astro components, layouts, content schemas, the layered config resolver, and a neutral styling architecture that every client overrides.",
   "license": "BUSL-1.1",

package/routes/calendar/index.astro

@@ -1,4 +1,5 @@
 ---
+import { plainText } from '../../lib/inline-markdown';
 /**
  * The calendar page (`/calendar`) — INJECTED by the ferst() integration. Consent-
  * gated by CalendarEmbed (nothing loads from Google until the visitor opts in).
@@ -12,7 +13,7 @@ import { getCalendarSettings } from '../../lib/calendar';
 const cal = await getCalendarSettings();
 ---
 
-<Base title={cal.title} description={cal.intro || undefined}>
+<Base title={cal.title} description={plainText(cal.intro) || undefined}>
   <CalendarEmbed
     title={cal.title}
     intro={cal.intro}