blume 2.0.2 → 2.1.0

package/src/components/layout/NavSelector.astro

@@ -1,5 +1,5 @@
 ---
-import { withBase } from "../islands/base-path.ts";
+import { withMountedBase } from "../islands/base-path.ts";
 // A top-level navigation selector: a dropdown that switches
 // between partitions of the site — a product, a version, or any grouped set of
 // destinations (`navigation.selectors` in the config). Built on
@@ -19,9 +19,15 @@ interface Props {
    * overflow the viewport — pass `end` there.
    */
   align?: "start" | "end";
+  /**
+   * `bar` (the default) for the header; `drawer` for the top of the nav
+   * drawer, where the trigger spans the drawer, always shows its label, and
+   * opens a panel as wide as itself, so nothing reaches past the drawer edge.
+   */
+  variant?: "bar" | "drawer";
 }
 
-const { selector, route, align = "start" } = Astro.props;
+const { selector, route, align = "start", variant = "bar" } = Astro.props;
 
 // The active item is the deepest path the current route sits under (on a path
 // boundary, so `/api` never claims `/api-reference` routes), falling back to
@@ -37,25 +43,37 @@ const active =
 // version like "v2" or "Latest"): on a phone a bare chevron doesn't say what
 // it switches. Longer product names still collapse to the icon there.
 const label = active?.label ?? selector.label;
-const labelClass = label.length <= 6 ? undefined : "max-sm:hidden";
+let labelClass: string | undefined;
+if (variant === "drawer") {
+  labelClass = "flex-1 text-start";
+} else if (label.length > 6) {
+  labelClass = "max-sm:hidden";
+}
 // The accessible name carries the visible active label too (WCAG 2.5.3,
 // label in name), so a voice-control user can say "v2" to open it — the
 // language switcher's pattern.
 const summaryLabel =
   label === selector.label ? selector.label : `${selector.label}: ${label}`;
 
