@sarimarcus/content-sites-ui 0.14.0 → 0.15.0

package/src/affiliate/InlineAffiliateCTA.astro

@@ -0,0 +1,67 @@
+---
+/**
+ * InlineAffiliateCTA — one line of copy plus a tracked affiliate button: the slim alternative to a card grid.
+ * `href` arrives finished (tagged by the site). `trackPlacement` is the analytics placement value the site has
+ * already normalised. With `provider`, the button also carries the provider/product/placement triple the cards emit,
+ * so inline clicks land in the same analytics fields. Render an AffiliateDisclosure nearby.
+ */
+import Icon from '../primitives/Icon.astro';
+
+interface Props {
+  href: string;
+  label: string;
+  description?: string;
+  cta?: string;
+  trackId: string;
+  trackPlacement: string;
+  provider?: string;
+  productId?: string;
+  class?: string;
+}
+
+const {
+  href,
+  label,
+  description,
+  cta = 'See tours',
+  trackId,
+  trackPlacement,
+  provider,
+  productId,
+  class: className = '',
+} = Astro.props;
+---
+
+<div
+  class:list={[
+    'flex flex-col gap-4 rounded-2xl border border-accent/30 bg-accent/10 p-5 sm:flex-row sm:items-center sm:justify-between sm:p-6',
+    className,
+  ]}
+>
+  <div class="flex items-start gap-3">
+    <span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-accent/25 text-accent-strong">
+      <Icon name="ticket" class="h-5 w-5" />
+    </span>
+    <div>
+      <p class="font-display text-base font-semibold text-foreground">{label}</p>
+      {description && (
+        <p class="mt-0.5 text-sm leading-relaxed text-muted-foreground">{description}</p>
+      )}
+    </div>
+  </div>
+  <a
+    href={href}
+    target="_blank"
+    rel="sponsored noopener noreferrer"
+    data-track-event="affiliate_click"
+    data-track-cta-id={trackId}
+    data-track-cta-placement={trackPlacement}
+    data-track-affiliate-provider={provider}
+    data-track-affiliate-product-id={provider ? (productId ?? '') : undefined}
+    data-track-affiliate-placement={provider ? trackPlacement : undefined}
+    class="inline-flex shrink-0 items-center justify-center gap-2 rounded-lg bg-accent-strong px-5 py-3 text-sm font-semibold text-primary-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
+  >
+    {cta}
+    <Icon name="arrow-up-right" class="h-4 w-4" />
+  </a>
+</div>

package/src/affiliate/StickyCTA.astro

