@sarimarcus/content-sites-ui 0.20.0 → 0.22.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.22.0 (2026-10-04)
+
+- `./affiliate`: `widgetLoaders` in `resources.ts` declares each Travelpayouts widget kind's loader URL, promo id and campaign id (the CSP coverage gate reads the promo ids from it); `widgetSrc(account, options)` builds a widget loader URL from it; `gygCardItem` and `gygCardLocale` turn a cached GYG activity into an `AffiliateCardItem`. `pageTypeOf` is re-exported from core, unchanged (SLA-2919).
+
+## 0.21.0 (2026-10-02)
+
+- Responsive images pass core's `IMAGE_LADDER` instead of per-component width arrays, and serve WebP only: `InlineImage` and `EntityCard` default `formats` to `['webp']` (SLA-2912).
+
 ## 0.20.0 (2026-10-02)
 
 - `./editorial` article interludes: `Interlude` dispatcher (site `renderInline`, `labels`, `didYouKnowVariant`; entity interludes left to the site), `AnswerBox`, `ComparisonTable`, `EvidenceContext`, `FieldNote` (`authorHref`, `class`), `Quote`, `StatFact`, `Timeline`, `Tldr`, `DidYouKnow` (`ruled` / `inline`, `labelClass`) and `RelatedCard` (`inline` / `featured`, `eyebrowClass`). Every visible and aria string is a required prop; HTML props are `TrustedHtml`. Types `InterludeData`, `InterludeLabels`, `RenderInline` (SLA-2740).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.20.0",
+  "version": "0.22.0",
   "description": "Universal Astro UI components, layout shell and design tokens shared by the content sites.",
   "type": "module",
   "license": "MIT",
@@ -49,6 +49,6 @@
     "@lucide/astro": "^1.23.0",
     "astro": "^7.0.6",
     "tailwindcss": "^4.1.18",
-    "@sarimarcus/content-sites-core": "0.20.0"
+    "@sarimarcus/content-sites-core": "0.22.0"
   }
 }

package/src/affiliate/AffiliateCard.astro

@@ -1,4 +1,5 @@
 ---
+import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
 /**
  * AffiliateCard — a bookable activity as one sponsored link: image with the title over it, description, duration,
  * price, rating and the CTA. `href` arrives finished (tagged by the site) and `productId` is the site's.
@@ -170,9 +171,9 @@ const priceFrame = skipQueueFrame && title.toLowerCase().includes('skip')
       <Picture
         src={image}
         alt={title}
-        widths={[320, 480, 640, 960]}
+        widths={IMAGE_LADDER}
         sizes={imageSizes}
-        formats={['avif', 'webp']}
+        formats={['webp']}
         fallbackFormat="webp"
         loading="lazy"
         decoding="async"

package/src/affiliate/cardItem.ts

@@ -0,0 +1,42 @@
+import { gygProductId } from '@sarimarcus/content-sites-core/affiliate';
+import type { AffiliateCardItem } from './types';
+
+/** One GetYourGuide activity as cached by a site (`src/data/affiliates/gyg.json`). */
+export interface GygCardActivity {
+  title: string;
+  description: string;
+  price: number;
+  currency: string;
+  rating?: number;
+  reviewCount?: number;
+  imageUrl: string;
+  affiliateUrl: string;
+  duration: string;
+  language: string;
+}
+
+const LOCALES: Record<string, string> = { en: 'en-GB', fr: 'fr-FR' };
+
+/** The card's number/currency locale for an activity's language code; en-GB when unknown. */
+export const gygCardLocale = (language: string) => LOCALES[language] || 'en-GB';
+
+/**
+ * A cached GYG activity as an AffiliateCard item. The site passes what it owns: the campaign-tagged `href` and the
+ * resolved `image`.
+ */
+export function gygCardItem(a: GygCardActivity, { href, image }: { href: string; image: AffiliateCardItem['image'] }): AffiliateCardItem {
+  return {
+    href,
+    provider: 'gyg',
+    productId: gygProductId(a.affiliateUrl),
+    image,
+    title: a.title,
+    description: a.description,
+    price: a.price,
+    currency: a.currency,
+    rating: a.rating,
+    reviewCount: a.reviewCount,
+    duration: a.duration,
+    locale: gygCardLocale(a.language),
+  };
+}

package/src/affiliate/index.ts

@@ -11,7 +11,9 @@ 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, emeraldResources, EMERALD_ORIGIN } from './resources';
+export { externalResources, emeraldResources, EMERALD_ORIGIN, widgetLoaders } from './resources';
+export { widgetSrc } from './widgetSrc';
+export { gygCardItem, gygCardLocale, type GygCardActivity } from './cardItem';
 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

@@ -6,6 +6,8 @@
 // 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.
 
