@sarimarcus/content-sites-ui 0.13.0 → 0.15.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.15.0 (2026-10-01)
+
+- New `./affiliate`: `AffiliateDisclosure` (provider key required, texts from the site), `AffiliateLink`, `InlineAffiliateCTA`, `StickyCTA` (inert when hidden, tracked, several bars per page, safe with blocked storage), `AmazonProductCard`/`Section`, `TravelpayoutsWidget` (hotel, activity, train, car), `AffiliateCard`, `AffiliateCardSection`, `AffiliateCarousel`, `AffiliateComparisonTable`, `HotelAffiliateCTA`. Links and widget sources arrive built by the site. `resources.ts` declares the hosts each widget kind loads (SLA-2736).
+
+## 0.14.0 (2026-10-01)
+
+- New `./seo`: `JsonLd` (safe JSON-LD renderer: escapes `</script`, `<!--` and U+2028/9), `OgImageMeta`, `Breadcrumb` (chevron or star separator, tap targets, copy as props), `ArticleMetadata` (resolved author in, no byline without one) and `AuthoritativeSources` (domain labels and outbound classification as props; competitor sources unlinked, affiliates `rel="noopener sponsored"`; optional disambiguation of domain-derived labels shared by different URLs). `scrollbar-hide` utility in `tailwind.css` (SLA-2737).
+
 ## 0.13.0 (2026-10-01)
 
 - New `./editorial`: `EditorialGuidePage` (breadcrumb band, hero and body slots; owns the Pagefind markers, `pagefindType`, `breadcrumbIgnore`) and `EventPage` (back link, rendered body as `TrustedHtml`, highlights, practical information, price, official website and tags as props; `breadcrumb`, `hero`, `after-body`, `after-details` and `tail` slots), plus `BeforeYouGo` and `NumberedStep`. `./layout`: `BreadcrumbBand` (SLA-2819).

package/package.json

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

package/src/affiliate/AffiliateCard.astro

