create-bearminion 1.3.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # create-bearminion
 
+## 1.5.0
+
+### Patch Changes
+
+- 8a428e7: Sitewide JSON-LD. `site.seo.jsonLd` is optional (up to 10 blocks, 50 KB, so no migration) and the default template emits its blocks on every page. A page's own `seo.jsonLd` still replaces only the generated `WebPage` block, and a block with the same `@id` is emitted once, the page's first. With the conventional ids `<url>/#organization` and `<url>/#website` in the site's blocks, the generated `WebPage` gets `isPartOf` and `publisher` as `@id` references. The Site tab has a Structured data group with an Edit JSON-LD dialog and a Generate button that fills an `Organization` and a `WebSite` from the site name, address and language, replacing blocks with the same `@id`. The logo is added only for a full https address. A warning shows while the site address is still `example.com`. `siteJsonLdIds`, `mergeJsonLd`, `hasJsonLdId`, `generateSiteJsonLd`, `upsertJsonLd` and `isPlaceholderSiteUrl` are exported; themes that emit JSON-LD should use `mergeJsonLd` (see the theme docs).
+
+## 1.4.0
+
+### Minor Changes
+
+- 5d333af: Cookie banner for analytics. `site.consent` (`enabled`, `title`, `body`, `accept`, `reject`, `settings`, `policyLabel`, `policyHref`) is optional, and the banner is on by default: a site that has analytics snippets now asks visitors first, so one that did not want a banner needs `consent.enabled: false` (Site tab, Cookie banner switch). The template sets Google Consent Mode v2 to denied before any tag, keeps the snippets in `<template>` until the visitor accepts, then sends the update and runs them. A footer link, or a corner cookie icon (`reopen: "icon"`), reopens the banner, and withdrawing clears Google Analytics cookies and reloads. The Site tab has a Cookie banner group with the switch and an Edit banner dialog for the text and a privacy policy link. `siteConsentSchema`, `CONSENT_REOPEN`, `consentCopy`, `CONSENT_COPY`, `CONSENT_LIMITS`, `CONSENT_HREF` and `consentTextIssues` are exported. Themes that emit the snippets should hold them back the same way (see the theme docs).
+
 ## 1.3.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bearminion",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Create a BearMinion site: an Astro website you edit by clicking on it.",
   "license": "MIT",
   "author": "Jakub Lange",
@@ -46,7 +46,7 @@
     "@types/node": "^22.19.0",
     "tsdown": "0.23.1",
     "typescript": "~5.9.3",
