@sarimarcus/content-sites-ui 0.15.1 → 0.17.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 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).
+- New `./search`: `appendResults` (Pagefind result cards from the site's type taxonomy; the excerpt sanitiser's `DOMParser` is created on first use, so the entry point is safe to import during SSR) and `SearchSuggestions` (SLA-2735).
+- New `./search.css` and `./consent.css`: the search page and Silktide consent styles on theme roles, tuned per site by optional `--search-*` / `--consent-*` custom properties. Folds in the consent modal type hierarchy and toggle contrast (Dark Skies 5d13f8a), the SLA-2290 mobile banner compaction, and `.search-filters[hidden]` (SLA-2735).
+- `./layout`: `AsyncStylesheet` (non-render-blocking sheet with a `<noscript>` fallback) (SLA-2735).
+- `theme.css`: `inverse`, `inverse-foreground`, `inverse-muted` roles for the footer surface; sites must set them (SLA-2735).
+
 ## 0.15.1 (2026-10-01)
 
 - `selectActivities` accepts activities without an `id` (the sites' activity type has it optional); 0.15.0 failed site type checks (SLA-2736).

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` and `types`. For example,
+`composed`, `editorial`, `affiliate`, `seo`, `layout`, `navigation`, `search` and `types`, plus the script
+entry points `analytics` and `travelpayouts-styler`. For example,
 `import { Container } from '@sarimarcus/content-sites-ui/layout'`. `src/internal` is never exported,
 and `src/styles` holds the Tailwind entry.
 
@@ -48,6 +49,78 @@ import { Icon, Badge, Chip, ArrowLabel, SectionDivider, LinkArrow, Button, Callo
 Chip colour only through theme roles, including `-tint`, `-emphasis` and the `badge-on-image` / `chip-on-image`
 roles, which each site sets to its own values.
 
+## Navigation and search
+
+```ts
+import { SiteHeader, NavDropdown, MobileNavSection, SiteFooter, type NavLink, type FooterSection } from '@sarimarcus/content-sites-ui/navigation';
+import { SearchSuggestions, appendResults } from '@sarimarcus/content-sites-ui/search';
+```
+
+Shells for site chrome. The site composes every link, panel, logo and label; the shells own the landmarks, the ARIA
+state and one bundled controller (idempotent on `astro:page-load`, any number of headers per page).
+
+- `SiteHeader`: the fixed `<header>` with a labelled `<nav>`, slots `logo`, `desktop`, `actions`, `mobile-actions`
+  and `mobile`, the mobile-menu toggle, and the mobile panel rendered after the header (with `data-pagefind-ignore`).
+  `searchPath` turns on Ctrl/Cmd+K → `<searchPath>?focus=1`. `surfaceClass` sets the bar's and the panel's
+  background. Ids default to `main-nav`, `mobile-menu`, `mobile-menu-btn`.
+- `NavDropdown`: trigger plus panel (default slot). Click, hover with a 150 ms close delay, ArrowDown/ArrowUp/Escape,
+  outside click and focus leaving. `tone` tints the default trigger; `buttonClass` replaces it.
+- `MobileNavSection`: one section of the mobile panel's single-open accordion (its button's `aria-controls` names
+  its content).
+- `NavMenuLink` / `MobileNavLink`: one row of a dropdown panel / of the mobile panel, from a `NavLink`, tinted by a
+  `NavTone`. `active` marks the row `aria-current="page"`; `emphasis` paints hub links in the tone.
+- `isActivePath(currentPath, href)`: the page or a page below it, on a path-segment boundary.
+- `SiteFooter`: brand slot, one column per `FooterSection`, a `bottom` slot, the copyright line and a
+  `<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.
+
+## 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
+
+`@sarimarcus/content-sites-ui/search.css` styles the search page markup (`appendResults`, `SearchSuggestions` and
+the page's form, filters and states); `@sarimarcus/content-sites-ui/consent.css` styles the Silktide consent banner
+and modal. Both read the theme roles, and optional `--search-*` / `--consent-*` custom properties, listed at the top
+of each file, tune what differs per site. Load them as non-critical sheets with `AsyncStylesheet` (ui/layout):
+
+```astro
+---
+import searchCssUrl from '@sarimarcus/content-sites-ui/search.css?url';
+import { AsyncStylesheet } from '@sarimarcus/content-sites-ui/layout';
+---
+<AsyncStylesheet href={searchCssUrl} />
+```
+
+A site's own additions to a sheet load after it.
+
 ## Tailwind
 
 Tailwind v4 does not scan `node_modules`, so a site must import the package's source entry next to Tailwind:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.15.1",
+  "version": "0.17.0",
   "description": "Universal Astro UI components, layout shell and design tokens shared by the content sites.",
   "type": "module",
   "license": "MIT",
@@ -30,18 +30,23 @@
     "./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",
     "./navigation": "./src/navigation/index.ts",
+    "./search": "./src/search/index.ts",
     "./types": "./src/types/index.ts",
     "./tailwind.css": "./src/styles/tailwind.css",
     "./widths.css": "./src/styles/widths.css",
-    "./theme.css": "./src/styles/theme.css"
+    "./theme.css": "./src/styles/theme.css",
+    "./consent.css": "./src/styles/consent.css",
+    "./search.css": "./src/styles/search.css"
   },
   "peerDependencies": {
     "@lucide/astro": "^1.23.0",
     "astro": "^7.0.6",
     "tailwindcss": "^4.1.18",
-    "@sarimarcus/content-sites-core": "0.15.1"
+    "@sarimarcus/content-sites-core": "0.17.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],
+};