ferst-core 0.8.0 → 0.8.1

package/cms/config.template.yml

@@ -94,6 +94,7 @@ collections:
           - { name: primaryLogoDark, label: Header logo (dark), widget: image, required: false }
           - { name: secondaryLogoLight, label: Footer logo (light), widget: image, required: false }
           - { name: secondaryLogoDark, label: Footer logo (dark), widget: image, required: false }
+          - { name: favicon, label: Browser icon, widget: image, required: false, hint: "A square image (PNG or SVG), at least 48 x 48. Leave blank to use the header logo if it's square, or the site's initial in its brand colour." }
 
       - name: navbar
         label: Navigation

package/components/SiteHeader.astro

@@ -1046,7 +1046,7 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     };
     siteHeader.addEventListener('transitionend', settled);
     siteHeader.addEventListener('transitioncancel', settled);
-    syncHeaderHeight();
+    // The first value is published below, once the crowding check has settled the layout.
   }
 
   // Crowding (#11): on desktop the menu is centred on the header. When the site name (or
@@ -1075,6 +1075,9 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     desktop.addEventListener('change', queue);
     document.fonts?.ready.then(queue);
     fitCheck();
+    // Only now that the menu has its row (or not) is the header its real height: publishing
+    // it before the check told the opener the one-row height until the next frame.
+    syncHeaderHeight();
   }
 
   function openMega() {

package/content/cookies.ts

@@ -1,8 +1,11 @@
 /**
  * Cookie / third-party-storage registry + a scanner that reports which uses are
  * actually active on a given site. This powers the auto-generated cookie policy
- * page: its categories and items are DERIVED from the recipes/templates the site
- * uses — functionality-driven, never hand-written or client-specific.
+ * page: its categories and items are DERIVED from the blocks the site uses AND what
+ * each one actually loads — functionality-driven, never hand-written or
+ * client-specific. A hero playing a YouTube link loads YouTube (listed, and gated by
+ * consent); a hero playing a video file the site hosts loads nothing from anyone (not
+ * listed, plays straight away). A map with no embed address loads nothing.
  *
  * Two canonical categories:
  *   • necessary  — the site's OWN functional storage (no third parties). Always
@@ -11,10 +14,13 @@
  *                  they load. Gated behind the site's shared embed consent, and
  *                  listed only when a recipe/template that uses them is present.
  *
- * Adding a new cookie-using recipe = one entry here (its `blocks` and/or a
- * detection flag); the policy page then lists it automatically wherever it's used.
- * Pure + framework-free so it's unit-testable without a render.
+ * Adding a new cookie-using recipe = one entry here (a `loads` rule reading the
+ * block's own data, and/or a detection flag); the policy page then lists it
+ * automatically wherever it's used. Pure + framework-free so it's unit-testable
+ * without a render.
  */
+import { backgroundEmbed, videoEmbed } from '../lib/video';
+import { isSafeEmbedUrl } from './calendar';
 
 export type CookieCategory = 'necessary' | 'additional';
 
@@ -32,14 +38,40 @@ export interface CookieUse {
   storage: string;
 }
 
+/** A block as stored in a page: its `type`, its own fields, and any child blocks. */
+export type BlockLike = { type: string; blocks?: unknown } & Record<string, unknown>;
+
 /** Additional uses carry detection rules; stripped before returning to the view. */
 interface AdditionalUse extends CookieUse {
-  /** Present if any of these block `type`s appears anywhere on the site. */
-  blocks?: string[];
+  /** Present if any block on the site loads this provider, judged from the block's data. */
+  loads?: (block: BlockLike) => boolean;
   /** Present if the site has a Google Calendar configured (a dedicated page). */
   calendar?: boolean;
 }
 
+/** The video provider a block plays from (a video block's link, a hero's background), if any. */
+function videoProviderOf(b: BlockLike): string | undefined {
+  if (b.type === 'video') return videoEmbed(typeof b.url === 'string' ? b.url : '')?.provider;
+  if (b.type === 'hero') {
+    if (b.layout !== 'media') return undefined; // only the media layout shows a background
+    const video = (b.media as { video?: unknown } | undefined)?.video;
+    return typeof video === 'string' ? backgroundEmbed(video)?.provider : undefined;
+  }
+  return undefined;
+}
+
+/** The provider a block shows a map from (its own label), if it has a map to show. */
+function mapProviderOf(b: BlockLike): string | undefined {
+  const label = typeof b.provider === 'string' && b.provider.trim() ? b.provider.trim() : 'Google Maps';
+  if (b.type === 'mapEmbed') return isSafeEmbedUrl(typeof b.embedUrl === 'string' ? b.embedUrl : '') ? label : undefined;
+  if (b.type === 'locations' && Array.isArray(b.items)) {
+    const hasMap = b.items.some((i: { embedUrl?: unknown }) => isSafeEmbedUrl(typeof i?.embedUrl === 'string' ? i.embedUrl : ''));
+    return hasMap ? label : undefined;
+  }
+  return undefined;
+}
+const isGoogleMaps = (provider: string) => /google/i.test(provider);
+
 /** The site's own functional storage — always present, always on. */
 const NECESSARY: readonly CookieUse[] = [
   {
@@ -67,7 +99,10 @@ const ADDITIONAL: readonly AdditionalUse[] = [
     provider: 'Google',
     purpose: 'Shows embedded maps of where to find us. Google may set cookies when a map loads.',
     storage: 'Third-party cookies set by Google.',
-    blocks: ['locations', 'mapEmbed'],
+    loads: (b) => {
+      const provider = mapProviderOf(b);
+      return provider !== undefined && isGoogleMaps(provider);
+    },
   },
   {
     id: 'google-calendar',
@@ -76,23 +111,46 @@ const ADDITIONAL: readonly AdditionalUse[] = [
     provider: 'Google',
     purpose: 'Shows the parish calendar. Google may set cookies when the calendar loads.',
     storage: 'Third-party cookies set by Google.',
-    blocks: ['calendar'],
+    loads: (b) => b.type === 'calendar',
     calendar: true,
   },
   {
-    id: 'video',
+    id: 'youtube',
+    category: 'additional',
+    name: 'YouTube',
+    provider: 'Google',
+    purpose: 'Plays videos from YouTube on our pages. YouTube may store data on your device and see your IP address when a video plays.',
+    storage: 'Third-party cookies and local storage set by YouTube (Google).',
+    loads: (b) => videoProviderOf(b) === 'YouTube',
+  },
+  {
+    id: 'vimeo',
     category: 'additional',
-    name: 'Embedded video (YouTube / Vimeo)',
-    provider: 'Google (YouTube) or Vimeo',
-    purpose: 'Plays videos embedded on our pages. The provider may set cookies when a video loads.',
-    storage: 'Third-party cookies set by the video provider.',
-    blocks: ['video'],
+    name: 'Vimeo',
+    provider: 'Vimeo',
+    purpose: 'Plays videos from Vimeo on our pages. Vimeo may store data on your device and see your IP address when a video plays.',
+    storage: 'Third-party cookies set by Vimeo.',
+    loads: (b) => videoProviderOf(b) === 'Vimeo',
   },
 ];
 
+/** A map from a provider other than Google, named as the block names it (e.g. OpenStreetMap). */
+function otherMapUse(provider: string): CookieUse {
+  const slug = provider.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+  return {
+    id: `map-${slug}`,
+    category: 'additional',
+    name: provider,
+    provider,
+    purpose: `Shows embedded maps of where to find us. ${provider} may set cookies when a map loads.`,
+    storage: `Third-party cookies set by ${provider}.`,
+  };
+}
+
 export interface CookieScanInput {
-  /** Every block `type` that appears anywhere on the site. */
-  blockTypes: Iterable<string>;
+  /** Every block on the site's pages. Container children (`section` / `grid` / `stack`)
+   *  are walked, so an embed nested in a grid counts. */
+  blocks: Iterable<BlockLike>;
   /** True when the site has a Google Calendar configured (dedicated calendar page). */
   calendarConfigured?: boolean;
 }
@@ -102,21 +160,36 @@ export interface CookiePolicyModel {
   additional: CookieUse[];
 }
 
+/** Every block that renders, walking container children (`section` / `grid` / `stack`).
+ *  A block switched off (`enabled: false`) renders nothing, and neither do its children. */
+function allBlocks(blocks: Iterable<BlockLike>, acc: BlockLike[] = []): BlockLike[] {
+  for (const b of blocks) {
+    if (!b || typeof b !== 'object' || typeof b.type !== 'string' || b.enabled === false) continue;
+    acc.push(b);
+    if (Array.isArray(b.blocks)) allBlocks(b.blocks as BlockLike[], acc);
+  }
+  return acc;
+}
+
 /** Report the cookie uses actually active on a site, grouped by category. */
 export function scanCookieUses(input: CookieScanInput): CookiePolicyModel {
-  const types = new Set(input.blockTypes);
-  const additional = ADDITIONAL.filter(
-    (u) => (u.blocks?.some((b) => types.has(b)) ?? false) || (u.calendar === true && !!input.calendarConfigured),
-  ).map(({ blocks, calendar, ...use }) => use); // drop detection fields from the view model
+  const blocks = allBlocks(input.blocks);
+  const additional: CookieUse[] = ADDITIONAL.filter(
+    (u) => (u.loads ? blocks.some(u.loads) : false) || (u.calendar === true && !!input.calendarConfigured),
+  ).map(({ loads, calendar, ...use }) => use); // drop detection fields from the view model
+  // Maps from other providers, as the blocks name them, listed with the other maps.
+  const otherMaps = new Set(blocks.map(mapProviderOf).filter((p): p is string => p !== undefined && !isGoogleMaps(p)));
+  const afterMaps = additional.findIndex((u) => u.id !== 'google-maps');
+  additional.splice(afterMaps === -1 ? additional.length : afterMaps, 0, ...[...otherMaps].map(otherMapUse));
   return { necessary: NECESSARY.map((u) => ({ ...u })), additional };
 }
-
-/** Every block `type` used in a list of blocks, walking container children
- *  (`section` / `grid` / `stack`), so the policy sees an embed nested in a grid. */
-export function blockTypesIn(blocks: ReadonlyArray<{ type: string; blocks?: unknown }>, acc = new Set<string>()): Set<string> {
-  for (const b of blocks) {
-    acc.add(b.type);
-    if (Array.isArray(b.blocks)) blockTypesIn(b.blocks as Array<{ type: string; blocks?: unknown }>, acc);
-  }
-  return acc;
-}
+
+/** Every block `type` used in a list of blocks, walking container children
+ *  (`section` / `grid` / `stack`), so the policy sees an embed nested in a grid. */
+export function blockTypesIn(blocks: ReadonlyArray<{ type: string; blocks?: unknown }>, acc = new Set<string>()): Set<string> {
+  for (const b of blocks) {
+    acc.add(b.type);
+    if (Array.isArray(b.blocks)) blockTypesIn(b.blocks as Array<{ type: string; blocks?: unknown }>, acc);
+  }
+  return acc;
+}

package/content/schemas.ts

@@ -65,6 +65,10 @@ export const logoSettingsSchema = z.object({
   secondaryLogoLight: z.string().optional(),
   /** Secondary/footer logo — dark theme variant (optional). */
   secondaryLogoDark: z.string().optional(),
+  /** Browser icon (favicon): a square image, PNG or SVG, at least 48×48. Optional: blank
+   *  uses the header logo when it's roughly square, else the site's initial in its brand
+   *  colour (lib/site-icon.mjs). */
+  favicon: z.string().optional(),
   /** Display name + target URL for the secondary/footer logo's link (optional). */
   secondaryLogoLink: z
     .object({

package/integration.mjs

@@ -29,6 +29,10 @@
  *   `404.html`). Cloudflare Pages answers a missing address with it and a real 404 status;
  *   without one it serves the home page with a 200 (a "soft 404"). Skipped automatically
  *   when the site has its own `src/pages/404.astro` or `public/404.html`.
+ * @param {boolean} [options.icons=true] The browser icon (lib/site-icon.mjs): `/favicon.ico` and
+ *   `/apple-touch-icon.png` in every build, from the icon set in the CMS, else a roughly
+ *   square logo, else the site's initial in its brand colour. A site's own files in
+ *   `public/` win.
  * @param {boolean} [options.seo=true] Search signals (lib/seo.mjs): `/robots.txt`, and once
  *   `ferst-site.json` has a `siteUrl`, `/sitemap.xml` and a canonical address on every page.
  *   A test copy (any branch but the production one) is marked noindex on every file. A
@@ -38,6 +42,7 @@
 import { copyFileSync, createReadStream, existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from 'node:fs';
 import { deploymentBranch } from './bin/cms-config.mjs';
 import { seoContext, withNoindexHeader } from './lib/seo.mjs';
+import { writeSiteIcons } from './lib/site-icon.mjs';
 
 /** The self-hosted fonts the engine's CSS requests (/fonts/*.woff2), shipped in the package. */
 const FONTS_DIR = new URL('./fonts/', import.meta.url);
@@ -91,14 +96,17 @@ function readSiteMeta(root) {
 const hasPublicFile = (root, name) => Boolean(root) && existsSync(new URL(`public/${name}`, root));
 
 export default function ferst(options = {}) {
-  const { calendar = true, blog = true, cookiePolicy = true, notFound = true, seo = true } = options;
+  const { calendar = true, blog = true, cookiePolicy = true, notFound = true, icons = true, seo = true } = options;
   const fonts = ferstFonts().hooks;
   /** This build's search context, decided at setup and used again when the build is done. */
   let search = null;
+  /** The site's folder, for the content and public files the build-done steps read. */
+  let siteRoot = null;
   return {
     name: 'ferst',
     hooks: {
       'astro:config:setup': ({ injectRoute, updateConfig, config }) => {
+        siteRoot = config?.root ?? null;
         // Pages + home: the reserved `index` entry renders at `/`, every other
         // `pages` entry at its own slug (see lib/pages.ts `getSiteRoutes`).
         injectRoute({
@@ -189,6 +197,11 @@ export default function ferst(options = {}) {
           const file = new URL('_headers', ctx.dir);
           writeFileSync(file, withNoindexHeader(existsSync(file) ? readFileSync(file, 'utf8') : ''));
         }
+        // The browser icon: /favicon.ico and /apple-touch-icon.png (sharp comes with Astro).
+        if (icons && siteRoot) {
+          const sharp = await import('sharp').then((m) => m.default ?? m).catch(() => null);
+          await writeSiteIcons({ root: siteRoot, outDir: ctx.dir, sharp, warn: (m) => (ctx.logger ? ctx.logger.warn(m) : console.warn(m)) });
+        }
       },
     },
   };

package/layouts/Base.astro

@@ -107,6 +107,9 @@ const noindex = !indexable || import.meta.env.FERST_SEO_PRODUCTION === false;
     {canonical && <link rel="canonical" href={canonical} />}
     {noindex && <meta name="robots" content="noindex" />}
     <title>{title} — {identity.siteTitle}</title>
+    <!-- The browser icon, written into every build by the ferst() integration (lib/site-icon). -->
+    <link rel="icon" href="/favicon.ico" sizes="32x32 48x48" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     {themeCss && <style is:inline set:html={themeCss} />}
     <!-- Self-hosted (see src/styles/fonts.css) — h1 (Poppins 700) and body copy
          (Inter 400) are what virtually every page needs at first paint. -->

package/lib/site-icon.mjs

@@ -0,0 +1,145 @@
+/**
+ * The site's browser icon, written into every build by the ferst() integration:
+ * `/favicon.ico` (32 and 48 px, as PNGs inside the .ico, which every current browser
+ * reads) and `/apple-touch-icon.png` (180 px, opaque, for phones' home screens). Base links
+ * both. A migrated site's old `/favicon.ico` address keeps working this way too.
+ *
+ * Where the icon comes from, first match wins:
+ *   1. the browser icon set in the CMS (logoSettings `favicon`);
+ *   2. the site's header logo, when it's roughly square (a wide wordmark would shrink to an
+ *      unreadable strip);
+ *   3. the site's initial, in white on its brand colour (or in ink on a light brand colour).
+ * A site's own `public/favicon.ico` or `public/apple-touch-icon.png` is never overwritten.
+ * Drawing needs `sharp` (installed with Astro). Without it the build goes on with a warning.
+ */
+import { existsSync, readFileSync, writeFileSync } from 'node:fs';
+
+/** A logo counts as square when its width over height is within these bounds. */
+const SQUARE = [0.8, 1.25];
+
+/** The first letter (or digit) of the site's name, upper case; '' when there's none. */
+export function initialOf(name) {
+  const m = String(name ?? '').match(/[\p{L}\p{N}]/u);
+  return m ? m[0].toLocaleUpperCase('en-GB') : '';
+}
+
+/** Relative luminance of a #rrggbb colour (0 dark … 1 light); null when it isn't one. */
+function luminance(hex) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(String(hex ?? '').trim());
+  if (!m) return null;
+  const [r, g, b] = [0, 2, 4].map((i) => {
+    const c = parseInt(m[1].slice(i, i + 2), 16) / 255;
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+/** The initial on a rounded tile of the brand colour, as SVG. */
+export function monogramSvg({ letter, background, ink = '#1e2433' }) {
+  const bg = luminance(background) === null ? '#1e2433' : background;
+  const fg = (luminance(bg) ?? 0) > 0.5 ? ink : '#ffffff';
+  return (
+    '<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 64 64">' +
+    `<rect width="64" height="64" rx="14" fill="${bg}"/>` +
+    (letter
+      ? `<text x="32" y="44.5" text-anchor="middle" font-family="Poppins, Inter, Helvetica, Arial, sans-serif" font-weight="700" font-size="36" fill="${fg}">${letter}</text>`
+      : '') +
+    '</svg>'
+  );
+}
+
+/** An .ico file holding each image as a PNG (Windows Vista+ and every current browser). */
+export function icoFromPngs(images) {
+  const header = Buffer.alloc(6);
+  header.writeUInt16LE(0, 0); // reserved
+  header.writeUInt16LE(1, 2); // 1 = icon
+  header.writeUInt16LE(images.length, 4);
+  let offset = 6 + 16 * images.length;
+  const entries = images.map(({ size, png }) => {
+    const e = Buffer.alloc(16);
+    e.writeUInt8(size >= 256 ? 0 : size, 0); // width (0 means 256)
+    e.writeUInt8(size >= 256 ? 0 : size, 1); // height
+    e.writeUInt16LE(1, 4); // colour planes
+    e.writeUInt16LE(32, 6); // bits per pixel
+    e.writeUInt32LE(png.length, 8);
+    e.writeUInt32LE(offset, 12);
+    offset += png.length;
+    return e;
+  });
+  return Buffer.concat([header, ...entries, ...images.map((i) => i.png)]);
+}
+
+const readJson = (url) => {
+  try {
+    return JSON.parse(readFileSync(url, 'utf8'));
+  } catch {
+    return {};
+  }
+};
+
+/** A site path such as `/uploads/crest.png` → its file in public/, if it's there. */
+function publicFile(root, path) {
+  if (typeof path !== 'string' || !path.startsWith('/') || path.includes('..')) return null;
+  const file = new URL(`public${path}`, root);
+  return existsSync(file) ? file : null;
+}
+
+/**
+ * Write `favicon.ico` and `apple-touch-icon.png` into the build output. Never throws.
+ * @param {{ root: URL, outDir: URL, sharp: any, warn?: (message: string) => void }} p
+ * @returns {Promise<{ source: 'favicon' | 'logo' | 'initial' | null, wrote: string[] }>}
+ */
+export async function writeSiteIcons({ root, outDir, sharp, warn = (m) => console.warn(m) }) {
+  const wanted = ['favicon.ico', 'apple-touch-icon.png'].filter((name) => !existsSync(new URL(`public/${name}`, root)));
+  if (!wanted.length) return { source: null, wrote: [] };
+  if (!sharp) {
+    warn('[ferst] No browser icon written: the image library (sharp) is not installed.');
+    return { source: null, wrote: [] };
+  }
+  try {
+    const logos = readJson(new URL('src/content/logoSettings/index.json', root));
+    const settings = readJson(new URL('src/content/siteSettings/index.json', root));
+    const theme = readJson(new URL('src/content/themeSettings/index.json', root));
+
+    let source = 'initial';
+    let input = null;
+    const chosen = publicFile(root, logos.favicon);
+    if (chosen) {
+      source = 'favicon';
+      input = readFileSync(chosen);
+    } else {
+      const logo = publicFile(root, logos.primaryLogoLight);
+      if (logo) {
+        const { width, height } = await sharp(readFileSync(logo)).metadata();
+        if (width && height && width / height >= SQUARE[0] && width / height <= SQUARE[1]) {
+          source = 'logo';
+          input = readFileSync(logo);
+        }
+      }
+    }
+    if (!input) {
+      const name = settings.identity?.shortName || settings.identity?.siteTitle || '';
+      input = Buffer.from(monogramSvg({ letter: initialOf(name), background: theme.brand, ink: theme.ink }));
+    }
+
+    const draw = (size) =>
+      sharp(input, { density: 384 })
+        .resize(size, size, { fit: 'contain', background: { r: 0, g: 0, b: 0, alpha: 0 } })
+        .png();
+    const wrote = [];
+    if (wanted.includes('favicon.ico')) {
+      const images = await Promise.all([32, 48].map(async (size) => ({ size, png: await draw(size).toBuffer() })));
+      writeFileSync(new URL('favicon.ico', outDir), icoFromPngs(images));
+      wrote.push('favicon.ico');
+    }
+    if (wanted.includes('apple-touch-icon.png')) {
+      const ground = luminance(theme.surface) === null ? '#ffffff' : theme.surface;
+      writeFileSync(new URL('apple-touch-icon.png', outDir), await draw(180).flatten({ background: ground }).toBuffer());
+      wrote.push('apple-touch-icon.png');
+    }
+    return { source, wrote };
+  } catch (e) {
+    warn(`[ferst] No browser icon written: ${e?.message ?? e}`);
+    return { source: null, wrote: [] };
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferst-core",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "type": "module",
   "description": "Ferst Core — the shared, brand-agnostic client-site system: Astro components, layouts, content schemas, the layered config resolver, and a neutral styling architecture that every client overrides.",
   "license": "BUSL-1.1",

package/routes/cookie-policy.astro

@@ -1,25 +1,26 @@
 ---
 /**
  * The cookie policy (`/cookie-policy`) — INJECTED by the ferst() integration, so the
- * cookie banner's link always resolves. Generated from what this site actually uses:
- * every block type on its pages (third-party embeds such as maps or video) and whether a
- * calendar is configured. A site with its own `src/pages/cookie-policy.astro` keeps it
+ * cookie banner's link always resolves. Generated from what this site actually loads:
+ * the blocks on its pages and their sources (a YouTube video is listed; a video file the
+ * site hosts is not; a map with no address loads nothing) and whether a calendar is
+ * configured. A site with its own `src/pages/cookie-policy.astro` keeps it
  * (the integration skips this route then).
  */
 import Base from '../layouts/Base.astro';
 import CookiePolicy from '../components/CookiePolicy.astro';
 import { getPageEntries } from '../lib/pages';
 import { getCalendarSettings } from '../lib/calendar';
-import { blockTypesIn, scanCookieUses } from '../content/cookies';
+import { scanCookieUses, type BlockLike } from '../content/cookies';
 import { pageSchema } from '../content/blocks';
 
-const blockTypes = new Set<string>();
+const blocks: BlockLike[] = [];
 for (const entry of await getPageEntries()) {
   const page = pageSchema.safeParse(entry.data);
-  if (page.success) blockTypesIn(page.data.blocks as Array<{ type: string; blocks?: unknown }>, blockTypes);
+  if (page.success) blocks.push(...(page.data.blocks as BlockLike[]));
 }
 const cal = await getCalendarSettings();
-const model = scanCookieUses({ blockTypes, calendarConfigured: Boolean(cal.embedUrl) });
+const model = scanCookieUses({ blocks, calendarConfigured: Boolean(cal.embedUrl) });
 ---
 
 <Base title="Cookie Policy" description="What this site stores on your device, and the third-party content it can show.">