@@ -0,0 +1,168 @@
+---
+/**
+ * StickyCTA — the bottom bar that slides in once the reader has scrolled past the fold and points back at the
+ * affiliate block (`anchorId`). Mobile-only unless `showOnDesktop`.
+ *
+ * Behaviour (inline script, one copy per bar, each bar initialised once): shows after 800px of scroll, hides near
+ * the page end and while the `hideWhenVisible` element (looked up once the document has parsed) is on screen; the
+ * dismiss button hides it for the session under `dismissKey` (storage failures are ignored); while hidden the bar is
+ * `aria-hidden` and, when `inertWhenHidden`, `inert`, so its controls leave the tab order. Several bars on one page each keep their own state. The script only
+ * binds bars that carry `data-sticky-dismiss-key`, so a hand-built bar using the same `data-sticky-cta` marker is
+ * left alone. A `script` slot replaces the built-in script entirely.
+ *
+ * `track` adds the cta_click attributes to the button. `desktopHiddenFirst` puts `md:hidden` before the other
+ * bar classes rather than after them, and `ctaWhitespace="double"` emits two spaces before the button when there is
+ * no secondary action: both only reproduce a site's earlier markup byte for byte.
+ */
+import Icon from '../primitives/Icon.astro';
+
+interface Props {
+  label?: string;
+  anchorId?: string;
+  eyebrow?: string;
+  note?: string;
+  icon?: string;
+  secondary?: { anchorId: string; icon: string; label: string };
+  showOnDesktop?: boolean;
+  hideWhenVisible?: string;
+  dismissKey?: string;
+  dismissLabel?: string;
+  track?: boolean;
+  trackId?: string;
+  inertWhenHidden?: boolean;
+  truncateNote?: boolean;
+  shadowClass?: string;
+  desktopHiddenFirst?: boolean;
+  ctaWhitespace?: 'single' | 'double';
+}
+
+const {
+  label = 'Reserve Your Spot',
+  anchorId = 'affiliate-tours',
+  eyebrow,
+  note = 'Found the right tour? Reserve your spot before it fills.',
+  icon = 'ticket',
+  secondary,
+  showOnDesktop = false,
+  hideWhenVisible,
+  dismissKey = 'affiliate-bar-dismissed',
+  dismissLabel = 'Dismiss',
+  track = true,
+  trackId = 'affiliate-sticky-bar',
+  inertWhenHidden = true,
+  truncateNote = false,
+  shadowClass = 'shadow-[0_-2px_10px_rgba(0,0,0,0.08)]',
+  desktopHiddenFirst = false,
+  ctaWhitespace = 'single',
+} = Astro.props;
+
+const customScript = Astro.slots.has('script');
+const hideOnDesktop = !showOnDesktop;
+---
+
+<div
+  data-sticky-cta
+  class:list={[
+    hideOnDesktop && desktopHiddenFirst && 'md:hidden',
+    'fixed bottom-0 left-0 right-0 z-40 translate-y-full opacity-0 transition-[transform,opacity] duration-300 ease-out motion-reduce:[transition:opacity_0.15s_ease] bg-background/95 backdrop-blur-sm border-t border-border',
+    shadowClass,
+    { 'md:hidden': hideOnDesktop && !desktopHiddenFirst },
+  ]}
+  style="padding-bottom: env(safe-area-inset-bottom, 0px);"
+  aria-hidden="true"
+  inert={inertWhenHidden}
+  data-sticky-dismiss-key={customScript ? undefined : dismissKey}
+  data-sticky-hide-when-visible={customScript ? undefined : hideWhenVisible}
+>
+  <div class="mx-auto max-w-shell px-4 sm:px-6 lg:px-8 py-3">
+    <div class="flex items-center gap-3">
+      <div class="flex-1 min-w-0">
+        {eyebrow && (
+          <p class="text-xs font-medium text-foreground truncate">{eyebrow}</p>
+        )}
+        <p class:list={['text-xs text-muted-foreground', { truncate: truncateNote }]}>{note}</p>
+      </div>{(secondary || ctaWhitespace === 'double') && ' '}{secondary && (
+        <a
+          href={`#${secondary.anchorId}`}
+          class="inline-flex items-center justify-center min-w-[44px] min-h-[44px] border border-border bg-card text-foreground rounded-lg hover:bg-muted active:bg-muted/80 transition-colors shrink-0"
+          aria-label={secondary.label}
+        >
+          <Icon name={secondary.icon} class="w-4 h-4" aria-hidden="true" />
+        </a>
+      )}
+      <a
+        href={`#${anchorId}`}
+        data-track-event={track ? 'cta_click' : undefined}
+        data-track-cta-id={track ? trackId : undefined}
+        data-track-cta-label={track ? label : undefined}
+        data-track-cta-placement={track ? 'sticky' : undefined}
+        class="inline-flex items-center gap-1.5 px-4 min-h-[44px] bg-primary text-primary-foreground text-sm font-medium rounded-lg hover:bg-primary/90 active:bg-primary/80 transition-colors shrink-0"
+      >
+        <Icon name={icon} class="w-3.5 h-3.5" aria-hidden="true" />
+        {label}
+        <Icon name="arrow-down" class="w-3.5 h-3.5" aria-hidden="true" />
+      </a>
+      <button
+        data-sticky-close
+        type="button"
+        aria-label={dismissLabel}
+        class="min-w-[44px] min-h-[44px] flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors shrink-0"
+      >
+        <Icon name="x" class="w-4 h-4" aria-hidden="true" />
+      </button>
+    </div>
+  </div>
+</div>
+
+{customScript ? <slot name="script" /> : (
+<script is:inline>
+  (() => {
+    const read = (key) => { try { return sessionStorage.getItem(key); } catch { return null; } };
+    const write = (key) => { try { sessionStorage.setItem(key, '1'); } catch {} };
+    document.querySelectorAll('[data-sticky-cta][data-sticky-dismiss-key]:not([data-sticky-ready])').forEach((bar) => {
+      bar.setAttribute('data-sticky-ready', '');
+      const key = bar.getAttribute('data-sticky-dismiss-key');
+      if (read(key)) return;
+      const useInert = bar.hasAttribute('inert');
+      let visible = false;
+      let dismissed = false;
+      let covered = false;
+      const set = (on) => {
+        if (visible === on) return;
+        visible = on;
+        bar.classList.toggle('translate-y-full', !on);
+        bar.classList.toggle('opacity-0', !on);
+        bar.classList.toggle('translate-y-0', on);
+        bar.classList.toggle('opacity-100', on);
+        bar.setAttribute('aria-hidden', on ? 'false' : 'true');
+        if (useInert) bar.toggleAttribute('inert', !on);
+      };
+      const update = () => {
+        if (dismissed || covered) return set(false);
+        const y = window.scrollY;
+        const nearBottom = y + window.innerHeight > document.documentElement.scrollHeight - 300;
+        set(y > 800 && !nearBottom);
+      };
+      bar.querySelector('[data-sticky-close]')?.addEventListener('click', () => {
+        dismissed = true;
+        set(false);
+        write(key);
+      });
+      const selector = bar.getAttribute('data-sticky-hide-when-visible');
+      const watch = () => {
+        let target = null;
+        try { target = document.querySelector(selector); } catch {}
+        if (!target || !('IntersectionObserver' in window)) return;
+        new IntersectionObserver((entries) => {
+          covered = entries[0].isIntersecting;
+          update();
+        }, { threshold: 0 }).observe(target);
+      };
+      if (selector && document.readyState === 'loading') document.addEventListener('DOMContentLoaded', watch, { once: true });
+      else if (selector) watch();
+      window.addEventListener('scroll', update, { passive: true });
+      update();
+    });
+  })();
+</script>
+)}