-const iconButton =
-  "inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-full border border-border bg-background px-3 text-muted-foreground text-sm transition-colors hover:border-foreground hover:text-foreground";
+// Borderless in the header, like the icon buttons and the language switcher;
+// bordered in the drawer, where the trigger spans it.
+const triggerClass =
+  variant === "bar"
+    ? "inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-full px-3 text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground group-open:bg-muted group-open:text-foreground"
+    : "inline-flex h-9 w-full cursor-pointer items-center gap-1.5 rounded-full border border-border bg-background px-3 text-muted-foreground text-sm transition-colors hover:border-foreground hover:text-foreground";
 const menuRowClass =
   "flex w-full items-start gap-2.5 rounded-md px-2 py-1.5 text-start text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=true]:text-foreground";
 ---
 
 {
   selector.items.length > 0 && (
-    <details class="group relative" data-blume-dropdown>
+    <details
+      class:list={["group relative", variant === "drawer" && "w-full"]}
+      data-blume-dropdown
+    >
       <summary
         aria-label={summaryLabel}
-        class={`${iconButton} list-none [&::-webkit-details-marker]:hidden`}
+        class:list={[triggerClass, "list-none [&::-webkit-details-marker]:hidden"]}
       >
         {active?.icon && <Icon name={active.icon} size={16} />}
         <span class={labelClass}>{label}</span>
@@ -66,14 +84,22 @@ const menuRowClass =
         />
       </summary>
       <div
-        class={`absolute z-50 mt-2 min-w-56 max-w-[calc(100vw-1rem)] rounded-blume border border-border bg-background p-1 shadow-xl ${align === "end" ? "end-0" : "start-0"}`}
+        class:list={[
+          "absolute z-50 mt-2 rounded-blume border border-border bg-background p-1 shadow-xl",
+          variant === "drawer"
+            ? "inset-x-0"
+            : [
+                "min-w-56 max-w-[calc(100vw-1rem)]",
+                align === "end" ? "end-0" : "start-0",
+              ],
+        ]}
         data-blume-dropdown-panel
       >
         {selector.items.map((item) => (
           <a
             aria-current={item.path === active?.path ? "true" : undefined}
             class={menuRowClass}
-            href={withBase(item.path)}
+            href={withMountedBase(item.path)}
           >
             {item.icon && <Icon class="mt-0.5" name={item.icon} size={16} />}
             <span class="flex-1">

package/src/components/layout/NavTabMenu.astro

@@ -10,7 +10,7 @@
 // delegate from `document`, so client-router swaps need no re-init.
 import type { NavTab } from "../../core/types.ts";
 import Icon from "../Icon.astro";
-import { withBase } from "../islands/base-path.ts";
+import { withMountedBase } from "../islands/base-path.ts";
 
 interface Props {
   tab: NavTab;
@@ -60,7 +60,7 @@ const drawerRowClass =
           <a
             aria-current={itemCurrent(item.path)}
             class={barRowClass}
-            href={withBase(item.path)}
+            href={withMountedBase(item.path)}
           >
             {item.icon && <Icon class="mt-0.5" name={item.icon} size={16} />}
             <span class="flex-1">
@@ -102,7 +102,7 @@ const drawerRowClass =
             <a
               aria-current={itemCurrent(item.path)}
               class={drawerRowClass}
-              href={withBase(item.path)}
+              href={withMountedBase(item.path)}
             >
               {item.icon && (
                 <Icon class="shrink-0" name={item.icon} size={14} />

package/src/components/layout/NavTree.astro

@@ -4,7 +4,7 @@ import type { UIStrings } from "../../core/i18n-ui.ts";
 import type { NavNode } from "../../core/types.ts";
 import { methodColor } from "../colors.ts";
 import Icon from "../Icon.astro";
-import { withBase } from "../islands/base-path.ts";
+import { withBase, withMountedBase } from "../islands/base-path.ts";
 import Self from "./NavTree.astro";
 import NavTreeCache from "./NavTreeCache.astro";
 import NavTreeScript from "./NavTreeScript.astro";
@@ -82,6 +82,16 @@ const n = { ...EN_UI.nav, ...strings };
 /** The DOM id of a drill-in panel, which its drill button controls. */
 const navPanelId = (id: string): string => `blume-nav-panel-${id}`;
 
+/**
+ * A page row's href. A row backed by a page links a route Blume generates, so
+ * the deployment base always goes on — even over a route that starts with the
+ * base's own name. A config `href` link (no backing page) is authored, and
+ * keeps a base written by hand. Group rows link their index page the same way
+ * a backed page row does.
+ */
+const pageHref = (item: Extract<NavNode, { kind: "page" }>): string =>
+  item.pageId ? withMountedBase(item.route) : withBase(item.route);
+
 const badgeBase =
   "shrink-0 rounded-full px-1.5 py-0.5 font-medium text-[0.65rem] leading-none";
 // HTTP-method, AsyncAPI-action, and GraphQL operation-kind badges (from a
@@ -191,7 +201,7 @@ const initialId =
                       : undefined
                   }
                   class="flex-1 truncate rounded-[0.65rem] px-1 py-1 font-semibold text-foreground text-sm transition-colors hover:bg-muted"
-                  href={withBase(panel.route)}
+                  href={withMountedBase(panel.route)}
                 >
                   {panel.label}
                 </a>
@@ -257,7 +267,7 @@ const initialId =
                 <a
                   aria-current={current}
                   class="blume-nav-link truncate"
-                  href={withBase(item.route)}
+                  href={pageHref(item)}
                 >
                   {item.label}
                 </a>
@@ -269,7 +279,7 @@ const initialId =
               <a
                 aria-current={current}
                 class="blume-nav-link"
-                href={withBase(item.route)}
+                href={pageHref(item)}
               >
                 <span class="flex items-center gap-2">
                   {item.icon && (
@@ -348,7 +358,7 @@ const initialId =
                           : undefined
                       }
                       class="blume-nav-summary-link"
-                      href={withBase(item.route)}
+                      href={withMountedBase(item.route)}
                     >
                       {item.icon && (
                         <Icon
@@ -432,7 +442,7 @@ const initialId =
                     isGroupRowCurrent(item, currentRoute) ? "page" : undefined
                   }
                   class="blume-nav-heading-link"
-                  href={withBase(item.route)}
+                  href={withMountedBase(item.route)}
                 >
                   {item.icon && (
                     <Icon

package/src/components/layout/PageActions.astro

@@ -262,7 +262,7 @@ const menuRowClass =
 <script>
   import { copyDeferredText, copyText, flashLabel } from "../copy-feedback.ts";
   import { installDropdownDismiss } from "../dropdown-dismiss.ts";
-  import { prefixBase } from "../islands/base-path.ts";
+  import { mountBase } from "../islands/base-path.ts";
   import { rafThrottle } from "../raf-throttle.ts";
 
   const CHAT_URLS: Record<string, (q: string) => string> = {
@@ -390,9 +390,10 @@ hr { border: 0; border-top: 1px solid #ddd; margin: 2em 0; }`;
 
     // `data-md` is the base-less logical route; the raw-markdown endpoint is a
     // generated page route, so it's served under the deployment base like any
-    // other page. Prefix at emit time (the Search-island pattern).
+    // other page, even when it starts with the base's own name. Mount it at
+    // emit time (the Search-island pattern).
     const mdRoute = root.getAttribute("data-md") ?? "";
-    const md = prefixBase(import.meta.env.BASE_URL, mdRoute);
+    const md = mountBase(import.meta.env.BASE_URL, mdRoute);
     const copiedLabel = root.getAttribute("data-i18n-copied") || "Copied!";
     const copyFailedLabel =
       root.getAttribute("data-i18n-copy-failed") || "Copy failed";

package/src/components/layout/PageFeedback.astro

@@ -1,14 +1,22 @@
 ---
+import data from "blume:data";
+
 import { EN_UI } from "../../core/i18n-ui.ts";
 import type { UIStrings } from "../../core/i18n-ui.ts";
 import Icon from "../Icon.astro";
+import { COMMENT_MAX_LENGTH } from "./page-feedback.ts";
 
 interface Props {
+  /** Ask for a written comment after the rating (`feedback.comments`). */
+  comments?: boolean;
   /** Localized feedback labels. */
   strings?: UIStrings["feedback"];
 }
 
-const { strings } = Astro.props;
+const { comments = false, strings } = Astro.props;
+// Answers go through analytics, so under a consent layer the rating waits,
+// hidden, until the reader allows analytics (`page-feedback.ts` shows it).
+const waitsForConsent = data.config.consent !== null;
 // Merge over the English baseline per key (rather than `strings ?? …`) so a
 // partial — or empty `{}` — strings object still resolves every label to a
 // default, matching the pattern PageActions and Search use.
@@ -20,61 +28,58 @@ const buttonClass =
 
 <section
   aria-label={f.question}
-  class="mx-auto mt-12 flex max-w-content items-center justify-between gap-4 border-border border-t pt-6"
+  class="mx-auto mt-12 max-w-content border-border border-t pt-6"
   data-blume-page-feedback
+  hidden={waitsForConsent}
 >
-  <p class="text-muted-foreground text-sm">{f.question}</p>
-  <div class="flex items-center gap-2" data-feedback-actions>
-    <button class={buttonClass} data-feedback-value="yes" type="button">
-      <Icon name="thumbs-up" size={16} />
-      {f.yes}
-    </button>
-    <button class={buttonClass} data-feedback-value="no" type="button">
-      <Icon name="thumbs-down" size={16} />
-      {f.no}
-    </button>
+  <div class="flex items-center justify-between gap-4">
+    <p class="text-muted-foreground text-sm">{f.question}</p>
+    <div class="flex items-center gap-2" data-feedback-actions>
+      <button class={buttonClass} data-feedback-value="yes" type="button">
+        <Icon name="thumbs-up" size={16} />
+        {f.yes}
+      </button>
+      <button class={buttonClass} data-feedback-value="no" type="button">
+        <Icon name="thumbs-down" size={16} />
+        {f.no}
+      </button>
+    </div>
+    <p
+      class="hidden text-muted-foreground text-sm focus:outline-none"
+      data-feedback-thanks
+      role="status"
+      tabindex="-1"
+    >
+      {f.thanks}
+    </p>
   </div>
-  <p
-    class="hidden text-muted-foreground text-sm focus:outline-none"
-    data-feedback-thanks
-    role="status"
-    tabindex="-1"
-  >
-    {f.thanks}
-  </p>
+  {
+    comments && (
+      <form class="mt-4 grid gap-2" data-feedback-form hidden>
+        <label class="text-muted-foreground text-sm" for="blume-feedback-comment">
+          {f.comment}
+        </label>
+        <textarea
+          class="w-full resize-y rounded-blume border border-border bg-background px-3 py-2 text-foreground text-sm outline-none transition-colors focus:border-foreground"
+          id="blume-feedback-comment"
+          maxlength={COMMENT_MAX_LENGTH}
+          name="comment"
+          rows="3"
+        ></textarea>
+        <div>
+          <button class={buttonClass} type="submit">
+            {f.send}
+          </button>
+        </div>
+      </form>
+    )
+  }
 </section>
 
 <script>
-  import { track } from "./analytics-client.ts";
-
-  // Run on the initial load and again after every client-router swap, which
-  // rebuilds the rating widget from server-rendered markup — the handlers
-  // below always bind to the freshly swapped-in elements.
-  const initFeedback = () => {
-    const root = document.querySelector("[data-blume-page-feedback]");
-    if (!root) {
-      return;
-    }
-    const actions = root.querySelector("[data-feedback-actions]");
-    const thanks = root.querySelector("[data-feedback-thanks]");
-    for (const button of root.querySelectorAll("[data-feedback-value]")) {
-      button.addEventListener("click", () => {
-        track("feedback", {
-          helpful: button.getAttribute("data-feedback-value") ?? "",
-          path: location.pathname,
-          title: document.title,
-        });
-        actions?.classList.add("hidden");
-        thanks?.classList.remove("hidden");
-        // The clicked button just disappeared under focus; hand focus to the
-        // (live) thanks line so the reader isn't dropped at the top of the page.
-        if (thanks instanceof HTMLElement) {
-          thanks.focus();
-        }
-      });
-    }
-  };
+  import { initFeedback, syncFeedbackVisibility } from "./page-feedback.ts";
 
   initFeedback();
   document.addEventListener("astro:after-swap", initFeedback);
+  addEventListener("blume:consent", syncFeedbackVisibility);
 </script>

package/src/components/layout/PageLayout.astro

@@ -5,8 +5,8 @@ import { createIconSprite } from "../icon-sprite.ts";
 // page that wants Blume's chrome (document shell, header, theme, fonts) without
 // the docs sidebar + prose + TOC grid that RootLayout hard-codes. It renders the
 // `<head>`, theme/banner pre-paint scripts, banner, and header, then a single
-// full-width `<slot />` for the body (plus an optional `footer` slot rendered
-// after `<main>`). Import it into a custom page and pull props from `blume:data`:
+// full-width `<slot />` for the body, then an optional `footer` slot, or the
+// site footer `footer` configures when the page fills no slot. Import it into a custom page and pull props from `blume:data`:
 //
 //   import PageLayout from "blume/components/layout/PageLayout.astro";
 //   import data from "blume:data";
@@ -39,12 +39,19 @@ import {
 import { buildStructuredData } from "../../seo/jsonld.ts";
 import { normalizeXHandle } from "../../seo/x-handle.ts";
 import Icon from "../Icon.astro";
-import { stripBase, withBase } from "../islands/base-path.ts";
+import { stripBase, withBase, withMountedBase } from "../islands/base-path.ts";
+import { routeSetFor } from "../../core/locale-links.ts";
+import {
+  browserLanguageTargets,
+  LOCALE_REDIRECT_SCRIPT,
+} from "./locale-redirect.ts";
 import { pageDirection, pageLocale } from "./page-locale.ts";
 import { searchLocaleFor } from "./search-locale.ts";
 import "blume:theme";
 import { ClientRouter } from "astro:transitions";
 import Analytics from "./Analytics.astro";
+import ConsentBanner from "./ConsentBanner.astro";
+import ConsentHead from "./ConsentHead.astro";
 import Banner from "./Banner.astro";
 import DiscoveryLinks from "./DiscoveryLinks.astro";
 import Favicon from "./Favicon.astro";
@@ -57,6 +64,9 @@ import {
 import Header from "./Header.astro";
 import { currentTabForRoute } from "./nav-utils.ts";
 import NavTabMenu from "./NavTabMenu.astro";
+import DrawerSwitchers from "./DrawerSwitchers.astro";
+import SiteFooter from "./SiteFooter.astro";
+import SiteMetatags from "./SiteMetatags.astro";
 import WebMcp from "./WebMcp.astro";
 
 interface Props {
@@ -195,6 +205,8 @@ const clientDataJson = clientData
   : null;
 
 const strings = ui ?? EN_UI;
+// The consent adapter (`consent`), site-wide: analytics waits for the reader.
+const consent = data.config.consent;
 // Merge over the English defaults so a label missing from a translation (or
 // from a not-yet-regenerated snapshot) still renders instead of coming out
 // blank — the PageActions pattern.
@@ -219,7 +231,7 @@ const activeTab = currentTabForRoute(navigation.tabs, route, navigation.root);
 // llms.txt index), and the homepage HTTP `Link` header already advertises it,
 // so the head is its HTML counterpart on hosts that can't set that header.
 // Advertising a mirror for any other custom route would 404.
-const markdownMirror = route === "/" ? withBase("/index.md") : null;
+const markdownMirror = route === "/" ? withMountedBase("/index.md") : null;
 
 // Derive canonical + og:image from the site URL the same way the catch-all does
 // for content pages, so a custom page gets both for free. The matching OG card
@@ -230,8 +242,9 @@ const markdownMirror = route === "/" ? withBase("/index.md") : null;
 const ogSlug = route === "/" ? "index" : route.slice(1);
 const ogCardGenerated = !Astro.routePattern.includes("[");
 // Absolute URLs carry the deployment base too (`site + base + route`), since the
-// page is served under it. `withBase` handles a root base as a no-op.
-const basedRoute = withBase(route);
+// page is served under it — even when the route starts with the base's own
+// name. `withMountedBase` handles a root base as a no-op.
+const basedRoute = withMountedBase(route);
 // The schema accepts a trailing-slash site URL (`https://docs.example.com/`);
 // strip it before joining with the root-relative route so canonical/og URLs
 // don't come out double-slashed — the catch-all strips it the same way.
@@ -253,7 +266,7 @@ const absolutizeOgImage = (value: string): string =>
 const resolvedOgImage = ogImage
   ? absolutizeOgImage(ogImage)
   : ogEnabled && ogCardGenerated && siteBase
-    ? `${siteBase}${encodeURI(withBase(`/og/${ogSlug}.png`))}`
+    ? `${siteBase}${encodeURI(withMountedBase(`/og/${ogSlug}.png`))}`
     : null;
 // Only the generated card has a known size and format, so its dimensions are
 // declared for crawlers; a user-supplied `ogImage` could be any image.
@@ -290,6 +303,25 @@ const bannerKey = banner?.dismissible ? banner.key : null;
 // Start the page's icon sprite before anything renders an icon (see
 // icon-sprite.ts); <IconSprite /> at the end of the body emits it.
 createIconSprite(Astro.locals);
+
+// A visitor landing on the default language's home page goes to their
+// browser's language (`i18n.routeByBrowserLanguage`, see locale-redirect.ts).
+const localeTargets = browserLanguageTargets({
+  basePath: data.config.basePath,
+  i18n: data.config.i18n,
+  route,
+  routes: routeSetFor(data.routes),
+});
+const localeRedirect = localeTargets
+  ? JSON.stringify(
+      Object.fromEntries(
+        Object.entries(localeTargets).map(([code, path]) => [
+          code,
+          withMountedBase(path),
+        ])
+      )
+    )
+  : null;
 ---
 
 <!doctype html>
@@ -297,6 +329,16 @@ createIconSprite(Astro.locals);
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    {
+      localeRedirect && (
+        <script
+          data-default={data.config.i18n?.defaultLocale}
+          data-targets={localeRedirect}
+          is:inline
+          set:html={LOCALE_REDIRECT_SCRIPT}
+        />
+      )
+    }
     {/* Client-side navigation, matching RootLayout: same-origin link clicks
         swap the DOM in place instead of tearing the document down, so no
         browser paints a blank frame between pages. */}
@@ -362,6 +404,7 @@ createIconSprite(Astro.locals);
     {description && <meta content={description} name="twitter:description" />}
     {xSite && <meta content={xSite} name="twitter:site" />}
     {xCreator && <meta content={xCreator} name="twitter:creator" />}
+    <SiteMetatags tags={data.config.metatags} />
     {/* Agent discovery on every page, so a custom page built on PageLayout is
         covered without passing a prop, the same way the docs pages are. */}
     <DiscoveryLinks discovery={discovery} markdownMirror={markdownMirror} />
@@ -380,6 +423,7 @@ createIconSprite(Astro.locals);
       )
     }
     <script data-mode={themeMode} is:inline set:html={THEME_INIT_SCRIPT} />
+    {consent && <ConsentHead consent={consent} />}
     <Analytics analytics={analytics} />
   </head>
   <body class="bg-background font-sans text-foreground antialiased">
@@ -408,8 +452,27 @@ createIconSprite(Astro.locals);
       transparent={transparentHeader}
     />
     <main id="blume-content"><slot /></main>
-    <slot name="footer" />
+    {
+      Astro.slots.has("footer") ? (
+        <slot name="footer" />
+      ) : (
+        <SiteFooter
+          footer={data.config.footer}
+          locale={locale}
+          navigation={navigation}
+          ui={strings}
+        />
+      )
+    }
     <WebMcp />
+    {
+      consent?.kind === "native" && (
+        <ConsentBanner
+          policy={consent.options.policy}
+          strings={strings.consent}
+        />
+      )
+    }
     {
       // Mobile nav for chrome-only pages: the header's inline tab bar is hidden
       // below `lg` and there's no sidebar drawer, so surface the tabs in a
@@ -424,6 +487,12 @@ createIconSprite(Astro.locals);
             data-blume-nav-drawer
             id="blume-nav-drawer"
           >
+            <DrawerSwitchers
+              localeSwitch={localeSwitch}
+              route={route}
+              selectors={navigation.selectors}
+              switcherStrings={strings.languageSwitcher}
+            />
             <nav aria-label={navStrings.sections}>
               <ul class="m-0 list-none p-0">
                 {navigation.tabs.map((tab) => (
@@ -439,7 +508,7 @@ createIconSprite(Astro.locals);
                       <a
                         aria-current={tab === activeTab ? "page" : undefined}
                         class="flex items-center gap-2 rounded-[0.65rem] px-2.5 py-1.5 font-medium text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=page]:bg-muted aria-[current=page]:text-foreground"
-                        href={withBase(tab.href ?? tab.path)}
+                        href={withMountedBase(tab.href ?? tab.path)}
                       >
                         {tab.icon && (
                           <Icon class="shrink-0" name={tab.icon} size={14} />

package/src/components/layout/Pagination.astro

@@ -1,5 +1,5 @@
 ---
-import { withBase } from "../islands/base-path.ts";
+import { withMountedBase } from "../islands/base-path.ts";
 import { EN_UI } from "../../core/i18n-ui.ts";
 import type { UIStrings } from "../../core/i18n-ui.ts";
 import type { FlatPage } from "./nav-utils.ts";
@@ -31,7 +31,7 @@ const s = { ...EN_UI.page, ...strings };
       {prev ? (
         <a
           class="flex max-w-[48%] flex-1 items-center gap-2 rounded-blume border border-border px-4 py-3 text-foreground transition-colors hover:border-foreground"
-          href={withBase(prev.route)}
+          href={withMountedBase(prev.route)}
         >
           <Icon class="rtl:-scale-x-100" name="arrow-left" size={16} />
           <span class="min-w-0">
@@ -47,7 +47,7 @@ const s = { ...EN_UI.page, ...strings };
       {next && (
         <a
           class="ms-auto flex max-w-[48%] flex-1 items-center justify-end gap-2 rounded-blume border border-border px-4 py-3 text-end text-foreground transition-colors hover:border-foreground"
-          href={withBase(next.route)}
+          href={withMountedBase(next.route)}
         >
           <span class="min-w-0">
             <span class="block text-muted-foreground text-xs">

package/src/components/layout/ReferenceLayout.astro

@@ -4,6 +4,7 @@ import { createIconSprite } from "../icon-sprite.ts";
 import "blume:theme";
 import data from "blume:data";
 import type {
+  BlumeBanner,
   BlumeDataConfig,
   BlumeFavicon,
   DiscoveryHeadLinks,
@@ -14,6 +15,8 @@ import { NEW_TAB_HINT_ID } from "../../core/new-tab.ts";
 import type { FontHead } from "../../theme/fonts.ts";
 import type { Navigation } from "../../core/types.ts";
 import Analytics from "./Analytics.astro";
+import ConsentBanner from "./ConsentBanner.astro";
+import ConsentHead from "./ConsentHead.astro";
 import WebMcp from "./WebMcp.astro";
 import Banner from "./Banner.astro";
 import DiscoveryLinks from "./DiscoveryLinks.astro";
@@ -27,6 +30,7 @@ import {
 import Header from "./Header.astro";
 import { pageDirection, pageLocale } from "./page-locale.ts";
 import { searchLocaleFor } from "./search-locale.ts";
+import SiteMetatags from "./SiteMetatags.astro";
 
 // A minimal shell for the Scalar API/AsyncAPI reference: Blume's banner + navbar
 // on top, then a full-height region the reference mounts into. Unlike RootLayout
@@ -50,12 +54,7 @@ interface Props {
   } | null;
   favicon?: BlumeFavicon | null;
   appleIcon?: BlumeFavicon | null;
-  banner?: {
-    content: string;
-    link?: { text: string; href: string };
-    dismissible: boolean;
-    key: string;
-  } | null;
+  banner?: BlumeBanner | null;
   analytics?: BlumeDataConfig["analytics"] | null;
   navigation: Navigation;
   route: string;
@@ -110,6 +109,8 @@ const locale = pageLocale(data.config.i18n, localeProp, Astro.currentLocale);
 const dir = dirProp ?? pageDirection(data.config.i18n, locale);
 
 const strings = ui ?? EN_UI;
+// The consent adapter (`consent`), site-wide: analytics waits for the reader.
+const consent = data.config.consent;
 const navStrings = { ...EN_UI.nav, ...strings.nav };
 // Scope search to the reference page's language on a multi-locale site.
 const searchLocale = searchLocaleFor(data.config.i18n, locale);
@@ -128,6 +129,7 @@ createIconSprite(Astro.locals);
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     {noindex && <meta name="robots" content="noindex" />}
     <title>{pageTitle}</title>
+    <SiteMetatags tags={data.config.metatags} />
     <Favicon favicon={favicon} appleIcon={appleIcon} />
     <Fonts cssVars={fontCssVars ?? []} />
     <DiscoveryLinks discovery={discovery} />
@@ -137,6 +139,7 @@ createIconSprite(Astro.locals);
       )
     }
     <script data-mode={themeMode} is:inline set:html={THEME_INIT_SCRIPT} />
+    {consent && <ConsentHead consent={consent} />}
     <Analytics analytics={analytics} />
   </head>
   <body class="bg-background font-sans text-foreground antialiased">
@@ -170,6 +173,14 @@ createIconSprite(Astro.locals);
       <script is:inline set:html={SCALAR_THEME_INIT_SCRIPT} />
     </div>
     <WebMcp />
+    {
+      consent?.kind === "native" && (
+        <ConsentBanner
+          policy={consent.options.policy}
+          strings={strings.consent}
+        />
+      )
+    }
   <IconSprite />
   </body>
 </html>