@sarimarcus/content-sites-ui 0.29.4 → 0.30.0

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.30.0 (2026-10-07)
+
+- `./affiliate`: `HotelAffiliateCTA` and `AffiliateComparisonTable` links carry `data-track-affiliate-provider` and `data-track-affiliate-placement` so booking clicks are attributed; both take `provider`, `ComparisonRow` takes a per-row one, and without either the provider is read from the link's host (Booking.com links only; any other host is left unattributed) (SLA-2985).
+- `./editorial`: `Interlude` renders a stat-fact `figure` through `renderInline`, so `**80 titles**` is bold and `<20%` is escaped (SLA-2985).
+- `./search`: the load-more button ignores clicks while a page is loading and drops fragments fetched for a superseded query, so a double click no longer repeats 12 results and a new query no longer receives stale ones (SLA-2985).
+
+### Breaking
+
+- `./primitives`: `FeatureList`'s `items` and `footer` are typed `TrustedHtml` (were `string`); wrap plain text with `textAsHtml()` and parsed markdown with `trustedHtml()`. Sites run `scripts/platform/migrations/feature-list-trusted.mjs` (`items` → `.map(textAsHtml)`, `footer` → `trustedHtml(…)`) (SLA-2985).
+
 ## 0.29.4 (2026-10-07)
 
 - `./composed`: `Pagination`'s current page uses `text-primary-foreground` (was `text-white`, 1.8:1 on a light primary) and Previous/Next are named by their visible text; `TableOfContents`' hidden mini bar is `inert`; `CardCarousel`'s arrows use `aria-disabled`, so the focused arrow keeps focus at an edge, and arrows and dots have 44px targets (SLA-2984).

package/README.md

@@ -36,7 +36,7 @@ import { Icon, Badge, Chip, ArrowLabel, SectionDivider, LinkArrow, Button, Callo
   `rel="noopener noreferrer"`, unless `target` or `rel` is given. Attributes render as `href rel target class`,
   then every other anchor attribute (`data-*`, `aria-*`, `slot`) in the order passed.
 - `Callout`: a boxed note with an icon. `type` is `info` (default), `tip`, `warning` or `success`; `title` is optional.
-- `FeatureList`: a checklist or a row of tags from `items` (rendered with `set:html`). `color` is `primary`
+- `FeatureList`: a checklist or a row of tags from `items` and an optional `footer`, both `TrustedHtml` (rendered with `set:html`; wrap plain text with `textAsHtml()`). `color` is `primary`
   (default), `secondary` or `accent`; `container` boxes it, `compact` tightens it, `headingLevel` sets the heading
   (default `h2`), which renders only for a non-empty `title`; `footer` adds a line under a border.
 - `Blockquote`: a centred pull-quote, `quote` plus an optional `source`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.29.4",
+  "version": "0.30.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.29.4"
+    "@sarimarcus/content-sites-core": "0.30.0"
   }
 }

package/src/affiliate/AffiliateComparisonTable.astro

@@ -8,6 +8,7 @@
 import Icon from '../primitives/Icon.astro';
 import Badge from '../primitives/Badge.astro';
 import type { ComparisonRow, ComparisonTableLabels } from './types';
