@sarimarcus/content-sites-ui 0.15.1 → 0.17.0

package/src/search/renderResult.ts

@@ -0,0 +1,117 @@
+// Pagefind result cards for a site's search page. The site owns its type taxonomy (labels, icons) and passes it in;
+// the icons themselves are server-rendered by the site into <template id="search-type-icons">.
+import { normalizePagePath } from '@sarimarcus/content-sites-core/url';
+
+export interface SearchTypeMeta {
+  label: string;
+  pluralLabel?: string;
+  iconName?: string;
+}
+
+export interface SearchTaxonomy<T extends string> {
+  types: Record<T, SearchTypeMeta>;
+  resolveType: (meta: Record<string, string> | undefined) => T | null;
+  /** Title shown when a result has none. */
+  untitled?: string;
+}
+
+export interface PagefindResultFragment {
+  url: string;
+  raw_url?: string;
+  excerpt: string;
+  meta?: Record<string, string>;
+  sub_results?: Array<{ title?: string; url?: string; excerpt?: string }>;
+}
+
+// Type-icon SVGs are server-rendered into <template id="search-type-icons">
+// (one Lucide icon per type) and cloned at render time. No emojis in code.
+let parser: DOMParser | undefined;
+const iconCache = new Map<string, Element>();
+function getTypeIcon(type: string): Element | null {
+  const cached = iconCache.get(type);
+  if (cached) return cached.cloneNode(true) as Element;
+  const tpl = document.getElementById('search-type-icons') as HTMLTemplateElement | null;
+  const source = tpl?.content.querySelector(`[data-icon-for="${type}"] > *`);
+  if (!source) return null;
+  iconCache.set(type, source);
+  return source.cloneNode(true) as Element;
+}
+
+// Pagefind generates excerpts at build time from indexed content, wrapping
+// matched terms in <mark>. We parse into a detached document so any unsafe
+// nodes (script/style/iframe) and on* event handlers are stripped before
+// reaching the live DOM.
+function setExcerptHtml(target: HTMLElement, html: string): void {
+  const doc = (parser ??= new DOMParser()).parseFromString(`<div>${html}</div>`, 'text/html');
+  const root = doc.body.firstElementChild;
+  if (!root) {
+    target.textContent = '';
+    return;
+  }
+  root.querySelectorAll('script, style, iframe, object, embed').forEach((n) => n.remove());
+  root.querySelectorAll('*').forEach((n) => {
+    [...n.attributes].forEach((attr) => {
+      if (attr.name.startsWith('on')) n.removeAttribute(attr.name);
+    });
+  });
+  target.replaceChildren(
+    ...Array.from(root.childNodes).map((n) => target.ownerDocument.importNode(n, true)),
+  );
+}
+
+function renderResultElement<T extends string>(fragment: PagefindResultFragment, index: number, taxonomy: SearchTaxonomy<T>): HTMLLIElement {
+  const meta = fragment.meta ?? {};
+  const title = meta.title ?? taxonomy.untitled ?? 'Untitled';
+  const url = normalizePagePath(fragment.url);
+  const type = taxonomy.resolveType(meta);
+  const typeMeta = type ? taxonomy.types[type] : null;
+
+  const li = document.createElement('li');
+  li.className = 'search-card';
+  li.dataset.type = type ?? 'unknown';
+  li.dataset.index = String(index);
+
+  const link = document.createElement('a');
+  link.className = 'search-card__link';
+  link.href = url;
+  link.dataset.searchResultLink = '';
+  li.appendChild(link);
+
+  const body = document.createElement('div');
+  body.className = 'search-card__body';
+  link.appendChild(body);
+
+  if (type && typeMeta) {
+    const badge = document.createElement('span');
+    badge.className = 'search-card__badge';
+    const iconNode = getTypeIcon(type);
+    if (iconNode) badge.appendChild(iconNode);
+    badge.appendChild(document.createTextNode(typeMeta.label));
+    body.appendChild(badge);
+  }
+
+  const titleEl = document.createElement('h3');
+  titleEl.className = 'search-card__title';
+  titleEl.textContent = title;
+  body.appendChild(titleEl);
+
+  const excerptEl = document.createElement('p');
+  excerptEl.className = 'search-card__excerpt';
+  setExcerptHtml(excerptEl, fragment.excerpt);
+  body.appendChild(excerptEl);
+
+  return li;
+}
+
+export function appendResults<T extends string>(
+  container: HTMLElement,
+  fragments: PagefindResultFragment[],
+  startIndex: number,
+  taxonomy: SearchTaxonomy<T>,
+): void {
+  const frag = document.createDocumentFragment();
+  fragments.forEach((f, i) => {
+    frag.appendChild(renderResultElement(f, startIndex + i, taxonomy));
+  });
+  container.appendChild(frag);
+}

package/src/styles/consent.css