+import type { WidgetLoader } from '@sarimarcus/content-sites-core/affiliate';
+
 export type WidgetKind = 'hotel' | 'activity' | 'train' | 'car';
 export type CspDirective = 'script-src' | 'frame-src' | 'style-src';
 export type WidgetResources = Partial<Record<CspDirective, readonly string[]>>;
@@ -29,6 +31,17 @@ export const externalResources: Record<WidgetKind, WidgetResources> = {
 };
 
 
+/**
+ * Each kind's loader script and the ids its URL reports under (SLA-2919). `promoId` is also how
+ * scripts/validate-csp-coverage.mjs recognises a widget in a built page that carries no `data-affiliate-widget` marker.
+ */
+export const widgetLoaders: Record<WidgetKind, WidgetLoader> = {
+  hotel: { url: 'https://tpwdg.com/content', promoId: '2693', campaignId: '84' },
+  activity: { url: 'https://tpwdg.com/content', promoId: '4039', campaignId: '108' },
+  train: { url: 'https://c91.travelpayouts.com/content', promoId: '4770' },
+  car: { url: 'https://tpwdg.com/content', promoId: '3873', campaignId: '117' },
+};
+
 /** The Travelpayouts Emerald loader every page carries (EmeraldLoader): https://emrldtp.com/<base64 trs>.js?t=<trs>. */
 export const EMERALD_ORIGIN = 'https://emrldtp.com';
 

package/src/affiliate/widgetSrc.ts

@@ -0,0 +1,7 @@
+import { travelpayoutsWidgetSrc, type WidgetAccount, type WidgetOptions } from '@sarimarcus/content-sites-core/affiliate';
+import { widgetLoaders } from './resources';
+
+/** A Travelpayouts widget loader URL for `options.kind`, with the loader and ids declared in resources.ts. */
+export function widgetSrc(account: WidgetAccount, options: WidgetOptions): string {
+  return travelpayoutsWidgetSrc(widgetLoaders[options.kind], account, options);
+}

package/src/composed/EntityCard.astro

@@ -1,4 +1,5 @@
 ---
+import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
 /**
  * EntityCard — the shared frame of an entity teaser card: a whole-card link with a focus ring, an image block
  * (optimized Picture, or a fallback img), a content area and a footer row. Everything that varies between card types
@@ -38,7 +39,7 @@ const {
   image,
   fallbackSrc,
   imageAlt,
-  formats = ['avif', 'webp'],
+  formats = ['webp'],
   index = 999,
   class: className,
 } = Astro.props;
@@ -65,7 +66,7 @@ const footerClass = poster
         <Picture
           src={image}
           alt={imageAlt}
-          widths={[240, 320, 400, 480, 640]}
+          widths={IMAGE_LADDER}
           sizes="(max-width: 639px) 100vw, (max-width: 1023px) 50vw, 33vw"
           formats={formats}
           fallbackFormat="webp"

package/src/composed/InlineImage.astro

@@ -1,4 +1,5 @@
 ---
+import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
 import { Picture } from 'astro:assets';
 import type { ImageMetadata } from 'astro';
 import type { TrustedHtml } from '../types/index.ts';
@@ -42,8 +43,8 @@ interface Props {
   aspectRatio?: string;
   /** Optional URL to wrap the image in a link */
   href?: string;
-  /** Image formats for the <picture> sources (default: avif + webp). */
-  formats?: ('avif' | 'webp')[];
+  /** Image formats for the <picture> sources (WebP only: the variant service serves nothing else). */
+  formats?: 'webp'[];
   /** Additional CSS classes on the outer figure element */
   class?: string;
 }
@@ -60,7 +61,7 @@ const {
   size = 'medium',
   aspectRatio = '16/9',
   href,
-  formats = ['avif', 'webp'],
+  formats = ['webp'],
   class: className,
 } = Astro.props;
 
@@ -89,11 +90,6 @@ const effectiveAspectRatio = isFloat ? '4/3' : aspectRatio;
 const effectiveHeightClass = isFloat ? '' : imageHeightClass;
 const effectiveUseAspectRatio = isFloat ? true : useAspectRatio;
 
-// Filter widths to not exceed the source image width
-const defaultWidths = isFloat ? [400, 640] : [640, 960, 1280];
-const fitting = src.width ? defaultWidths.filter((w) => w <= src.width) : defaultWidths;
-const widths = fitting.length ? fitting : [src.width];
-
 const sizes = isFloat
   ? '(max-width: 640px) 100vw, 50vw'
   : '(max-width: 1024px) 100vw, 1024px';
@@ -111,7 +107,7 @@ const sizes = isFloat
       <Picture
         src={src}
         alt={alt}
-        widths={widths}
+        widths={IMAGE_LADDER}
         sizes={sizes}
         formats={formats}
         fallbackFormat="webp"
@@ -129,7 +125,7 @@ const sizes = isFloat
     <Picture
       src={src}
       alt={alt}