@@ -0,0 +1,278 @@
+---
+/**
+ * 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.
+ *
+ * `image` is an imported asset (rendered as a responsive Picture, sized by `imageSizes`) or a URL string (a plain
+ * img). Social proof only appears with reviews: Best Seller from `bestSellerAt` reviews, Top Rated at 4.8+ with 100+.
+ * With `skipTheLineBadge`, a title or description that says so explicitly gets the Skip the line badge.
+ *
+ * Copy: neutral labels have English defaults. Lines that name a provider or make a claim (`labels.verified`,
+ * `labels.booksUp`, `cheapPriceFrame`, `skipQueueFrame`) render only when the site passes them.
+ *
+ * Kept for byte-identical adoption, each meant to be dropped later: `legacyFractionDigits` (fractional prices then
+ * render with the currency's default maximum, e.g. "€8.5"), `skipQueueFrame` (shown over `cheapPriceFrame` when the
+ * title contains "skip"), and `halfStarIds="index"` (the half-star clip id repeats when two card groups share a page;
+ * the default derives a page-unique id).
+ */
+import type { ImageMetadata } from 'astro';
+import { Picture } from 'astro:assets';
+import { deterministicId } from '@sarimarcus/content-sites-core/dom';
+import Badge from '../primitives/Badge.astro';
+import Icon from '../primitives/Icon.astro';
+import type { AffiliateCardLabels } from './types';
+import { templateLine } from './templateText';
+
+interface Props {
+  href: string;
+  provider: string;
+  productId?: string;
+  placement?: string;
+  image: ImageMetadata | string;
+  imageSizes?: string;
+  imageFetchpriority?: 'high' | 'low' | 'auto';
+  imageWidth?: number;
+  imageHeight?: number;
+  title: string;
+  description: string;
+  price: number;
+  currency: string;
+  locale?: string;
+  rating?: number;
+  reviewCount?: number;
+  duration: string;
+  index?: number;
+  pricePrefix?: string;
+  legacyFractionDigits?: boolean;
+  bestSellerAt?: number;
+  skipTheLineBadge?: boolean;
+  cheapPriceBelow?: number;
+  cheapPriceFrame?: string;
+  skipQueueFrame?: string;
+  labels?: AffiliateCardLabels;
+  titleColorClass?: string;
+  booksUpClass?: string;
+  halfStarIds?: 'deterministic' | 'index';
+  class?: string;
+}
+
+const {
+  href,
+  provider,
+  productId = '',
+  placement = 'card',
+  image,
+  imageSizes = '(min-width: 1024px) 300px, (min-width: 640px) 45vw, 100vw',
+  imageFetchpriority,
+  imageWidth = 400,
+  imageHeight = 208,
+  title,
+  description,
+  price,
+  currency,
+  locale = 'en-GB',
+  rating = 0,
+  reviewCount = 0,
+  duration,
+  index = 0,
+  pricePrefix = 'From ',
+  legacyFractionDigits = false,
+  bestSellerAt = 1000,
+  skipTheLineBadge = true,
+  cheapPriceBelow = 22,
+  cheapPriceFrame,
+  skipQueueFrame,
+  labels = {},
+  titleColorClass = 'text-overlay-foreground',
+  booksUpClass = 'text-primary',
+  halfStarIds = 'deterministic',
+  class: className,
+} = Astro.props;
+
+const {
+  bestSeller = 'Best Seller',
+  topRated = 'Top Rated',
+  skipTheLine = 'Skip the line',
+  cta = 'Reserve Your Spot',
+  reviewCount: reviewCountLabel = (n: string) => `(${n} reviews)`,
+  verified,
+  booksUp,
+} = labels;
+
+
+const priceDigits = Number.isInteger(price) ? 0 : 2;
+const formattedPrice = `${pricePrefix}${new Intl.NumberFormat(locale, legacyFractionDigits ? {
+  style: "currency",
+  currency,
+  minimumFractionDigits: 0,
+} : {
+  style: "currency",
+  currency,
+  minimumFractionDigits: priceDigits,
+  maximumFractionDigits: priceDigits,
+}).format(price)}`;
+
+const formattedReviewCount = new Intl.NumberFormat(locale).format(reviewCount);
+const formattedRating = rating.toFixed(1);
+
+const fullStars = Math.floor(rating);
+const hasHalfStar = (rating - fullStars) >= 0.5;
+const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);
+const halfStarClipId = !hasHalfStar ? '' : halfStarIds === 'index' ? `half-star-${index}` : deterministicId('half-star', title, href);
+
+const hasReviews = reviewCount > 0;
+const isBestSeller = reviewCount >= bestSellerAt;
+const isTopRated = !isBestSeller && rating >= 4.8 && reviewCount >= 100;
+
+const isSkipTheLine = skipTheLineBadge && /skip[\s-]?the[\s-]?line|skip the queue|beat the (queue|crowd)/i.test(
+  `${title} ${description}`,
+);
+
+const priceFrame = skipQueueFrame && title.toLowerCase().includes('skip')
+  ? skipQueueFrame
+  : cheapPriceFrame && price < cheapPriceBelow
+  ? cheapPriceFrame
+  : null;
+---
+
+<a
+  href={href}
+  target="_blank"
+  rel="sponsored noopener"
+  data-track-event="affiliate_click"
+  data-track-affiliate-provider={provider}
+  data-track-affiliate-product-id={productId}
+  data-track-affiliate-placement={placement}
+  class:list={[
+    "group relative bg-card rounded-xl overflow-hidden card-lift border border-border flex flex-col h-full no-underline text-inherit focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+    className,
+  ]}
+>
+  {isBestSeller && (
+    <Badge tone="custom" toneClass="bg-primary text-primary-foreground" size="sm" lines={0} class="absolute top-3 left-3 z-10 pointer-events-none !px-2.5 !py-1 !font-semibold"><Fragment set:html={templateLine(bestSeller)} /></Badge>
+  )}
+  {isTopRated && (
+    <Badge tone="custom" toneClass="bg-accent text-accent-foreground" size="sm" lines={0} class="absolute top-3 left-3 z-10 pointer-events-none !px-2.5 !py-1 !font-semibold"><Fragment set:html={templateLine(topRated)} /></Badge>
+  )}
+
+  <div class="relative h-48 sm:h-52 overflow-hidden shrink-0">
+    {typeof image === 'string' ? (
+      <img
+        src={image}
+        alt={title}
+        width={String(imageWidth)}
+        height={String(imageHeight)}
+        loading="lazy"
+        decoding="async"
+        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+      />
+    ) : (
+      <Picture
+        src={image}
+        alt={title}
+        widths={[320, 480, 640, 960]}
+        sizes={imageSizes}
+        formats={['avif', 'webp']}
+        fallbackFormat="webp"
+        loading="lazy"
+        decoding="async"
+        fetchpriority={imageFetchpriority}
+        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+      />
+    )}
+    <div class="absolute inset-0 bg-gradient-to-t from-overlay/95 via-overlay/40 to-transparent"></div>
+    <h3
+      class:list={["absolute bottom-3 left-4 right-4 text-xl sm:text-2xl font-semibold", titleColorClass, "leading-tight font-display [text-shadow:0_1px_3px_rgba(0,0,0,0.6)]"]}
+    >
+      {title}
+    </h3>
+  </div>
+
+  <div class="p-4 sm:p-5 flex flex-col flex-1">
+    <p class="text-base text-muted-foreground line-clamp-2 mb-3">
+      {description}
+    </p>{skipTheLineBadge && ' '}{isSkipTheLine && (
+      <Badge tone="custom" toneClass="bg-primary/10 text-primary" size="sm" lines={0} class="w-fit mb-3 !font-semibold !gap-1">
+        <svg class="w-3.5 h-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <polyline points="13 17 18 12 13 7"></polyline>
+          <polyline points="6 17 11 12 6 7"></polyline>
+        </svg><Fragment set:html={templateLine(skipTheLine)} /></Badge>
+    )}
+
+    <div class="flex items-start justify-between mb-3">
+      <span class="flex items-center gap-1 text-xs text-muted-foreground mt-1">
+        <svg
+          class="w-3.5 h-3.5 shrink-0"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <circle cx="12" cy="12" r="10"></circle>
+          <polyline points="12 6 12 12 16 14"></polyline>
+        </svg>
+        {duration}
+      </span>
+      <div class="text-right">
+        <p class="text-xl font-semibold text-foreground leading-none">{formattedPrice}</p>
+        {priceFrame && (
+          <p class="text-xs text-muted-foreground mt-0.5">{priceFrame}</p>
+        )}
+      </div>
+    </div>
+
+    {hasReviews && (
+    <div class="flex items-center gap-1.5 mb-4">
+      <span class="text-sm font-semibold text-foreground mr-1">{formattedRating}</span>
+      {Array.from({ length: fullStars }).map(() => (
+        <svg class="w-4 h-4 text-accent fill-accent" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1" aria-hidden="true">
+          <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+        </svg>
+      ))}
+      {hasHalfStar && (
+        <svg class="w-4 h-4" viewBox="0 0 24 24" aria-hidden="true">
+          <defs>
+            <clipPath id={halfStarClipId}>
+              <rect x="0" y="0" width="12" height="24" />
+            </clipPath>
+          </defs>
+          <polygon
+            points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+            class="text-accent fill-accent"
+            clip-path={`url(#${halfStarClipId})`}
+          />
+          <polygon
+            points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1"
+            class="text-border/50"
+          />
+        </svg>
+      )}
+      {Array.from({ length: emptyStars }).map(() => (
+        <svg class="w-4 h-4 text-border/50 fill-border/50" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1" aria-hidden="true">
+          <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+        </svg>
+      ))}
+      <span class="text-xs text-muted-foreground ml-1">{reviewCountLabel(formattedReviewCount)}</span>
+    </div>
+    )}
+
+    <div class="mt-auto">
+      <span
+        class="flex items-center justify-center gap-2 w-full py-2.5 px-4 bg-primary text-primary-foreground font-medium rounded-lg group-hover:bg-primary/90 group-active:bg-primary/80 transition-colors"
+      >
+        <Icon name="ticket" class="w-4 h-4" aria-hidden="true" /><Fragment set:html={templateLine(cta)} /></span>
+      {hasReviews && verified && (
+        <p class="text-xs text-muted-foreground text-center mt-2"><Fragment set:html={templateLine(verified(formattedReviewCount))} /></p>
+      )}
+      {isBestSeller && booksUp && (
+        <p class:list={["text-xs", booksUpClass, "text-center mt-2"]}><Fragment set:html={templateLine(booksUp)} /></p>
+      )}
+    </div>
+  </div>
+</a>

