@inneropen/marvin-astro 2.0.0 → 2.1.1

package/src/components/CookieTable.astro

@@ -0,0 +1,99 @@
+---
+/**
+ * CookieTable — the cookies and storage entries a site sets, one table per category.
+ *
+ * Server-rendered, no JavaScript. Pass `site.privacy.cookies` (or a pre-filtered list); `category`
+ * narrows it to one table. When any listed entry needs consent (the consent banner is on), the
+ * `marvin-consent` entry the banner itself stores is added as a necessary row unless it is
+ * already listed or `includeConsentEntry={false}`, and a <noscript> notice explains why optional
+ * cookies are off without JavaScript.
+ *
+ * Styles come from `privacy.css`: zero specificity, themeable with `--marvin-privacy-*`.
+ */
+import type { CookieCategory, PrivacyCookie } from '../privacy.js';
+import { COOKIE_CATEGORIES, cookiesNeedConsent } from '../privacy.js';
+import {
+  CATEGORY_DESCRIPTIONS,
+  CONSENT_STORAGE_KEY,
+  DEFAULT_MAX_AGE_DAYS,
+  formatMaxAge,
+  privacyLabels,
+  type PrivacyLabels,
+} from './privacy-text.js';
+import './privacy.css';
+
+interface Props {
+  cookies: PrivacyCookie[] | null | undefined;
+  /** Render only this category. */
+  category?: CookieCategory;
+  /** Add the `marvin-consent` row when the banner is required. Default true. */
+  includeConsentEntry?: boolean;
+  /** Must match `<ConsentBanner maxAgeDays>`; shown as the consent entry's duration. */
+  maxAgeDays?: number;
+  labels?: Partial<Omit<PrivacyLabels, 'categories'>> & {
+    categories?: Partial<Record<CookieCategory, string>>;
+  };
+  class?: string;
+}
+
+const {
+  cookies: rawCookies,
+  category,
+  includeConsentEntry = true,
+  maxAgeDays = DEFAULT_MAX_AGE_DAYS,
+  class: className,
+} = Astro.props;
+const labels = privacyLabels(Astro.props.labels);
+const listed = rawCookies ?? [];
+const bannerRequired = cookiesNeedConsent(listed);
+
+const all: PrivacyCookie[] =
+  bannerRequired && includeConsentEntry && !listed.some((cookie) => cookie.name === CONSENT_STORAGE_KEY)
+    ? [
+        ...listed,
+        {
+          name: CONSENT_STORAGE_KEY,
+          provider: labels.thisSite,
+          purpose: labels.consentCookiePurpose,
+          duration: formatMaxAge(maxAgeDays),
+          category: 'necessary',
+        },
+      ]
+    : listed;
+
+const groups = COOKIE_CATEGORIES.filter((name) => !category || name === category)
+  .map((name) => ({ name, rows: all.filter((cookie) => cookie.category === name) }))
+  .filter((group) => group.rows.length > 0);
+---
+
+{bannerRequired && (
+  <noscript><p class="marvin-privacy__notice">{labels.noscript}</p></noscript>
+)}
+{groups.map((group) => (
+  <div class="marvin-privacy__table-wrap">
+  <table class={['marvin-privacy__table', 'marvin-privacy__table--cookies', className].filter(Boolean).join(' ')} data-category={group.name}>
+    <caption>
+      {labels.categories[group.name]}
+      <small>{CATEGORY_DESCRIPTIONS[group.name]}</small>
+    </caption>
+    <thead>
+      <tr>
+        <th scope="col">{labels.cookieName}</th>
+        <th scope="col">{labels.provider}</th>
+        <th scope="col">{labels.purpose}</th>
+        <th scope="col">{labels.duration}</th>
+      </tr>
+    </thead>
+    <tbody>
+      {group.rows.map((cookie) => (
+        <tr>
+          <th scope="row"><code>{cookie.name}</code></th>
+          <td data-label={labels.provider}>{cookie.provider}</td>
+          <td data-label={labels.purpose}>{cookie.purpose}</td>
+          <td data-label={labels.duration}>{cookie.duration}</td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+  </div>
+))}

package/src/components/PrivacyPolicy.astro

@@ -0,0 +1,118 @@
+---
+/**
+ * PrivacyPolicy — the structured half of a privacy / cookie policy page.
+ *
+ * Renders, from `site.privacy`: the entry's own prose (the default slot, e.g. the policy entry's
+ * body HTML), then the controller block, the processors table, the cookies tables and the
+ * "Last reviewed" date. Server-rendered, zero JavaScript. Sections with nothing to say are left
+ * out. `headingLevel` is the level of the section headings (sub-sections never go past h6).
+ *
+ * ```astro
+ * <PrivacyPolicy privacy={site.privacy}>
+ *   <Fragment set:html={entry.bodyHtml} />
+ * </PrivacyPolicy>
+ * ```
+ */
+import { formatDisplayDate } from '../format.js';
+import type { CookieCategory, SitePrivacy } from '../privacy.js';
+import { cookiesNeedConsent } from '../privacy.js';
+import CookieTable from './CookieTable.astro';
+import ProcessorTable from './ProcessorTable.astro';
+import { DEFAULT_MAX_AGE_DAYS, privacyLabels, type PrivacyLabels } from './privacy-text.js';
+import './privacy.css';
+
+interface Props {
+  privacy: SitePrivacy | null | undefined;
+  /** Level of the section headings, 1–6. Default 2. */
+  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+  includeConsentEntry?: boolean;
+  maxAgeDays?: number;
+  labels?: Partial<Omit<PrivacyLabels, 'categories'>> & {
+    categories?: Partial<Record<CookieCategory, string>>;
+  };
+  class?: string;
+}
+
+const {
+  privacy,
+  headingLevel = 2,
+  includeConsentEntry = true,
+  maxAgeDays = DEFAULT_MAX_AGE_DAYS,
+  class: className,
+} = Astro.props;
+const labels = privacyLabels(Astro.props.labels);
+
+const level = Math.min(6, Math.max(1, Math.trunc(headingLevel)));
+const Heading = `h${level}` as 'h2';
+const controller = privacy?.controller;
+const mailto = (email: string | undefined) =>
+  email && /^[^\s@<>"]+@[^\s@<>"]+$/.test(email) ? `mailto:${email}` : undefined;
+const contactHref = mailto(controller?.contactEmail);
+const dpoHref = mailto(controller?.dpoEmail);
+const lastReviewed = privacy?.consent.lastReviewed;
+const hasCookies = (privacy?.cookies.length ?? 0) > 0;
+const needsConsent = cookiesNeedConsent(privacy?.cookies ?? []);
+const hasSlot = Astro.slots.has('default');
+---
+
+{(privacy || hasSlot) && (
+  <div class={['marvin-privacy', className].filter(Boolean).join(' ')}>
+    {hasSlot && (
+      <div class="marvin-privacy__prose"><slot /></div>
+    )}
+
+    {controller && (
+      <section class="marvin-privacy__section" id="marvin-privacy-controller">
+        <Heading>{labels.controller}</Heading>
+        <dl class="marvin-privacy__facts">
+          <dt>{labels.legalName}</dt>
+          <dd>{controller.legalName}</dd>
+          {controller.address && (<><dt>{labels.address}</dt><dd>{controller.address}</dd></>)}
+          {controller.contactEmail && (
+            <>
+              <dt>{labels.contact}</dt>
+              <dd>{contactHref ? <a href={contactHref}>{controller.contactEmail}</a> : controller.contactEmail}</dd>
+            </>
+          )}
+          {controller.euRepresentative && (
+            <><dt>{labels.euRepresentative}</dt><dd>{controller.euRepresentative}</dd></>
+          )}
+          {controller.dpoEmail && (
+            <>
+              <dt>{labels.dpo}</dt>
+              <dd>{dpoHref ? <a href={dpoHref}>{controller.dpoEmail}</a> : controller.dpoEmail}</dd>
+            </>
+          )}
+        </dl>
+      </section>
+    )}
+
+    {privacy && privacy.processors.length > 0 && (
+      <section class="marvin-privacy__section" id="marvin-privacy-processors">
+        <Heading>{labels.processors}</Heading>
+        <ProcessorTable processors={privacy.processors} labels={Astro.props.labels} />
+      </section>
+    )}
+
+    {privacy && hasCookies && (
+      <section class="marvin-privacy__section" id="marvin-privacy-cookies">
+        <Heading>{labels.cookies}</Heading>
+        {needsConsent && (
+          <p><a href="#marvin-privacy-cookies" data-marvin-consent-open>{labels.changeSettings}</a></p>
+        )}
+        <CookieTable
+          cookies={privacy.cookies}
+          includeConsentEntry={includeConsentEntry}
+          maxAgeDays={maxAgeDays}
+          labels={Astro.props.labels}
+        />
+      </section>
+    )}
+
+    {lastReviewed && (
+      <p class="marvin-privacy__reviewed">
+        {labels.lastReviewed}: <time datetime={lastReviewed}>{formatDisplayDate(lastReviewed)}</time>
+      </p>
+    )}
+  </div>
+)}

package/src/components/ProcessorTable.astro

@@ -0,0 +1,64 @@
+---
+/**
+ * ProcessorTable — third parties that handle visitor data on the site's behalf.
+ *
+ * Server-rendered, no JavaScript. Pass `site.privacy.processors`. Region and transfer basis show
+ * as Marvin stored them; DPA / privacy-policy links render only when they are http(s) URLs.
+ */
+import type { CookieCategory, PrivacyProcessor } from '../privacy.js';
+import { privacyLabels, type PrivacyLabels } from './privacy-text.js';
+import { safeLinkHref } from './embed-frame.js';
+import './privacy.css';
+
+interface Props {
+  processors: PrivacyProcessor[] | null | undefined;
+  labels?: Partial<Omit<PrivacyLabels, 'categories'>> & {
+    categories?: Partial<Record<CookieCategory, string>>;
+  };
+  class?: string;
+}
+
+const { processors, class: className } = Astro.props;
+const labels = privacyLabels(Astro.props.labels);
+const rows = (processors ?? []).map((processor) => ({
+  processor,
+  dpa: safeLinkHref(processor.dpaUrl),
+  privacy: safeLinkHref(processor.privacyUrl),
+}));
+---
+
+{rows.length > 0 && (
+  <div class="marvin-privacy__table-wrap">
+  <table class={['marvin-privacy__table', 'marvin-privacy__table--processors', className].filter(Boolean).join(' ')}>
+    <thead>
+      <tr>
+        <th scope="col">{labels.processor}</th>
+        <th scope="col">{labels.purpose}</th>
+        <th scope="col">{labels.data}</th>
+        <th scope="col">{labels.region}</th>
+        <th scope="col">{labels.transferBasis}</th>
+        <th scope="col">{labels.links}</th>
+      </tr>
+    </thead>
+    <tbody>
+      {rows.map(({ processor, dpa, privacy }) => (
+        <tr>
+          <th scope="row">{processor.name}</th>
+          <td data-label={labels.purpose}>{processor.purpose}</td>
+          <td data-label={labels.data}>{processor.dataCategories.join(', ')}</td>
+          <td data-label={labels.region}>{processor.region}</td>
+          <td data-label={labels.transferBasis}>{processor.transferBasis}</td>
+          <td data-label={labels.links}>
+            {(dpa || privacy) && (
+              <ul class="marvin-privacy__links">
+                {privacy && <li><a href={privacy} rel="noopener noreferrer">{labels.privacyPolicy}</a></li>}
+                {dpa && <li><a href={dpa} rel="noopener noreferrer">{labels.dpa}</a></li>}
+              </ul>
+            )}
+          </td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+  </div>
+)}

package/src/components/consent.css

@@ -0,0 +1,192 @@
+/*
+ * Base styles for <ConsentBanner>.
+ *
+ * Every selector is wrapped in :where() so it carries zero specificity: any site rule wins.
+ * Theme through the custom properties below rather than overriding the rules.
+ *
+ *   --marvin-consent-bg       bar and dialog background (default #fff; #1c1c1c in dark mode)
+ *   --marvin-consent-fg       text colour (default #1a1a1a; #f2f2f2 in dark mode)
+ *   --marvin-consent-accent   button fill and focus ring (default #1a1a1a; #f2f2f2 in dark mode)
+ *   --marvin-consent-radius   corner radius (default 0.5rem)
+ *   --marvin-consent-font     font (default inherit)
+ *   --marvin-consent-shadow   bar shadow (default 0 -4px 24px rgb(0 0 0 / 0.18))
+ *   --marvin-consent-z        bar z-index (default 1000)
+ *
+ * The buttons share one equal-width column each, so Accept all and Reject all are the same size.
+ * Button text uses the background colour, so any bg/accent pair that contrasts keeps the buttons
+ * readable. Accept all and Reject all share one rule, so they can never differ in prominence.
+ *
+ * Markup:
+ *   div.marvin-consent
+ *     section.marvin-consent__bar[hidden]   (the runtime removes `hidden` when a choice is needed)
+ *       div.marvin-consent__text   p.marvin-consent__title  p.marvin-consent__body
+ *       div.marvin-consent__actions   button.marvin-consent__button (x3)
+ *     dialog.marvin-consent__dialog   div.marvin-consent__category (x n)  div.marvin-consent__actions
+ */
+
+:where(.marvin-consent) {
+  --_bg: var(--marvin-consent-bg, #fff);
+  --_fg: var(--marvin-consent-fg, #1a1a1a);
+  --_accent: var(--marvin-consent-accent, #1a1a1a);
+  font-family: var(--marvin-consent-font, inherit);
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+@media (prefers-color-scheme: dark) {
+  :where(.marvin-consent) {
+    --_bg: var(--marvin-consent-bg, #1c1c1c);
+    --_fg: var(--marvin-consent-fg, #f2f2f2);
+    --_accent: var(--marvin-consent-accent, #f2f2f2);
+  }
+}
+
+:where(.marvin-consent__bar) {
+  position: fixed;
+  inset: auto 0 0 0;
+  z-index: var(--marvin-consent-z, 1000);
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem 2rem;
+  max-height: 40vh;
+  overflow-y: auto;
+  padding: 1rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
+  background: var(--_bg);
+  color: var(--_fg);
+  box-shadow: var(--marvin-consent-shadow, 0 -4px 24px rgb(0 0 0 / 0.18));
+}
+
+/* `display` above would beat the UA's [hidden] rule; this keeps `hidden` meaning hidden. */
+:where(.marvin-consent__bar)[hidden] {
+  display: none;
+}
+
+/* The bar covers the foot of the page while it is up; keep focused elements clear of it. */
+:where(html:has(.marvin-consent__bar:not([hidden]))) {
+  scroll-padding-bottom: 40vh;
+}
+
+:where(.marvin-consent__text) {
+  flex: 1 1 24rem;
+  max-width: 48rem;
+}
+
+:where(.marvin-consent__title) {
+  margin: 0 0 0.25rem;
+  font-size: 1.125rem;
+  font-weight: 700;
+}
+
+:where(.marvin-consent__body, .marvin-consent__description, .marvin-consent__cookies) {
+  margin: 0;
+}
+
+:where(.marvin-consent a) {
+  color: inherit;
+  text-decoration: underline;
+}
+
+:where(.marvin-consent__actions) {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  gap: 0.75rem;
+}
+
+:where(.marvin-consent__button) {
+  box-sizing: border-box;
+  min-height: 2.75rem;
+  min-width: 7rem;
+  padding: 0.5rem 1.25rem;
+  border: 2px solid var(--_accent);
+  border-radius: var(--marvin-consent-radius, 0.5rem);
+  background: var(--_accent);
+  color: var(--_bg);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+:where(.marvin-consent__button--customise) {
+  background: transparent;
+  color: var(--_fg);
+}
+
+:where(.marvin-consent__button:focus-visible, .marvin-consent input:focus-visible) {
+  outline: 3px solid var(--_accent);
+  outline-offset: 3px;
+}
+
+:where(.marvin-consent__dialog) {
+  box-sizing: border-box;
+  width: min(34rem, calc(100vw - 2rem));
+  max-height: calc(100vh - 2rem);
+  overflow-y: auto;
+  padding: 1.5rem;
+  border: 0;
+  border-radius: var(--marvin-consent-radius, 0.5rem);
+  background: var(--_bg);
+  color: var(--_fg);
+  box-shadow: 0 8px 40px rgb(0 0 0 / 0.35);
+}
+
+:where(.marvin-consent__dialog)::backdrop {
+  background: rgb(0 0 0 / 0.55);
+}
+
+:where(.marvin-consent__category) {
+  margin: 1rem 0;
+  padding-top: 1rem;
+  border-top: 1px solid color-mix(in srgb, var(--_fg) 25%, transparent);
+}
+
+:where(.marvin-consent__label) {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  font-weight: 600;
+}
+
+:where(.marvin-consent__label input) {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0;
+  accent-color: var(--_accent);
+}
+
+:where(.marvin-consent__description, .marvin-consent__cookies) {
+  margin-top: 0.25rem;
+  padding-left: 1.875rem;
+}
+
+:where(.marvin-consent__dialog .marvin-consent__actions) {
+  margin-top: 1.25rem;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :where(.marvin-consent__bar) {
+    animation: marvin-consent-in 0.25s ease-out;
+  }
+}
+
+@keyframes marvin-consent-in {
+  from {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+}
+
+@media (max-width: 599px) {
+  :where(.marvin-consent__actions) {
+    grid-auto-flow: row;
+    grid-auto-columns: auto;
+    flex: 1 1 100%;
+  }
+
+  :where(.marvin-consent__button) {
+    width: 100%;
+  }
+}