-      widths={widths}
+      widths={IMAGE_LADDER}
       sizes={sizes}
       formats={formats}
       fallbackFormat="webp"

package/src/composed/RelatedContentCard.astro

@@ -1,4 +1,5 @@
 ---
+import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
 /**
  * RelatedContentCard — one card inside RelatedContent. The grid and the carousel render this same card; only the
  * shell classes and the responsive image hints differ. Three shapes, by precedence: image-led, icon-led, plain text.
@@ -62,8 +63,8 @@ const hasImage = !!item.image;
       <Picture
         src={item.image!}
         alt={item.imageAlt || item.title}
-        widths={[320, 480, 640]}
-        formats={['avif', 'webp']}
+        widths={IMAGE_LADDER}
+        formats={['webp']}
         fallbackFormat="webp"
         sizes={pictureSizes}
         class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"

package/src/editorial/ArticleCard.astro

@@ -1,4 +1,5 @@
 ---
+import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
 /**
  * ArticleCard — one article in a grid: image, title, byline with the published or "Updated" date, description and
  * a read link. Dates arrive formatted; the image is the route's import.
@@ -31,9 +32,9 @@ const { article: a, readLabel, updatedLabel, loading = 'lazy', pagefindIgnore =
       <Picture
         src={a.image}
         alt={a.imageAlt ?? ''}
-        widths={[320, 480, 640]}
+        widths={IMAGE_LADDER}
         sizes="(max-width: 640px) 100vw, 33vw"
-        formats={['avif', 'webp']}
+        formats={['webp']}
         fallbackFormat="webp"
         class="w-full h-full object-cover motion-safe:transition-transform motion-safe:duration-500 motion-safe:group-hover:scale-105"
         loading={loading}

package/src/editorial/ArticleFeatureCard.astro

@@ -1,4 +1,5 @@
 ---
+import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
 /**
  * ArticleFeatureCard — the wide lead card above an article grid: image left, label, title, byline with the
  * published or "Updated" date, description and a read link. Dates arrive formatted; the image is the route's import.
@@ -43,9 +44,9 @@ const Heading = `h${headingLevel}` as 'h2' | 'h3';
         <Picture
           src={image}
           alt={imageAlt}
-          widths={[480, 768, 1024]}
+          widths={IMAGE_LADDER}
           sizes="(max-width: 640px) 100vw, 50vw"
-          formats={['avif', 'webp']}
+          formats={['webp']}
           fallbackFormat="webp"
           class="w-full h-full object-cover motion-safe:transition-transform motion-safe:duration-500 motion-safe:group-hover:scale-105"
           loading={loading}

package/src/editorial/interludes/RelatedCard.astro

@@ -1,4 +1,5 @@
 ---
+import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
 /**
  * RelatedCard — an in-article link to another page. `inline`: a ruled "read next" row. `featured`: the mid-article
  * feature card, image left. The site resolves href, eyebrow and image; an unresolved target should render nothing.
@@ -53,9 +54,9 @@ const { href, eyebrow, title, description, variant = 'inline', image, imageAlt,
         <Picture
           src={image}
           alt={imageAlt ?? title}
-          widths={[320, 480]}
+          widths={IMAGE_LADDER}
           sizes="(min-width: 640px) 40vw, 100vw"
-          formats={['avif', 'webp']}
+          formats={['webp']}
           fallbackFormat="webp"
           class="w-full h-full object-cover"
           loading="lazy"

package/src/layout/analytics.ts

@@ -1,5 +1,6 @@
 // Pushes custom events to the GTM dataLayer.
 // GTM consent mode (Silktide analytics_storage) governs whether GA4 receives each event.
+import { pageTypeOf } from '@sarimarcus/content-sites-core/url';
 
 declare global {
   interface Window {
@@ -21,19 +22,7 @@ export function track(eventName: string, params: Record<string, unknown> = {}):
   window.dataLayer.push({ event: eventName, page_path: window.location.pathname, ...params });
 }
 
-/**
- * Page type: the first path segment, 'home' at the root.
- *
- * The single definition behind both the GA4 `page_type` param (runtime pathname, '/plan/x') and a site's GYG `cmp`
- * segment (BUILD-time `Astro.url.pathname`, '/index.html' under build.format 'file'). The `.html`/`index`
- * normalisation is what makes the two agree.
- */
-export function pageTypeOf(pathname: string): string {
-  const first = pathname.split('/').filter(Boolean)[0];
-  if (!first) return 'home';
-  const bare = first.replace(/\.html$/, '');
-  return bare === 'index' || bare === '' ? 'home' : bare;
-}
+export { pageTypeOf };
 
 // Param key derived from the data-track-* attribute name where the
 // event-specific prefix (e.g. 'cta_', 'affiliate_', 'link_') has been stripped.