@agence-zef/astro 0.7.1 → 0.9.0

package/components/CookieBanner.astro

@@ -1,12 +1,17 @@
 ---
 /**
- * Bandeau cookies (C-28, CNIL), sans style imposé : réglages lus à l'exécution au CMS.
- * « Tout refuser » au même niveau que « Tout accepter », choix par catégorie, gardé 6 mois
- * (redemandé si les catégories changent). Google Analytics 4 (`gaId`) n'est chargé
- * qu'après accord sur « Mesure d'audience ». Un élément `data-zef-cookies` (lien « Gérer
- * les cookies » du footer) rouvre le bandeau. Le choix est publié dans `window.zefConsent`
- * et l'événement `zef:consent`. À placer une fois dans le gabarit, avant `</body>`.
+ * Bandeau cookies (C-28, CNIL) avec vanilla-cookieconsent : encart en bas à droite, réglages
+ * lus à l'exécution au CMS. « Tout refuser » au même niveau que « Tout accepter », choix par
+ * catégorie dans « Personnaliser » (aucune catégorie facultative cochée d'avance), gardé 6 mois
+ * dans le cookie `zef-consent` (redemandé si les catégories changent). Google Analytics 4
+ * (`gaId`) n'est chargé qu'après accord sur « Mesure d'audience » ; un retrait efface ses
+ * cookies `_ga*` et recharge la page. Un élément `data-zef-cookies` (lien « Gérer les cookies »
+ * du footer) rouvre les préférences. Rien dans un cadre (aperçus du CMS). Le choix est publié dans `window.zefConsent` et
+ * l'événement `zef:consent`. À placer une fois dans le gabarit, avant `</body>`. Habillage :
+ * variables `--zef-*` (`@agence-zef/astro/styles.css`) ou `--cc-*` de vanilla-cookieconsent.
  */
+import "vanilla-cookieconsent/dist/cookieconsent.css";
+
 interface Props {
 	/** Identifiant de mesure GA4 (`G-XXXXXXX`), chargé seulement après accord. */
 	gaId?: string | null;
@@ -20,6 +25,8 @@ const locale = Astro.currentLocale ?? "";
 {cms && <div data-zef-cookie-banner={`${cms}/api/public/cookies`} data-locale={locale} data-ga={gaId ?? undefined} hidden />}
 
 <script>
+	import * as CookieConsent from "vanilla-cookieconsent";
+
 	type Texts = {
 		title: string;
 		message: string;
@@ -30,7 +37,6 @@ const locale = Astro.currentLocale ?? "";
 		policyUrl: string | null;
 	};
 	type Banner = {
-		layout: string;
 		consentDays: number;
 		version: string;
 		texts: Record<string, Texts>;
@@ -44,13 +50,12 @@ const locale = Astro.currentLocale ?? "";
 	};
 	type Consent = { version: string; at: number; choices: Record<string, boolean> };
 
-	const KEY = "zef-consent";
-	const read = (): Consent | null => {
-		try {
-			return JSON.parse(localStorage.getItem(KEY) ?? "null");
-		} catch {
-			return null;
-		}
+	/** Catégorie qui porte Google Analytics 4. */
+	const ANALYTICS = "mesure";
+
+	const UI: Record<string, { save: string; close: string }> = {
+		fr: { save: "Enregistrer mes choix", close: "Fermer" },
+		en: { save: "Save my choices", close: "Close" },
 	};
 
 	function loadGa(id: string) {
@@ -69,17 +74,14 @@ const locale = Astro.currentLocale ?? "";
 		w.gtag("config", id, { anonymize_ip: true });
 	}
 
-	function apply(consent: Consent, gaId: string | undefined) {
-		(window as unknown as { zefConsent: Consent }).zefConsent = consent;
-		document.dispatchEvent(new CustomEvent("zef:consent", { detail: consent.choices }));
-		if (gaId && consent.choices.mesure) loadGa(gaId);
-	}
+	const escape = (text: string) =>
+		text.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c] ?? c);
 
