@agence-zef/astro 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Agence ZEF
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,5 @@
-# Temporary Holding Version
+# @agence-zef/astro
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Intégration Astro du CMS de l'agence ZEF : route des pages, aperçu de l'éditeur, composants `Button`, `Image`, `Video`, `RichText`, `Form`, `Popups`, `CookieBanner`.
+
+Paquet du CMS de l'agence ZEF (dépôt privé). Licence MIT.

package/components/Button.astro

@@ -0,0 +1,42 @@
+---
+/**
+ * Bouton du CMS (cahier des charges § 5.4), sans style imposé : lien, ancre, fichier,
+ * email, téléphone ou popup. La variante et la taille sont exposées en `data-*` pour le CSS du site.
+ */
+import type { Button } from "@agence-zef/schema";
+
+interface Props {
+	button: Button | null;
+	class?: string;
+}
+
+const { button, class: className } = Astro.props;
+const data = button
+	? {
+			"data-variant": button.variant ?? undefined,
+			"data-size": button.size ?? undefined,
+			"data-icon": button.icon ?? undefined,
+			"data-icon-position": button.icon ? button.iconPosition : undefined,
+		}
+	: {};
+---
+
+{
+	button &&
+		(button.href ? (
+			<a
+				href={button.href}
+				target={button.target ?? undefined}
+				rel={button.target ? "noopener" : undefined}
+				download={button.download || undefined}
+				class={className}
+				{...data}
+			>
+				{button.label}
+			</a>
+		) : (
+			<button type="button" class={className} data-zef-popup={button.popup ?? undefined} {...data}>
+				{button.label}
+			</button>
+		))
+}

package/components/CookieBanner.astro

@@ -0,0 +1,183 @@
+---
+/**
+ * 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>`.
+ */
+interface Props {
+	/** Identifiant de mesure GA4 (`G-XXXXXXX`), chargé seulement après accord. */
+	gaId?: string | null;
+}
+
+const { gaId } = Astro.props;
+const cms = (process.env.ZEF_URL ?? "").replace(/\/$/, "");
+const locale = Astro.currentLocale ?? "";
+---
+
+{cms && <div data-zef-cookie-banner={`${cms}/api/public/cookies`} data-locale={locale} data-ga={gaId ?? undefined} hidden />}
+
+<script>
+	type Texts = {
+		title: string;
+		message: string;
+		accept: string;
+		reject: string;
+		customize: string;
+		policyLabel: string;
+		policyUrl: string | null;
+	};
+	type Banner = {
+		layout: string;
+		consentDays: number;
+		version: string;
+		texts: Record<string, Texts>;
+		categories: {
+			key: string;
+			required: boolean;
+			services: string;
+			label: Record<string, string>;
+			description: Record<string, string>;
+		}[];
+	};
+	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;
+		}
+	};
+
+	function loadGa(id: string) {
+		if (document.querySelector("script[data-zef-ga]")) return;
+		const s = document.createElement("script");
+		s.async = true;
+		s.dataset.zefGa = "";
+		s.src = `https://www.googletagmanager.com/gtag/js?id=${encodeURIComponent(id)}`;
+		document.head.append(s);
+		const w = window as unknown as { dataLayer: unknown[]; gtag: (...args: unknown[]) => void };
+		w.dataLayer = w.dataLayer || [];
+		w.gtag = (...args: unknown[]) => {
+			w.dataLayer.push(args);
+		};
+		w.gtag("js", new Date());
+		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);
+	}
+
+	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;
+	}
+
+	async function start(root: HTMLElement) {
+		const gaId = root.dataset.ga;
+		let banner: Banner | null = null;
+		try {
+			banner = (await (await fetch(root.dataset.zefCookieBanner ?? "")).json()).banner;
+		} catch {
+			return;
+		}
+		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);
+			};
+			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();
+		};
+
+		// « Gérer les cookies » (footer) rouvre le bandeau avec les choix en cours.
+		document.addEventListener("click", (e) => {
+			if (!(e.target as Element | null)?.closest("[data-zef-cookies]")) return;
+			e.preventDefault();
+			show(true);
+		});
+
+		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();
+	}
+
+	const root = document.querySelector<HTMLElement>("[data-zef-cookie-banner]");
+	if (root) start(root);
+</script>

package/components/Form.astro