-    "vitest": "^5.0.4"
+    "vitest": "^5.0.5"
   },
   "scripts": {
     "build": "tsdown",

package/template/README.md

@@ -184,7 +184,7 @@ The site's own images (`logo.png`, `favicon.png`, `og.png`, `hero.png`) live in
 
 ## SEO and sitemap
 
-`Seo.astro` reads the page `seo` object and the site defaults in `site.json`. The document title is `seo.titleTemplate` with `%s` replaced by the page SEO title. Description falls back to the site description. The canonical URL is `seo.canonical` when set, otherwise the page path joined to `site.url`. Robots is `noindex` or `index`, plus `nofollow` or `follow`. Open Graph, Twitter, and WebPage JSON-LD use the same title, description, and image. A page that sets `seo.jsonLd` gets those blocks instead of the generated WebPage block, one script tag per block. `site.analytics.head` and `site.analytics.bodyEnd` are emitted by `Base.astro` in production builds only.
+`Seo.astro` reads the page `seo` object and the site defaults in `site.json`. The document title is `seo.titleTemplate` with `%s` replaced by the page SEO title. Description falls back to the site description. The canonical URL is `seo.canonical` when set, otherwise the page path joined to `site.url`. Robots is `noindex` or `index`, plus `nofollow` or `follow`. Open Graph, Twitter, and WebPage JSON-LD use the same title, description, and image. Every block in `site.seo.jsonLd` (usually an `Organization` and a `WebSite`) is emitted on every page, and the generated WebPage then points at them by `@id`. A page that sets `seo.jsonLd` gets those blocks instead of the generated WebPage block only, never instead of the site's. A block with the same `@id` is emitted once, the page's copy winning. One script tag per block. `site.analytics.head` and `site.analytics.bodyEnd` are emitted by `Base.astro` in production builds only, behind the [cookie banner](#cookie-banner) unless it is switched off.
 
 `astro.config.ts` sets `site` from `site.json` and adds `@astrojs/sitemap`. The filter keeps content pages whose `seo.noindex` is false. `content/pages/preview.json` is the sample noindex page: it is built, it emits `noindex`, and it is absent from the sitemap. `src/pages/robots.txt.ts` points crawlers at `sitemap-index.xml`.
 
@@ -201,6 +201,20 @@ The style guide at `/style-guide` renders every typography size and button varia
 
 People who only use the editor never set a variable: steps 2 and 3 cover the usual setup. The snippets are not sanitised, so give write access to `content/site.json` only to people you would trust with the site's code.
 
+## Cookie banner
+
+When snippets are set and `site.consent.enabled` is not `false`, `consentRequired()` in `src/lib/consent.ts` is true and the banner and the footer link render in every build, dev and previews included, so you see what visitors get. Only a build that ships the snippets (the rules above) holds them back; the others have none to hold. On the live build `Base.astro` changes three things:
+
+- **Before any snippet:** an inline script sets Google Consent Mode v2 to `denied` for `ad_storage`, `ad_user_data`, `ad_personalization` and `analytics_storage`.
+- **The snippets** move into `<template data-consent-snippet="head|body">`, so they are inert. Nothing in them loads or runs.
+- **`ConsentBanner.astro`** is rendered, with a way to reopen it: a footer link (`ConsentLink.astro`, label `site.consent.settings`), or with `site.consent.reopen: "icon"` a fixed rounded cookie icon in the bottom-left corner (`data-consent-icon`, shown only while the banner is closed, labelled by the same text).
+
+`src/lib/consent-client.ts` shows the banner when there is no stored choice, and keeps the choice in `localStorage` (`bm-consent`, 180 days, bump `CONSENT_VERSION` in `consent-store.ts` to ask everyone again). On accept it sends `gtag('consent', 'update', { analytics_storage: 'granted' })`, then rebuilds the held-back scripts into the page, so they run after the update and work for any vendor, not only Google. Withdrawing deletes `_ga`, `_ga_*`, `_gid` and `_gat*` on the host and its parent domains and reloads, because a loaded script cannot be unloaded. Cookies that other tools set are not cleared. The banner has one category, analytics, and Accept and Reject look the same on purpose.
+
+In dev and previews the banner and its choices work, and nothing is loaded or sent, so your own testing stays out of the numbers. `<noscript>` fallbacks in `bodyEnd`, such as the Google Tag Manager iframe, cannot wait for consent and never run while the banner is on.
+
+A theme with its own layout needs three things: render the `template` elements and a banner element carrying `data-consent-banner` (hidden by default) with `data-consent-accept` and `data-consent-reject` buttons, put `data-consent-open` on any element that should reopen it, and import `initConsent` from the script. The default words come from `consentCopy(site.consent)`, which `bearminion` exports.
+
 ## Dev editor
 
 `astro.config.ts` registers `bearminion()`. It is active only while `pnpm dev` is running. The production build does not add editor routes, scripts, or the overlay.

package/template/package.json

@@ -18,8 +18,8 @@
     "@fontsource/instrument-serif": "^5.3.0",
     "@fontsource/jetbrains-mono": "^5.3.0",
     "@tailwindcss/vite": "^4.1.12",
-    "astro": "^7.3.8",
-    "bearminion": "^1.3.0",
+    "astro": "^7.4.1",
+    "bearminion": "^1.5.0",
     "class-variance-authority": "^0.7.1",
     "sharp": "^0.35.5",
     "tailwind-merge": "^3.7.0",
@@ -27,8 +27,8 @@
     "zod": "^4.6.7"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.9.5",
-    "@storybook-astro/framework": "^1.12.0",
+    "@astrojs/check": "^0.9.11",
+    "@storybook-astro/framework": "^1.13.0",
     "@storybook/builder-vite": "^10.6.2",
     "@types/node": "^22.19.0",
     "storybook": "^10.6.2",

package/template/src/components/atoms/ConsentLink.astro

@@ -0,0 +1,16 @@
+---
+interface Props {
+  label: string
+  class?: string
+}
+
+const { label, class: className } = Astro.props
+---
+
+<button
+  type="button"
+  data-consent-open
+  class:list={['cursor-pointer text-left underline-offset-4 transition-colors hover:text-fg hover:underline', className]}
+>
+  {label}
+</button>

package/template/src/components/organisms/ConsentBanner.astro

@@ -0,0 +1,77 @@
+---
+import type { SiteConsent } from 'bearminion'
+import { consentCopy } from '../../lib/consent'
+import { button } from '../atoms/button'
+import Typography from '../atoms/Typography.astro'
+
+interface Props {
+  consent?: SiteConsent
+}
+
+const copy = consentCopy(Astro.props.consent)
+const choiceClass = button({ variant: 'secondary', size: 'sm' })
+const icon = Astro.props.consent?.reopen === 'icon'
+---
+
+{/* Hidden until the script finds no stored choice, so a returning visitor never sees it flash. */}
+<div
+  data-organism="consent-banner"
+  data-consent-banner
+  data-tone="base"
+  role="region"
+  aria-label={copy.title}
+  tabindex="-1"
+  hidden
+  class="fixed inset-x-4 bottom-4 z-50 mx-auto flex max-w-xl flex-col gap-4 rounded-2xl bg-bg p-5 text-fg shadow-xl ring-line outline-none sm:right-auto sm:left-6 sm:mx-0 sm:w-[26rem]"
+>
+  <div class="flex flex-col gap-1.5">
+    <Typography as="p" size="h3">{copy.title}</Typography>
+    <Typography as="p" size="small" color="muted">
+      {copy.body}
+      {
+        copy.policyHref && (
+          <>
+            {' '}
+            <a href={copy.policyHref} class="underline underline-offset-4 hover:text-fg">
+              {copy.policyLabel}
+            </a>
+          </>
+        )
+      }
+    </Typography>
+  </div>
+  {/* Same look and size on both: refusing must be as easy as accepting. */}
+  <div class="flex flex-wrap gap-3">
+    <button type="button" class={choiceClass} data-consent-accept>{copy.accept}</button>
+    <button type="button" class={choiceClass} data-consent-reject>{copy.reject}</button>
+  </div>
+</div>
+
+{/* The corner icon reopens the banner once it is closed, in place of the footer link. */}
+{
+  icon && (
+    <button
+      type="button"
+      data-consent-open
+      data-consent-icon
+      hidden
+      aria-label={copy.settings}
+      title={copy.settings}
+      class="fixed bottom-4 left-4 z-40 grid size-11 cursor-pointer place-items-center rounded-xl bg-bg text-fg shadow-lg ring-line transition-transform hover:scale-105 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fg sm:bottom-6 sm:left-6"
+    >
+      <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M12 3a9 9 0 1 0 9 9 4 4 0 0 1-4-4 4 4 0 0 1-5-5z" />
+        <circle cx="8.5" cy="11" r="0.7" fill="currentColor" />
+        <circle cx="12" cy="16" r="0.7" fill="currentColor" />
+        <circle cx="15.5" cy="14" r="0.7" fill="currentColor" />
+      </svg>
+    </button>
+  )
+}
+
+<script>
+  import { initConsent } from '../../lib/consent-client'
+
+  const banner = document.querySelector<HTMLElement>('[data-consent-banner]')
+  if (banner) initConsent(banner)
+</script>

package/template/src/components/organisms/Footer.astro

@@ -2,15 +2,18 @@
 import type { Site } from './site-definition'
 import { markClass, splitMarkedText } from 'bearminion/marks'
 import { anchorAttrs } from '../../lib/link-attrs'
+import ConsentLink from '../atoms/ConsentLink.astro'
 import LogoMark from '../atoms/LogoMark.astro'
 import Typography from '../atoms/Typography.astro'
 import FooterLinks from './FooterLinks.astro'
 
 interface Props {
   site: Site
+  /** The label of the link that reopens the cookie banner. Unset when the page has no banner. */
+  consentLabel?: string
 }
 
-const { site } = Astro.props
+const { site, consentLabel } = Astro.props
 const { variant, tone, text, legal, badge, columns } = site.footer
 const flatLinks = columns
   .flatMap((column, columnIndex) => column.links.map((link, linkIndex) => ({ link, columnIndex, linkIndex })))
@@ -41,10 +44,11 @@ const wordmark = splitMarkedText(site.name, site.nameMarks)
             ))}
           </ul>
         </div>
