@sarimarcus/content-sites-ui 0.16.0 → 0.18.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.18.0 (2026-10-02)
+
+- New page templates in `./editorial`: `StaticProsePage` (legal and site-information pages: heading, optional eyebrow, prose slot, `after` slot, closing CTA box; not Pagefind-indexed), `NotFoundPage` (the 404 body, every string a prop; its decoration ships as `./not-found.css` so a barrel import never carries it to other pages), `ArticlesListingPage` (article index and topic hub shell: breadcrumb band, header, `<main>`, Pagefind body optional) and `ArticleFeatureCard` (SLA-2744).
+- `./search`: `SearchPage`, the search page markup (hero, type chips, optional audience row, result states, type-icon template), with its client controller `initSearchPage` on the new `./search-page` entry point (SLA-2744).
+- `./layout`: `ListingShell`, the listing hub frame inside one Pagefind-ignore wrapper; StructuredData stays a direct Layout child so its JSON-LD renders in `<head>` (SLA-2744).
+- `./composed`: `ArrowLinkGrid`, a grid of bordered link tiles (SLA-2744).
+
+## 0.17.0 (2026-10-01)
+
+- New `DocumentShell` (`./layout`): the whole HTML document a site page renders into: description, robots (`noindex, follow` when noindex), canonical from the page path, RSS and favicons, Open Graph / article / Twitter (handle optional), title, non-critical stylesheets, the Emerald loader, the skip link, navigation and footer wrapped out of the Pagefind index, `#main-content`, and consent-gated analytics. Slots `head-start`, `fonts`, `head`, `body-start`, `nav`, `footer`. It imports no stylesheet and emits no bundled script, so a site's thin Layout keeps its bundle names (SLA-2741).
+- New `ConsentAnalytics` (`./layout`): the inline GTM + Consent Mode v2 + Silktide bootstrap (consent default before the gtm.js event in one synchronous step; `window.openCookiePreferences`), production only, plus the `<noscript>` GTM iframe. `layout/resources.ts` declares the hosts it loads (SLA-2741).
+- New `EmeraldLoader` (`./affiliate`): the Travelpayouts Emerald script from the site's trs; `emeraldResources` declares its host (SLA-2741).
+- New entry points `./analytics` (`setupAnalytics`, `track`, `pageTypeOf`, delegated, FAQ and scroll-depth tracking) and `./travelpayouts-styler` (`setupTravelpayoutsStyler`, palette, fonts and copy as options), moved from the sites. FAQ tracking now fires: it tested `dataset.faqTrack`, which is empty on the bare `data-faq-track` attribute ui `FAQ` renders (SLA-2741).
+
 ## 0.16.0 (2026-10-01)
 
 - New `./navigation`: `SiteHeader` (fixed header, labelled main `<nav>`, logo/desktop/actions/mobile slots, mobile toggle, mobile panel after the header with `data-pagefind-ignore`, `surfaceClass`, Ctrl/Cmd+K → `searchPath?focus=1`), `NavDropdown` (click, hover with a 150 ms close delay, ArrowDown/ArrowUp/Escape, outside click, focus leaving; a click on a hover-opened dropdown keeps it open), `MobileNavSection` (single-open accordion, `aria-controls`), `NavMenuLink` / `MobileNavLink` (panel rows by `NavTone`), `SiteFooter` (sections, `<nav aria-label="Legal">`, cookie-preferences button through `data-cookie-preferences`, no inline handler), `isActivePath`, and the `SiteIdentity` / `NavLink` / `NavGroup` / `FooterSection` / `NavTone` contracts. One bundled controller, idempotent on `astro:page-load`, any number of headers per page; the toggle and chevron icons now switch state (SLA-2735).

package/README.md

@@ -1,7 +1,8 @@
 # @sarimarcus/content-sites-ui
 
 Universal Astro UI shared by every content site. Named entry points, one per folder: `primitives`,
-`composed`, `editorial`, `affiliate`, `seo`, `layout`, `navigation`, `search` and `types`. For example,
+`composed`, `editorial`, `affiliate`, `seo`, `layout`, `navigation`, `search` and `types`, plus the script
+entry points `analytics`, `travelpayouts-styler` and `search-page`. For example,
 `import { Container } from '@sarimarcus/content-sites-ui/layout'`. `src/internal` is never exported,
 and `src/styles` holds the Tailwind entry.
 