-	function el<K extends keyof HTMLElementTagNameMap>(tag: K, className: string, text?: string) {
-		const node = document.createElement(tag);
-		node.className = className;
-		if (text !== undefined) node.textContent = text;
-		return node;
+	/** Numéro de révision (entier ≥ 1) tiré de la liste des catégories. */
+	function revision(version: string) {
+		let hash = 0;
+		for (const char of version) hash = (hash * 31 + char.charCodeAt(0)) % 1_000_000;
+		return hash + 1;
 	}
 
 	async function start(root: HTMLElement) {
@@ -92,92 +94,100 @@ const locale = Astro.currentLocale ?? "";
 		}
 		if (!banner) return;
 		const b = banner;
-		const locale = root.dataset.locale || document.documentElement.lang || "fr";
-		const texts = b.texts[locale] ?? Object.values(b.texts)[0];
-		const pick = (v: Record<string, string>) => v[locale] || Object.values(v)[0] || "";
-
-		const save = (choices: Record<string, boolean>) => {
-			const consent = { version: b.version, at: Date.now(), choices };
-			try {
-				localStorage.setItem(KEY, JSON.stringify(consent));
-			} catch {
-				// Navigation privée : le choix vaut pour la page.
-			}
-			apply(consent, gaId);
-			document.querySelector(".zef-cookies")?.remove();
-		};
-		const all = (value: boolean) =>
-			Object.fromEntries(b.categories.map((c) => [c.key, c.required || value]));
-
-		const show = (customize = false) => {
-			document.querySelector(".zef-cookies")?.remove();
-			const current = read();
-			const box = el("section", "zef-cookies");
-			box.dataset.layout = b.layout;
-			box.setAttribute("role", "dialog");
-			box.setAttribute("aria-label", texts.title);
-			box.append(el("h2", "zef-cookies__title", texts.title), el("p", "zef-cookies__message", texts.message));
-			if (texts.policyUrl) {
-				const a = el("a", "zef-cookies__policy", texts.policyLabel);
-				a.href = texts.policyUrl;
-				box.append(a);
-			}
-			const boxes = new Map<string, HTMLInputElement>();
-			if (customize) {
-				const list = el("ul", "zef-cookies__categories");
-				for (const c of b.categories) {
-					const item = el("li", "zef-cookies__category");
-					const label = el("label", "zef-cookies__check");
-					const input = document.createElement("input");
-					input.type = "checkbox";
-					input.checked = c.required || Boolean(current?.choices[c.key]);
-					input.disabled = c.required;
-					boxes.set(c.key, input);
-					label.append(input, el("span", "", pick(c.label)));
-					item.append(label, el("p", "zef-cookies__description", pick(c.description)));
-					if (c.services) item.append(el("p", "zef-cookies__services", c.services));
-					list.append(item);
-				}
-				box.append(list);
-			}
-			const actions = el("div", "zef-cookies__actions");
-			const button = (text: string, kind: string, onClick: () => void) => {
-				const btn = el("button", "zef-cookies__button", text);
-				btn.type = "button";
-				btn.dataset.kind = kind;
-				btn.addEventListener("click", onClick);
-				actions.append(btn);
+		const locales = Object.keys(b.texts);
+		const wanted = root.dataset.locale || document.documentElement.lang || "fr";
+		const locale = locales.includes(wanted) ? wanted : locales[0];
+
+		const apply = () => {
+			const consent: Consent = {
+				version: b.version,
+				at: Date.now(),
+				choices: Object.fromEntries(
+					b.categories.map((c) => [c.key, CookieConsent.acceptedCategory(c.key)]),
+				),
 			};
-			button(texts.reject, "reject", () => save(all(false)));
-			button(texts.accept, "accept", () => save(all(true)));
-			if (customize) {
-				button(locale === "en" ? "Save my choices" : "Enregistrer mes choix", "save", () =>
-					save(Object.fromEntries([...boxes].map(([k, input]) => [k, input.checked]))),
-				);
-			} else {
-				button(texts.customize, "customize", () => show(true));
-			}
-			box.append(actions);
-			document.body.append(box);
-			box.querySelector<HTMLButtonElement>("button")?.focus();
+			(window as unknown as { zefConsent: Consent }).zefConsent = consent;
+			document.dispatchEvent(new CustomEvent("zef:consent", { detail: consent.choices }));
+			if (gaId && consent.choices[ANALYTICS]) loadGa(gaId);
 		};
 
-		// « Gérer les cookies » (footer) rouvre le bandeau avec les choix en cours.
+		const translations = Object.fromEntries(
+			locales.map((l) => {
+				const t = b.texts[l];
+				const ui = UI[l] ?? UI.fr;
+				const pick = (v: Record<string, string>) => v[l] || Object.values(v)[0] || "";
+				const policy = t.policyUrl
+					? `<a href="${escape(t.policyUrl)}">${escape(t.policyLabel)}</a>`
+					: undefined;
+				return [
+					l,
+					{
+						consentModal: {
+							title: t.title,
+							description: escape(t.message),
+							acceptAllBtn: t.accept,
+							acceptNecessaryBtn: t.reject,
+							showPreferencesBtn: t.customize,
+							footer: policy,
+						},
+						preferencesModal: {
+							title: t.title,
+							acceptAllBtn: t.accept,
+							acceptNecessaryBtn: t.reject,
+							savePreferencesBtn: ui.save,
+							closeIconLabel: ui.close,
+							sections: [
+								{ description: escape(t.message) + (policy ? ` ${policy}` : "") },
+								...b.categories.map((c) => ({
+									title: pick(c.label),
+									description:
+										escape(pick(c.description)) +
+										(c.services ? `<br><small>${escape(c.services)}</small>` : ""),
+									linkedCategory: c.key,
+								})),
+							],
+						},
+					},
+				];
+			}),
+		);
+
+		await CookieConsent.run({
+			cookie: { name: "zef-consent", expiresAfterDays: b.consentDays },
+			revision: revision(b.version),
+			guiOptions: {
+				consentModal: { layout: "box", position: "bottom right", equalWeightButtons: true },
+				preferencesModal: { layout: "box", equalWeightButtons: true },
+			},
+			categories: Object.fromEntries(
+				b.categories.map((c) => [
+					c.key,
+					c.required
+						? { enabled: true, readOnly: true }
+						: {
+								// Jamais cochée d'avance : le consentement doit être un acte positif (CNIL).
+								enabled: false,
+								...(c.key === ANALYTICS && {
+									autoClear: { cookies: [{ name: /^_ga/ }], reloadPage: true },
+								}),
+							},
+				]),
+			),
+			language: { default: locale, translations },
+			// `onConsent` part aussi à chaque page quand le choix est déjà fait.
+			onConsent: apply,
+			onChange: apply,
+		});
+
+		// « Gérer les cookies » (footer) rouvre les préférences avec les choix en cours.
 		document.addEventListener("click", (e) => {
 			if (!(e.target as Element | null)?.closest("[data-zef-cookies]")) return;
 			e.preventDefault();
-			show(true);
+			CookieConsent.showPreferences();
 		});
-
-		const current = read();
-		const valid =
-			current &&
-			current.version === b.version &&
-			Date.now() - current.at < b.consentDays * 86_400_000;
-		if (valid) apply(current, gaId);
-		else show();
 	}
 
+	// Site ouvert dans un cadre (aperçus et vignettes du CMS) : pas de bandeau.
 	const root = document.querySelector<HTMLElement>("[data-zef-cookie-banner]");
-	if (root) start(root);
+	if (root && window.self === window.top) start(root);
 </script>

package/components/RichText.astro

@@ -1,11 +1,19 @@
 ---
-/** Texte riche saisi dans le CMS (paragraphes, titres autorisés, listes, liens). */
+/**
+ * Texte riche saisi dans le CMS (paragraphes, titres autorisés, listes, liens), dans un `<div>`.
+ * `inline` : texte riche en ligne d'un titre ou d'un sous-titre (`f.richtext({ inline: true })` :
+ * gras, italique, souligné, surligné, lien, retours à la ligne), rendu sans enveloppe, à placer
+ * dans la balise du titre : `<h1><RichText html={titre} inline /></h1>`.
+ */
+import { inlineHtml } from "@agence-zef/schema";
+
 interface Props {
-	html: string;
+	html: string | null | undefined;
 	class?: string;
+	inline?: boolean;
 }
 
-const { html, class: className } = Astro.props;
+const { html, class: className, inline = false } = Astro.props;
 ---
 
-{html && <div class={className} set:html={html} />}
+{html && (inline ? <Fragment set:html={inlineHtml(html)} /> : <div class={className} set:html={html} />)}

package/components/routes/cache.ts

@@ -1,10 +1,11 @@
 /*
  * Rendu à la demande (`rendering: "cached"`) : règles de cache des pages du CMS. Le CDN garde
- * une page un an ; une publication l'invalide par le tag `zef` (le CDN sert l'ancienne version
- * le temps d'en rendre une nouvelle, `swr`).
+ * une page un an ; une publication l'invalide par le tag `zef` et la visite suivante reçoit la
+ * nouvelle version. Pas de `swr` : il faisait servir l'ancienne version une dernière fois après
+ * la publication (« Voir la page » montrait l'ancienne page jusqu'au rechargement).
  */
 
 /** Tag posé sur toutes les réponses du site rendues depuis le CMS. */
 export const CACHE_TAG = "zef";
 
-export const PAGE_CACHE = { maxAge: 60 * 60 * 24 * 365, swr: 60 * 60 * 24 * 7 };
+export const PAGE_CACHE = { maxAge: 60 * 60 * 24 * 365 };

package/components/routes/preview-thumbnail.astro

@@ -52,6 +52,8 @@ if (!site || !section) Astro.response.status = 404;
 				html { overflow: hidden; scrollbar-width: none; }
 				body { pointer-events: none; }
 				astro-dev-toolbar { display: none !important; }
+				/* Bandeau cookies et popups du gabarit : jamais dans une vignette. */
+				#cc-main, .zef-popup { display: none !important; }
 			</style>
 			<script>
 				// La section seule : tout ce qui l'entoure dans le gabarit (header, footer…) est masqué.

package/dist/overlay.js

@@ -37,6 +37,15 @@ export function startOverlay() {
                 element.remove();
                 element = container;
             }
+            else if (element && [...element.children].some((c) => c.tagName !== "BR")) {
+                // Texte posé à côté d'autres éléments (pictogramme, image) : il reçoit son propre
+                // `<span>`, sinon l'édition et la saisie en direct remplaceraient aussi ses voisins.
+                // Les `<br>` d'un texte sur plusieurs lignes ne comptent pas.
+                const span = document.createElement("span");
+                node.before(span);
+                span.append(node);
+                element = span;
+            }
             if (element && locations[0] && !element.hasAttribute(ATTR))
                 element.setAttribute(ATTR, locations[0]);
         }
@@ -450,8 +459,10 @@ export function startOverlay() {
         const element = fieldElement(section, path);
         if (!element || element === editing)
             return;
-        if (info(element)?.kind === "richtext")
-            element.innerHTML = value;
+        if (info(element)?.kind === "richtext") {
+            // Espaces répétés (titre en ligne) : gardés comme une fois enregistrés.
+            element.innerHTML = value.replace(/(^|>)([^<]*)/g, (_, open, text) => open + text.replace(/ {2,}/g, (spaces) => ` ${"&nbsp;".repeat(spaces.length - 1)}`));
+        }
         else
             element.textContent = value;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agence-zef/astro",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "description": "Intégration Astro du CMS ZEF : routes, rendu des sections, aperçu, composants réutilisables sans style.",
   "license": "MIT",
   "type": "module",
@@ -80,13 +80,14 @@
     "astro": "^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
-    "astro": "^7.4.4",
-    "@types/node": "^24.0.0"
+    "@types/node": "^24.0.0",
+    "astro": "^7.4.4"
   },
   "dependencies": {
     "jiti": "^2.6.1",
-    "@agence-zef/schema": "0.7.0",
-    "@agence-zef/sdk": "0.7.0"
+    "vanilla-cookieconsent": "3.1.0",
+    "@agence-zef/schema": "0.9.0",
+    "@agence-zef/sdk": "0.9.0"
   },
   "homepage": "https://agence-zef.fr",
   "scripts": {

package/styles.css

@@ -171,7 +171,7 @@
 	font-weight: 400;
 	cursor: pointer;
 }
-:where(.zef-check, .zef-form__check, .zef-account, .zef-checkout, .zef-cart-add, .zef-cookies)
+:where(.zef-check, .zef-form__check, .zef-account, .zef-checkout, .zef-cart-add)
 	:where(input[type="checkbox"], input[type="radio"]) {
 	flex-shrink: 0;
 	width: 1.125rem;
@@ -646,6 +646,41 @@
 	}
 }
 