-        {legal && (
-          <p class="mt-10 border-t border-[var(--line)] pt-6 text-[0.8125rem] text-muted" data-field="footer.legal">
-            {legal}
-          </p>
+        {(legal || consentLabel) && (
+          <div class="mt-10 flex flex-wrap items-baseline gap-x-6 gap-y-2 border-t border-[var(--line)] pt-6 text-[0.8125rem] text-muted">
+            {legal && <p data-field="footer.legal">{legal}</p>}
+            {consentLabel && <ConsentLink label={consentLabel} />}
+          </div>
         )}
       </div>
     )
@@ -79,10 +83,11 @@ const wordmark = splitMarkedText(site.name, site.nameMarks)
             ))}
           </div>
         </div>
-        {legal && (
-          <p class="mt-12 border-t border-[var(--line)] pt-6 text-[0.8125rem] text-muted" data-field="footer.legal">
-            {legal}
-          </p>
+        {(legal || consentLabel) && (
+          <div class="mt-12 flex flex-wrap items-baseline gap-x-6 gap-y-2 border-t border-[var(--line)] pt-6 text-[0.8125rem] text-muted">
+            {legal && <p data-field="footer.legal">{legal}</p>}
+            {consentLabel && <ConsentLink label={consentLabel} />}
+          </div>
         )}
       </div>
     )
@@ -111,14 +116,17 @@ const wordmark = splitMarkedText(site.name, site.nameMarks)
           </div>
         </div>
         <div class="mt-[clamp(3rem,6cqi,5rem)] flex flex-wrap justify-between gap-x-8 gap-y-2 text-[0.8125rem] text-muted">
-          {legal && <p data-field="footer.legal">{legal}</p>}
+          <div class="flex flex-wrap items-baseline gap-x-6 gap-y-2">
+            {legal && <p data-field="footer.legal">{legal}</p>}
+            {consentLabel && <ConsentLink label={consentLabel} />}
+          </div>
           <a href="#content" class="transition-colors hover:text-fg">
             Back to top ↑
           </a>
         </div>
         <p
           aria-hidden="true"
-          class="mt-4 text-[clamp(4rem,0.5rem+18.2cqi,15.5rem)] leading-[0.78] font-bold tracking-[-0.07em] whitespace-nowrap translate-y-[0.12em]"
+          class="pointer-events-none mt-4 text-[clamp(4rem,0.5rem+18.2cqi,15.5rem)] leading-[0.78] font-bold tracking-[-0.07em] whitespace-nowrap translate-y-[0.12em]"
         >
           {
             wordmark.map((run) => {

package/template/src/components/seo/Seo.astro

@@ -1,5 +1,5 @@
 ---
-import type { Page } from 'bearminion'
+import { hasJsonLdId, mergeJsonLd, siteJsonLdIds, type Page } from 'bearminion'
 import type { Site } from '../organisms/site-definition'
 import { isRemote, resolveLocalAsset } from '../../lib/assets'
 
@@ -31,19 +31,21 @@ const robots = [page.seo.noindex ? 'noindex' : 'index', page.seo.nofollow ? 'nof
 const ogImageSrc = page.seo.ogImage ?? site.seo.ogImage
 const ogImage = ogImageSrc ? absoluteImage(ogImageSrc) : undefined
 
-const jsonLd = {
+// Blocks from site.seo.jsonLd go on every page. When the site describes itself, the generated WebPage points at those blocks.
+const siteBlocks = site.seo.jsonLd ?? []
+const ids = siteJsonLdIds(site.url)
+const webPage = {
   '@context': 'https://schema.org',
   '@type': 'WebPage',
   name: title,
   description,
   url: canonical,
   ...(ogImage ? { image: ogImage } : {}),
-  isPartOf: {
-    '@type': 'WebSite',
-    name: site.name,
-    url: site.url,
-  },
+  isPartOf: hasJsonLdId(siteBlocks, ids.website) ? { '@id': ids.website } : { '@type': 'WebSite', name: site.name, url: site.url },
+  ...(hasJsonLdId(siteBlocks, ids.organization) ? { publisher: { '@id': ids.organization } } : {}),
 }
+// A page's own JSON-LD replaces only the generated WebPage. Blocks with the same @id are emitted once, the page's first.
+const blocks = mergeJsonLd(siteBlocks, page.seo.jsonLd ?? [webPage])
 ---
 
 <title>{title}</title>
@@ -60,9 +62,9 @@ const jsonLd = {
 <meta name="twitter:title" content={title} />
 <meta name="twitter:description" content={description} />
 {ogImage && <meta name="twitter:image" content={ogImage} />}
-{/* Custom JSON-LD replaces the generated WebPage block. `<` is escaped so a value cannot close the script tag. */}
+{/* `<` is escaped so a value cannot close the script tag. */}
 {
-  (page.seo.jsonLd ?? [jsonLd]).map((block) => (
+  blocks.map((block) => (
     <script type="application/ld+json" set:html={JSON.stringify(block).replace(/</g, '\\u003c')} />
   ))
 }

package/template/src/layouts/Base.astro

@@ -1,11 +1,13 @@
 ---
 import { themeCss, type Page } from 'bearminion'
 import type { Site } from '../components/organisms/site-definition'
+import ConsentBanner from '../components/organisms/ConsentBanner.astro'
 import Footer from '../components/organisms/Footer.astro'
 import Header from '../components/organisms/Header.astro'
 import Seo from '../components/seo/Seo.astro'
 import { analyticsEnabled } from '../lib/analytics'
 import { resolveLocalAsset } from '../lib/assets'
+import { CONSENT_DEFAULT_SCRIPT, consentCopy, consentRequired } from '../lib/consent'
 import '../styles/global.css'
 
 interface Props {
@@ -20,7 +22,12 @@ const iconType = icon ? ICON_TYPES[icon.format] : undefined
 const paletteCss = themeCss(site.theme.colors)
 const themeColor = site.theme.mode === 'dark' ? '#1c1e24' : '#f7f8f8'
 // Snippets ship in the live site's build only: not in `astro dev`, not in host previews. See lib/analytics.ts.
-const analytics = analyticsEnabled(process.env, import.meta.env.PROD) ? site.analytics : undefined
+const analyticsOn = analyticsEnabled(process.env, import.meta.env.PROD)
+const analytics = analyticsOn ? site.analytics : undefined
+// With a banner, the snippets wait inside <template> until the visitor accepts. The banner itself shows in dev
+// and previews too, so the owner sees it; only the live build has snippets to hold back. See lib/consent.ts.
+const asks = consentRequired(site)
+const gated = asks && analyticsOn
 ---
 
 <!doctype html>
@@ -30,7 +37,9 @@ const analytics = analyticsEnabled(process.env, import.meta.env.PROD) ? site.ana
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <Seo site={site} page={page} pathname={Astro.url.pathname} />
     <meta name="theme-color" content={themeColor} />
-    {analytics?.head && <Fragment set:html={analytics.head} />}
+    {gated && <script is:inline set:html={CONSENT_DEFAULT_SCRIPT} />}
+    {analytics?.head && !asks && <Fragment set:html={analytics.head} />}
+    {gated && analytics?.head && <template data-consent-snippet="head" set:html={analytics.head} />}
     {/* Always present so the editor can update the palette live. */}
     <style id="bm-theme" is:inline set:html={paletteCss}></style>
     {icon && <link rel="icon" type={iconType} href={icon.src} />}
@@ -46,8 +55,10 @@ const analytics = analyticsEnabled(process.env, import.meta.env.PROD) ? site.ana
     <main id="content">
       <slot />
     </main>
-    <Footer site={site} />
-    {analytics?.bodyEnd && <Fragment set:html={analytics.bodyEnd} />}
+    <Footer site={site} consentLabel={asks && site.consent?.reopen !== 'icon' ? consentCopy(site.consent).settings : undefined} />
+    {analytics?.bodyEnd && !asks && <Fragment set:html={analytics.bodyEnd} />}
+    {gated && analytics?.bodyEnd && <template data-consent-snippet="body" set:html={analytics.bodyEnd} />}
+    {asks && <ConsentBanner consent={site.consent} />}
     <script>
       const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches
       const observer =

package/template/src/lib/consent-client.ts

@@ -0,0 +1,113 @@
+import { CONSENT_KEY, parseChoice, serializeChoice } from './consent-store'
+
+declare global {
+  interface Window {
+    gtag?: (...args: unknown[]) => void
+  }
+}
+
+let activated = false
+
+function stored() {
+  try {
+    return parseChoice(localStorage.getItem(CONSENT_KEY), Date.now())
+  } catch {
+    return null
+  }
+}
+
+function store(analytics: boolean): void {
+  try {
+    localStorage.setItem(CONSENT_KEY, serializeChoice(analytics, Date.now()))
+  } catch {
+    // Storage is blocked: the choice lasts until the page closes.
+  }
+}
+
+/** Puts the held-back snippets into the page. Scripts are rebuilt, because a cloned script does not run. */
+function activate(): void {
+  if (activated) return
+  activated = true
+  for (const template of document.querySelectorAll<HTMLTemplateElement>('template[data-consent-snippet]')) {
+    const target = template.dataset.consentSnippet === 'body' ? document.body : document.head
+    for (const node of Array.from(template.content.childNodes)) {
+      if (!(node instanceof HTMLScriptElement)) {
+        target.append(node.cloneNode(true))
+        continue
+      }
+      const script = document.createElement('script')
+      for (const attribute of Array.from(node.attributes)) script.setAttribute(attribute.name, attribute.value)
+      script.text = node.text
+      target.append(script)
+    }
+  }
+}
+
+/** Removes Google Analytics' cookies from this host and every parent domain. */
+function clearAnalyticsCookies(): void {
+  const parts = location.hostname.split('.')
+  const domains = parts.map((_, index) => parts.slice(index).join('.')).filter((domain) => domain.includes('.'))
+  for (const pair of document.cookie.split(';')) {
+    const name = pair.split('=')[0]?.trim() ?? ''
+    if (name !== '_ga' && name !== '_gid' && !name.startsWith('_ga_') && !name.startsWith('_gat')) continue
+    // biome-ignore lint/suspicious/noDocumentCookie: the Cookie Store API is not in every browser the template supports
+    document.cookie = `${name}=; Max-Age=0; path=/`
+    // biome-ignore lint/suspicious/noDocumentCookie: same
+    for (const domain of domains) document.cookie = `${name}=; Max-Age=0; path=/; domain=${domain}`
+  }
+}
+
+function signal(analytics: boolean): void {
+  window.gtag?.('consent', 'update', { analytics_storage: analytics ? 'granted' : 'denied' })
+  if (analytics) activate()
+}
+
+/** Shows the banner until the visitor has chosen, applies a stored choice, and wires the buttons and the footer link. */
+export function initConsent(banner: HTMLElement): void {
+  let opener: HTMLElement | null = null
+  // The corner icon, when the site uses one, shows only while the banner is closed.
+  const icon = document.querySelector<HTMLElement>('[data-consent-icon]')
+  const sync = () => {
+    if (icon) icon.hidden = !banner.hidden
+  }
+  const open = () => {
+    banner.hidden = false
+    sync()
+    banner.focus()
+  }
+  const close = () => {
+    banner.hidden = true
+    sync()
+    opener?.focus()
+    opener = null
+  }
+
+  const previous = stored()
+  if (previous) signal(previous.analytics)
+  else banner.hidden = false
+  sync()
+
+  function choose(analytics: boolean): void {
+    const wasOn = stored()?.analytics === true || activated
+    store(analytics)
+    if (!analytics && wasOn) {
+      // Loaded scripts cannot be unloaded: clear what they wrote, and reload without them.
+      signal(false)
+      clearAnalyticsCookies()
+      location.reload()
+      return
+    }
+    signal(analytics)
+    close()
+  }
+
+  banner.querySelector('[data-consent-accept]')?.addEventListener('click', () => choose(true))
+  banner.querySelector('[data-consent-reject]')?.addEventListener('click', () => choose(false))
+  for (const link of document.querySelectorAll<HTMLElement>('[data-consent-open]')) {
+    link.addEventListener('click', (event) => {
+      event.preventDefault()
+      opener = link
+      open()
+    })
+  }
+}

package/template/src/lib/consent-store.ts

@@ -0,0 +1,32 @@
+// The visitor's stored choice. No imports, so the banner's script ships without the rest of the library.
+
+export const CONSENT_KEY = 'bm-consent'
+/** Bump to ask everyone again. */
+export const CONSENT_VERSION = 1
+/** A choice is asked again after this long. */
+export const CONSENT_MAX_AGE_MS = 180 * 24 * 60 * 60 * 1000
+
+export interface ConsentChoice {
+  v: number
+  analytics: boolean
+  at: number
+}
+
+export function serializeChoice(analytics: boolean, now: number): string {
+  return JSON.stringify({ v: CONSENT_VERSION, analytics, at: now } satisfies ConsentChoice)
+}
+
+/** The stored choice, or `null` when there is none, it is unreadable, it is from an older version, or it has expired. */
+export function parseChoice(raw: string | null, now: number): ConsentChoice | null {
+  if (!raw) return null
+  try {
+    const value: unknown = JSON.parse(raw)
+    if (typeof value !== 'object' || value === null) return null
+    const { v, analytics, at } = value as Record<string, unknown>
+    if (v !== CONSENT_VERSION || typeof analytics !== 'boolean' || typeof at !== 'number') return null
+    if (at > now || now - at >= CONSENT_MAX_AGE_MS) return null
+    return { v, analytics, at }
+  } catch {
+    return null
+  }
+}

package/template/src/lib/consent.ts

@@ -0,0 +1,29 @@
+import { CONSENT_COPY, consentCopy, type SiteConsent } from 'bearminion'
+
+// The words are the library's, so the editor's banner dialog shows exactly what this theme renders.
+export { CONSENT_COPY, consentCopy }
+
+interface ConsentSite {
+  analytics?: { head?: string; bodyEnd?: string }
+  consent?: SiteConsent
+}
+
+/**
+ * Whether this site asks for consent: the owner has set analytics snippets and has not switched the banner
+ * off. Without snippets there is nothing to ask about. This does not depend on the build: dev and previews
+ * show the banner too, so the owner sees what visitors get. Only a live build also holds the snippets back
+ * (`analyticsEnabled`), because only a live build ships them.
+ */
+export function consentRequired(site: ConsentSite): boolean {
+  if (site.consent?.enabled === false) return false
+  return Boolean(site.analytics?.head?.trim() || site.analytics?.bodyEnd?.trim())
+}
+
+/**
+ * Google Consent Mode v2, basic mode: every signal starts denied, before any tag exists. The snippets stay
+ * inert until the visitor accepts, and `consent-client.ts` then sends the update and adds them. `ad_*` stay
+ * denied: this banner has one category, analytics.
+ */
+export const CONSENT_DEFAULT_SCRIPT =
+  'window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}window.gtag=gtag;' +
+  "gtag('consent','default',{ad_storage:'denied',ad_user_data:'denied',ad_personalization:'denied',analytics_storage:'denied'});"