@agence-zef/astro 0.4.1 → 0.6.0-pilot.0

package/components/Accordion.astro

@@ -0,0 +1,61 @@
+---
+/**
+ * Accordéon natif (`<details>` / `<summary>`), sans JavaScript ni style imposé : classes
+ * `zef-accordion`, `zef-accordion__item`, `__summary`, `__content`, habillées par
+ * `@agence-zef/astro/styles.css` (ouverture animée) ou par le CSS du site.
+ *
+ * Deux usages : `items` (une liste du CMS : `{ summary, html }` ou `{ summary, text }`), ou
+ * des `<AccordionItem>` en contenu. `exclusive` : un seul élément ouvert à la fois (attribut
+ * `name` natif). `faq` : ajoute les données structurées FAQPage pour Google (avec `items`).
+ */
+import RichText from "./RichText.astro";
+
+type Item = { summary: string; html?: string | null; text?: string | null; open?: boolean };
+
+interface Props {
+	items?: Item[];
+	exclusive?: boolean;
+	faq?: boolean;
+	/** Nom du groupe exclusif, à reprendre dans les `<AccordionItem name>` en contenu. */
+	name?: string;
+	class?: string;
+}
+
+const { items, exclusive = false, faq = false, class: className } = Astro.props;
+const name =
+	Astro.props.name ?? (exclusive ? `zef-acc-${Math.random().toString(36).slice(2, 8)}` : undefined);
+const strip = (html: string) =>
+	html
+		.replace(/<[^>]*>/g, " ")
+		.replace(/\s+/g, " ")
+		.trim();
+const faqData =
+	faq && items?.length
+		? {
+				"@context": "https://schema.org",
+				"@type": "FAQPage",
+				mainEntity: items
+					.filter((i) => i.summary)
+					.map((i) => ({
+						"@type": "Question",
+						name: i.summary,
+						acceptedAnswer: { "@type": "Answer", text: i.text ?? strip(i.html ?? "") },
+					})),
+			}
+		: null;
+---
+
+<div class:list={["zef-accordion", className]}>
+	{
+		items?.map((item) => (
+			<details class="zef-accordion__item" name={name} open={item.open}>
+				<summary class="zef-accordion__summary">{item.summary}</summary>
+				<div class="zef-accordion__content">
+					{item.html ? <RichText html={item.html} /> : item.text ? <p>{item.text}</p> : null}
+				</div>
+			</details>
+		))
+	}
+	<slot />
+</div>
+{faqData && <script type="application/ld+json" is:inline set:html={JSON.stringify(faqData).replace(/</g, "\\u003c")} />}

package/components/AccordionItem.astro

@@ -0,0 +1,23 @@
+---
+/**
+ * Élément d'accordéon (`<details>`), à mettre dans `<Accordion>` ou seul. Titre : `summary`, ou
+ * le contenu du slot `summary` (icône, mise en forme). `name` : groupe exclusif (un seul ouvert).
+ */
+interface Props {
+	summary?: string;
+	name?: string;
+	open?: boolean;
+	class?: string;
+}
+
+const { summary, name, open = false, class: className } = Astro.props;
+---
+
+<details class:list={["zef-accordion__item", className]} name={name} open={open}>
+	<summary class="zef-accordion__summary">
+		{Astro.slots.has("summary") ? <slot name="summary" /> : summary}
+	</summary>
+	<div class="zef-accordion__content">
+		<slot />
+	</div>
+</details>

package/components/Checkbox.astro

@@ -0,0 +1,20 @@
+---
+/**
+ * Case à cocher (ou bouton radio avec `type="radio"`) avec son libellé, classe `zef-check`.
+ * Le libellé : `label`, ou le contenu (lien vers les conditions, mise en forme).
+ */
+import type { HTMLAttributes } from "astro/types";
+
+type Props = Omit<HTMLAttributes<"input">, "class" | "type"> & {
+	label?: string;
+	type?: "checkbox" | "radio";
+	class?: string;
+};
+
+const { label, type = "checkbox", class: className, ...rest } = Astro.props;
+---
+
+<label class:list={["zef-check", className]}>
+	<input {...rest} type={type} />
+	<span>{Astro.slots.has("default") ? <slot /> : label}</span>
+</label>

