@getvitops/astro 4.0.0 → 5.0.0

package/src/components/Cards.astro

@@ -1,34 +1,48 @@
 ---
 /**
- * Cards — a `Subgrid` whose items are `card`s. The child's own class and style
- * ride along, so `<article class="bg-surface-muted">` becomes `<li class="card bg-surface-muted">`.
+ * Cards — a `Subgrid` whose cards are clickable across their whole area, with their
+ * text still selectable.
  *
- * The class has to be put on the `<li>` we hand to Subgrid rather than written
- * into the slotted element: `serialize()` returns a node's *inner* HTML, so the
- * element carrying the attribute is discarded on the way through.
+ * **This component emits its own `<wc-cards>`** — do NOT wrap it in one. That is the
+ * tier-3 rule ("the wrapper emits its `<wc-*>` tag with the accessible fallback
+ * inside"), and `Tree.astro` and `CookieConsent.astro` do the same.
+ * `<wc-cards><Cards /></wc-cards>` nests two elements governing the same cards; the
+ * inner one defers to the enclosing one so it degrades to a no-op rather than two
+ * forwarded clicks, but the single call is the intended shape.
+ *
+ *   <Cards>
+ *     <li class="card subgrid-card">
+ *       <p class="font-eyebrow">Service</p>
+ *       <p class="font-heading"><a class="link" href="/a">Title</a></p>
+ *       <p>Blurb…</p>
+ *     </li>
+ *   </Cards>
+ *
+ * The fallback is the card's own link, so with no JS every card is still reachable —
+ * only the click-anywhere convenience is missing, and the pointer cursor comes from
+ * the element too, so the affordance never appears without the behaviour.
+ *
+ * **`<Subgrid>` is the unenhanced form**, which is why there is no `enhance={false}`
+ * prop: a flag would be a second way to say the same thing. Reach for
+ * `.stretched-link` instead when you want whole-card clicking with no JS at all and
+ * can accept that the card's text stops being selectable.
+ *
+ * It no longer parses the slot to add `class="card"`. That was its only job, and it is
+ * what forced `Subgrid` to rebuild every child as an `<li>` — see that file. Write the
+ * class on the item.
  */
 import type { HTMLAttributes } from 'astro/types';
 import Subgrid from './Subgrid.astro';
-import { parseRenderedSlots, getAttribute, serialize } from '@getvitops/utils';
-
-export interface Props extends HTMLAttributes<'ul'> {}
 
-const { class: className, ...rest } = Astro.props;
+export interface Props extends HTMLAttributes<'ul'> {
+  as?: 'ul' | 'ol' | 'div';
+  /** Selector for the cards the element governs. Defaults to `.card`. */
+  item?: string;
+}
 
-const nodes = parseRenderedSlots(await Astro.slots.render('default'));
-const slots = nodes.filter(node => 'tagName' in node).map(node => ({
-  html: serialize(node),
-  class: getAttribute(node, 'class'),
-  style: getAttribute(node, 'style'),
-}));
+const { item, ...rest } = Astro.props;
 ---
 
-<Subgrid
-  role="list"
-  class={className}
-  {...rest}
->
-  {slots.map((slot) => (
-    <li class:list={["card", slot.class]} style={slot.style} set:html={slot.html}></li>
-  ))}
-</Subgrid>
+<wc-cards item={item}>
+  <Subgrid {...rest}><slot /></Subgrid>
+</wc-cards>

package/src/components/GatedTags.astro

@@ -0,0 +1,46 @@
+---
+/**
+ * <GatedTags /> — the one place a third-party tag becomes markup.
+ *
+ * Shared by <Analytics /> and <Ads />, and shared deliberately: the gate is
+ * `type="text/plain"` with the URL on `data-src`, so the browser never parses the
+ * body as script and never fetches the library. An undecided or declining
+ * visitor's page issues no third-party request at all. Consent implemented by
+ * *asking a tracker not to track* is a promise; this is a fact about the document
+ * — and a fact with two implementations is one rewrite away from being neither.
+ *
+ * Decides nothing. Every tag arrives fully resolved from `analytics.ts` or
+ * `ads.ts`, both of which are pure and unit-tested.
+ *
+ * Emits no `preconnect` on purpose: warming a connection at parse time is exactly
+ * the critical-path cost the `idle` strategy exists to avoid.
+ */
+import type { GatedTag } from '../analytics.ts';
+
+interface Props {
+  tags: GatedTag[];
+}
+const { tags } = Astro.props;
+---
+
+{tags.map((tag) => tag.gated
+  ? (
+      <script
+        is:inline
+        type="text/plain"
+        data-vitops-tag
+        data-consent={tag.category}
+        data-strategy={tag.strategy}
+        data-src={tag.src}
+        data-consent-cookies={tag.cookies.length ? tag.cookies.join(',') : undefined}
+        {...tag.attrs}
+        set:html={tag.inline}
+      />
+    )
+  : (
+      <>
+        {tag.inline && <script is:inline set:html={tag.inline} />}
+        {tag.src && <script is:inline async src={tag.src} {...tag.attrs}></script>}
+      </>
+    )
+)}