@@ -0,0 +1,291 @@
+---
+/**
+ * Formulaire du CMS (C-09), sans style imposé : rendu depuis une référence `forms`
+ * (`f.reference({ to: ["forms"] })`). Logique conditionnelle, anti-spam Turnstile et
+ * champ piège, envoi en JavaScript au CMS avec message de confirmation ou redirection ;
+ * sans JavaScript, envoi HTML classique. Classes `zef-form__*` et attributs `data-*`
+ * pour le CSS du site.
+ */
+import type { PublicForm, Reference } from "@agence-zef/schema";
+
+interface Props {
+	/** Référence renvoyée par l'API (`{ type: "form", form }`) ou formulaire seul. */
+	form: Reference | PublicForm | null | undefined;
+	class?: string;
+}
+
+const { form: input, class: className } = Astro.props;
+const form: PublicForm | null =
+	input && "fields" in input ? input : ((input as Reference | null)?.form ?? null);
+const locale = Astro.currentLocale ?? "";
+const id = form ? `zef-form-${form.id.slice(0, 8)}` : "";
+const COUNTRIES = [
+	"France",
+	"Belgique",
+	"Suisse",
+	"Luxembourg",
+	"Canada",
+	"Allemagne",
+	"Espagne",
+	"Italie",
+	"Royaume-Uni",
+	"Pays-Bas",
+];
+const inputType = {
+	email: "email",
+	phone: "tel",
+	number: "number",
+	date: "date",
+	text: "text",
+} as const;
+---
+
+{
+	form && (
+		<form
+			id={id}
+			class:list={["zef-form", className]}
+			action={form.action}
+			method="post"
+			enctype={form.fields.some((f) => f.type === "file") ? "multipart/form-data" : "application/x-www-form-urlencoded"}
+			data-zef-form={form.id}
+			novalidate
+		>
+			<input type="hidden" name="zef_locale" value={locale} />
+			<input type="hidden" name="zef_page" value={Astro.url.pathname} />
+			{form.honeypot && (
+				<div class="zef-form__trap" aria-hidden="true" style="position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden">
+					<label>
+						Site web
+						<input type="text" name={form.honeypot} tabindex="-1" autocomplete="off" />
+					</label>
+				</div>
+			)}
+			{form.fields.map((f) => {
+				const fieldId = `${id}-${f.name}`;
+				const attrs = {
+					"data-field": f.name,
+					"data-type": f.type,
+					"data-width": f.width,
+					"data-conditions": f.conditions ? JSON.stringify(f.conditions) : undefined,
+				};
+				if (f.type === "message") {
+					return (
+						<p class="zef-form__message" {...attrs}>
+							{f.label}
+						</p>
+					);
+				}
+				if (f.type === "consent") {
+					return (
+						<div class="zef-form__field" {...attrs}>
+							<label class="zef-form__check">
+								<input type="checkbox" name={f.name} value="true" required={f.required} />
+								<span>{f.label}</span>
+							</label>
+							<p class="zef-form__error" role="alert" hidden />
+						</div>
+					);
+				}
+				return (
+					<div class="zef-form__field" {...attrs}>
+						{f.type === "checkboxes" || f.type === "radio" ? (
+							<fieldset class="zef-form__choices">
+								<legend class="zef-form__label">
+									{f.label}
+									{f.required && <span aria-hidden="true"> *</span>}
+								</legend>
+								{f.options.map((o) => (
+									<label class="zef-form__check">
+										<input
+											type={f.type === "radio" ? "radio" : "checkbox"}
+											name={f.name}
+											value={o.value}
+											checked={f.defaultValue === o.value}
+										/>
+										<span>{o.label}</span>
+									</label>
+								))}
+							</fieldset>
+						) : (
+							<>
+								<label class="zef-form__label" for={fieldId}>
+									{f.label}
+									{f.required && <span aria-hidden="true"> *</span>}
+								</label>
+								{f.type === "textarea" ? (
+									<textarea id={fieldId} name={f.name} rows="5" placeholder={f.placeholder ?? undefined} required={f.required}>
+										{f.defaultValue ?? ""}
+									</textarea>
+								) : f.type === "select" || f.type === "country" ? (
+									<select id={fieldId} name={f.name} required={f.required}>
+										<option value="">{f.placeholder ?? ""}</option>
+										{(f.type === "country" ? COUNTRIES.map((c) => ({ value: c, label: c })) : f.options).map((o) => (
+											<option value={o.value} selected={f.defaultValue === o.value}>
+												{o.label}
+											</option>
+										))}
+									</select>
+								) : f.type === "file" ? (
+									<input
+										id={fieldId}
+										type="file"
+										name={f.name}
+										multiple
+										required={f.required}
+										accept={f.accept.length ? f.accept.map((a) => (a === "jpg" ? ".jpg,.jpeg" : `.${a}`)).join(",") : undefined}
+										data-max-files="3"
+									/>
+								) : (
+									<input
+										id={fieldId}
+										type={inputType[f.type as keyof typeof inputType] ?? "text"}
+										name={f.name}
+										value={f.defaultValue ?? undefined}
+										placeholder={f.placeholder ?? undefined}
+										required={f.required}
+									/>
+								)}
+							</>
+						)}
+						<p class="zef-form__error" role="alert" hidden />
+					</div>
+				);
+			})}
+			{form.turnstileSiteKey && <div class="cf-turnstile zef-form__turnstile" data-sitekey={form.turnstileSiteKey} data-size="flexible" />}
+			<p class="zef-form__status" role="status" hidden />
+			<button type="submit" class="zef-form__submit">
+				{form.submitLabel}
+			</button>
+			<template data-zef-confirmation={form.confirmation.type} data-url={form.confirmation.type === "redirect" ? (form.confirmation.url ?? "") : undefined}>
+				{form.confirmation.type === "message" && <div class="zef-form__confirmation" set:html={form.confirmation.html} />}
+			</template>
+		</form>
+	)
+}
+{form?.turnstileSiteKey && <script is:inline src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer />}
+
+<script>
+	import { type FormConditions, isFieldVisible } from "@agence-zef/schema/forms";
+
+	/** Valeurs saisies, par nom de champ (liste pour les cases à cocher). */
+	function valuesOf(form: HTMLFormElement) {
+		const values: Record<string, string | string[]> = {};
+		for (const [key, value] of new FormData(form).entries()) {
+			if (typeof value !== "string") continue;
+			const prev = values[key];
+			values[key] = prev === undefined ? value : [...(Array.isArray(prev) ? prev : [prev]), value];
+		}
+		for (const box of form.querySelectorAll<HTMLElement>('[data-type="checkboxes"]')) {
+			const name = box.dataset.field ?? "";
+			if (!(name in values)) values[name] = [];
+			else if (!Array.isArray(values[name])) values[name] = [values[name] as string];
+		}
+		return values;
+	}
+
+	/** Affiche ou masque les champs selon leurs conditions ; un champ masqué n'est pas envoyé. */
+	function applyConditions(form: HTMLFormElement) {
+		const values = valuesOf(form);
+		for (const el of form.querySelectorAll<HTMLElement>("[data-conditions]")) {
+			const visible = isFieldVisible(JSON.parse(el.dataset.conditions ?? "null") as FormConditions, values);
+			el.hidden = !visible;
+			for (const control of el.querySelectorAll<HTMLInputElement>("input, select, textarea")) {
+				control.disabled = !visible;
+			}
+		}
+	}
+
+	for (const form of document.querySelectorAll<HTMLFormElement>("form[data-zef-form]")) {
+		applyConditions(form);
+		form.addEventListener("input", () => applyConditions(form));
+		form.addEventListener("change", () => applyConditions(form));
+		form.addEventListener("submit", async (event) => {
+			event.preventDefault();
+			const status = form.querySelector<HTMLElement>(".zef-form__status");
+			const submit = form.querySelector<HTMLButtonElement>(".zef-form__submit");
+			for (const error of form.querySelectorAll<HTMLElement>(".zef-form__error")) {
+				error.hidden = true;
+				error.textContent = "";
+			}
+			const values = valuesOf(form);
+			const meta = (key: string) => {
+				const value = values[key];
+				delete values[key];
+				return typeof value === "string" ? value : undefined;
+			};
+			const body = {
+				locale: meta("zef_locale") || document.documentElement.lang || undefined,
+				pageUrl: meta("zef_page") || location.pathname,
+				turnstileToken: meta("cf-turnstile-response"),
+				values,
+			};
+			// Fichiers vérifiés avant l'envoi (le CMS les revérifie) : 3 au plus, 10 Mo chacun.
+			for (const input of form.querySelectorAll<HTMLInputElement>('input[type="file"]:not(:disabled)')) {
+				const list = [...(input.files ?? [])];
+				const message =
+					list.length > 3
+						? "3 fichiers maximum."
+						: list.some((f) => f.size > 10 * 1024 * 1024)
+							? "10 Mo maximum par fichier."
+							: "";
+				if (message) {
+					const error = input.closest(".zef-form__field")?.querySelector<HTMLElement>(".zef-form__error");
+					if (error) {
+						error.textContent = message;
+						error.hidden = false;
+					}
+					return;
+				}
+			}
+			if (submit) submit.disabled = true;
+			form.setAttribute("aria-busy", "true");
+			// Avec un champ fichier : envoi multipart (les champs masqués, désactivés, n'en font pas partie).
+			const multipart = form.querySelector('input[type="file"]:not(:disabled)') !== null;
+			try {
+				const res = await fetch(form.action, {
+					method: "POST",
+					headers: multipart ? { accept: "application/json" } : { "content-type": "application/json" },
+					body: multipart ? new FormData(form) : JSON.stringify(body),
+				});
+				const result = await res.json();
+				if (result.ok) {
+					if (result.confirmation.type === "redirect" && result.confirmation.url) {
+						location.assign(result.confirmation.url);
+						return;
+					}
+					const template = form.querySelector<HTMLTemplateElement>("template[data-zef-confirmation]");
+					const done = document.createElement("div");
+					done.className = "zef-form__done";
+					done.setAttribute("role", "status");
+					done.append(template?.content.cloneNode(true) ?? "");
+					form.replaceWith(done);
+					return;
+				}
+				for (const [name, message] of Object.entries<string>(result.fields ?? {})) {
+					const error = form.querySelector<HTMLElement>(`[data-field="${CSS.escape(name)}"] .zef-form__error`);
+					if (error) {
+						error.textContent = message;
+						error.hidden = false;
+					}
+				}
+				if (status) {
+					status.textContent = result.message;
+					status.hidden = false;
+				}
+				// Un jeton Turnstile ne sert qu'une fois.
+				(window as { turnstile?: { reset: (el?: Element) => void } }).turnstile?.reset(
+					form.querySelector(".cf-turnstile") ?? undefined,
+				);
+			} catch {
+				if (status) {
+					status.textContent = "Envoi impossible. Vérifiez votre connexion et réessayez.";
+					status.hidden = false;
+				}
+			} finally {
+				if (submit) submit.disabled = false;
+				form.removeAttribute("aria-busy");
+			}
+		});
+	}
+</script>