package/components/Dialog.astro

@@ -0,0 +1,72 @@
+---
+/**
+ * Fenêtre modale native (`<dialog>`), sans style imposé : classes `zef-dialog`,
+ * `zef-dialog__panel`, `zef-dialog__close`, habillées par `@agence-zef/astro/styles.css`
+ * (variables `--zef-*`) ou par le CSS du site.
+ *
+ * Ouverture : n'importe quel élément avec `data-zef-open="<id>"` (bouton, lien). Fermeture :
+ * Échap, clic sur le voile, ou un élément `data-zef-close` dans la fenêtre. La page en dessous
+ * ne défile plus pendant l'ouverture ; animations d'ouverture et de fermeture via
+ * `[open]` / `[data-closing]`, coupées si le visiteur réduit les animations.
+ */
+interface Props {
+	id: string;
+	/** Titre lu par les lecteurs d'écran si la fenêtre n'a pas de titre visible. */
+	label?: string;
+	/** Bouton de fermeture en haut à droite (défaut : oui) et son libellé accessible. */
+	closeButton?: boolean;
+	closeLabel?: string;
+	class?: string;
+}
+
+const { id, label, closeButton = true, closeLabel = "Fermer", class: className } = Astro.props;
+---
+
+<dialog id={id} class:list={["zef-dialog", className]} aria-label={label} data-zef-dialog>
+	<div class="zef-dialog__panel">
+		{
+			closeButton && (
+				<button type="button" class="zef-dialog__close" data-zef-close aria-label={closeLabel}>
+					<svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
+						<path d="M18 6 6 18M6 6l12 12" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" />
+					</svg>
+				</button>
+			)
+		}
+		<slot />
+	</div>
+</dialog>
+
+<style is:global>
+	/* Comportement, pas habillage : la page ne défile plus derrière une fenêtre ouverte. */
+	html:has(dialog[data-zef-dialog][open]) {
+		overflow: hidden;
+	}
+</style>
+
+<script>
+	import { closeDialog } from "@agence-zef/astro/ui";
+
+	document.addEventListener("click", (event) => {
+		const target = event.target as Element;
+		const opener = target.closest<HTMLElement>("[data-zef-open]");
+		if (opener) {
+			const dialog = document.getElementById(opener.dataset.zefOpen ?? "");
+			if (dialog instanceof HTMLDialogElement) {
+				event.preventDefault();
+				dialog.showModal();
+			}
+			return;
+		}
+		const closer = target.closest("[data-zef-close]");
+		const dialog = (closer ?? target).closest("dialog[data-zef-dialog]");
+		// Un clic sur le voile atteint le <dialog> lui-même, pas son panneau.
+		if (dialog instanceof HTMLDialogElement && (closer || target === dialog)) closeDialog(dialog);
+	});
+	for (const dialog of document.querySelectorAll<HTMLDialogElement>("dialog[data-zef-dialog]")) {
+		dialog.addEventListener("cancel", (event) => {
+			event.preventDefault();
+			closeDialog(dialog);
+		});
+	}
+</script>

package/components/Field.astro

@@ -0,0 +1,27 @@
+---
+/**
+ * Champ de formulaire codé dans le site : libellé, contrôle (slot), aide et erreur, avec les
+ * classes partagées par tous les formulaires de `@agence-zef/astro` (`zef-field`, `zef-label`,
+ * `zef-help`, `zef-error`). `for` : identifiant du contrôle.
+ */
+interface Props {
+	label: string;
+	for?: string;
+	help?: string;
+	error?: string;
+	required?: boolean;
+	class?: string;
+}
+
+const { label, for: htmlFor, help, error, required = false, class: className } = Astro.props;
+---
+
+<div class:list={["zef-field", className]} data-invalid={error ? "" : undefined}>
+	<label class="zef-label" for={htmlFor}>
+		{label}
+		{required && <span class="zef-required" aria-hidden="true"> *</span>}
+	</label>
+	<slot />
+	{help && <p class="zef-help">{help}</p>}
+	<p class="zef-error" role="alert" hidden={!error}>{error}</p>
+</div>