package/src/affiliate/AffiliateCardSection.astro

@@ -0,0 +1,86 @@
+---
+/**
+ * AffiliateCardSection — a titled band of AffiliateCards. `items` arrive resolved and in their final order; every
+ * item renders (no cap). Up to 4 columns: a fifth item wraps onto a new row rather than narrowing the cards, and
+ * `sizes` follows the column count actually rendered. `cardOptions` reach every card (labels, thresholds, classes);
+ * the disclosure arrives through the `disclosure` slot.
+ */
+import AffiliateCard from './AffiliateCard.astro';
+import type { AffiliateCardItem } from './types';
+
+interface Props {
+  items: AffiliateCardItem[];
+  title?: string;
+  subtitle?: string;
+  placement?: string;
+  imageFetchpriority?: 'high' | 'low' | 'auto';
+  cardOptions?: Record<string, unknown>;
+  sectionClass?: string;
+  headingClass?: string;
+  id?: string;
+  class?: string;
+}
+
+const {
+  items,
+  title = "Recommended Tours & Activities",
+  subtitle,
+  placement,
+  imageFetchpriority,
+  cardOptions = {},
+  sectionClass = 'py-12 bg-muted/30 border-t border-border',
+  headingClass = 'text-3xl sm:text-4xl font-normal font-display',
+  id,
+  class: className,
+} = Astro.props;
+
+const visible = (items ?? []).map(({ id: _id, ...item }) => item);
+
+const gridClasses: Record<number, string> = {
+  1: "grid grid-cols-1 max-w-md mx-auto",
+  2: "grid gap-6 grid-cols-1 sm:grid-cols-2",
+  3: "grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+};
+
+// Desktop figures are measured off max-w-shell (80rem) minus lg:px-8 padding and the gap-6 gutters.
+const gridSizes: Record<number, string> = {
+  1: '(min-width: 640px) 448px, 100vw',
+  2: '(min-width: 1024px) 596px, (min-width: 640px) 45vw, 100vw',
+  3: '(min-width: 1024px) 389px, (min-width: 640px) 45vw, 100vw',
+  4: '(min-width: 1024px) 286px, (min-width: 640px) 45vw, 100vw',
+};
+
+const gridClass = gridClasses[visible.length] || gridClasses[4];
+const imageSizes = gridSizes[visible.length] || gridSizes[4];
+---
+
+{
+  visible.length > 0 && (
+    <section id={id} class:list={[sectionClass, className]}>
+      <div class="max-w-shell mx-auto px-4 sm:px-6 lg:px-8">
+        <div class:list={["flex flex-wrap items-baseline justify-between gap-x-6 gap-y-1", subtitle ? "mb-2" : "mb-8"]}>
+          <h2 class={headingClass}>
+            {title}
+          </h2>
+          <slot name="disclosure" />
+        </div>
+        {subtitle && (
+          <p class="text-sm text-muted-foreground mb-8">{subtitle}</p>
+        )}
+        <div class={gridClass}>
+          {visible.map((item, index) => (
+            <AffiliateCard
+              {...cardOptions}
+              {...item}
+              index={index}
+              placement={placement}
+              imageSizes={imageSizes}
+              imageFetchpriority={imageFetchpriority}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/affiliate/AffiliateCarousel.astro

@@ -0,0 +1,95 @@
+---
+/**
+ * AffiliateCarousel — a CardCarousel strip of AffiliateCards. With `ids`, the strip renders exactly those
+ * activities in that running order (an editor's list; `idOf` reads an activity's numeric id). Without, the most
+ * reviewed come first, titles deduplicated so near-duplicate listings don't eat the strip. Either way at most
+ * `maxCards`. `resolve` turns a visible activity into the card's props (called only for the cards rendered);
+ * without it each activity already is one. The disclosure arrives through the `disclosure` slot.
+ */
+import CardCarousel from '../composed/CardCarousel.astro';
+import AffiliateCard from './AffiliateCard.astro';
+import type { AffiliateCardItem } from './types';
+
+type Activity = { id?: string | number; title?: string; reviewCount?: number; [key: string]: unknown };
+
+interface Props {
+  activities: Activity[];
+  ids?: number[];
+  idOf?: (activity: Activity) => number;
+  resolve?: (activity: any) => AffiliateCardItem;
+  heading?: string;
+  subtitle?: string;
+  headingTag?: 'h2' | 'h3';
+  headingClass?: string;
+  id?: string;
+  maxCards?: number;
+  placement?: string;
+  imageSizes?: string;
+  cardOptions?: Record<string, unknown>;
+  class?: string;
+}
+
+const {
+  activities,
+  ids,
+  idOf = (activity) => Number(String(activity.id ?? '').replace(/^\D+-/, '')),
+  resolve = (activity) => activity as AffiliateCardItem,
+  heading = 'Recommended tours',
+  subtitle,
+  headingTag = 'h3',
+  headingClass = 'font-display text-lg font-semibold text-foreground',
+  id,
+  maxCards = 4,
+  placement = 'carousel',
+  imageSizes,
+  cardOptions = {},
+  class: className,
+} = Astro.props;
+
+const all = activities ?? [];
+const sorted = [...all].sort((a, b) => (b.reviewCount ?? 0) - (a.reviewCount ?? 0));
+const seen = new Set<string>();
+const deduped = sorted.filter((a) => {
+  const key = String(a.title ?? '').trim().toLowerCase();
+  if (seen.has(key)) return false;
+  seen.add(key);
+  return true;
+});
+
+const filtered = ids
+  ? ids.map((wanted) => all.find((a) => idOf(a) === wanted)).filter((a): a is Activity => Boolean(a))
+  : deduped;
+
+const visible = filtered.slice(0, maxCards).map((a) => {
+  const { id: _id, ...item } = resolve(a);
+  return item;
+});
+---
+
+{
+  visible.length > 0 && (
+    <div class:list={["my-6", className]}>
+      <CardCarousel
+        heading={heading}
+        headingTag={headingTag}
+        headingClass={headingClass}
+        description={subtitle}
+        id={id}
+        ariaLabel={heading}
+      >
+        <slot name="disclosure" slot="header-note" />
+        {visible.map((item, index) => (
+          <div class="snap-start shrink-0 w-[78vw] sm:w-72">
+            <AffiliateCard
+              {...cardOptions}
+              {...item}
+              placement={placement}
+              imageSizes={imageSizes}
+              index={index}
+            />
+          </div>
+        ))}
+      </CardCarousel>
+    </div>
+  )
+}