package/components/Image.astro

@@ -0,0 +1,57 @@
+---
+import { Image as AstroImage } from "astro:assets";
+/**
+ * Image de la médiathèque, avec son texte alternatif. Sans style imposé.
+ * JPG, PNG, WebP et AVIF sont optimisés au build (format et poids, `srcset` si `sizes`
+ * est donné) ; SVG, GIF et les adresses hors médiathèque sont rendus tels quels.
+ */
+import type { Media } from "@agence-zef/schema";
+
+interface Props {
+	media: Media | null;
+	class?: string;
+	/** `eager` pour l'image principale de la page. */
+	loading?: "lazy" | "eager";
+	/** Largeur affichée (`(min-width: 48rem) 33vw, 100vw`) : active le `srcset`. */
+	sizes?: string;
+}
+
+const { media, class: className, loading = "lazy", sizes } = Astro.props;
+const OPTIMIZED = ["image/jpeg", "image/png", "image/webp", "image/avif"];
+const optimize = Boolean(
+	media?.width && media.height && media.mime && OPTIMIZED.includes(media.mime),
+);
+const STEPS = [480, 800, 1200, 1600, 2400];
+const widths =
+	sizes && media?.width
+		? [...STEPS.filter((w) => w < (media.width as number)), media.width]
+		: undefined;
+---
+
+{
+	media &&
+		(optimize ? (
+			<AstroImage
+				src={media.url}
+				alt={media.alt}
+				width={media.width as number}
+				height={media.height as number}
+				loading={loading}
+				decoding="async"
+				sizes={sizes}
+				widths={widths}
+				class={className}
+			/>
+		) : (
+			<img
+				src={media.url}
+				alt={media.alt}
+				width={media.width}
+				height={media.height}
+				loading={loading}
+				decoding="async"
+				sizes={sizes}
+				class={className}
+			/>
+		))
+}