package/components/Image.astro

@@ -10,18 +10,30 @@ import type { Media } from "@agence-zef/schema";
 interface Props {
 	media: Media | null;
 	class?: string;
-	/** `eager` pour l'image principale de la page. */
+	/** `eager` pour une image visible dès l'ouverture de la page. */
 	loading?: "lazy" | "eager";
+	/**
+	 * Image principale de la page (LCP, en général celle du hero) : chargée tout de suite et en
+	 * priorité (`fetchpriority="high"`). Une seule par page.
+	 */
+	priority?: boolean;
 	/** Largeur affichée (`(min-width: 48rem) 33vw, 100vw`) : active le `srcset`. */
 	sizes?: string;
 }
 
-const { media, class: className, loading = "lazy", sizes } = Astro.props;
+const { media, class: className, priority = false, sizes } = Astro.props;
+const loading = priority ? "eager" : (Astro.props.loading ?? "lazy");
+const fetchpriority = priority ? "high" : undefined;
+// Proportions réservées même si le CSS du site force `width: auto` (pas de décalage au chargement).
+const style =
+	media?.width && media.height ? `aspect-ratio: ${media.width} / ${media.height}` : undefined;
 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];
+// Largeurs générées pour le `srcset` : assez serrées pour qu'un mobile ne télécharge pas une
+// image deux fois trop grande.
+const STEPS = [320, 480, 640, 800, 960, 1200, 1600, 2000, 2400];
 const widths =
 	sizes && media?.width
 		? [...STEPS.filter((w) => w < (media.width as number)), media.width]
@@ -37,10 +49,12 @@ const widths =
 				width={media.width as number}
 				height={media.height as number}
 				loading={loading}
-				decoding="async"
+				fetchpriority={fetchpriority}
+				decoding={priority ? "sync" : "async"}
 				sizes={sizes}
 				widths={widths}
 				class={className}
+				style={style}
 			/>
 		) : (
 			<img
@@ -49,9 +63,11 @@ const widths =
 				width={media.width}
 				height={media.height}
 				loading={loading}
-				decoding="async"
+				fetchpriority={fetchpriority}
+				decoding={priority ? "sync" : "async"}
 				sizes={sizes}
 				class={className}
+				style={style}
 			/>
 		))
 }

package/components/Input.astro

@@ -0,0 +1,49 @@
+---
+/**
+ * Zone de saisie (`<input>` ou `<textarea>` avec `multiline`), classe `zef-input`. Avec `label`,
+ * elle est rendue dans un `<Field>` (libellé, aide, erreur). Les autres attributs sont passés
+ * tels quels (`name`, `type`, `required`, `placeholder`, `autocomplete`…).
+ */
+import type { HTMLAttributes } from "astro/types";
+import Field from "./Field.astro";
+
+type Props = Omit<HTMLAttributes<"input">, "class"> & {
+	label?: string;
+	help?: string;
+	error?: string;
+	multiline?: boolean;
+	rows?: number;
+	class?: string;
+};
+
+const {
+	label,
+	help,
+	error,
+	multiline = false,
+	rows = 5,
+	class: className,
+	id: givenId,
+	...rest
+} = Astro.props;
+const id =
+	givenId ?? (label ? `zef-${rest.name ?? Math.random().toString(36).slice(2, 8)}` : undefined);
+const attrs = {
+	...rest,
+	id,
+	class: `zef-input${className ? ` ${className}` : ""}`,
+	"aria-invalid": error ? "true" : undefined,
+};
+---
+
+{
+	label ? (
+		<Field label={label} for={id} help={help} error={error} required={Boolean(rest.required)}>
+			{multiline ? <textarea {...(attrs as HTMLAttributes<"textarea">)} rows={rows}>{rest.value ?? ""}</textarea> : <input {...attrs} />}
+		</Field>
+	) : multiline ? (
+		<textarea {...(attrs as HTMLAttributes<"textarea">)} rows={rows}>{rest.value ?? ""}</textarea>
+	) : (
+		<input {...attrs} />
+	)
+}

