create-bearminion 1.2.1 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # create-bearminion
 
+## 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
+
+- 4de8434: Custom JSON-LD and analytics snippets. A page's `seo.jsonLd` holds parsed JSON-LD blocks that replace the generated `WebPage` markup, and `site.analytics` (`head`, `bodyEnd`) holds raw snippets the template emits on the live site only: not in `astro dev`, and not in Vercel or Netlify preview deployments. Nothing needs configuring; `BEARMINION_ANALYTICS=on|off` overrides the choice for hosts that cannot be told apart. The Pages tab shows an SEO card (search result preview and badges) with an Edit SEO button that opens a dialog for every SEO field, including JSON-LD with validation and script-tag unwrapping. The Site tab has an Analytics & scripts group. `parseJsonLdInput`, `formatJsonLd`, `jsonLdWarnings`, `jsonLdSchema` and `siteAnalyticsSchema` are exported. Themes need to render the two new fields (see the theme docs).
+
+### Patch Changes
+
+- 826b0ac: `create-bearminion` speaks in the BearMinion voice: the prompts, progress lines, errors, next steps and `--help` text. The messages say the same things, with fewer words and a grumpier bear.
+- 2032a4a: Template: footer columns stay left-aligned on small screens instead of piling up on the right. They stack in one column on phones, two columns on larger phones, three columns on tablets, and sit beside the brand block from wide layouts up.
+
 ## 1.2.1
 
 ### Patch Changes

package/dist/cli.mjs

