@getvitops/astro 8.3.0-alpha.4 → 8.3.0-alpha.5

package/src/components/masthead.ts

@@ -0,0 +1,252 @@
+/**
+ * Pure decisions behind `<Masthead />` and the `<SiteNav />` options: merge `site.chrome` with a
+ * per-layout override, and turn the result into classes, custom properties and `SiteNav` props.
+ * Kept out of the `.astro` file so it is asserted without rendering (the `sitenav.ts` split). It
+ * imports the schema's literal lists as values from `@getvitops/config` (a zod-free-at-runtime
+ * leaf for these constants) and nothing from the generator, so it cannot drag it into a Worker bundle.
+ */
+import {
+  MASTHEAD_BEHAVIORS,
+  MASTHEAD_LAYOUTS,
+  MASTHEAD_POSITIONS,
+  MASTHEAD_SURFACES,
+  MASTHEAD_WIDTHS,
+  NAV_BREAKPOINTS,
+  NAV_COMPACT_MODES,
+  NAV_DRAWER_SIDES,
+  type ChromeNavConfig,
+  type MastheadBehavior,
+  type MastheadConfig,
+  type MastheadLayout,
+  type MastheadPosition,
+  type MastheadSurface,
+  type MastheadWidth,
+} from '@getvitops/config';
+import type { NavBreakpoint, NavCompactMode, NavDrawerSide } from './sitenav.ts';
+
+/** A masthead override: any `site.chrome.masthead` field, plus `elevation` merged key-by-key. */
+export type MastheadOptions = MastheadConfig;
+
+export interface ResolvedMasthead {
+  position: MastheadPosition;
+  behavior: MastheadBehavior;
+  surface: MastheadSurface;
+  tone: string | undefined;
+  layout: MastheadLayout;
+  width: MastheadWidth;
+  shadow: string | undefined;
+  border: boolean;
+  elevateOnScroll: boolean;
+  height: string | undefined;
+  inset: string | undefined;
+}
+
+/**
+ * What `resolveMasthead` needs from a config — a whole `Config`, or just `{ site: { chrome } }`.
+ * Deliberately loose: a plain `import site from './site.json'` types every enum as `string`, which
+ * the strict `ChromeConfig` would reject (the same trap `resolveOrganizationName` fell into). The
+ * values are checked at runtime instead, with the names of the allowed ones in the error.
+ */
+export interface ChromeSource {
+  site?: { chrome?: { masthead?: Record<string, any>; nav?: Record<string, any> } };
+}
+
+function oneOf<T extends string>(
+  value: unknown,
+  allowed: readonly T[],
+  field: string,
+): T | undefined {
+  if (value === undefined) return undefined;
+  if (!allowed.includes(value as T))
+    throw new Error(
+      `site.chrome ${field}: "${String(value)}" is not one of ${allowed.join(' | ')}.`,
+    );
+  return value as T;
+}
+
+const LENGTH_FUNCTIONS = new Set(['calc', 'clamp', 'min', 'max']);
+const LENGTH_UNITS = new Set([
+  'px',
+  'rem',
+  'em',
+  'ch',
+  '%',
+  'vw',
+  'vh',
+  'vi',
+  'vb',
+  'svw',
+  'svh',
+  'dvw',
+  'dvh',
+  'lvw',
+  'lvh',
+  'cqw',
+  'cqh',
+  'cqi',
+  'cqb',
+]);
+
+/**
+ * A CSS length written into a `<style>` — so a closed grammar, not a blocklist. Numbers must carry
+ * a unit from `LENGTH_UNITS` (or be a bare `0`), functions are limited to `calc|clamp|min|max`,
+ * parentheses must balance, and nothing else is admitted: no `var()`, `url()`, `;`, braces or quotes.
+ * `4rem`, `clamp(3.5rem, 8cqi, 4.5rem)` and `min(100%, 80rem)` pass; `4rem;}body{…` does not.
+ */
+export function isSafeLength(value: string): boolean {
+  if (!/^[0-9a-z%.,+\-*/() ]+$/.test(value)) return false;
+  let depth = 0;
+  for (const ch of value) {
+    if (ch === '(') depth++;
+    else if (ch === ')' && --depth < 0) return false;
+  }
+  if (depth !== 0) return false;
+  // Every identifier directly before `(` must be an allowed function.
+  for (const [, name] of value.matchAll(/([a-z]+)\(/g))
+    if (!LENGTH_FUNCTIONS.has(name!)) return false;
+  // Strip the function names, then every remaining word must be a number+unit or a lone operator.
+  const rest = value.replace(/[a-z]+\(/g, '(');
+  const tokens = rest.split(/[\s,()+*/]+|(?<=\d)-(?=\d)|\s-\s/).filter(Boolean);
+  if (tokens.length === 0) return false;
+  return tokens.every((t) => {
+    if (t === '0' || t === '-') return true;
+    const m = /^-?(?:\d+\.?\d*|\.\d+)([a-z%]*)$/.exec(t);
+    return m !== null && m[1] !== undefined && LENGTH_UNITS.has(m[1]);
+  });
+}
+const ROLE = /^[a-z][a-z0-9-]*$/;
+const SHADOW = /^[a-z0-9][a-z0-9-]*$/;
+
+export function resolveMasthead(
+  config: ChromeSource | undefined,
+  override: MastheadOptions = {},
+): ResolvedMasthead {
+  const base: MastheadConfig = config?.site?.chrome?.masthead ?? {};
+  const pick = <K extends keyof MastheadConfig>(k: K): MastheadConfig[K] =>
+    override[k] !== undefined ? override[k] : base[k];
+  const elevation = { ...base.elevation, ...override.elevation };
+
+  const position = oneOf(pick('position'), MASTHEAD_POSITIONS, 'masthead.position') ?? 'static';
+  const height = pick('height');
+  if (height !== undefined && !isSafeLength(height))
+    throw new Error(
+      `Masthead: height "${height}" is not a plain CSS length (e.g. "4rem" or "clamp(3.5rem, 8cqi, 4.5rem)").`,
+    );
+  const inset = pick('inset');
+  if (inset !== undefined && !isSafeLength(inset))
+    throw new Error(
+      `Masthead: inset "${inset}" is not a plain CSS length (e.g. "0.75rem" or "clamp(0.5rem, 2cqi, 1.5rem)").`,
+    );
+  const tone = pick('tone');
+  if (tone !== undefined && !ROLE.test(tone.replace(/:solid$/, '')))
+    throw new Error(`Masthead: tone "${tone}" must be a role name, optionally "<role>:solid".`);
+  if (elevation.shadow !== undefined && !SHADOW.test(elevation.shadow))
+    throw new Error(`Masthead: elevation.shadow "${elevation.shadow}" is not a shadow name.`);
+
+  return {
+    position,
+    // Nothing to hide when the bar scrolls away with the page anyway.
+    behavior:
+      position === 'static'
+        ? 'always'
+        : (oneOf(pick('behavior'), MASTHEAD_BEHAVIORS, 'masthead.behavior') ?? 'always'),
+    surface: oneOf(pick('surface'), MASTHEAD_SURFACES, 'masthead.surface') ?? 'solid',
+    tone,
+    layout: oneOf(pick('layout'), MASTHEAD_LAYOUTS, 'masthead.layout') ?? 'full',
+    width: oneOf(pick('width'), MASTHEAD_WIDTHS, 'masthead.width') ?? 'content',
+    shadow: elevation.shadow,
+    border: elevation.border ?? false,
+    elevateOnScroll: elevation.onScroll ?? false,
+    height,
+    inset,
+  };
+}
+
+/** Modifier classes on `.masthead`. */
+export function mastheadClass(m: ResolvedMasthead): string[] {
+  const scrollOnly = m.elevateOnScroll;
+  return [
+    'masthead',
+    ...(m.position !== 'static' ? [`masthead--${m.position}`] : []),
+    ...(m.behavior === 'hide-on-scroll' ? ['masthead--hide-on-scroll'] : []),
+    m.surface !== 'solid' ? `masthead--${m.surface}` : '',
+    m.layout !== 'full' ? `masthead--${m.layout}` : '',
+    ...(m.shadow
+      ? ['masthead--shadow', ...(scrollOnly ? ['masthead--shadow-on-scroll'] : [])]
+      : []),
+    ...(m.border
+      ? ['masthead--border', ...(scrollOnly ? ['masthead--border-on-scroll'] : [])]
+      : []),
+    ...(m.tone ? ['tone'] : []),
+  ].filter(Boolean);
+}
+
+/**
+ * The `.tone` custom properties for a role, as a `style` string. Each is a `var()` chain that
+ * degrades to the surface role, so a role the site never defined is a neutral bar, not a
+ * transparent one. `<role>:solid` fills with the role's solid and its computed foreground.
+ */
+export function mastheadStyle(m: ResolvedMasthead): string | undefined {
+  const parts: string[] = [];
+  if (m.tone) {
+    const solid = m.tone.endsWith(':solid');
+    const r = m.tone.replace(/:solid$/, '');
+    parts.push(
+      solid
+        ? `--tone-bg: var(--color-bg-${r}-solid, var(--color-bg-${r}, var(--color-bg-surface)))`
+        : `--tone-bg: var(--color-bg-${r}, var(--color-bg-${r}-muted, var(--color-bg-surface)))`,
+      solid
+        ? `--tone-fg: var(--color-text-on-${r}, var(--color-text-surface))`
+        : `--tone-fg: var(--color-text-${r}, var(--color-text-surface))`,
+      `--tone-border: var(--color-border-${r}, var(--color-border-surface))`,
+    );
+  }
+  if (m.shadow) parts.push(`--masthead-shadow: var(--shadow-${m.shadow})`);
+  return parts.length ? parts.join('; ') : undefined;
+}
+
+/**
+ * Page-level rule for a custom height and inset — `--header-offset` reads both from `:root`, and
+ * the vars inherit down to the masthead. The inset is written only for a layout that has one (a
+ * full-width bar sits flush) and then always, defaulted to the same `0.75rem` the element falls
+ * back to, since `--header-offset` adds `--masthead-inset` unconditionally.
+ */
+export function mastheadRootCss(m: ResolvedMasthead): string | undefined {
+  const decls = [
+    m.height ? `--masthead-height:${m.height}` : '',
+    // Always written for an inset layout, defaulted, so `--header-offset` and the element agree.
+    m.layout !== 'full' ? `--masthead-inset:${m.inset ?? '0.75rem'}` : '',
+  ].filter(Boolean);
+  return decls.length ? `:root{${decls.join(';')}}` : undefined;
+}
+
+/** `<SiteNav>` props from `site.chrome.nav`, with an optional override. */
+export interface ResolvedNavOptions {
+  breakpoint?: NavBreakpoint;
+  mobileBreakpoint?: NavBreakpoint;
+  megaBreakpoint?: NavBreakpoint;
+  depth?: number;
+  megaDepth?: number;
+  compact?: NavCompactMode;
+  drawerSide?: NavDrawerSide;
+}
+
+export function resolveNavOptions(
+  config: ChromeSource | undefined,
+  override: ChromeNavConfig = {},
+): ResolvedNavOptions {
+  const m = stripUndefined({ ...config?.site?.chrome?.nav, ...stripUndefined(override) });
+  return stripUndefined({
+    breakpoint: oneOf(m.breakpoint, NAV_BREAKPOINTS, 'nav.breakpoint'),
+    mobileBreakpoint: oneOf(m.mobileBreakpoint, NAV_BREAKPOINTS, 'nav.mobileBreakpoint'),
+    megaBreakpoint: oneOf(m.megaBreakpoint, NAV_BREAKPOINTS, 'nav.megaBreakpoint'),
+    depth: m.depth,
+    megaDepth: m.megaDepth,
+    compact: oneOf(m.compact, NAV_COMPACT_MODES, 'nav.compact'),
+    drawerSide: oneOf(m.drawerSide, NAV_DRAWER_SIDES, 'nav.drawerSide'),
+  }) as ResolvedNavOptions;
+}
+
+function stripUndefined<T extends object>(o: T): T {
+  return Object.fromEntries(Object.entries(o).filter(([, v]) => v !== undefined)) as T;
+}

package/src/components/sitenav.ts

@@ -126,6 +126,10 @@ export function containsCurrent(item: NavItem, currentPath: string): boolean {
   );
 }
 
+/** What the toggle opens below a nav's breakpoint. */
+export type NavCompactMode = 'drawer' | 'dropdown';
+export type NavDrawerSide = 'start' | 'end';
+
 export interface SiteNavTier {
   kind: 'mobile' | 'default' | 'mega';
   /** Menu name this tier is read from. */
@@ -257,16 +261,48 @@ export function tierClass(tier: SiteNavTier): string[] {
   ];
 }
 
-/** Extra classes on the `.sitenav` root for a tier. */
-export function navClass(tier: SiteNavTier): string[] {
+export interface NavClassOptions {
+  /** `drawer` (default): an edge drawer. `dropdown`: a columnar panel anchored under the toggle. */
+  compact?: NavCompactMode;
+  /** Edge the drawer slides from. Default `end`. Ignored for `dropdown`. */
+  drawerSide?: NavDrawerSide;
+}
+
+/**
+ * Extra classes on the `.sitenav` root for a tier. A dropdown panel carries NO `drawer-*` class on
+ * purpose: those are narrow-state rules at the same specificity as the dropdown's, so emitting both
+ * would leave the winner to source order.
+ */
+export function navClass(tier: SiteNavTier, opts: NavClassOptions = {}): string[] {
+  const compact = opts.compact ?? 'drawer';
   return [
     'sitenav',
     `sitenav--bp-${tier.breakpoint}`,
-    'sitenav--drawer-end',
+    compact === 'dropdown'
+      ? 'sitenav--panel-dropdown'
+      : `sitenav--drawer-${opts.drawerSide ?? 'end'}`,
     ...(tier.kind === 'mega' ? ['sitenav--mega'] : []),
   ];
 }
 
+/**
+ * The EmDash widget area that fills a mega-panel item's extra column. `mega-area:<name>` in the
+ * item's `cssClasses` wins (labels are translated, so they are unstable); otherwise the last
+ * path segment of its URL (`/services/` → `mega-services`). `undefined` when neither exists.
+ */
+export function megaAreaName(item: NavItem): string | undefined {
+  const explicit = /(?:^|\s)mega-area:([a-z0-9][a-z0-9-]*)(?:\s|$)/.exec(item.cssClasses ?? '');
+  if (explicit) return explicit[1];
+  const path = (item.url ?? '').split(/[?#]/)[0] ?? '';
+  if (!path.startsWith('/') || path.startsWith('//')) return undefined;
+  const slug = path.split('/').filter(Boolean).pop();
+  const clean = slug
+    ?.toLowerCase()
+    .replace(/[^a-z0-9-]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+  return clean ? `mega-${clean}` : undefined;
+}
+
 /** Description text for an item, or undefined. See `NavItem.titleAttr`. */
 export function itemDescription(item: NavItem): string | undefined {
   const d = item.titleAttr?.trim();

package/src/scripts/tracking.ts

@@ -61,6 +61,43 @@ const CLICK_ID_PARAMS = [
   'epik', // Pinterest
 ] as const;
 
+// Mirrors PROVIDER_BY_PARAM, UTM_SOURCE_ALIASES, PAID_MEDIUM and DEFAULT_PAID in
+// @getvitops/utils/tracking/phone — copied for the same reason; `tracking.test.ts`
+// pins them. They decide which call-tracking number a visitor is shown (section 4).
+const PROVIDER_BY_PARAM: Record<string, string> = {
+  gclid: 'google',
+  gbraid: 'google',
+  wbraid: 'google',
+  fbclid: 'meta',
+  li_fat_id: 'linkedin',
+  rdt_cid: 'reddit',
+  ttclid: 'tiktok',
+  msclkid: 'microsoft',
+  epik: 'pinterest',
+  ScCid: 'snapchat',
+};
+const UTM_SOURCE_ALIASES: Record<string, string> = {
+  google: 'google',
+  facebook: 'meta',
+  instagram: 'meta',
+  meta: 'meta',
+  fb: 'meta',
+  ig: 'meta',
+  bing: 'microsoft',
+  microsoft: 'microsoft',
+  linkedin: 'linkedin',
+  reddit: 'reddit',
+  tiktok: 'tiktok',
+  pinterest: 'pinterest',
+  snapchat: 'snapchat',
+  snap: 'snapchat',
+};
+const PAID_MEDIUM = /^(cpc|ppc|paid.*|cpm|display|paidsocial|paid_social)$/i;
+const DEFAULT_PAID = 'default-paid';
+// Set on a `tel:` link whose number was swapped, so the click beacon can say which
+// platform's number the visitor called.
+const PHONE_SOURCE_ATTR = 'data-vitops-phone-source';
+
 const UTM_PARAMS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term'] as const;
 
 // ---------------------------------------------------------------------------
@@ -201,9 +238,10 @@ document.addEventListener('click', (e) => {
 
   // Fire-and-forget beacon; don't block the tel:/mailto: navigation.
   if (navigator.sendBeacon) {
+    const phoneSource = link.getAttribute(PHONE_SOURCE_ATTR);
     const body = isEmail
       ? { event: 'email', email: link.href }
-      : { event: 'call', phone: link.href };
+      : { event: 'call', phone: link.href, ...(phoneSource ? { phoneSource } : {}) };
     navigator.sendBeacon(TRACK_ENDPOINT, JSON.stringify(body));
   }
 
@@ -234,6 +272,11 @@ const CONVERTED_ATTR = 'data-vitops-converted';
  * more than once for the same submission (a retried network call, a
  * double-invoked effect) reports the conversion once, not twice.
  *
+ * Call it from the fetch handler after a successful POST — not from a
+ * success-page query parameter (`?sent=1`). That replays on refresh/back, and
+ * the honeypot deliberately redirects to the same success URL, so bots would
+ * count as leads. For no-JS forms use `reporting: 'server'` instead.
+ *
  * There is deliberately no server-side equivalent for a no-JS
  * `<form method="post">` submission — that path is a full-page redirect with no
  * script execution to fire from, and reporting a Google-Ads-labelled
@@ -252,3 +295,133 @@ function vitopsFormConversion(formEl: HTMLFormElement): void {
 
 (window as unknown as { vitopsFormConversion?: typeof vitopsFormConversion }).vitopsFormConversion =
   vitopsFormConversion;
+
+// ---------------------------------------------------------------------------
+// 4. Call-tracking numbers: show a visitor from an ad the number provisioned for it
+// ---------------------------------------------------------------------------
+//
+// The server-rendered HTML always carries the real number (crawlers, JSON-LD and
+// visitors without JavaScript see it); this only ever *swaps*. Two callers:
+//
+//   - **Google**, when `site.ads.google.callTracking` is set: Google's own tag fetches
+//     a forwarding number and calls `vitopsSwapPhone` (via a queue, because the inline
+//     tag and this module load in no fixed order). Google replaces text only — this
+//     rewrites the `tel:` href too.
+//   - **Everyone else**, from `site.tracking.phoneNumbers`: the number for the
+//     platform that sent the visitor. The landing page decides from the URL, which is
+//     not storage and needs no permission; later pages decide from `_ac`, which exists
+//     only once `marketing` was granted. A visitor who declined therefore sees a
+//     tracking number on the landing page only.
+
+interface PhoneConfig {
+  number: string;
+  sources: Record<string, string | undefined>;
+}
+
+const PHONE_TEXT = /\+?\d[\d\s().-]{5,18}\d/g;
+
+/** Mirrors `phoneDigits`: digits only, a leading North American `1` dropped. */
+function phoneDigits(value: string): string {
+  const d = value.replace(/\D/g, '');
+  return d.length === 11 && d.startsWith('1') ? d.slice(1) : d;
+}
+
+/** Mirrors `telUri`. */
+function telUri(display: string): string {
+  const d = display.replace(/\D/g, '');
+  return d.length === 10 ? `tel:+1${d}` : `tel:+${d}`;
+}
+
+/** Replace every phone-looking run in `node`'s text that names `target` with `display`. */
+function swapText(node: Node, target: string, display: string): void {
+  if (node.nodeType === 3) {
+    const text = node as Text;
+    const next = text.data.replace(PHONE_TEXT, (m) => (phoneDigits(m) === target ? display : m));
+    if (next !== text.data) text.data = next;
+    return;
+  }
+  for (const child of Array.from(node.childNodes)) swapText(child, target, display);
+}
+
+/**
+ * Swap `original` for `display` in every matching `tel:` link (href and text) and in
+ * every `[data-vitops-phone]` element's text. Called by Google's tag, so the
+ * signature is `(formatted, tel, original)` with the second argument unused: Google's
+ * own docs disagree about whether it carries a `+`, so the href is built locally.
+ */
+function swapPhone(display: string, _tel: unknown, original: string, source = 'google'): void {
+  const target = phoneDigits(original);
+  if (!target || phoneDigits(display) === target) return;
+  const uri = telUri(display);
+  for (const a of Array.from(document.querySelectorAll('a[href^="tel:"]'))) {
+    if (phoneDigits((a.getAttribute('href') ?? '').slice(4)) !== target) continue;
+    a.setAttribute('href', uri);
+    a.setAttribute(PHONE_SOURCE_ATTR, source);
+    swapText(a, target, display);
+  }
+  for (const el of Array.from(document.querySelectorAll('[data-vitops-phone]')))
+    swapText(el, target, display);
+}
+
+/** Mirrors `selectPhoneNumber`. */
+function selectPhone(
+  current: Record<string, unknown> | null,
+  stored: Record<string, unknown> | null,
+  config: PhoneConfig,
+  googleNative: boolean,
+): { number: string; source: string } | null {
+  const providerOf = (data: Record<string, unknown>): string | null => {
+    for (const param of Object.keys(PROVIDER_BY_PARAM))
+      if (data[param]) return PROVIDER_BY_PARAM[param]!;
+    const source = data['utm_source'];
+    return typeof source === 'string'
+      ? (UTM_SOURCE_ALIASES[source.trim().toLowerCase()] ?? null)
+      : null;
+  };
+  const isPaid = (data: Record<string, unknown>): boolean => {
+    if (Object.keys(PROVIDER_BY_PARAM).some((p) => data[p])) return true;
+    const medium = data['utm_medium'];
+    return typeof medium === 'string' && PAID_MEDIUM.test(medium.trim());
+  };
+  for (const data of [current, stored]) {
+    if (!data) continue;
+    const provider = providerOf(data);
+    if (provider === 'google' && googleNative) return null;
+    const specific = provider ? config.sources[provider] : undefined;
+    if (specific && phoneDigits(specific) !== phoneDigits(config.number))
+      return { number: specific, source: provider! };
+    if (isPaid(data) || provider) {
+      const fallback = config.sources[DEFAULT_PAID];
+      return fallback && phoneDigits(fallback) !== phoneDigits(config.number)
+        ? { number: fallback, source: DEFAULT_PAID }
+        : null;
+    }
+  }
+  return null;
+}
+
+type SwapFn = (display: string, tel: unknown, original: string) => void;
+const phoneGlobal = window as unknown as {
+  vitopsSwapPhone?: SwapFn;
+  vitopsPhoneSwaps?: [string, unknown, string][];
+};
+phoneGlobal.vitopsSwapPhone = swapPhone;
+// Google's tag may have called before this module ran; replay what it queued.
+for (const args of phoneGlobal.vitopsPhoneSwaps ?? []) swapPhone(...args);
+phoneGlobal.vitopsPhoneSwaps = [];
+
+const phoneAttr = trackingMarker?.getAttribute('data-phone-numbers');
+if (phoneAttr) {
+  try {
+    const config = JSON.parse(phoneAttr) as PhoneConfig;
+    const picked = selectPhone(
+      Object.keys(trackingData).length ? trackingData : null,
+      readCookie(),
+      config,
+      trackingMarker?.hasAttribute('data-google-call-tracking') ?? false,
+    );
+    if (picked) swapPhone(picked.number, null, config.number, picked.source);
+  } catch {
+    // A malformed attribute leaves the real number in place, which is the safe state.
+  }
+}