package/components/Popover.astro

@@ -0,0 +1,21 @@
+---
+/**
+ * Popover natif (attribut `popover`), sans JavaScript ni style imposé : ouvert par un bouton
+ * `<button popovertarget="<id>">`, fermé au clic en dehors et par Échap. Placé sous son bouton
+ * par le positionnement d'ancre CSS (`styles.css`), au centre de l'écran en repli.
+ * Classe `zef-popover` ; `manual` : ne se ferme pas au clic en dehors.
+ */
+interface Props {
+	id: string;
+	manual?: boolean;
+	/** Position par rapport au bouton : en dessous (défaut), au-dessus, à droite, à gauche. */
+	placement?: "bottom" | "top" | "right" | "left";
+	class?: string;
+}
+
+const { id, manual = false, placement = "bottom", class: className } = Astro.props;
+---
+
+<div id={id} popover={manual ? "manual" : "auto"} class:list={["zef-popover", className]} data-placement={placement}>
+	<slot />
+</div>

package/components/Select.astro

@@ -0,0 +1,55 @@
+---
+/**
+ * Liste déroulante native, classe `zef-select`. Options : `options` (`{ value: label }` ou
+ * `[{ value, label }]`) ou `<option>` en contenu. Avec `label`, rendue dans un `<Field>`.
+ */
+import type { HTMLAttributes } from "astro/types";
+import Field from "./Field.astro";
+
+type Option = { value: string; label: string };
+type Props = Omit<HTMLAttributes<"select">, "class"> & {
+	label?: string;
+	help?: string;
+	error?: string;
+	options?: Record<string, string> | Option[];
+	/** Première option vide (« Choisir… »). */
+	placeholder?: string;
+	value?: string;
+	class?: string;
+};
+
+const {
+	label,
+	help,
+	error,
+	options,
+	placeholder,
+	value,
+	class: className,
+	id: givenId,
+	...rest
+} = Astro.props;
+const id =
+	givenId ?? (label ? `zef-${rest.name ?? Math.random().toString(36).slice(2, 8)}` : undefined);
+const list: Option[] = Array.isArray(options)
+	? options
+	: Object.entries(options ?? {}).map(([v, l]) => ({ value: v, label: l }));
+---
+
+{
+	label ? (
+		<Field label={label} for={id} help={help} error={error} required={Boolean(rest.required)}>
+			<select {...rest} id={id} class:list={["zef-select", className]} aria-invalid={error ? "true" : undefined}>
+				{placeholder !== undefined && <option value="">{placeholder}</option>}
+				{list.map((o) => <option value={o.value} selected={o.value === value}>{o.label}</option>)}
+				<slot />
+			</select>
+		</Field>
+	) : (
+		<select {...rest} id={id} class:list={["zef-select", className]} aria-invalid={error ? "true" : undefined}>
+			{placeholder !== undefined && <option value="">{placeholder}</option>}
+			{list.map((o) => <option value={o.value} selected={o.value === value}>{o.label}</option>)}
+			<slot />
+		</select>
+	)
+}

package/components/routes/cache.ts