@@ -943,7 +943,7 @@ function runCommand(pm, script) {
 //#endregion
 //#region src/args.ts
 var UsageError = class extends Error {};
-const HELP = `Create a BearMinion site: an Astro website you edit by clicking on it.
+const HELP = `Scaffold a BearMinion site: Astro, plain JSON content, an editor you click on. No database, no drama.
 
 Usage
   npm create bearminion@latest [directory] -- [options]
@@ -951,11 +951,11 @@ Usage
 Options
   --name <name>     Site name (default: from the directory)
   --url <address>   Public address, such as https://example.com (you can set it later in the editor)
-  --storybook       Include Storybook, a workshop for the theme's components
-  --pm <manager>    Package manager to install with: ${PACKAGE_MANAGERS.join(", ")} (default: the one you ran)
-  --no-install      Do not install dependencies
-  --no-git          Do not create a git repository
-  -y, --yes         Ask nothing; use the defaults for anything not given
+  --storybook       Include Storybook (off by default; it is a lot of extra packages)
+  --pm <manager>    Package manager: ${PACKAGE_MANAGERS.join(", ")} (default: the one you ran)
+  --no-install      Skip installing dependencies
+  --no-git          Skip git init
+  -y, --yes         Ask nothing, use defaults for whatever is missing
   -h, --help        Show this help
   -v, --version     Show the version
 `;
@@ -968,9 +968,9 @@ function parseCliArgs(argv) {
 		throw new UsageError(error instanceof Error ? error.message : String(error));
 	}
 	const { values, positionals } = parsed;
-	if (positionals.length > 1) throw new UsageError(`Expected one directory, got ${positionals.length}: ${positionals.join(" ")}`);
+	if (positionals.length > 1) throw new UsageError(`One directory, please. Got ${positionals.length}: ${positionals.join(" ")}`);
 	const pm = values.pm;
-	if (pm !== void 0 && !isPackageManager(pm)) throw new UsageError(`Unknown package manager "${pm}". Use one of: ${PACKAGE_MANAGERS.join(", ")}.`);
+	if (pm !== void 0 && !isPackageManager(pm)) throw new UsageError(`"${pm}" isn't a package manager I know. Use one of: ${PACKAGE_MANAGERS.join(", ")}.`);
 	return {
 		...positionals[0] !== void 0 ? { directory: positionals[0] } : {},
 		...values.name !== void 0 ? { name: values.name } : {},
@@ -1269,9 +1269,9 @@ async function main() {
 		return 0;
 	}
 	const interactive = !options.yes && Boolean(process.stdin.isTTY && process.stdout.isTTY);
-	intro("BearMinion");
+	intro("🐻 Oh, great. Another website. Let's make this quick.");
 	const directory = options.directory ?? (interactive ? await ask(text({
-		message: "Where should the site go?",
+		message: "Which folder? A new or empty one.",
 		placeholder: `./${DEFAULT_DIRECTORY}`,
 		defaultValue: DEFAULT_DIRECTORY
 	})) : DEFAULT_DIRECTORY);
@@ -1279,11 +1279,11 @@ async function main() {
 	const targetDir = path.resolve(directory);
 	const blocking = await blockingEntries(targetDir);
 	if (blocking.length > 0) {
-		cancel(`${directory} is not empty (${preview(blocking)}). Choose a new or empty folder.`);
+		cancel(`Grrr. ${directory} isn't empty (${preview(blocking)}). Pick another folder, or clean up your mess first.`);
 		return 1;
 	}
 	const siteName = options.name ?? (interactive ? await ask(text({
-		message: "What is the site called?",
+		message: "What are we calling this masterpiece?",
 		placeholder: toSiteName(directory),
 		defaultValue: toSiteName(directory)
 	})) : toSiteName(directory));
@@ -1292,23 +1292,23 @@ async function main() {
 	if (options.url !== void 0) {
 		const normalized = normalizeUrl(options.url);
 		if (!normalized) {
-			cancel(`"${options.url}" is not a web address. Use one such as https://example.com.`);
+			cancel(`"${options.url}" isn't a web address. Try something like https://example.com.`);
 			return 1;
 		}
 		url = normalized;
 	} else if (interactive) {
 		const answer = await ask(text({
-			message: "What is its web address?",
-			placeholder: "https://example.com  (Enter to skip, set it later under Site → URL)",
+			message: "What's its web address?",
+			placeholder: "https://example.com  (Enter to skip. Set it later under Site → URL)",
 			defaultValue: "",
-			validate: (value) => !value || normalizeUrl(value) ? void 0 : "Enter a full address such as https://example.com, or leave it empty."
+			validate: (value) => !value || normalizeUrl(value) ? void 0 : "That's not a web address. Try https://example.com, or leave it empty."
 		}));
 		if (answer === void 0) return cancelled();
 		url = answer ? normalizeUrl(answer) ?? void 0 : void 0;
 	}
 	const pm = options.packageManager ?? detectPackageManager(process.env.npm_config_user_agent);
 	const spin = spinner();
-	spin.start("Copying the template");
+	spin.start("Unpacking the template");
 	await scaffold({
 		templateDir: path.join(packageRoot, "template"),
 		targetDir,
@@ -1317,25 +1317,25 @@ async function main() {
 		...url ? { url } : {},
 		storybook: options.storybook
 	});
-	spin.stop(`Created ${siteName} in ${path.relative(process.cwd(), targetDir) || "."}${options.storybook ? ", with Storybook" : ""}`);
+	spin.stop(`Done. ${siteName} lives in ${path.relative(process.cwd(), targetDir) || "."}${options.storybook ? ", Storybook included" : ""}`);
 	let installed = false;
 	if (options.install) {
-		spin.start(`Installing dependencies with ${pm}`);
+		spin.start(`Fetching the bare minimum with ${pm}`);
 		const result = await install(pm, targetDir);
 		installed = result.ok;
-		if (result.ok) spin.stop("Installed dependencies");
+		if (result.ok) spin.stop("Dependencies installed. Could have been worse.");
 		else {
 			spin.error(`${pm} install failed`);
 			log.message(result.output);
-			log.warn(`Run ${pm} install in the folder to try again.`);
+			log.warn(`Sort out whatever that is, then run ${pm} install in the folder.`);
 		}
 	}
 	if (options.git) {
-		if (insideGitRepository(path.dirname(targetDir))) log.info("Inside an existing git repository, so no new one was created.");
+		if (insideGitRepository(path.dirname(targetDir))) log.info("Already inside a git repository, so I didn't start another one.");
 		else {
 			const git = initGit(targetDir);
-			if (!git.initialized) log.warn(`Could not create a git repository: ${git.reason ?? "git is not available"}`);
-			else if (!git.committed) log.warn("Created a git repository, but the first commit failed. Set your name and email with git config, then commit.");
+			if (!git.initialized) log.warn(`Couldn't create a git repository: ${git.reason ?? "git is not available"}`);
+			else if (!git.committed) log.warn("Repository created, first commit failed. Set your name and email with git config, then commit. Not my department.");
 		}
 	}
 	const steps = [
@@ -1343,8 +1343,8 @@ async function main() {
 		...installed ? [] : [`${pm} install`],
 		runCommand(pm, "dev")
 	];
-	note(`${steps.join("\n")}\n\nOpen the address it prints and press Ctrl+E (Cmd+E on a Mac) to edit.`, "Next steps");
-	outro(url ? `Ready to publish at ${url}.` : "Set your web address under Site → URL before you publish.");
+	note(`${steps.join("\n")}\n\nOpen the address it prints, press Ctrl+E (Cmd+E on a Mac) and click on things.`, "Next steps");
+	outro(url ? `Ready to publish at ${url}. I'm going back to sleep.` : "Set your web address under Site → URL before you publish. I'll be asleep.");
 	return 0;
 }
 /** Awaits a prompt; `undefined` when the person pressed Ctrl+C or Esc. */
@@ -1353,7 +1353,7 @@ async function ask(prompt) {
 	return typeof value === "string" ? value : void 0;
 }
 function cancelled() {
-	cancel("Nothing was created.");
+	cancel("Nothing was created. Back to sleep.");
 	return 1;
 }
 function preview(entries) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bearminion",
-  "version": "1.2.1",
+  "version": "1.4.0",
   "description": "Create a BearMinion site: an Astro website you edit by clicking on it.",
   "license": "MIT",
   "author": "Jakub Lange",

package/template/README.md

@@ -184,12 +184,37 @@ 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.
+`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, 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`.
 
 The style guide at `/style-guide` renders every typography size and button variant. `/variants` renders every section, header, and footer variant. They live in `src/dev/` and only `npm run dev` serves them (the `devPages` integration in `astro.config.ts`), so they never reach the built site. Delete that integration and the folder if you do not want them.
 
+## Analytics
+
+`site.analytics.head` and `site.analytics.bodyEnd` are raw HTML snippets (the editor's Site → Analytics & scripts). `Base.astro` writes `head` at the end of `<head>` and `bodyEnd` before `</body>`, and only when `analyticsEnabled()` in `src/lib/analytics.ts` says the build is the live site's:
+
+1. `BEARMINION_ANALYTICS=on` or `off` decides, when set. `1`, `true` and `yes` also mean on; `0`, `false` and `no` mean off.
+2. Otherwise a production build is required, so `npm run dev` sends no visits.
+3. Vercel (`VERCEL_ENV`) and Netlify (`NETLIFY`, `CONTEXT`) say which deployment is building, so only their production deployments include the snippets.
+4. On any other host every production build includes them. Cloudflare Pages and similar hosts do not say which build is a preview. Set `BEARMINION_ANALYTICS=off` in the host's preview environment (Cloudflare lets you set variables per environment), or `on` to test a snippet locally with `npm run dev`.
+
+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

@@ -19,7 +19,7 @@
     "@fontsource/jetbrains-mono": "^5.3.0",
     "@tailwindcss/vite": "^4.1.12",
     "astro": "^7.3.8",
-    "bearminion": "^1.2.1",
+    "bearminion": "^1.4.0",
     "class-variance-authority": "^0.7.1",
     "sharp": "^0.35.5",
     "tailwind-merge": "^3.7.0",

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>
     )
@@ -68,9 +72,9 @@ const wordmark = splitMarkedText(site.name, site.nameMarks)
               </span>
             )}
           </div>
-          <div class="flex flex-wrap justify-end gap-x-8 gap-y-10 @min-[40rem]:ml-auto">
+          <div class="grid w-full grid-cols-1 gap-x-8 gap-y-10 @min-[26rem]:grid-cols-2 @min-[40rem]:grid-cols-3 @min-[56rem]:ml-auto @min-[56rem]:flex @min-[56rem]:w-auto @min-[56rem]:flex-wrap @min-[56rem]:justify-end">
             {columns.map((column, columnIndex) => (
-              <div class="flex w-40 min-w-32 flex-col gap-3.5">
+              <div class="flex min-w-0 flex-col gap-3.5 @min-[56rem]:w-40 @min-[56rem]:min-w-32">
                 <p class="font-mono text-[0.6875rem] tracking-[0.08em] text-muted uppercase" data-field={`footer.columns.${columnIndex}.title`}>
                   {column.title}
                 </p>
@@ -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>
     )
@@ -99,9 +104,9 @@ const wordmark = splitMarkedText(site.name, site.nameMarks)
               </Typography>
             )}
           </div>
-          <div class="flex flex-wrap justify-end gap-x-8 gap-y-8 @min-[40rem]:ml-auto">
+          <div class="grid w-full grid-cols-1 gap-x-8 gap-y-8 @min-[26rem]:grid-cols-2 @min-[40rem]:grid-cols-3 @min-[56rem]:ml-auto @min-[56rem]:flex @min-[56rem]:w-auto @min-[56rem]:flex-wrap @min-[56rem]:justify-end">
             {columns.map((column, columnIndex) => (
-              <div class="flex min-w-32 flex-col gap-3.5">
+              <div class="flex min-w-0 flex-col gap-3.5 @min-[56rem]:min-w-32">
                 <p class="font-mono text-[0.6875rem] tracking-[0.08em] text-muted uppercase" data-field={`footer.columns.${columnIndex}.title`}>
                   {column.title}
                 </p>
@@ -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

@@ -60,4 +60,9 @@ const jsonLd = {
 <meta name="twitter:title" content={title} />
 <meta name="twitter:description" content={description} />
 {ogImage && <meta name="twitter:image" content={ogImage} />}
-<script type="application/ld+json" set:html={JSON.stringify(jsonLd).replace(/</g, '\\u003c')} />
+{/* Custom JSON-LD replaces the generated WebPage block. `<` is escaped so a value cannot close the script tag. */}
+{
+  (page.seo.jsonLd ?? [jsonLd]).map((block) => (
+    <script type="application/ld+json" set:html={JSON.stringify(block).replace(/</g, '\\u003c')} />
+  ))
+}

package/template/src/layouts/Base.astro

@@ -1,10 +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 {
@@ -18,6 +21,13 @@ const ICON_TYPES: Record<string, string> = { png: 'image/png', jpg: 'image/jpeg'
 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 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>
@@ -27,6 +37,9 @@ const themeColor = site.theme.mode === 'dark' ? '#1c1e24' : '#f7f8f8'
     <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} />
+    {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} />}
@@ -42,7 +55,10 @@ const themeColor = site.theme.mode === 'dark' ? '#1c1e24' : '#f7f8f8'
     <main id="content">
       <slot />
     </main>
-    <Footer site={site} />
+    <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/analytics.ts

@@ -0,0 +1,33 @@
+/** Build-time environment, as `process.env` gives it. */
+export type Env = Record<string, string | undefined>
+
+const ON = new Set(['on', '1', 'true', 'yes'])
+const OFF = new Set(['off', '0', 'false', 'no'])
+
+function readSwitch(value: string | undefined): boolean | undefined {
+  const word = value?.trim().toLowerCase()
+  if (word === undefined) return undefined
+  if (ON.has(word)) return true
+  if (OFF.has(word)) return false
+  return undefined
+}
+
+/**
+ * Whether this build puts `site.analytics` into its pages (`Base.astro` calls it with `process.env` and
+ * `import.meta.env.PROD`). Nobody has to set anything:
+ *
+ * 1. `BEARMINION_ANALYTICS=on|off` decides, when someone sets it (for hosts that cannot be told apart, or a
+ *    local test).
+ * 2. Otherwise only a production build counts, so `astro dev` sends no visits.
+ * 3. Vercel (`VERCEL_ENV`) and Netlify (`NETLIFY`, `CONTEXT`) say which deployment this is, so their preview
+ *    deployments send none either.
+ * 4. Any other host: every production build counts.
+ */
+export function analyticsEnabled(env: Env, production: boolean): boolean {
+  const override = readSwitch(env.BEARMINION_ANALYTICS)
+  if (override !== undefined) return override
+  if (!production) return false
+  if (env.VERCEL_ENV) return env.VERCEL_ENV === 'production'
+  if (env.NETLIFY === 'true') return env.CONTEXT === 'production'
+  return true
+}

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'});"