package/src/components/Subgrid.astro

@@ -1,32 +1,50 @@
 ---
 /**
- * Subgrid — re-emits slotted children as `<li>` items of a `.subgrid` grid, so
- * the tranches inside each one align on shared row lines. Every declaration
- * lives in the framework's `subgrid` pattern (patterns/subgrid.css), which is
- * emitted in all three output formats; this file is markup only.
+ * Subgrid — a grid whose items re-declare the parent's row tracks, so the tranches
+ * inside every item (head, body, footer) land on the same row lines no matter how
+ * much content each one holds. Every declaration lives in the framework's `subgrid`
+ * pattern (patterns/subgrid.css); this file is markup only.
  *
- * Nothing here may reach for a Tailwind utility: Tailwind doesn't scan
- * node_modules, so a class only it can emit is silently never generated — and
- * classes in the generator's TW_CLASH list are stripped from the framework's
- * own tailwind bundle by design.
+ * **The slot is rendered verbatim — author the items yourself.** This used to parse
+ * the slotted HTML and replace each child with an `<li>`, carrying over its class
+ * and style. That existed only because a `<ul>` may contain nothing but `<li>`, and
+ * it cost more than it bought: the child's tag was discarded, and every attribute
+ * had to be copied by hand, so `id`, `data-*` and `aria-*` were silently dropped and
+ * `href` could not survive at all. Passing the slot through means there is nothing to
+ * copy and nothing to lose.
  *
- * Size it from the consumer's own CSS, which keeps media-query overrides
- * working: `--subgrid-cols`, `--subgrid-row-span`, `--subgrid-gap`,
- * `--subgrid-row-gap`. `--num-items` is set here for nth-child-style maths.
+ *   <Subgrid>
+ *     <li class="card subgrid-card">…</li>
+ *   </Subgrid>
+ *
+ * `as` picks the container. It defaults to `ul`, because a set of cards IS a list and
+ * that is what tells assistive tech how many there are and where you are among them.
+ * Use `as="div"` when the items are genuinely not a list.
+ *
+ * **`role="list"` is restored automatically for `ul`/`ol`.** `.subgrid` sets
+ * `list-style: none`, and that stops Safari + VoiceOver announcing a list at all — so
+ * the marker reset silently costs the semantics the `<ul>` was chosen for. Passing
+ * your own `role` wins.
+ *
+ * Size it from the consumer's own CSS, which keeps media-query overrides working:
+ * `--subgrid-cols`, `--subgrid-row-span`, `--subgrid-gap`, `--subgrid-row-gap`.
+ *
+ * For a card whose whole area should be clickable, see `<Cards />` (selectable text,
+ * needs JS) or `.stretched-link` (no JS, text not selectable).
  */
 import type { HTMLAttributes } from 'astro/types';
-import { parseRenderedSlots, getAttribute, serialize, styleList } from '@getvitops/utils';
 
-export interface Props extends HTMLAttributes<'ul'> {};
+export interface Props extends HTMLAttributes<'ul'> {
+  /** Container element. `ul`/`ol` also get `role="list"`. */
+  as?: 'ul' | 'ol' | 'div';
+}
 
-const { class: className, style } = Astro.props;
+const { as: Tag = 'ul', class: className, role, ...rest } = Astro.props;
 
-const nodes = parseRenderedSlots(await Astro.slots.render('default'));
-const slots = nodes.filter(node => 'tagName' in node).map(node  => ({ html: serialize(node), attrs: node.attrs }));
+// Only lists lose semantics to `list-style: none`, so only lists get the role back.
+const listRole = Tag === 'ul' || Tag === 'ol' ? 'list' : undefined;
 ---
 
-<ul class:list={["subgrid", className]} style={styleList({'--num-items': slots.length}, style)}>
-  {slots.map((slot) => (
-    <li class:list={[getAttribute(slot, 'class')]} style={styleList(getAttribute(slot, 'style'))} set:html={slot.html}></li>
-  ))}
-</ul>
+<Tag class:list={['subgrid', className]} role={role ?? listRole} {...rest}>
+  <slot />
+</Tag>

package/src/components/Tree.astro