@@ -73,7 +74,59 @@ state and one bundled controller (idempotent on `astro:page-load`, any number of
   `<nav aria-label="Legal">` ending with the cookie-preferences button, which calls `window.openCookiePreferences()`
   (the site's consent loader defines it). Defaults paint the `inverse` roles; class props restyle each part.
 - `appendResults` renders Pagefind result cards from the site's type taxonomy; `SearchSuggestions` renders the
-  empty-state chips. The search page, its copy and its index stay in the site.
+  empty-state chips. `SearchPage` is the whole page body (hero, type chips, an audience row when `audienceFacets` is
+  passed, result states); the route keeps Layout (`noindex`), imports `search.css` and calls `initSearchPage` from
+  `@sarimarcus/content-sites-ui/search-page` in its own `<script>` with the same taxonomy and copy. The copy, the
+  taxonomy and the index stay in the site.
+
+## Page templates
+
+```ts
+import { StaticProsePage, NotFoundPage, ArticlesListingPage, ArticleFeatureCard } from '@sarimarcus/content-sites-ui/editorial';
+import { ListingShell } from '@sarimarcus/content-sites-ui/layout';
+```
+
+The route file keeps `getStaticPaths`, queries, URLs, `<Layout title description>` (the SEO length gate reads it) and
+`<StructuredData slot="head">` as a direct Layout child; the template receives normalised props and slots. Hrefs and
+prose stay in the route so the site's link and outbound-domain scanners still see them.
+
+- `StaticProsePage`: privacy, terms, contact, editorial standards. Prose in the default slot, `after` slot, optional
+  `cta` box. Carries no Pagefind body.
+- `NotFoundPage`: the 404 body; the route passes `noindex` to Layout and imports `@sarimarcus/content-sites-ui/not-found.css`.
+- `ArticlesListingPage` / `ArticleFeatureCard`: article index, topic hubs and their paginated pages.
+- `ListingShell`: listing hubs (breadcrumb, `hero`, `before-main`, Container'd `<main>`, `after-main`), one outer
+  `data-pagefind-ignore`.
+
+A component exported from a barrel must not carry a `<style>` block: Astro ships it to every page that imports the
+barrel. Put such rules in a stylesheet entry the one route imports.
+
+## Document shell
+
+```astro
+---
+import { DocumentShell } from '@sarimarcus/content-sites-ui/layout';
+---
+<DocumentShell title={title} description={description} siteName={site.siteName} siteUrl={site.url} themeColor="#FAFAF8"
+  gtmId={site.analytics.gtmId} consentPrompt="…" consentTypes={consentTypes} skipLinkLabel="Skip to main content">
+  <Fragment slot="fonts">…</Fragment>
+  <Navigation slot="nav" />
+  <slot />
+  <Footer slot="footer" />
+</DocumentShell>
+```
+
+`DocumentShell` renders the whole document: description, robots (`noindex, follow` when `noindex`), canonical (from
+the page path unless `canonicalUrl`), RSS and favicons, Open Graph / article / Twitter (`twitterHandle` optional),
+title, non-critical `stylesheets`, the Emerald loader (`travelpayoutsTrs`), the skip link, the navigation and footer
+wrapped in `data-pagefind-ignore`, `#main-content` and `ConsentAnalytics`. Slots: `head-start`, `fonts`, `head`,
+`body-start`, `nav`, `footer`, default. It imports no stylesheet and emits no bundled script, so the site's thin
+Layout keeps both (and with them its bundle names).
+
+`ConsentAnalytics` is inline on purpose: the Consent Mode default must reach the dataLayer before the `gtm.js` event
+in one synchronous step. It defines `window.openCookiePreferences` for the footer button. `./analytics`
+(`setupAnalytics`, `track`, `pageTypeOf`) and `./travelpayouts-styler` (`setupTravelpayoutsStyler`) are their own
+entry points so a client `<script>` imports no Astro component. The hosts the shell loads are declared in
+`layout/resources.ts`; `scripts/validate-csp-coverage.mjs` checks every site's CSP against them.
 
 ## Search and consent styles
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "description": "Universal Astro UI components, layout shell and design tokens shared by the content sites.",
   "type": "module",
   "license": "MIT",
@@ -30,8 +30,11 @@
     "./composed": "./src/composed/index.ts",
     "./editorial": "./src/editorial/index.ts",
     "./affiliate": "./src/affiliate/index.ts",
+    "./travelpayouts-styler": "./src/affiliate/travelpayoutsStyler.ts",
     "./seo": "./src/seo/index.ts",
     "./layout": "./src/layout/index.ts",
+    "./analytics": "./src/layout/analytics.ts",
+    "./search-page": "./src/search/searchPage.ts",
     "./navigation": "./src/navigation/index.ts",
     "./search": "./src/search/index.ts",
     "./types": "./src/types/index.ts",
@@ -39,12 +42,13 @@
     "./widths.css": "./src/styles/widths.css",
     "./theme.css": "./src/styles/theme.css",
     "./consent.css": "./src/styles/consent.css",
-    "./search.css": "./src/styles/search.css"
+    "./search.css": "./src/styles/search.css",
+    "./not-found.css": "./src/styles/not-found.css"
   },
   "peerDependencies": {
     "@lucide/astro": "^1.23.0",
     "astro": "^7.0.6",
     "tailwindcss": "^4.1.18",
-    "@sarimarcus/content-sites-core": "0.16.0"
+    "@sarimarcus/content-sites-core": "0.18.0"
   }
 }

package/src/affiliate/EmeraldLoader.astro

@@ -0,0 +1,40 @@
+---
+/**
+ * The Travelpayouts Emerald script that turns the site's affiliate links into tracked ones. Deferred off the critical
+ * path: it loads on the first interaction, or once the page is idle after load. `trs` is the site's Travelpayouts id.
+ */
+import { EMERALD_ORIGIN } from './resources.ts';
+
+interface Props {
+  trs: string;
+}
+
+const { trs } = Astro.props;
+const emeraldOrigin = EMERALD_ORIGIN;
+---
+
+<script is:inline define:vars={{ trs, emeraldOrigin }}>
+  (function () {
+    if (!/^\d+$/.test(trs)) return;
+    var loaded = false;
+    function loadAffiliate() {
+      if (loaded) return;
+      loaded = true;
+      var script = document.createElement('script');
+      script.async = 1;
+      script.src = emeraldOrigin + '/' + btoa(trs) + '.js?t=' + trs;
+      document.head.appendChild(script);
+    }
+    var opts = { once: true, passive: true, capture: true };
+    ['pointerdown', 'keydown', 'touchstart', 'scroll'].forEach(function (evt) {
+      window.addEventListener(evt, loadAffiliate, opts);
+    });
+    window.addEventListener('load', function () {
+      if ('requestIdleCallback' in window) {
+        requestIdleCallback(loadAffiliate, { timeout: 5000 });
+      } else {
+        setTimeout(loadAffiliate, 4000);
+      }
+    });
+  })();
+</script>

package/src/affiliate/index.ts

@@ -11,7 +11,10 @@ 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 { externalResources, emeraldResources, EMERALD_ORIGIN } 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';
+export { default as EmeraldLoader } from './EmeraldLoader.astro';
+export { setupTravelpayoutsStyler } from './travelpayoutsStyler.ts';
+export type { TravelpayoutsStylerOptions, TravelpayoutsStylerColors } from './travelpayoutsStyler.ts';

package/src/affiliate/resources.ts

@@ -28,3 +28,10 @@ export const externalResources: Record<WidgetKind, WidgetResources> = {
   },
 };
 
+
+/** The Travelpayouts Emerald loader every page carries (EmeraldLoader): https://emrldtp.com/<base64 trs>.js?t=<trs>. */
+export const EMERALD_ORIGIN = 'https://emrldtp.com';
+
+export const emeraldResources: Partial<Record<CspDirective, readonly string[]>> = {
+  'script-src': [EMERALD_ORIGIN],
+};