+import { providerFromHref } from './provider';
 
 interface Props {
   rows: ComparisonRow[];
@@ -17,6 +18,7 @@ interface Props {
   priceLabel?: string;
   featureLabel?: string;
   placement?: string;
+  provider?: string;
   labels?: ComparisonTableLabels;
   class?: string;
 }
@@ -29,6 +31,7 @@ const {
   priceLabel = 'Price',
   featureLabel = 'Highlight',
   placement = 'comparison-table',
+  provider,
   labels = {},
   class: className = '',
 } = Astro.props;
@@ -118,6 +121,8 @@ const defaultCta = (external: boolean) => (external ? externalCta : internalCta)
                         data-track-event="affiliate_click"
                         data-track-cta-id={row.trackId}
                         data-track-cta-placement={placement}
+                        data-track-affiliate-provider={row.provider ?? provider ?? providerFromHref(row.href)}
+                        data-track-affiliate-placement={placement}
                         class={ctaAffiliate}
                         aria-label={externalAria(cta, row.name)}
                       >
@@ -188,6 +193,8 @@ const defaultCta = (external: boolean) => (external ? externalCta : internalCta)
                     data-track-event="affiliate_click"
                     data-track-cta-id={row.trackId}
                     data-track-cta-placement={placement}
+                    data-track-affiliate-provider={row.provider ?? provider ?? providerFromHref(row.href)}
+                    data-track-affiliate-placement={placement}
                     class={`${ctaAffiliate} w-full`}
                     aria-label={externalAria(cta, row.name)}
                   >

package/src/affiliate/HotelAffiliateCTA.astro

@@ -13,6 +13,7 @@
 import { isBadgeLength } from '../primitives/badgeText';
 import type { HotelCtaLabels } from './types';
 import { templateLine } from './templateText';
+import { providerFromHref } from './provider';
 
 
 interface Props {
@@ -23,6 +24,7 @@ interface Props {
   entityNoun?: string;
   trackId?: string;
   placement?: string;
+  provider?: string;
   priceText?: string | null;
   priceCompactMax?: number;
   priceNoteSlot?: boolean;
@@ -45,6 +47,7 @@ const {
   entityNoun = 'hotel',
   trackId = 'hotel-affiliate-cta',
   placement,
+  provider,
   priceText = null,
   priceCompactMax,
   priceNoteSlot = false,
@@ -73,6 +76,9 @@ const {
   officialSite = `Visit the ${entityNoun}'s official site`,
 } = labels;
 
+const trackProvider = provider ?? providerFromHref(href);
+const placementAbove = placement ?? 'above-fold';
+const placementBook = placement ?? 'book-section';
 const ctaLabel = isSearchFallback ? searchCta : bookCta;
 const subhead = isSearchFallback ? searchSubhead : bookSubhead;
 const priceIsCompact = priceCompactMax === undefined || isBadgeLength(priceText, priceCompactMax);
@@ -89,7 +95,9 @@ const ctaClasses =
     rel="sponsored noopener noreferrer"
     data-track-event="affiliate_click"
     data-track-cta-id={trackId}
-    data-track-cta-placement={placement ?? 'above-fold'}
+    data-track-cta-placement={placementAbove}
+    data-track-affiliate-provider={trackProvider}
+    data-track-affiliate-placement={placementAbove}
     class:list={[ctaClasses, 'sm:w-auto', className]}
   >
     <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
@@ -142,7 +150,9 @@ const ctaClasses =
       rel="sponsored noopener noreferrer"
       data-track-event="affiliate_click"
       data-track-cta-id={trackId}
-      data-track-cta-placement={placement ?? 'book-section'}
+      data-track-cta-placement={placementBook}
+      data-track-affiliate-provider={trackProvider}
+      data-track-affiliate-placement={placementBook}
       class:list={[ctaClasses, 'mt-4']}
     >
       <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">

package/src/affiliate/provider.ts

@@ -0,0 +1,6 @@
+/** The affiliate provider a link belongs to, read from its host; undefined for a host no provider is known for. */
+export function providerFromHref(href: string | undefined): string | undefined {
+  const host = /^https?:\/\/([^/?#:]+)/i.exec(href ?? '')?.[1]?.toLowerCase();
+  if (!host) return undefined;
+  return host === 'booking.com' || host.endsWith('.booking.com') ? 'booking' : undefined;
+}

package/src/affiliate/types.ts

@@ -72,6 +72,8 @@ export interface ComparisonRow {
   sponsored?: boolean;
   cta?: string;
   trackId?: string;
+  /** Affiliate provider for click attribution; falls back to the table's `provider`. */
+  provider?: string;
 }
 
 /** AffiliateComparisonTable copy, all with English defaults. */

package/src/editorial/interludes/Interlude.astro

@@ -37,7 +37,7 @@ const { interlude: il, renderInline: md, labels, author, didYouKnowVariant, didY
   />
 )}
 
-{il.type === 'stat-fact' && <StatFact figure={trustedHtml(il.figure)} caption={md(il.caption)} />}
+{il.type === 'stat-fact' && <StatFact figure={md(il.figure)} caption={md(il.caption)} />}
 
 {il.type === 'evidence-context' && (
   <EvidenceContext

package/src/primitives/FeatureList.astro

@@ -2,34 +2,31 @@
 /**
  * FeatureList — reusable list display for specialties, ingredients, features.
  *
- * `items[]` and `footer` render with set:html, so callers may pass inline markup
- * (already-parsed markdown from parseMarkdownInline) or plain text. Plain strings
- * are unaffected: at the time of the change the 9,923 item strings in content
- * JSON contained no angle brackets and no entity-like ampersands, and the
- * rendered list output was byte-identical across all 462 list items on the three
- * active sites. Callers passing author-written markdown must parse it first —
- * see the `checklist` branch of the site's interlude dispatcher.
+ * `items[]` and `footer` render with set:html and are typed TrustedHtml: parse author-written
+ * markdown first (see the `checklist` branch of the interlude dispatcher) or wrap plain
+ * text with `textAsHtml()`.
  *
  * The heading renders only for a non-empty `title`.
  *
  * Usage:
  *   <FeatureList title="Specialities" items={bar.specialties} icon="star" />
  *   <FeatureList title="House specialities" items={restaurant.specialties} variant="tags" color="accent" container />
- *   <FeatureList title="Main ingredients" items={dish.mainIngredients} icon="star" color="accent" container footer="<strong>Allergens:</strong> gluten, dairy" />
+ *   <FeatureList title="Main ingredients" items={dish.mainIngredients} icon="star" color="accent" container footer={trustedHtml("<strong>Allergens:</strong> gluten, dairy")} />
  */
 
 import Icon from './Icon.astro';
+import type { TrustedHtml } from '../types';
 
 interface Props {
   title?: string;
-  items: string[];
+  items: TrustedHtml[];
   variant?: 'checklist' | 'tags';
   color?: 'primary' | 'accent' | 'secondary';
   icon?: string;
   container?: boolean;
   /** Tighter padding/margin for space-constrained contexts (e.g. article interludes). */
   compact?: boolean;
-  footer?: string;
+  footer?: TrustedHtml;
   headingLevel?: 'h2' | 'h3' | 'h4';
   class?: string;
 }

package/src/search/searchPage.ts

@@ -294,6 +294,7 @@ export function initSearchPage<T extends string>(config: SearchPageConfig<T>): v
 
     writeURL(query, typeFilter, audienceFilter);
     const myToken = ++searchToken;
+    loadMoreBtn.disabled = false;
 
     if (!query) {
       updateAudienceCounts(undefined); // back to corpus counts
@@ -514,6 +515,7 @@ export function initSearchPage<T extends string>(config: SearchPageConfig<T>): v
   });
 
   loadMoreBtn.addEventListener('click', async () => {
+    if (loadMoreBtn.disabled) return;
     if (activeType) {
       // All type-filtered fragments are already in cachedFragments. An audience
       // filter needs no branch here: it narrowed cachedHandles server-side, so
@@ -528,11 +530,20 @@ export function initSearchPage<T extends string>(config: SearchPageConfig<T>): v
 
     const nextHandles = cachedHandles.slice(renderedCount, renderedCount + pageSize);
     if (nextHandles.length === 0) return;
-    const fragments = await Promise.all(nextHandles.map((h) => h.data()));
-    cachedFragments.push(...fragments);
-    appendResults(listEl, fragments, renderedCount, taxonomy);
-    renderedCount += fragments.length;
-    if (renderedCount >= cachedHandles.length) loadMoreBtn.hidden = true;
+    const myToken = searchToken;
+    loadMoreBtn.disabled = true;
+    try {
+      const fragments = await Promise.all(nextHandles.map((h) => h.data()));
+      if (myToken !== searchToken) return;
+      cachedFragments.push(...fragments);
+      appendResults(listEl, fragments, renderedCount, taxonomy);
+      renderedCount += fragments.length;
+      if (renderedCount >= cachedHandles.length) loadMoreBtn.hidden = true;
+    } catch {
+      // leave the button visible so the click can be retried
+    } finally {
+      loadMoreBtn.disabled = false;
+    }
   });
 
   listEl.addEventListener('click', (e) => {