package/src/affiliate/TravelpayoutsWidget.astro

@@ -0,0 +1,140 @@
+---
+/**
+ * TravelpayoutsWidget — a search widget whose loader script the site builds (`src`, with its own tracking params).
+ * `kind` picks the wrapper and the defaults; the hosts each kind loads are declared in `resources.ts`, which the
+ * site's CSP must cover. `car` runs its loader inside a sandboxed `srcdoc` iframe: its third-party script looks up
+ * a fixed element id, so two car widgets on one page would otherwise both render into the first.
+ *
+ * `variant="section"` is a full-width band with an h2; `compact` is a block with an h3. The disclosure arrives
+ * through the `disclosure` slot. `marker` adds `data-affiliate-widget="<kind>"` to the widget wrapper, the marker
+ * the CSP coverage gate reads first; it is off by default because it changes the markup.
+ * `trackId`/`trackPlacement` add the widget-engagement analytics attributes. `compactRegion` gives the compact
+ * block `role="region"`, so its `aria-label` names something (on a bare div assistive tech ignores it); off by
+ * default only because it changes the markup.
+ */
+type Kind = 'hotel' | 'activity' | 'train' | 'car';
+
+interface Props {
+  kind: Kind;
+  src: string;
+  title: string;
+  subtitle?: string;
+  id?: string;
+  class?: string;
+  variant?: 'section' | 'compact';
+  ariaLabel?: string;
+  iframeTitle?: string;
+  wrapperClass?: string;
+  trackId?: string;
+  trackPlacement?: string;
+  marker?: boolean;
+  compactRegion?: boolean;
+}
+
+const WRAPPER: Record<Kind, string> = {
+  hotel: 'hotel-search-widget min-h-[180px] sm:min-h-[160px]',
+  activity: 'activity-search-widget min-h-[280px]',
+  train: 'train-search-widget min-h-[280px]',
+  car: 'car-rental-widget',
+};
+const LABEL: Record<Kind, string> = {
+  hotel: 'Hotel search',
+  activity: 'Activity search',
+  train: 'Train and bus search',
+  car: 'Car rental search',
+};
+
+const {
+  kind,
+  src,
+  title,
+  subtitle,
+  id,
+  class: className,
+  variant = 'section',
+  ariaLabel = LABEL[kind],
+  iframeTitle = LABEL[kind],
+  wrapperClass = WRAPPER[kind],
+  trackId,
+  trackPlacement,
+  marker = false,
+  compactRegion = false,
+} = Astro.props;
+
+if (!WRAPPER[kind]) throw new Error(`TravelpayoutsWidget: unknown kind "${kind}" (hotel, activity, train, car).`);
+
+const isolate = kind === 'car';
+const widgetDoc = `<!doctype html><html><head><meta charset="utf-8" /></head><body style="margin:0"><script async src="${src}" charset="utf-8"></script></body></html>`;
+const markerValue = marker ? kind : undefined;
+---
+
+{
+  variant === "section" ? (
+    <section
+      id={id}
+      class:list={["mt-16 lg:mt-24 py-12 bg-muted/30", className]}
+      aria-label={ariaLabel}
+      data-track-event={trackId ? "affiliate_widget_engage" : undefined}
+      data-track-cta-id={trackId}
+      data-track-cta-placement={trackPlacement}
+    >
+      <div class="max-w-shell mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex flex-wrap items-baseline justify-between gap-x-6 gap-y-1 mb-2">
+          <h2 class="text-2xl sm:text-3xl font-normal font-display">{title}</h2>
+          <slot name="disclosure" />
+        </div>
+        {subtitle && (
+          <p class="text-sm text-muted-foreground mb-8">{subtitle}</p>
+        )}
+        {isolate ? (
+          <div class={wrapperClass} data-affiliate-widget={markerValue}>
+            <iframe
+              srcdoc={widgetDoc}
+              sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+              loading="lazy"
+              title={iframeTitle}
+              class="w-full h-[478px] sm:h-[430px] border-0 block"
+            />
+          </div>
+        ) : (
+          <div class={wrapperClass} data-affiliate-widget={markerValue}>
+            <script async src={src} charset="utf-8" is:inline />
+          </div>
+        )}
+      </div>
+    </section>
+  ) : (
+    <div
+      id={id}
+      class:list={[className]}
+      role={compactRegion ? "region" : undefined}
+      aria-label={ariaLabel}
+      data-track-event={trackId ? "affiliate_widget_engage" : undefined}
+      data-track-cta-id={trackId}
+      data-track-cta-placement={trackPlacement}
+    >
+      <div class="flex flex-wrap items-baseline justify-between gap-x-6 gap-y-1 mb-2">
+        <h3 class="text-lg font-semibold font-display">{title}</h3>
+        <slot name="disclosure" />
+      </div>
+      {subtitle && (
+        <p class="text-sm text-muted-foreground mb-6">{subtitle}</p>
+      )}
+      {isolate ? (
+        <div class={wrapperClass} data-affiliate-widget={markerValue}>
+          <iframe
+            srcdoc={widgetDoc}
+            sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+            loading="lazy"
+            title={iframeTitle}
+            class="w-full h-[478px] sm:h-[430px] border-0 block"
+          />
+        </div>
+      ) : (
+        <div class={wrapperClass} data-affiliate-widget={markerValue}>
+          <script async src={src} charset="utf-8" is:inline />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/affiliate/index.ts

@@ -1,2 +1,17 @@
-// Public surface of @sarimarcus/content-sites-ui/affiliate. Components land here from SLA-2742 on.
-export {};
+// Public surface of @sarimarcus/content-sites-ui/affiliate.
+export { default as AffiliateDisclosure } from './AffiliateDisclosure.astro';
+export { default as AffiliateLink } from './AffiliateLink.astro';
+export { default as InlineAffiliateCTA } from './InlineAffiliateCTA.astro';
+export { default as StickyCTA } from './StickyCTA.astro';
+export { default as TravelpayoutsWidget } from './TravelpayoutsWidget.astro';
+export { default as AmazonProductCard } from './AmazonProductCard.astro';
+export { default as AmazonProductSection } from './AmazonProductSection.astro';
+export { default as AffiliateCard } from './AffiliateCard.astro';
+export { default as AffiliateCardSection } from './AffiliateCardSection.astro';
+export { default as AffiliateCarousel } from './AffiliateCarousel.astro';
+export { default as AffiliateComparisonTable } from './AffiliateComparisonTable.astro';
+export { default as HotelAffiliateCTA } from './HotelAffiliateCTA.astro';
+export { externalResources } from './resources';
+export type { WidgetKind, CspDirective, WidgetResources } from './resources';
+export type { AffiliateCardLabels, AffiliateCardItem, HotelCtaLabels, ComparisonRow, ComparisonTableLabels } from './types';
+export { selectActivities, type SelectableActivity, type SelectOptions } from './select';

package/src/affiliate/resources.ts

@@ -0,0 +1,30 @@
+// The third-party hosts each TravelpayoutsWidget kind loads, per CSP directive. A site rendering a kind must allow
+// these in its Content-Security-Policy (scripts/validate-csp-coverage.mjs checks the built site against this list).
+// Read from each loader's own code: the tpwdg.com/c91 loader script, then what it injects (scripts, frames,
+// stylesheets). The loaders also call analytics endpoints (connect-src: tpo.gg, brand.travelpayouts.com, and
+// suggest.apistp.com for the hotel autocomplete); those are not declared here.
+// Every other component in this folder loads nothing: its outbound links are caller data, not resources.
+// Plain data and erasable types only: the gate imports this file under Node.
+
+export type WidgetKind = 'hotel' | 'activity' | 'train' | 'car';
+export type CspDirective = 'script-src' | 'frame-src' | 'style-src';
+export type WidgetResources = Partial<Record<CspDirective, readonly string[]>>;
+
+export const externalResources: Record<WidgetKind, WidgetResources> = {
+  hotel: {
+    'script-src': ['https://tpwdg.com'],
+  },
+  activity: {
+    'script-src': ['https://tpwdg.com', 'https://widget.getyourguide.com'],
+    'frame-src': ['https://widget.getyourguide.com'],
+  },
+  train: {
+    'script-src': ['https://c91.travelpayouts.com', 'https://www.omio.com'],
+    'style-src': ['https://www.omio.com'],
+  },
+  car: {
+    'script-src': ['https://tpwdg.com', 'https://www.discovercars.com'],
+    'frame-src': ['https://widget.discovercars.com'],
+  },
+};
+

package/src/affiliate/select.ts

@@ -0,0 +1,40 @@
+/** An activity a card band can order: a provider id ("gyg-N" or N) and its review count. */
+export interface SelectableActivity {
+  id: string | number;
+  reviewCount?: number;
+}
+
+export interface SelectOptions {
+  /** Ids shown first, in this order; "gyg-10" and 10 match the same activity. */
+  pinnedIds?: ReadonlyArray<string | number>;
+  /** Keep the rest in the given order instead of most-reviewed first. */
+  keepOrder?: boolean;
+  maxCards?: number;
+  /** Called for a pinned id with no matching activity. */
+  onMissingPin?: (id: string | number) => void;
+}
+
+const idKey = (value: string | number | undefined) => (value === undefined ? '' : String(value).replace(/^gyg-/, ''));
+
+/** The activities a card band shows: pinned ids first, then the rest by review count (or as given), capped. */
+export function selectActivities<T extends SelectableActivity>(activities: ReadonlyArray<T> | undefined, options: SelectOptions = {}): T[] {
+  const { pinnedIds = [], keepOrder = false, maxCards = 4, onMissingPin } = options;
+  const pool = [...(activities ?? [])];
+  const pinned: T[] = [];
+  const pinnedKeys = new Set<string>();
+  for (const wanted of pinnedIds) {
+    const key = idKey(wanted);
+    if (!key || pinnedKeys.has(key)) continue;
+    const match = pool.find((activity) => idKey(activity.id) === key);
+    if (match) {
+      pinned.push(match);
+      pinnedKeys.add(key);
+    } else {
+      onMissingPin?.(wanted);
+    }
+  }
+  const unpinned = pool.filter((activity) => !pinnedKeys.has(idKey(activity.id)));
+  // A missing count compares as NaN, exactly as the sites' sorts did; treating it as 0 would reorder live bands.
+  const rest = keepOrder ? unpinned : unpinned.sort((a, b) => Number(b.reviewCount) - Number(a.reviewCount));
+  return [...pinned, ...rest].slice(0, maxCards);
+}

package/src/affiliate/templateText.ts

@@ -0,0 +1,10 @@
+// Renders a copy prop exactly as the same words written as template text would: compressHTML keeps the line break
+// on each side of a text node that sits on its own line, and template text is not entity-escaped (an apostrophe
+// stays an apostrophe). Only markup-significant characters are escaped.
+export function templateLine(text: string): string {
+  const safe = text
+    .replace(/&(?=[a-zA-Z#][a-zA-Z0-9]*;)/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+  return `\n${safe}\n`;
+}

package/src/affiliate/types.ts

@@ -0,0 +1,71 @@
+import type { ImageMetadata } from 'astro';
+
+/** AffiliateCard copy. Every key but `verified` and `booksUp` has an English default. */
+export interface AffiliateCardLabels {
+  bestSeller?: string;
+  topRated?: string;
+  skipTheLine?: string;
+  cta?: string;
+  reviewCount?: (formattedCount: string) => string;
+  verified?: (formattedCount: string) => string;
+  booksUp?: string;
+}
+
+/** One card in an AffiliateCardSection or AffiliateCarousel: the card's own props, resolved by the site. */
+export interface AffiliateCardItem {
+  id?: string | number;
+  href: string;
+  provider: string;
+  productId?: string;
+  image: ImageMetadata | string;
+  title: string;
+  description: string;
+  price: number;
+  currency: string;
+  rating?: number;
+  reviewCount?: number;
+  duration: string;
+  locale?: string;
+}
+
+/** HotelAffiliateCTA copy; every key has an English default built from `entityNoun`. */
+export interface HotelCtaLabels {
+  headline?: (name: string) => string;
+  bookCta?: string;
+  searchCta?: string;
+  bookSubhead?: string;
+  searchSubhead?: string;
+  from?: string;
+  perNight?: string;
+  reviews?: (formattedCount: string) => string;
+  ratingOn?: (source: string) => string;
+  freeToSearch?: string;
+  officialSite?: string;
+}
+
+/** One AffiliateComparisonTable row. `external: false` = an internal link; `sponsored: false` = an external link with no paid relationship. */
+export interface ComparisonRow {
+  name: string;
+  subtitle?: string;
+  price: string;
+  keyFeature: string;
+  rating?: number;
+  ratingCount?: number;
+  badge?: string;
+  href?: string;
+  external?: boolean;
+  sponsored?: boolean;
+  cta?: string;
+  trackId?: string;
+}
+
+/** AffiliateComparisonTable copy, all with English defaults. */
+export interface ComparisonTableLabels {
+  caption?: string;
+  ctaColumn?: string;
+  externalCta?: string;
+  internalCta?: string;
+  externalAria?: (cta: string, name: string) => string;
+  internalAria?: (cta: string, name: string) => string;
+  rated?: (rating: number, count?: number) => string;
+}