+/* ---------- Bandeau cookies (vanilla-cookieconsent) ---------- */
+/* Ses variables `--cc-*` suivent celles du site ; `:where()` laisse le site les redéfinir. */
+
+:where(#cc-main) {
+	--cc-font-family: var(--zef-font);
+	--cc-bg: var(--zef-surface);
+	--cc-primary-color: var(--zef-text);
+	--cc-secondary-color: var(--zef-muted);
+	--cc-link-color: var(--zef-text);
+	--cc-modal-border-radius: var(--zef-radius);
+	--cc-btn-border-radius: var(--zef-radius-small);
+	--cc-btn-primary-bg: var(--zef-accent);
+	--cc-btn-primary-color: var(--zef-on-accent);
+	--cc-btn-primary-border-color: var(--zef-accent);
+	--cc-btn-primary-hover-bg: color-mix(in srgb, var(--zef-accent) 85%, black);
+	--cc-btn-primary-hover-color: var(--zef-on-accent);
+	--cc-btn-primary-hover-border-color: color-mix(in srgb, var(--zef-accent) 85%, black);
+	--cc-btn-secondary-bg: var(--zef-surface);
+	--cc-btn-secondary-color: var(--zef-text);
+	--cc-btn-secondary-border-color: var(--zef-border-strong);
+	--cc-btn-secondary-hover-bg: var(--zef-surface-muted);
+	--cc-btn-secondary-hover-color: var(--zef-text);
+	--cc-btn-secondary-hover-border-color: var(--zef-border-strong);
+	--cc-separator-border-color: var(--zef-border);
+	--cc-toggle-on-bg: var(--zef-accent);
+	--cc-cookie-category-block-bg: var(--zef-surface-muted);
+	--cc-cookie-category-block-border: var(--zef-border);
+	--cc-cookie-category-block-hover-bg: var(--zef-surface-muted);
+	--cc-cookie-category-block-hover-border: var(--zef-border-strong);
+	--cc-footer-bg: var(--zef-surface);
+	--cc-footer-color: var(--zef-muted);
+	--cc-footer-border-color: var(--zef-border);
+	--cc-overlay-bg: var(--zef-backdrop);
+}
+
 @media (max-width: 40rem) {
 	:where(.zef-form__field[data-width="half"]) {
 		flex-basis: 100%;