@@ -0,0 +1,10 @@
+/*
+ * 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`).
+ */
+
+/** 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 };

package/components/routes/llms.ts

@@ -1,6 +1,7 @@
 import config from "virtual:zef/config";
 import { getClient, llmsTxt, siteOrigin, zefSiteIndex } from "@agence-zef/astro";
 import type { APIRoute } from "astro";
+import { CACHE_TAG, PAGE_CACHE } from "./cache";
 
 /*
  * `llms.txt` injecté par `@agence-zef/astro` (§ 5.13, format llmstxt.org) : le site présenté aux
@@ -9,7 +10,9 @@ import type { APIRoute } from "astro";
 
 export const prerender = true;
 
-export const GET: APIRoute = async ({ site: astroSite }) => {
+export const GET: APIRoute = async ({ site: astroSite, cache }) => {
+	// Rendu à la demande (`rendering: "cached"`) : gardé en cache, invalidé par une publication.
+	cache.set({ ...PAGE_CACHE, tags: [CACHE_TAG] });
 	const site = await getClient().site();
 	const collections = (config.collections ?? [])
 		.filter((c) => c.page)

package/components/routes/page-cached.astro

@@ -0,0 +1,69 @@
+---
+import Layout from "virtual:zef/layout";
+/**
+ * Rendu à la demande (`defineConfig({ rendering: "cached" })`) : chaque page du CMS ou élément
+ * de collection est rendu à la première visite puis gardé en cache par le CDN (route caching
+ * d'Astro), avec le tag `zef`. Une publication invalide ce tag (`/__zef/revalidate`) : les pages
+ * sont rafraîchies à la visite suivante, sans build. Contenu réservé : jamais en cache.
+ * Adresse inconnue : redirection du CMS (C-17) si elle existe, sinon 404.
+ */
+import { getClient, type RouteProps, zefRouteProps } from "@agence-zef/astro";
+import { visitorOf } from "@agence-zef/astro/accounts";
+import ReservedNotice from "../ReservedNotice.astro";
+import ZefSections from "../ZefSections.astro";
+import { CACHE_TAG, PAGE_CACHE } from "./cache";
+
+const path = decodeURI(Astro.url.pathname);
+let props: RouteProps | null;
+try {
+	props = await zefRouteProps(path, visitorOf(Astro));
+} catch {
+	// CMS injoignable : 503 sans cache, le CDN continue de servir la version qu'il a.
+	Astro.cache.set(false);
+	return new Response("Service momentanément indisponible.", { status: 503 });
+}
+
+if (!props) {
+	const redirect = (
+		await getClient()
+			.redirects()
+			.catch(() => [])
+	).find((r) => r.from === path || r.from === path.replace(/\/$/, ""));
+	Astro.cache.set({ maxAge: 60, tags: [CACHE_TAG] });
+	if (redirect) return Astro.redirect(redirect.to, redirect.status === 302 ? 302 : 301);
+	return new Response(null, { status: 404 });
+}
+
+const doc = props.kind === "page" ? props.page : props.item;
+const reserved = doc.access?.reserved === true;
+// Le contenu réservé dépend du visiteur : jamais en cache.
+if (reserved) Astro.cache.set(false);
+else Astro.cache.set({ ...PAGE_CACHE, tags: [CACHE_TAG] });
+
+// Site en développement (§ 5.11) : aucune page n'est indexable.
+const seo =
+	props.site.indexable === false || reserved ? { ...props.seo, noindex: true } : props.seo;
+---
+
+<Layout
+	site={props.site}
+	locale={props.locale}
+	title={props.title}
+	seo={seo}
+	alternates={props.alternates}
+	url={props.url}
+	breadcrumbs={props.breadcrumbs}
+	item={props.kind === "item" ? props.item : undefined}
+	header={props.header}
+	footer={props.footer}
+>
+	{
+		reserved && !doc.access?.granted ? (
+			<ReservedNotice title={props.title} products={doc.access?.products ?? []} />
+		) : props.kind === "page" ? (
+			<ZefSections sections={props.page.sections} />
+		) : (
+			<ZefSections sections={props.item.sections ?? []} item={props.item} />
+		)
+	}
+</Layout>

package/components/routes/revalidate.ts