@@ -0,0 +1,274 @@
+/* Silktide Consent Manager overrides, shared by every site. Colours come from the semantic theme roles; a site tunes
+   the few surfaces that differ through these optional hooks (defaults in brackets):
+   --consent-surface [--background]       banner, modal, secondary buttons, toggle thumb
+   --consent-surface-hover [surface]       secondary button hover
+   --consent-border [accent 20%]           banner/modal border, fieldset and row separators
+   --consent-backdrop [overlay 60%]        modal backdrop
+   --consent-shadow [overlay 15%]          banner/modal shadow
+   --consent-thumb-shadow [overlay 30%]    toggle thumb shadow
+   --consent-link / -hover [secondary / secondary-strong]  the preferences link
+   --consent-toggle-off [muted-foreground 35% on surface]  off toggle track
+   --consent-toggle-border [transparent]   off toggle track outline */
+
+/* CLS fix: keep wrapper out of document flow so it never causes layout shift */
+#stcm-wrapper {
+  position: fixed !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  z-index: 9999 !important;
+}
+
+/* Hide floating re-open button (all possible selectors) */
+#stcm-icon,
+[id^="stcm-icon"],
+.stcm-icon {
+  display: none !important;
+  visibility: hidden !important;
+  pointer-events: none !important;
+}
+
+/* Backdrop — blur only on capable devices to avoid mobile jank */
+#stcm-backdrop {
+  background: var(--consent-backdrop, color-mix(in oklch, var(--overlay) 60%, transparent)) !important;
+}
+@media (hover: hover) {
+  #stcm-backdrop {
+    backdrop-filter: blur(2px) !important;
+  }
+}
+
+/* Outer container — strip any default border/outline */
+#stcm-container,
+[id^="stcm-container"],
+.stcm-container {
+  border: none !important;
+  outline: none !important;
+}
+
+/* Banner & Modal container — compact */
+#stcm-banner,
+#stcm-modal {
+  background: var(--consent-surface, var(--background)) !important;
+  color: var(--foreground) !important;
+  border-radius: 0.75rem !important;
+  border: 1px solid var(--consent-border, color-mix(in oklch, var(--accent) 20%, transparent)) !important;
+  box-shadow: 0 8px 32px var(--consent-shadow, color-mix(in oklch, var(--overlay) 15%, transparent)) !important;
+  font-family: var(--font-body) !important;
+  max-width: 480px !important;
+  padding: 1rem 1.25rem !important;
+  outline: none !important;
+}
+
+/* Type hierarchy: title > category legend > body (Dark Skies 5d13f8a — the legend used to inherit the title's size) */
+#stcm-banner h1, #stcm-banner h2, #stcm-banner h3,
+#stcm-modal h1, #stcm-modal h2, #stcm-modal h3 {
+  font-family: var(--font-display) !important;
+  color: var(--foreground) !important;
+  font-size: 1.0625rem !important;
+  line-height: 1.3 !important;
+  margin-bottom: 0.25rem !important;
+}
+
+/* Category fieldsets — reset browser default groove border */
+#stcm-modal fieldset,
+#stcm-banner fieldset {
+  border: none !important;
+  border-top: 1px solid var(--consent-border, color-mix(in oklch, var(--accent) 20%, transparent)) !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+/* Category labels (Essential / Analytics / Marketing) — <legend> elements */
+#stcm-modal legend,
+#stcm-banner legend {
+  color: var(--foreground) !important;
+  font-family: var(--font-display) !important;
+  font-weight: 600 !important;
+  font-size: 0.875rem !important;
+  line-height: 1.3 !important;
+}
+
+/* Body text — compact */
+#stcm-banner p, #stcm-modal p,
+#stcm-banner a, #stcm-modal a {
+  color: var(--muted-foreground) !important;
+  font-family: var(--font-body) !important;
+  font-size: 0.8125rem !important;
+  line-height: 1.4 !important;
+  margin-bottom: 0.5rem !important;
+}
+
+/* Actions block — tighter than Silktide's 24px margin-top: on short, hero-heavy mobile viewports the banner reached
+   into above-the-fold controls (SLA-2290). */
+#stcm-banner .stcm-actions {
+  margin-top: 0.75rem !important;
+}
+
+/* Buttons — base */
+.stcm-button {
+  border: none !important;
+  outline: none !important;
+  border-radius: 0.5rem !important;
+  font-family: var(--font-body) !important;
+  font-size: 0.8125rem !important;
+  font-weight: 500 !important;
+  padding: 0.5rem 1rem !important;
+  cursor: pointer !important;
+  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
+}
+
+/* Override Silktide default black box-shadow on button focus (#050505 ring) */
+#stcm-wrapper #stcm-banner button:focus,
+#stcm-wrapper #stcm-modal button:focus,
+#stcm-wrapper #stcm-icon:focus {
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+/* Accessible focus styles — keyboard only */
+.stcm-button:focus-visible,
+.stcm-preferences-button:focus-visible,
+.stcm-modal-close:focus-visible {
+  outline: 2px solid var(--primary) !important;
+  outline-offset: 2px !important;
+  box-shadow: none !important;
+}
+
+/* Primary button (Save / Accept) */
+.stcm-button-primary {
+  background: var(--primary) !important;
+  color: var(--primary-foreground) !important;
+  border: none !important;
+}
+.stcm-button-primary:hover {
+  background: var(--primary-strong) !important;
+}
+
+/* Secondary button (Reject / Manage) */
+.stcm-button-secondary,
+.stcm-reject-all {
+  background: var(--consent-surface, var(--background)) !important;
+  color: var(--primary) !important;
+  border: 1px solid color-mix(in oklch, var(--primary) 40%, transparent) !important;
+}
+.stcm-button-secondary:hover,
+.stcm-reject-all:hover {
+  background: var(--consent-surface-hover, var(--consent-surface, var(--background))) !important;
+  border-color: color-mix(in oklch, var(--primary) 70%, transparent) !important;
+}
+
+/* Preferences/settings button */
+.stcm-preferences-button {
+  background: transparent !important;
+  color: var(--consent-link, var(--secondary)) !important;
+  border: none !important;
+  text-decoration: underline !important;
+  font-size: 0.8125rem !important;
+  padding: 0 !important;
+}
+.stcm-preferences-button:hover {
+  color: var(--consent-link-hover, var(--secondary-strong)) !important;
+}
+
+/* Toggle — track (off): must clear 3:1 non-text contrast against the modal surface */
+.stcm-toggle-track {
+  background: var(--consent-toggle-off, color-mix(in oklch, var(--muted-foreground) 35%, var(--consent-surface, var(--background)))) !important;
+  box-shadow: inset 0 0 0 1px var(--consent-toggle-border, transparent) !important;
+  border-radius: 9999px !important;
+}
+
+/* Toggle — on state. `.stcm-toggle-on` is the sibling "ON" label, not an ancestor of the track, so target the
+   checked input instead (Dark Skies 5d13f8a). */
+.stcm-toggle input:checked + .stcm-toggle-track {
+  background: var(--primary) !important;
+  border-color: var(--primary) !important;
+}
+
+/* Toggle — thumb */
+.stcm-toggle-thumb {
+  background: var(--consent-surface, var(--background)) !important;
+  box-shadow: 0 1px 3px var(--consent-thumb-shadow, color-mix(in oklch, var(--overlay) 30%, transparent)) !important;
+}
+
+/* Consent row separator */
+.stcm-consent-row {
+  border-color: var(--consent-border, color-mix(in oklch, var(--accent) 20%, transparent)) !important;
+}
+
+/* Close button */
+.stcm-modal-close {
+  color: var(--primary) !important;
+  background: transparent !important;
+  border: 1px solid color-mix(in oklch, var(--primary) 30%, transparent) !important;
+  border-radius: 0.5rem !important;
+}
+.stcm-modal-close svg,
+.stcm-modal-close svg * {
+  stroke: var(--primary) !important;
+  fill: var(--primary) !important;
+}
+.stcm-modal-close:hover {
+  color: var(--primary-strong) !important;
+  border-color: color-mix(in oklch, var(--primary) 60%, transparent) !important;
+}
+.stcm-modal-close:hover svg,
+.stcm-modal-close:hover svg * {
+  stroke: var(--primary-strong) !important;
+  fill: var(--primary-strong) !important;
+}
+
+/* Silktide credit link, brand badge, logo — hide */
+.stcm-credit-link,
+.stcm-logo,
+.stcm-brand,
+[class*="stcm-brand"],
+[class*="stcm-credit"] {
+  display: none !important;
+}
+
+/* Suppress browser focus outline on auto-focused containers */
+#stcm-banner:focus,
+#stcm-modal:focus,
+#stcm-banner:focus-visible,
+#stcm-modal:focus-visible,
+#stcm-container:focus,
+#stcm-container:focus-visible,
+[id^="stcm"]:focus,
+[id^="stcm"]:focus-visible {
+  outline: none !important;
+  box-shadow: 0 8px 32px var(--consent-shadow, color-mix(in oklch, var(--overlay) 15%, transparent)) !important;
+}
+
+/* Mobile — even more compact */
+@media (max-width: 640px) {
+  #stcm-banner,
+  #stcm-modal {
+    max-width: calc(100vw - 1.5rem) !important;
+    padding: 0.75rem 1rem !important;
+    margin: 0.75rem !important;
+    border-radius: 0.625rem !important;
+  }
+  #stcm-banner h1, #stcm-banner h2, #stcm-banner h3 {
+    font-size: 0.9375rem !important;
+  }
+  #stcm-banner p, #stcm-modal p {
+    font-size: 0.75rem !important;
+    margin-bottom: 0.375rem !important;
+  }
+  .stcm-button {
+    font-size: 0.75rem !important;
+    padding: 0.4375rem 0.875rem !important;
+  }
+  /* SLA-2290: keep the two primary actions side by side on mobile too — Silktide stacks them below 600px, and one
+     line materially shrinks how far the banner reaches into the fold. */
+  #stcm-banner .stcm-actions {
+    flex-direction: row !important;
+    flex-wrap: wrap !important;
+    gap: 0.5rem !important;
+    margin-top: 0.5rem !important;
+  }
+  #stcm-banner .stcm-actions .stcm-button {
+    flex: 1 1 auto !important;
+  }
+}