ferst-core 0.4.2 → 0.4.3

package/components/CalendarEmbed.astro

@@ -76,48 +76,31 @@ const safe = isSafeEmbedUrl(finalEmbedUrl);
 </section>
 
 <script>
-  // Bundled (runs once even with multiple calendars on a page). Consent is the
-  // shared site-wide embed consent: accepting the cookie banner (or the footer
-  // panel) auto-loads every embed. The per-embed button is a fallback that grants
-  // the same consent, so one click still loads everything and is remembered.
-  import { hasConsent, setConsent, onConsentChange } from '../lib/consent-client';
-
-  const embeds = document.querySelectorAll<HTMLElement>('.b-calendar__embed');
+  // Shared consent-gated embed loader (one implementation for calendar/map/
+  // locations). Accepting the cookie banner or the footer panel auto-loads every
+  // embed; the per-embed button is a fallback granting the same shared consent.
+  import { initEmbedConsent, makeEmbedFrame } from '../lib/embed-consent';
 
   // Google Calendar embeds render light-only — `bgcolor` recolours just the
   // surround, never the grid, so matching it to a dark surface still left a white
-  // calendar sitting in the dark page. Instead we force a deterministic WHITE
-  // surround here (independent of the theme at load) and, in dark mode, invert the
-  // whole frame in CSS (below). The invert is keyed on the site's [data-theme], so
-  // it also flips live when the visitor toggles the theme.
-  function calendarUrl(url: string): string {
-    if (!/google\.com\/calendar|calendar\.google\.com/.test(url)) return url;
-    return url + (url.includes('?') ? '&' : '?') + 'bgcolor=%23ffffff';
-  }
-
-  function load(el: HTMLElement) {
-    if (el.dataset.loaded === 'true') return;
-    const url = el.dataset.embedUrl;
-    const frameSlot = el.querySelector<HTMLElement>('.b-calendar__frame');
-    if (!url || !frameSlot) return;
-    const frame = document.createElement('iframe');
-    frame.src = calendarUrl(url);
-    frame.title = el.dataset.title || 'Calendar';
-    frame.loading = 'lazy';
-    frame.style.width = '100%';
-    frame.style.height = (el.dataset.height || '600') + 'px';
-    frame.style.border = '0';
-    frameSlot.replaceChildren(frame);
-    el.dataset.loaded = 'true';
-    const consent = el.querySelector<HTMLElement>('.b-calendar__consent');
-    if (consent) consent.hidden = true;
-  }
-  const loadAll = () => embeds.forEach(load);
+  // calendar in the dark page. We force a deterministic WHITE surround here
+  // (independent of the theme at load) and, in dark mode, invert the whole frame
+  // in CSS (below) — keyed on [data-theme] so it also flips live on a toggle.
+  const withWhiteSurround = (url: string) =>
+    /google\.com\/calendar|calendar\.google\.com/.test(url)
+      ? url + (url.includes('?') ? '&' : '?') + 'bgcolor=%23ffffff'
+      : url;
 