@@ -0,0 +1,33 @@
+import { createClient } from "@agence-zef/sdk";
+import type { APIRoute } from "astro";
+import { CACHE_TAG } from "./cache";
+
+/*
+ * Invalidation du cache après une publication (`rendering: "cached"`) : le CMS appelle
+ * `POST /__zef/revalidate` avec un jeton d'aperçu de ce site (`Authorization: Bearer …`). Le site
+ * vérifie le jeton auprès de son CMS (`ZEF_URL` désigne le client : un jeton accepté là est
+ * forcément le sien), puis invalide le tag `zef` : toutes les pages sont rafraîchies à leur
+ * prochaine visite.
+ */
+
+export const prerender = false;
+
+export const POST: APIRoute = async ({ request, cache }) => {
+	const token = request.headers.get("authorization")?.replace(/^Bearer\s+/i, "");
+	const url = process.env.ZEF_URL;
+	if (!token || !url) return json(401, { ok: false, error: "Jeton manquant." });
+	const valid = await createClient({ url, apiKey: token })
+		.site()
+		.then(() => true)
+		.catch(() => false);
+	if (!valid) return json(403, { ok: false, error: "Jeton refusé." });
+	if (!cache.enabled) return json(200, { ok: true, invalidated: false });
+	await cache.invalidate({ tags: [CACHE_TAG] });
+	return json(200, { ok: true, invalidated: true });
+};
+
+const json = (status: number, body: unknown) =>
+	new Response(JSON.stringify(body), {
+		status,
+		headers: { "content-type": "application/json", "cache-control": "no-store" },
+	});

package/components/routes/robots.ts

@@ -1,5 +1,6 @@
 import { getClient, robotsTxt, siteOrigin } from "@agence-zef/astro";
 import type { APIRoute } from "astro";
+import { CACHE_TAG, PAGE_CACHE } from "./cache";
 
 /*
  * `robots.txt` injecté par `@agence-zef/astro` (§ 5.11, § 5.13) : tout est bloqué tant que le site
@@ -9,7 +10,9 @@ import type { APIRoute } from "astro";
 
 export const prerender = true;
 
-export const GET: APIRoute = async ({ site: astroSite }) => {
+export const GET: APIRoute = async ({ site: astroSite, cache }) => {
+	// Rendu à la demande (`rendering: "cached"`) : gardé en cache, invalidé par une publication.
+	cache.set({ ...PAGE_CACHE, tags: [CACHE_TAG] });
 	const site = await getClient().site();
 	const body = robotsTxt(site, siteOrigin(site, astroSite?.origin));
 	return new Response(body, { headers: { "Content-Type": "text/plain; charset=utf-8" } });

package/components/routes/sitemap.ts

@@ -1,6 +1,7 @@
 import config from "virtual:zef/config";
 import { getClient, sitemapXml, siteOrigin, zefSiteIndex } from "@agence-zef/astro";
 import type { APIRoute } from "astro";
+import { CACHE_TAG, PAGE_CACHE } from "./cache";
 
 /*
  * `sitemap.xml` injecté par `@agence-zef/astro` (§ 5.13) : pages et éléments publiés et
@@ -9,7 +10,9 @@ import type { APIRoute } from "astro";
 
 export const prerender = true;
 
-export const GET: APIRoute = async ({ site: astroSite }) => {
+export const GET: APIRoute = async ({ site: astroSite, cache }) => {
+	// Rendu à la demande (`rendering: "cached"`) : gardé en cache, invalidé par une publication.
+	cache.set({ ...PAGE_CACHE, tags: [CACHE_TAG] });
 	const site = await getClient().site();
 	const body = sitemapXml(await zefSiteIndex(config), siteOrigin(site, astroSite?.origin));
 	return new Response(body, { headers: { "Content-Type": "application/xml; charset=utf-8" } });

package/dist/helpers.d.ts

@@ -56,6 +56,12 @@ export declare function zefLayoutProps(opts: {
     locale?: string;
     noindex?: boolean;
 }): Promise<LayoutProps>;
+/**
+ * Rendu à la demande (`rendering: "cached"`) : les props du gabarit pour une adresse, page ou
+ * élément de collection, sans parcourir tout le site. `null` si rien n'est publié à cette
+ * adresse ; une erreur du CMS remonte (la page en cache reste servie).
+ */
+export declare function zefRouteProps(path: string, visitor?: Parameters<ZefClient["document"]>[1]): Promise<RouteProps | null>;
 /**
  * Toutes les routes du site : pages publiées, puis éléments des collections avec page. Calculé
  * une fois par build : la route des pages, le sitemap et `llms.txt` partagent le résultat.