@@ -65,14 +65,14 @@ const {
   {
     enhance ? (
       <wc-tree label={label} {...rest}>
-        <ul class="tree tree--lines" aria-label={ariaLabel}>
+        <ul class="tree tree--lines" role="list" aria-label={ariaLabel}>
           {items.map((item) => (
             <TreeNode item={item} depth={0} openDepth={openDepth} />
           ))}
         </ul>
       </wc-tree>
     ) : (
-      <ul class="tree tree--lines" aria-label={ariaLabel}>
+      <ul class="tree tree--lines" role="list" aria-label={ariaLabel}>
         {items.map((item) => (
           <TreeNode item={item} depth={0} openDepth={openDepth} />
         ))}

package/src/components/TreeNode.astro

@@ -41,7 +41,7 @@ const isBranch = kids.length > 0;
           </span>
         </summary>
         {item.descriptionHtml && <p class="tree__desc" set:html={item.descriptionHtml} />}
-        <ul class="tree">
+        <ul class="tree" role="list">
           {kids.map((kid) => (
             <Astro.self item={kid} depth={depth + 1} openDepth={openDepth} />
           ))}

package/src/exports/tracking.ts

@@ -0,0 +1,26 @@
+/**
+ * `@getvitops/astro/tracking` — the attribution vocabulary, re-exported.
+ *
+ * The documented conversion flow spans two packages: `<Tracking />` captures the
+ * click ID from `@getvitops/astro`, and the route reads it back with
+ * `parseTrackingCookie` from `@getvitops/utils/tracking`. Under strict pnpm a
+ * consumer cannot resolve the second from app code without adding
+ * `@getvitops/utils` as a direct dependency — so the flow as written in the
+ * changelog needed two installs, and the obvious workaround (importing the same
+ * symbols from `@getvitops/astro`'s index) is the one that drags the whole
+ * integration, and its Node builtins, toward a Worker bundle.
+ *
+ * This entry is the third option and the correct one: one install, and a module
+ * graph that reaches only `@getvitops/utils/tracking` — no `sharp`, no
+ * `node:child_process`, nothing that cannot run in a Worker. It is a separate
+ * build entry for exactly the reason `./routes` is.
+ */
+export * from '@getvitops/utils/tracking';
+
+/**
+ * Where the capture script beacons `tel:` conversions.
+ *
+ * Re-exported here so a consumer writing the route can assert against the same
+ * constant the script uses, rather than retyping the path.
+ */
+export { TRACKING_ENDPOINT } from '../tracking.ts';

package/src/scripts/tracking.ts

@@ -26,6 +26,16 @@ const COOKIE_NAME = '_ac';
 const COOKIE_DAYS = 90;
 const AB_COOKIE = '_ab';
 
+// Where the `tel:` conversion beacon goes. Mirrors TRACKING_ENDPOINT in
+// ../tracking.ts (pinned by `tracking.test.ts`), copied for the same reason as
+// the parameter lists below — this file is inlined into the document.
+//
+// It was previously a bare literal at the call site, which made the contract
+// between this script and the route the consumer writes invisible: name the
+// file anything else and every beacon 404s, conversions vanish, and nothing
+// errors anywhere. The integration now warns at build when the route is absent.
+const TRACK_ENDPOINT = '/api/track';
+
 // Mirrors CLICK_ID_PARAMS/UTM_PARAMS in @getvitops/utils/tracking, deliberately
 // copied rather than imported: this file is inlined into the document by
 // <Tracking />, so a bare import would either fail or drag a module graph into
@@ -39,6 +49,8 @@ const CLICK_ID_PARAMS = [
   'rdt_cid', // Reddit
   'ScCid', // Snapchat
   'msclkid', // Microsoft/Bing
+  'li_fat_id', // LinkedIn
+  'epik', // Pinterest
 ] as const;
 
 const UTM_PARAMS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term'] as const;
@@ -142,6 +154,6 @@ document.addEventListener('click', (e) => {
 
   // Fire-and-forget beacon; don't block the tel: navigation
   if (navigator.sendBeacon) {
-    navigator.sendBeacon('/api/track', JSON.stringify({ event: 'call', phone: link.href }));
+    navigator.sendBeacon(TRACK_ENDPOINT, JSON.stringify({ event: 'call', phone: link.href }));
   }
 });

package/src/tracking.ts

@@ -27,6 +27,19 @@ export interface GetvitopsTrackingOptions {
 /** The cookie the capture script writes. Mirrors `TRACKING_COOKIE` in utils. */
 export const TRACKING_COOKIE = '_ac';
 
+/**
+ * Where the capture script sends its `tel:` conversion beacon.
+ *
+ * The route itself is the consumer's to write (`createConversionRoute()` in
+ * `@getvitops/astro/routes`), so this is the one place the two halves agree on
+ * a path. It was a bare literal inside the inlined script: a consumer who named
+ * the file anything else got a silent 404 on every beacon and lost conversions
+ * with no error anywhere to explain it. Exported so a consumer can assert
+ * against it, mirrored in `scripts/tracking.ts` because that file is inlined
+ * into the document and cannot import, and pinned by `tracking.test.ts`.
+ */
+export const TRACKING_ENDPOINT = '/api/track';
+
 export interface ResolvedTracking {
   enabled: boolean;
   category: TrackingCategory;

package/virtual.d.ts

@@ -52,6 +52,12 @@ declare module 'virtual:getvitops/head' {
     // the others, and the offered consent categories it checks against are known
     // only there.
     tracking: { enabled: boolean; category: string; cookies: string[] } | null;
+    // The site config's `site.ads` block plus this environment's switch —
+    // structurally `{ enabled, properties }` (src/ads.ts), re-typed by <Ads /> on
+    // the way into `resolveAds`. Read in the integration because that is where the
+    // site config is already parsed, and because a pixel is a `marketing` demand
+    // the banner must have a row for.
+    ads: { enabled: boolean; properties: Record<string, unknown> } | null;
   }
   const data: HeadData;
   export default data;