-  if (hasConsent()) loadAll();
-  onConsentChange((allowed) => { if (allowed) loadAll(); });
-  embeds.forEach((el) => {
-    el.querySelector<HTMLButtonElement>('.b-calendar__load')?.addEventListener('click', () => setConsent(true));
+  initEmbedConsent({
+    root: '.b-calendar__embed',
+    frame: '.b-calendar__frame',
+    consent: '.b-calendar__consent',
+    button: '.b-calendar__load',
+    buildFrame: (el, url) =>
+      makeEmbedFrame(withWhiteSurround(url), {
+        title: el.dataset.title || 'Calendar',
+        height: (el.dataset.height || '600') + 'px',
+      }),
   });
 </script>
 

package/components/recipes/Locations.astro

@@ -65,34 +65,18 @@ const { title, intro, columns = 2, provider = 'Google Maps', items = [] } = Astr
 </section>
 
 <script>
-  // Shared site consent: accepting the cookie banner auto-loads every map here.
-  import { hasConsent, setConsent, onConsentChange } from '../../lib/consent-client';
+  // Shared consent-gated embed loader (see lib/embed-consent). Accepting the cookie
+  // banner or the footer panel auto-loads every map tile here; the per-tile button
+  // is a fallback that grants the same shared consent.
+  import { initEmbedConsent, makeEmbedFrame } from '../../lib/embed-consent';
 
-  const maps = document.querySelectorAll<HTMLElement>('.b-loc-map');
-  function load(el: HTMLElement) {
-    if (el.dataset.loaded === 'true') return;
-    const url = el.dataset.embedUrl;
-    const slot = el.querySelector<HTMLElement>('.b-loc-map__frame');
-    if (!url || !slot) return;
-    const frame = document.createElement('iframe');
-    frame.src = url;
-    frame.title = el.dataset.title || 'Map';
-    frame.loading = 'lazy';
-    frame.referrerPolicy = 'no-referrer-when-downgrade';
-    frame.style.width = '100%';
-    frame.style.height = '100%';
-    frame.style.border = '0';
-    slot.replaceChildren(frame);
-    el.dataset.loaded = 'true';
-    const consent = el.querySelector<HTMLElement>('.b-loc-map__consent');
-    if (consent) consent.hidden = true;
-  }
-  const loadAll = () => maps.forEach(load);
-
-  if (hasConsent()) loadAll();
-  onConsentChange((allowed) => { if (allowed) loadAll(); });
-  maps.forEach((el) => {
-    el.querySelector<HTMLButtonElement>('.b-loc-map__load')?.addEventListener('click', () => setConsent(true));
+  initEmbedConsent({
+    root: '.b-loc-map',
+    frame: '.b-loc-map__frame',
+    consent: '.b-loc-map__consent',
+    button: '.b-loc-map__load',
+    buildFrame: (el, url) =>
+      makeEmbedFrame(url, { title: el.dataset.title || 'Map', height: '100%', referrer: true }),
   });
 </script>
 

package/components/recipes/MapEmbed.astro

@@ -71,37 +71,22 @@ const safe = isSafeEmbedUrl(embedUrl);
 </section>
 
 <script>
-  // Bundled (runs once even with multiple maps on a page). Uses the shared site
-  // embed consent: accepting the cookie banner (or the footer panel) auto-loads
-  // every embed. The per-embed button grants that same consent as a fallback.
-  import { hasConsent, setConsent, onConsentChange } from '../../lib/consent-client';
+  // Shared consent-gated embed loader (see lib/embed-consent). Accepting the cookie
+  // banner or the footer panel auto-loads every embed; the per-embed button is a
+  // fallback that grants the same shared consent.
+  import { initEmbedConsent, makeEmbedFrame } from '../../lib/embed-consent';
 
-  const embeds = document.querySelectorAll<HTMLElement>('.b-map__embed');
-
-  function load(el: HTMLElement) {
-    if (el.dataset.loaded === 'true') return;
-    const url = el.dataset.embedUrl;
-    const frameSlot = el.querySelector<HTMLElement>('.b-map__frame');
-    if (!url || !frameSlot) return;
-    const frame = document.createElement('iframe');
-    frame.src = url;
-    frame.title = el.dataset.title || 'Map';
-    frame.loading = 'lazy';
-    frame.referrerPolicy = 'no-referrer-when-downgrade';
-    frame.style.width = '100%';
-    frame.style.height = (el.dataset.height || '450') + 'px';
-    frame.style.border = '0';
-    frameSlot.replaceChildren(frame);
-    el.dataset.loaded = 'true';
-    const consent = el.querySelector<HTMLElement>('.b-map__consent');
-    if (consent) consent.hidden = true;
-  }
-  const loadAll = () => embeds.forEach(load);
-
-  if (hasConsent()) loadAll();
-  onConsentChange((allowed) => { if (allowed) loadAll(); });
-  embeds.forEach((el) => {
-    el.querySelector<HTMLButtonElement>('.b-map__load')?.addEventListener('click', () => setConsent(true));
+  initEmbedConsent({
+    root: '.b-map__embed',
+    frame: '.b-map__frame',
+    consent: '.b-map__consent',
+    button: '.b-map__load',
+    buildFrame: (el, url) =>
+      makeEmbedFrame(url, {
+        title: el.dataset.title || 'Map',
+        height: (el.dataset.height || '450') + 'px',
+        referrer: true,
+      }),
   });
 </script>
 

package/lib/embed-consent.ts

@@ -0,0 +1,73 @@
+/**
+ * Shared client-side loader for consent-gated third-party embeds (Google Calendar,
+ * Google Maps, the Locations tiles). One implementation, so every embed gates,
+ * loads and reacts to consent identically — instead of the same ~25-line script
+ * copied into each component (where a fix, or a bug, lands in only one copy).
+ *
+ * Behaviour: nothing loads until the visitor consents. Accepting the site cookie
+ * banner (or the footer preferences panel) grants the shared consent and
+ * auto-loads EVERY registered embed on the page; the per-embed button is a
+ * fallback that grants that same shared consent. Consent is remembered per
+ * visitor. Import from a component `<script>` (it touches the DOM).
+ *
+ * Each embed root element carries the data the loader needs:
+ *   data-embed-url   the https URL to load (required)
+ *   data-title       the iframe title (optional)
+ *   data-height      pixel height, for fixed-height embeds (optional)
+ * and contains a `frame` slot (filled with the iframe), a `consent` card (hidden
+ * once loaded) and a `button` that grants consent.
+ */
+import { hasConsent, setConsent, onConsentChange } from './consent-client';
+
+export interface EmbedConsentConfig {
+  /** Selector for each embed root (one per embed on the page). */
+  root: string;
+  /** Selector, within a root, of the empty slot the iframe is injected into. */
+  frame: string;
+  /** Selector, within a root, of the consent card to hide once loaded. */
+  consent: string;
+  /** Selector, within a root, of the button that grants consent. */
+  button: string;
+  /** Build the iframe for one root — lets each embed set its own src / size / attrs. */
+  buildFrame: (el: HTMLElement, url: string) => HTMLIFrameElement;
+}
+
+/** Wire up every consent-gated embed matching `cfg.root`. Call once per component. */
+export function initEmbedConsent(cfg: EmbedConsentConfig): void {
+  const roots = document.querySelectorAll<HTMLElement>(cfg.root);
+  if (!roots.length) return;
+
+  function load(el: HTMLElement): void {
+    if (el.dataset.loaded === 'true') return;
+    const url = el.dataset.embedUrl;
+    const slot = el.querySelector<HTMLElement>(cfg.frame);
+    if (!url || !slot) return;
+    slot.replaceChildren(cfg.buildFrame(el, url));
+    el.dataset.loaded = 'true';
+    const card = el.querySelector<HTMLElement>(cfg.consent);
+    if (card) card.hidden = true;
+  }
+  const loadAll = (): void => roots.forEach(load);
+
+  if (hasConsent()) loadAll();
+  onConsentChange((allowed) => { if (allowed) loadAll(); });
+  roots.forEach((el) => {
+    el.querySelector<HTMLButtonElement>(cfg.button)?.addEventListener('click', () => setConsent(true));
+  });
+}
+
+/** Build a standard lazy embed iframe (100% width, 0 border). */
+export function makeEmbedFrame(
+  src: string,
+  opts: { title?: string; height?: string; referrer?: boolean } = {},
+): HTMLIFrameElement {
+  const f = document.createElement('iframe');
+  f.src = src;
+  if (opts.title) f.title = opts.title;
+  f.loading = 'lazy';
+  if (opts.referrer) f.referrerPolicy = 'no-referrer-when-downgrade';
+  f.style.width = '100%';
+  f.style.height = opts.height ?? '100%';
+  f.style.border = '0';
+  return f;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferst-core",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "type": "module",
   "description": "Ferst Core — 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",