@pmeweb/content 2.2.0 → 2.3.1

package/README.md

@@ -12,6 +12,9 @@ collections in `src/content.schema.json`; this package is what reads that declar
 | `@pmeweb/content/collection` | `titleFieldError`, `thumbnailError`, `richErrors`, `collectionErrors`, `schemaErrors`, `richBodyField`, `hasThumbnails` | portal, `zodFrom` |
 | `@pmeweb/content/published` | `getPublished`, the one filter every site's pages go through; `getPublishedItems` | sites |
 | `@pmeweb/content/prose.css` | the structure of a row of images in a rich body | sites' `Prose.astro` |
+| `@pmeweb/content/embeds` | the players' provider table and detector (browser-safe) | sites, portal editor |
+| `@pmeweb/content/embeds/astro` | `rehypeEmbeds`, `embeds()` integration (Node) | sites' `astro.config.mjs` |
+| `@pmeweb/content/EmbedPrivacy.astro` | the privacy page's paragraph per player provider | sites' privacy pages |
 
 ## Dated kinds
 
@@ -54,6 +57,55 @@ reads both once, `const APERCU = portalPreview(process.env)`, and filters with
 drafts in the preview, removed ones only in a preview that asked for them. Only the exact
 string `'1'` counts, and the past flag means nothing without the preview flag.
 
+## Embeds (2.3.0, 2.3.1)
+
+A YouTube or SoundCloud link alone on its paragraph (`[words](url)`, no title attribute, words
+that are not the URL itself, not in a list or a quote) becomes a click-to-load player: the
+original link around a poster (YouTube: the video's thumbnail, served by the site; SoundCloud: a
+waveform drawn in the page), swapped for the provider's iframe on click.
+Nothing loads from the provider before that click.
+
+Two subpaths:
+
+- `@pmeweb/content/embeds`: pure and browser-safe (the portal's editor imports it). The provider
+  table `PROVIDERS`, `embedFromUrl`, `embedFromLink`, `embedProviders(bodies)`, `embedFrameHosts`,
+  `supportedLabels()`.
+- `@pmeweb/content/embeds/astro`: Node only. `rehypeEmbeds()` (a satteri hast plugin),
+  `embeds()` (the Astro integration), `scanPages` / `selfCheck`.
+
+A site with a `rich` body wires FOUR pieces:
+
+1. `rehypeEmbeds()` through `satteri({ hastPlugins: [...] })` in
+   `astro.config.mjs`, AND through every `createSatteriMarkdownProcessor` the site calls itself.
+2. `embeds()` in `integrations`. At build it writes `dist/_embed/player.js`, `embed.css` and the
+   YouTube posters (the thumbnail fetched at build and re-encoded to WebP, or a drawn dark poster
+   when the fetch fails), and FAILS the build when a player line was not converted
+   or the privacy page does not mention a provider in use.
+3. `<EmbedPrivacy lang providers={embedProviders(bodies)} />` (`@pmeweb/content/EmbedPrivacy.astro`)
+   on every privacy page, `bodies` being the published posts' raw Markdown.
+4. `embedFrameHosts` in the worker CSP's `frame-src`.
+
+`astro dev` serves the script and the stylesheet but not the posters (they are build output):
+the facade shows its dark background behind the title.
+
+The look is the site's, through `--pmw-embed-radius`, `--pmw-embed-focus`, and for audio
+`--pmw-embed-audio-bg`, `-line`, `-wave`, `-fg` and `-accent` (light by default, like SoundCloud's own
+player). `embed.css` names element and class in every selector, so a site's `.prose img` or
+`.prose a` (Astro-scoped, two classes and an element) does not reach inside the facade.
+
+### 2.3.1
+
+- The poster no longer takes the site's article image styles (margin, border, `height: auto`):
+  2.3.0 showed a band above it and cut its bottom off.
+- SoundCloud's facade is drawn in the page (inline SVG), light and themeable, laid out like its
+  player; no image file for audio.
+- No line under the player any more (« Lecture par … Politique de confidentialité »). The privacy
+  page still lists each provider. `rehypeEmbeds` and `embeds` take no options; 2.3.0's
+  `{ lang, privacyHref }` are accepted and ignored.
+
+Adding a provider = one entry in `src/embeds/providers.ts` + its privacy text, approved by the
+operator + a minor release. `prepublishOnly` refuses a privacy text still carrying `[À VALIDER`.
+
 ## 2.2.0
 
 Additive: every 2.1.0 declaration is valid and behaves identically.

package/assets/embed/embed.css

@@ -0,0 +1,40 @@
+/* @pmeweb/content/embeds -- the STRUCTURE of a player facade. The look is per site, through the
+ * --pmw-embed-* variables. Written to dist/_embed/embed.css by the integration, linked only by pages that
+ * hold a player.
+ *
+ * EVERY SELECTOR NAMES THE ELEMENT AND ITS CLASS (figure.pmw-embed img.pmw-embed__poster: two
+ * classes, two elements). A site's article styles reach inside the facade -- Astro compiles
+ * `.prose :global(img)` to `.prose[data-astro-cid-…] img` (two classes, one element), which beat
+ * 2.3.0's `.pmw-embed__link img` and gave the poster the article's margin, border and
+ * `height: auto`: a band above the poster and its bottom cut off (test-contenu, 2026-11-05). So
+ * the poster and the link also reset every property an article style usually sets. */
+figure.pmw-embed { margin: 1.5em 0; padding: 0; }
+figure.pmw-embed a.pmw-embed__link { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; border: 0; border-radius: var(--pmw-embed-radius, 8px); background: #1f2328; color: #fff; text-decoration: none; }
+figure.pmw-embed--video a.pmw-embed__link, figure.pmw-embed--video iframe.pmw-embed__frame { width: 100%; aspect-ratio: 16 / 9; }
+figure.pmw-embed--audio a.pmw-embed__link, figure.pmw-embed--audio iframe.pmw-embed__frame { width: 100%; height: 166px; }
+figure.pmw-embed img.pmw-embed__poster { display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; object-fit: cover; }
+figure.pmw-embed span.pmw-embed__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
+figure.pmw-embed span.pmw-embed__title { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.6em 1em; background: rgba(0, 0, 0, 0.78); color: #fff; font-weight: 600; line-height: 1.35; text-decoration: none; }
+/* White ring inside a dark one: visible on a light page and on a dark one, whatever the site's
+ * link color. A site may set its own with --pmw-embed-focus. */
+figure.pmw-embed a.pmw-embed__link:focus-visible { outline: 3px solid var(--pmw-embed-focus, #fff); outline-offset: 2px; box-shadow: 0 0 0 7px #1f2328; }
+figure.pmw-embed--video a.pmw-embed__link:hover .pmw-embed__play path:first-child { fill: #c00; }
+
+/* AUDIO: drawn in the page (facade.ts WAVE), so every color is the site's. Light by default, like
+ * SoundCloud's own player, which is what the click turns it into:
+ *   --pmw-embed-audio-bg      panel           (#f2f2f2)
+ *   --pmw-embed-audio-line    panel border    (#dcdcdc)
+ *   --pmw-embed-audio-wave    waveform bars   (#c4c4c4)
+ *   --pmw-embed-audio-fg      title text      (#1f2328)
+ *   --pmw-embed-audio-accent  play button     (#ff5500, SoundCloud's orange) */
+/* Laid out like that player too, on a grid rather than over the poster: the button on the left,
+ * the title on top, the waveform under it -- so a title wrapping to two lines on a phone pushes the
+ * waveform down instead of running over it. */
+figure.pmw-embed--audio a.pmw-embed__link { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 1em; row-gap: 0.5em; padding: 1em; box-sizing: border-box; background: var(--pmw-embed-audio-bg, #f2f2f2); color: var(--pmw-embed-audio-fg, #1f2328); border: 1px solid var(--pmw-embed-audio-line, #dcdcdc); }
+figure.pmw-embed--audio span.pmw-embed__play { position: static; grid-column: 1; grid-row: 1 / 3; align-self: center; }
+figure.pmw-embed--audio span.pmw-embed__title { position: static; grid-column: 2; grid-row: 1; padding: 0; background: none; color: inherit; }
+figure.pmw-embed--audio svg.pmw-embed__wave { grid-column: 2; grid-row: 2; display: block; width: 100%; height: 100%; min-height: 2em; }
+figure.pmw-embed svg.pmw-embed__wave rect { fill: var(--pmw-embed-audio-wave, #c4c4c4); }
+figure.pmw-embed span.pmw-embed__play--round circle { fill: var(--pmw-embed-audio-accent, #ff5500); }
+figure.pmw-embed a.pmw-embed__link:hover span.pmw-embed__play--round svg { filter: brightness(0.9); }
+figure.pmw-embed iframe.pmw-embed__frame { display: block; margin: 0; border: 0; border-radius: var(--pmw-embed-radius, 8px); }

package/assets/embed/player.js

@@ -0,0 +1,21 @@
+(function () {
+  if (document.documentElement.hasAttribute('data-pmw-embeds')) return;
+  document.documentElement.setAttribute('data-pmw-embeds', '');
+  document.addEventListener('click', function (e) {
+    if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+    var link = e.target instanceof Element ? e.target.closest('.pmw-embed__link') : null;
+    if (!link) return;
+    var fig = link.closest('.pmw-embed');
+    var src = fig && fig.getAttribute('data-embed');
+    if (!src) return;
+    e.preventDefault();
+    var frame = document.createElement('iframe');
+    frame.className = 'pmw-embed__frame';
+    frame.src = src;
+    frame.title = fig.getAttribute('data-title') || '';
+    frame.allow = 'autoplay; encrypted-media; picture-in-picture; fullscreen';
+    frame.setAttribute('allowfullscreen', '');
+    link.replaceWith(frame);
+    frame.focus();
+  });
+})();

package/astro/EmbedPrivacy.astro

@@ -0,0 +1,20 @@
+---
+// One paragraph per provider a site's published posts use, under one heading, at the anchor every
+// facade's note links to. `providers` comes from `embedProviders(bodies)`
+// (`@pmeweb/content/embeds`); empty, it renders nothing. The text is the package's, approved once
+// by the operator, identical on every site: a client cannot edit it in « Contenu ».
+// `data-pmeweb-embeds-privacy` is what the integration's self-check reads in dist/.
+import { EMBED_PRIVACY_HEADING, EMBED_PRIVACY_ID, PROVIDERS, type Lang, type ProviderKey } from '@pmeweb/content/embeds';
+interface Props { lang: Lang; providers: ProviderKey[]; headingLevel?: 2 | 3 }
+const { lang, providers, headingLevel = 2 } = Astro.props;
+const H = `h${headingLevel}`;
+---
+{providers.length > 0 && (
+  <section id={EMBED_PRIVACY_ID} data-pmeweb-embeds-privacy={providers.join(' ')}>
+    <H>{EMBED_PRIVACY_HEADING[lang]}</H>
+    {providers.map((k) => {
+      const c = PROVIDERS[k].copy[lang];
+      return <p>{c.privacy} <a href={c.policyHref} rel="noopener" target="_blank">{c.policyLabel}</a></p>;
+    })}
+  </section>
+)}

package/dist/embeds/astro.d.ts

@@ -0,0 +1,3 @@
+export { rehypeEmbeds } from './rehype.js';
+export { embeds, type EmbedsOptions } from './integration.js';
+export { scanPages, selfCheck } from './scan.js';

package/dist/embeds/astro.js

@@ -0,0 +1,5 @@
+// `@pmeweb/content/embeds/astro`: the Node-only half (satteri plugin, Astro integration, dist
+// scanner). Never imported by a browser bundle.
+export { rehypeEmbeds } from './rehype.js';
+export { embeds } from './integration.js';
+export { scanPages, selfCheck } from './scan.js';

package/dist/embeds/detect.d.ts

@@ -0,0 +1,28 @@
+import { type ProviderKey } from './providers.js';
+export interface Embed {
+    provider: ProviderKey;
+    id: string;
+    url: string;
+    title: string;
+}
+/** The provider and id of a player URL, or null. http(s) only. */
+export declare function embedFromUrl(raw: string): {
+    provider: ProviderKey;
+    id: string;
+} | null;
+/**
+ * A link whose href is a player and whose text can title it. The text equal to the href is a bare
+ * URL (GFM autolink renders `https://…` as `[https://…](https://…)`), which stays a link: a player
+ * needs words a screen reader can say.
+ */
+export declare function embedFromLink(href: string, text: string): Embed | null;
+/**
+ * The providers used across these Markdown bodies, in table order, once each: what the privacy
+ * page lists. A paragraph is a run of lines between blank lines. It may over-include (a link
+ * alone inside a code fence); the integration's self-check guarantees it never under-includes.
+ */
+export declare function embedProviders(bodies: Iterable<string>): ProviderKey[];
+/** Every provider's iframe origin, for a site's CSP `frame-src`. */
+export declare const embedFrameHosts: string[];
+/** « YouTube, SoundCloud »: the editor's sentence for an unsupported URL. */
+export declare function supportedLabels(): string;

package/dist/embeds/detect.js

@@ -0,0 +1,60 @@
+// Is this link a player? ONE answer for the site's plugin, the site's privacy page and the
+// portal's Markdown bridge, so the editor and the site cannot disagree. Pure, browser-safe.
+import { PROVIDERS, PROVIDER_KEYS } from './providers.js';
+/** The provider and id of a player URL, or null. http(s) only. */
+export function embedFromUrl(raw) {
+    let u;
+    try {
+        u = new URL(raw.trim());
+    }
+    catch {
+        return null;
+    }
+    if (u.protocol !== 'https:' && u.protocol !== 'http:')
+        return null;
+    for (const provider of PROVIDER_KEYS) {
+        const id = PROVIDERS[provider].id(u);
+        if (id !== null)
+            return { provider, id };
+    }
+    return null;
+}
+/**
+ * A link whose href is a player and whose text can title it. The text equal to the href is a bare
+ * URL (GFM autolink renders `https://…` as `[https://…](https://…)`), which stays a link: a player
+ * needs words a screen reader can say.
+ */
+export function embedFromLink(href, text) {
+    const title = text.trim();
+    if (title === '' || title === href.trim())
+        return null;
+    const hit = embedFromUrl(href);
+    return hit ? { ...hit, url: href.trim(), title } : null;
+}
+/** `[text](url)` and nothing else on the paragraph; no title attribute. */
+const LINK_PARAGRAPH = /^\[((?:\\.|[^\]\\\n])+)\]\(<?([^\s<>()]+)>?\)$/;
+/**
+ * The providers used across these Markdown bodies, in table order, once each: what the privacy
+ * page lists. A paragraph is a run of lines between blank lines. It may over-include (a link
+ * alone inside a code fence); the integration's self-check guarantees it never under-includes.
+ */
+export function embedProviders(bodies) {
+    const found = new Set();
+    for (const body of bodies) {
+        for (const para of body.split(/\r?\n[ \t]*\r?\n/)) {
+            const m = LINK_PARAGRAPH.exec(para.trim());
+            if (!m)
+                continue;
+            const hit = embedFromLink(m[2], m[1].replace(/\\(.)/g, '$1'));
+            if (hit)
+                found.add(hit.provider);
+        }
+    }
+    return PROVIDER_KEYS.filter((k) => found.has(k));
+}
+/** Every provider's iframe origin, for a site's CSP `frame-src`. */
+export const embedFrameHosts = PROVIDER_KEYS.map((k) => PROVIDERS[k].frameHost);
+/** « YouTube, SoundCloud »: the editor's sentence for an unsupported URL. */
+export function supportedLabels() {
+    return PROVIDER_KEYS.map((k) => PROVIDERS[k].label).join(', ');
+}

package/dist/embeds/facade.d.ts

@@ -0,0 +1,14 @@
+import { type ProviderKey } from './providers.js';
+import type { Embed } from './detect.js';
+/** The two files a document with a player loads, once per document. */
+export declare const ASSET_TAGS = "<link rel=\"stylesheet\" href=\"/_embed/embed.css\"><script type=\"module\" src=\"/_embed/player.js\"></script>";
+export declare const POSTER_WIDTHS: readonly [640, 960];
+/** A thumbnail's file, one per video and width (posters.ts writes it). */
+export declare function posterPath(provider: ProviderKey, id: string, width: number): string;
+/**
+ * No words of the package's own under the player (2.3.0 wrote « Lecture par YouTube. Politique de
+ * confidentialité »; the operator removed it, 2026-11-05): the facade carries the client's title
+ * and nothing else, so it needs no language. The privacy page still names each provider
+ * (EmbedPrivacy.astro), and the build still refuses a site where it does not.
+ */
+export declare function facadeHtml(e: Embed): string;

package/dist/embeds/facade.js

@@ -0,0 +1,43 @@
+// The HTML a player line becomes on the site: the ORIGINAL link around a poster -- an image served by
+// the site, or a waveform drawn in the page -- so without JavaScript it is exactly today's link and
+// nothing third-party loads before a click.
+// `player.js` (assets/embed/) swaps the link for the iframe named in `data-embed` on click.
+import { PROVIDERS } from './providers.js';
+/** The two files a document with a player loads, once per document. */
+export const ASSET_TAGS = '<link rel="stylesheet" href="/_embed/embed.css"><script type="module" src="/_embed/player.js"></script>';
+export const POSTER_WIDTHS = [640, 960];
+const esc = (s) => s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+/** A thumbnail's file, one per video and width (posters.ts writes it). */
+export function posterPath(provider, id, width) {
+    return `/_embed/${provider}-${id}-${width}.webp`;
+}
+const PLAY = '<svg viewBox="0 0 68 48" width="68" height="48" focusable="false"><path d="M66.5 7.7a8.5 8.5 0 0 0-6-6C55.2.3 34 .3 34 .3s-21.2 0-26.5 1.4a8.5 8.5 0 0 0-6 6C.1 13 .1 24 .1 24s0 11 1.4 16.3a8.5 8.5 0 0 0 6 6C12.8 47.7 34 47.7 34 47.7s21.2 0 26.5-1.4a8.5 8.5 0 0 0 6-6C67.9 35 67.9 24 67.9 24s0-11-1.4-16.3z" fill="rgba(0,0,0,.8)"/><path d="M27 14l18 10-18 10z" fill="#fff"/></svg>';
+/** A round play button for audio: the rounded rectangle above is YouTube's own mark. */
+const PLAY_ROUND = '<svg viewBox="0 0 56 56" width="56" height="56" focusable="false"><circle cx="28" cy="28" r="28"/><path d="M22 17l18 11-18 11z" fill="#fff"/></svg>';
+/**
+ * An audio poster drawn IN THE PAGE (poster kind `inline`): a waveform whose colors are the site's
+ * (`--pmw-embed-audio-*`, embed.css), light by default like SoundCloud's own player, so the click
+ * does not flip a dark panel into a white one. Stretched to the box (preserveAspectRatio none).
+ */
+const WAVE = `<svg class="pmw-embed__wave" viewBox="0 0 640 100" preserveAspectRatio="none" aria-hidden="true" focusable="false">${Array.from({ length: 64 }, (_, i) => {
+    const h = Math.round((0.25 + 0.75 * Math.abs(Math.sin(i * 0.7))) * 56);
+    return `<rect x="${i * 10 + 2}" y="${50 - h / 2}" width="6" height="${h}" rx="3"/>`;
+}).join('')}</svg>`;
+/**
+ * No words of the package's own under the player (2.3.0 wrote « Lecture par YouTube. Politique de
+ * confidentialité »; the operator removed it, 2026-11-05): the facade carries the client's title
+ * and nothing else, so it needs no language. The privacy page still names each provider
+ * (EmbedPrivacy.astro), and the build still refuses a site where it does not.
+ */
+export function facadeHtml(e) {
+    const p = PROVIDERS[e.provider];
+    const [w1, w2] = POSTER_WIDTHS;
+    const height = p.shape === 'video' ? Math.round((w2 * 9) / 16) : 166;
+    const poster = p.poster.kind === 'inline' ? WAVE : `<img class="pmw-embed__poster" src="${posterPath(e.provider, e.id, w2)}" srcset="${posterPath(e.provider, e.id, w1)} ${w1}w, ${posterPath(e.provider, e.id, w2)} ${w2}w" sizes="(max-width: 720px) 100vw, 720px" width="${w2}" height="${height}" alt="" loading="lazy" decoding="async">`;
+    const play = p.shape === 'audio'
+        ? `<span class="pmw-embed__play pmw-embed__play--round" aria-hidden="true">${PLAY_ROUND}</span>`
+        : `<span class="pmw-embed__play" aria-hidden="true">${PLAY}</span>`;
+    return `<figure class="pmw-embed pmw-embed--${p.shape}" data-provider="${e.provider}" data-embed="${esc(p.embed(e.id))}" data-title="${esc(e.title)}">`
+        + `<a class="pmw-embed__link" href="${esc(e.url)}" target="_blank" rel="noopener">${poster}${play}<span class="pmw-embed__title">${esc(e.title)}</span></a>`
+        + '</figure>';
+}

package/dist/embeds/index.d.ts

@@ -0,0 +1,2 @@
+export * from './providers.js';
+export * from './detect.js';

package/dist/embeds/index.js

@@ -0,0 +1,4 @@
+// `@pmeweb/content/embeds`: the browser-safe half (table, detector, hosts, copy). The Astro half is
+// `@pmeweb/content/embeds/astro`.
+export * from './providers.js';
+export * from './detect.js';

package/dist/embeds/integration.d.ts

@@ -0,0 +1,9 @@
+import type { AstroIntegration } from 'astro';
+/** 2.3.0's `lang` and `privacyHref` are accepted and ignored (the line under the player is gone). */
+export interface EmbedsOptions {
+    lang?: string;
+    privacyHref?: string;
+    /** For tests; the build uses the global fetch. */
+    fetch?: (url: string) => Promise<Response>;
+}
+export declare function embeds(o?: EmbedsOptions): AstroIntegration;

package/dist/embeds/integration.js

@@ -0,0 +1,53 @@
+// The Astro half of the players: writes dist/_embed/{player.js, embed.css} and the posters, serves
+// the same paths in `astro dev`, and REFUSES a half-wired site (scan.ts selfCheck): a player line
+// the plugin never converted, or a provider the privacy page does not mention. A missing
+// integration runs no check at all; that case is the workspace gate's
+// (websites/scripts/check-rich-sites.mjs).
+import { copyFileSync, mkdirSync, readdirSync, readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { join } from 'node:path';
+import { writePosters } from './posters.js';
+import { scanPages, selfCheck } from './scan.js';
+const ASSETS = fileURLToPath(new URL('../../assets/embed/', import.meta.url));
+function* htmlPages(root, rel = '') {
+    for (const d of readdirSync(join(root, rel), { withFileTypes: true })) {
+        const p = rel ? `${rel}/${d.name}` : d.name;
+        if (d.isDirectory())
+            yield* htmlPages(root, p);
+        else if (d.name.endsWith('.html'))
+            yield { path: p, html: readFileSync(join(root, p), 'utf8') };
+    }
+}
+export function embeds(o = {}) {
+    return {
+        name: '@pmeweb/content/embeds',
+        hooks: {
+            'astro:server:setup': ({ server }) => {
+                server.middlewares.use('/_embed/', (req, res, next) => {
+                    const name = (req.url ?? '').replace(/^\//, '').split('?')[0];
+                    if (name !== 'player.js' && name !== 'embed.css')
+                        return next();
+                    res.setHeader('content-type', name.endsWith('.js') ? 'text/javascript' : 'text/css');
+                    res.end(readFileSync(join(ASSETS, name)));
+                });
+            },
+            'astro:build:done': async ({ dir, logger }) => {
+                const root = fileURLToPath(dir);
+                const scan = scanPages(htmlPages(root));
+                const errors = selfCheck(scan);
+                if (errors.length > 0)
+                    throw new Error(errors.join('\n'));
+                if (scan.used.length === 0)
+                    return;
+                const out = join(root, '_embed');
+                mkdirSync(out, { recursive: true });
+                copyFileSync(join(ASSETS, 'player.js'), join(out, 'player.js'));
+                copyFileSync(join(ASSETS, 'embed.css'), join(out, 'embed.css'));
+                await writePosters({
+                    dir: out, thumbnails: scan.thumbnails,
+                    fetch: o.fetch ?? ((url) => fetch(url)), warn: (m) => logger.warn(m),
+                });
+            },
+        },
+    };
+}

package/dist/embeds/posters.d.ts

@@ -0,0 +1,11 @@
+import { type ProviderKey } from './providers.js';
+export interface PosterJob {
+    dir: string;
+    thumbnails: {
+        provider: ProviderKey;
+        id: string;
+    }[];
+    fetch: (url: string) => Promise<Response>;
+    warn: (message: string) => void;
+}
+export declare function writePosters(job: PosterJob): Promise<void>;

package/dist/embeds/posters.js

@@ -0,0 +1,61 @@
+// The thumbnail posters, written into dist/_embed/ at build (an `inline` poster is drawn in the page,
+// facade.ts, and has no file). A thumbnail is fetched from the provider HERE,
+// never by the visitor's browser, re-encoded to WebP and cropped to 16:9 (hqdefault is 4:3 with
+// black bars). Any failure writes the drawn poster under the same names: a poster never fails a
+// build. The preview builder may have no outbound network [UNVERIFIED]; it then shows the drawn
+// poster where production shows the thumbnail.
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { POSTER_WIDTHS, posterPath } from './facade.js';
+import { PROVIDERS } from './providers.js';
+const FETCH_MS = 8000;
+/** A dark panel with a waveform: no text, so no font is needed where the build runs. */
+function drawnSvg(shape) {
+    const [w, h] = shape === 'video' ? [960, 540] : [960, 166];
+    const mid = h / 2;
+    const bars = Array.from({ length: 48 }, (_, i) => {
+        const bh = Math.round((0.25 + 0.75 * Math.abs(Math.sin(i * 0.7))) * h * 0.35);
+        return `<rect x="${120 + i * 15}" y="${mid - bh / 2}" width="8" height="${bh}" rx="4" fill="#ffffff" fill-opacity="0.18"/>`;
+    }).join('');
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}"><rect width="${w}" height="${h}" fill="#1f2328"/>${bars}</svg>`;
+}
+async function encode(input, shape, width) {
+    const { default: sharp } = await import('sharp');
+    const height = shape === 'video' ? Math.round((width * 9) / 16) : Math.round((width * 166) / 960);
+    return sharp(input).resize(width, height, { fit: 'cover' }).webp({ quality: 78 }).toBuffer();
+}
+async function fetchFirst(urls, fetcher) {
+    for (const url of urls) {
+        let timer;
+        try {
+            const res = await Promise.race([
+                fetcher(url),
+                new Promise((_, reject) => { timer = setTimeout(() => reject(new Error('timeout')), FETCH_MS); }),
+            ]);
+            if (res.ok)
+                return Buffer.from(await res.arrayBuffer());
+        }
+        catch { /* next url, then the drawn poster */ }
+        finally {
+            clearTimeout(timer);
+        }
+    }
+    return null;
+}
+async function write(dir, provider, id, source) {
+    const shape = PROVIDERS[provider].shape;
+    for (const width of POSTER_WIDTHS) {
+        const file = join(dir, posterPath(provider, id, width).replace('/_embed/', ''));
+        writeFileSync(file, await encode(source, shape, width));
+    }
+}
+export async function writePosters(job) {
+    mkdirSync(job.dir, { recursive: true });
+    for (const { provider, id } of job.thumbnails) {
+        const poster = PROVIDERS[provider].poster;
+        const got = poster.kind === 'thumbnail' ? await fetchFirst(poster.urls(id), job.fetch) : null;
+        if (!got)
+            job.warn(`embeds : aperçu ${PROVIDERS[provider].label} ${id} introuvable, image dessinée à la place`);
+        await write(job.dir, provider, id, got ?? Buffer.from(drawnSvg(PROVIDERS[provider].shape)));
+    }
+}

package/dist/embeds/providers.d.ts

@@ -0,0 +1,88 @@
+export type Lang = 'fr' | 'en';
+export interface ProviderCopy {
+    /** The privacy page's paragraph, then a link to the provider's own policy. */
+    privacy: string;
+    policyLabel: string;
+    policyHref: string;
+}
+/**
+ * What the facade shows before the click. `thumbnail`: the provider's image, fetched at build and
+ * served by the site (posters.ts). `inline`: drawn in the page itself (facade.ts), so its colors
+ * are the site's CSS variables -- a provider with no thumbnail to fetch.
+ */
+export type Poster = {
+    kind: 'thumbnail';
+    urls(id: string): string[];
+} | {
+    kind: 'inline';
+};
+export interface Provider {
+    label: string;
+    /** The id the embed and the poster need, or null when this URL is not one of this provider's players. */
+    id(url: URL): string | null;
+    embed(id: string): string;
+    frameHost: string;
+    poster: Poster;
+    shape: 'video' | 'audio';
+    oembed: string;
+    copy: Record<Lang, ProviderCopy>;
+}
+declare function youtubeId(u: URL): string | null;
+declare function soundcloudId(u: URL): string | null;
+export declare const PROVIDERS: {
+    readonly youtube: {
+        readonly label: "YouTube";
+        readonly id: typeof youtubeId;
+        readonly embed: (id: string) => string;
+        readonly frameHost: "https://www.youtube-nocookie.com";
+        readonly poster: {
+            readonly kind: "thumbnail";
+            readonly urls: (id: string) => string[];
+        };
+        readonly shape: "video";
+        readonly oembed: "https://www.youtube.com/oembed";
+        readonly copy: {
+            readonly fr: {
+                readonly privacy: "Certains articles intègrent des vidéos YouTube (Google). Rien n’est chargé depuis YouTube tant que vous n’appuyez pas sur le bouton de lecture : l’image d’aperçu est servie par ce site. Dès que vous lancez une vidéo, elle est lue depuis youtube-nocookie.com, et YouTube peut alors recueillir des données et déposer des témoins selon sa propre politique.";
+                readonly policyLabel: "Politique de confidentialité de Google";
+                readonly policyHref: "https://policies.google.com/privacy?hl=fr";
+            };
+            readonly en: {
+                readonly privacy: "Some articles embed YouTube (Google) videos. Nothing loads from YouTube until you press play: the preview image is served by this site. Once you start a video, it plays from youtube-nocookie.com, and YouTube may then collect data and set cookies under its own policy.";
+                readonly policyLabel: "Google’s privacy policy";
+                readonly policyHref: "https://policies.google.com/privacy?hl=en";
+            };
+        };
+    };
+    readonly soundcloud: {
+        readonly label: "SoundCloud";
+        readonly id: typeof soundcloudId;
+        readonly embed: (id: string) => string;
+        readonly frameHost: "https://w.soundcloud.com";
+        readonly poster: {
+            readonly kind: "inline";
+        };
+        readonly shape: "audio";
+        readonly oembed: "https://soundcloud.com/oembed";
+        readonly copy: {
+            readonly fr: {
+                readonly privacy: "Certains articles intègrent des enregistrements SoundCloud. Rien n’est chargé depuis SoundCloud tant que vous n’appuyez pas sur le bouton de lecture. Dès que vous lancez un enregistrement, il est lu depuis w.soundcloud.com, et SoundCloud peut alors recueillir des données et déposer des témoins selon sa propre politique.";
+                readonly policyLabel: "Politique de confidentialité de SoundCloud";
+                readonly policyHref: "https://soundcloud.com/pages/privacy";
+            };
+            readonly en: {
+                readonly privacy: "Some articles embed SoundCloud recordings. Nothing loads from SoundCloud until you press play. Once you start a recording, it plays from w.soundcloud.com, and SoundCloud may then collect data and set cookies under its own policy.";
+                readonly policyLabel: "SoundCloud’s privacy policy";
+                readonly policyHref: "https://soundcloud.com/pages/privacy";
+            };
+        };
+    };
+};
+export type ProviderKey = keyof typeof PROVIDERS;
+/** Table order, which is the order of the privacy paragraphs and of `embedFrameHosts`. */
+export declare const PROVIDER_KEYS: ProviderKey[];
+/** The privacy section's heading, one per language, shared by every provider. */
+export declare const EMBED_PRIVACY_HEADING: Record<Lang, string>;
+/** The privacy section's anchor (`EmbedPrivacy.astro`), for a site that links to it. */
+export declare const EMBED_PRIVACY_ID = "lecteurs-integres";
+export {};

package/dist/embeds/providers.js

@@ -0,0 +1,87 @@
+// THE PROVIDER TABLE: every external player a client may put in a post, and everything the portal
+// and the sites need to know about it. The detector, the editor, the portal's oEmbed allowlist,
+// each site's CSP, the facade, the click script and the privacy page all read THIS, so adding a
+// provider is one entry here (plus its privacy paragraph, approved by the operator) and a minor
+// release -- no site or portal code. Spec: pmeweb-portail/docs/superpowers/specs/
+// 2026-11-05-contenu-rework-7-media-players-design.md.
+//
+// PURE AND BROWSER-SAFE: the portal's editor bundle imports this. Nothing from node here.
+const YT_ID = /^[A-Za-z0-9_-]{11}$/;
+const YT_HOSTS = new Set(['www.youtube.com', 'youtube.com', 'm.youtube.com']);
+const SC_HOSTS = new Set(['soundcloud.com', 'www.soundcloud.com', 'm.soundcloud.com']);
+/** A SoundCloud profile's tabs: `/<artist>/<tab>` is a page of the profile, not a track. */
+const SC_TABS = new Set(['tracks', 'albums', 'sets', 'reposts', 'likes', 'followers', 'following', 'popular-tracks', 'comments', 'spotlight']);
+function youtubeId(u) {
+    let id = null;
+    if (u.hostname === 'youtu.be')
+        id = u.pathname.split('/')[1] ?? null;
+    else if (YT_HOSTS.has(u.hostname)) {
+        const parts = u.pathname.split('/').filter(Boolean);
+        if (parts.length === 1 && parts[0] === 'watch')
+            id = u.searchParams.get('v');
+        else if (parts.length === 2 && (parts[0] === 'live' || parts[0] === 'shorts'))
+            id = parts[1];
+    }
+    return id !== null && YT_ID.test(id) ? id : null;
+}
+function soundcloudId(u) {
+    if (!SC_HOSTS.has(u.hostname))
+        return null;
+    const parts = u.pathname.split('/').filter(Boolean);
+    if (parts.length !== 2 || SC_TABS.has(parts[1]))
+        return null;
+    return `${parts[0]}/${parts[1]}`;
+}
+export const PROVIDERS = {
+    youtube: {
+        label: 'YouTube',
+        id: youtubeId,
+        embed: (id) => `https://www.youtube-nocookie.com/embed/${id}?autoplay=1`,
+        frameHost: 'https://www.youtube-nocookie.com',
+        poster: { kind: 'thumbnail', urls: (id) => [`https://i.ytimg.com/vi/${id}/maxresdefault.jpg`, `https://i.ytimg.com/vi/${id}/hqdefault.jpg`] },
+        shape: 'video',
+        oembed: 'https://www.youtube.com/oembed',
+        copy: {
+            fr: {
+                privacy: 'Certains articles intègrent des vidéos YouTube (Google). Rien n’est chargé depuis YouTube tant que vous n’appuyez pas sur le bouton de lecture : l’image d’aperçu est servie par ce site. Dès que vous lancez une vidéo, elle est lue depuis youtube-nocookie.com, et YouTube peut alors recueillir des données et déposer des témoins selon sa propre politique.',
+                policyLabel: 'Politique de confidentialité de Google',
+                policyHref: 'https://policies.google.com/privacy?hl=fr',
+            },
+            en: {
+                privacy: 'Some articles embed YouTube (Google) videos. Nothing loads from YouTube until you press play: the preview image is served by this site. Once you start a video, it plays from youtube-nocookie.com, and YouTube may then collect data and set cookies under its own policy.',
+                policyLabel: 'Google’s privacy policy',
+                policyHref: 'https://policies.google.com/privacy?hl=en',
+            },
+        },
+    },
+    soundcloud: {
+        label: 'SoundCloud',
+        id: soundcloudId,
+        embed: (id) => `https://w.soundcloud.com/player/?url=${encodeURIComponent(`https://soundcloud.com/${id}`)}&auto_play=true`,
+        frameHost: 'https://w.soundcloud.com',
+        poster: { kind: 'inline' },
+        shape: 'audio',
+        oembed: 'https://soundcloud.com/oembed',
+        copy: {
+            fr: {
+                privacy: 'Certains articles intègrent des enregistrements SoundCloud. Rien n’est chargé depuis SoundCloud tant que vous n’appuyez pas sur le bouton de lecture. Dès que vous lancez un enregistrement, il est lu depuis w.soundcloud.com, et SoundCloud peut alors recueillir des données et déposer des témoins selon sa propre politique.',
+                policyLabel: 'Politique de confidentialité de SoundCloud',
+                policyHref: 'https://soundcloud.com/pages/privacy',
+            },
+            en: {
+                privacy: 'Some articles embed SoundCloud recordings. Nothing loads from SoundCloud until you press play. Once you start a recording, it plays from w.soundcloud.com, and SoundCloud may then collect data and set cookies under its own policy.',
+                policyLabel: 'SoundCloud’s privacy policy',
+                policyHref: 'https://soundcloud.com/pages/privacy',
+            },
+        },
+    },
+};
+/** Table order, which is the order of the privacy paragraphs and of `embedFrameHosts`. */
+export const PROVIDER_KEYS = Object.keys(PROVIDERS);
+/** The privacy section's heading, one per language, shared by every provider. */
+export const EMBED_PRIVACY_HEADING = {
+    fr: 'Lecteurs vidéo et audio intégrés',
+    en: 'Embedded video and audio players',
+};
+/** The privacy section's anchor (`EmbedPrivacy.astro`), for a site that links to it. */
+export const EMBED_PRIVACY_ID = 'lecteurs-integres';

package/dist/embeds/rehype.d.ts

@@ -0,0 +1,26 @@
+interface El {
+    type: string;
+    tagName?: string;
+    properties?: Record<string, unknown>;
+    children?: El[];
+    value?: string;
+}
+interface Ctx {
+    data: Record<string, unknown>;
+    parent(node: never): {
+        type: string;
+    } | undefined;
+    replaceNode(node: never, next: unknown): void;
+    appendChild(node: never, child: unknown): void;
+}
+/** Takes no options. 2.3.0 took `{ lang, privacyHref }` for the line under the player, since
+ *  removed; a site still passing them builds the same. */
+export declare function rehypeEmbeds(_legacy?: unknown): {
+    name: string;
+    element: {
+        filter: string[];
+        visit: (node: El, ctx: Ctx) => void;
+    };
+    after(root: unknown, ctx: Ctx): void;
+};
+export {};

package/dist/embeds/rehype.js

@@ -0,0 +1,51 @@
+// A satteri hast plugin (NOT a unified plugin: satteri's are visitor objects, see
+// satteri/dist/hast/hast-visitor.d.ts). It must be passed THROUGH satteri({ hastPlugins }) in
+// astro.config.mjs, and through every createSatteriMarkdownProcessor a site calls itself
+// (aheartful's src/lib/markdown.ts): `markdown.hastPlugins` is not an Astro config key.
+//
+// A paragraph that is exactly one link, whose only child is text, whose href is a player
+// (detect.ts) and which carries no title attribute, becomes the facade (facade.ts). A paragraph
+// inside a list or a quote is left alone: the portal's editor models only top-level players.
+// The FIRST facade of a document flags it in ctx.data; the `after` hook then appends the
+// stylesheet and the script once, so a page without a player ships neither.
+import { embedFromLink } from './detect.js';
+import { ASSET_TAGS, facadeHtml } from './facade.js';
+const FLAG = 'pmwEmbeds';
+const blank = (n) => n.type === 'text' && (n.value ?? '').trim() === '';
+function visitParagraph() {
+    return (node, ctx) => {
+        if (ctx.parent(node)?.type !== 'root')
+            return;
+        const kids = (node.children ?? []).filter((c) => !blank(c));
+        if (kids.length !== 1)
+            return;
+        const a = kids[0];
+        if (a.type !== 'element' || a.tagName !== 'a')
+            return;
+        if (a.properties?.title !== undefined && a.properties?.title !== null)
+            return;
+        const text = a.children ?? [];
+        if (text.length !== 1 || text[0].type !== 'text')
+            return;
+        const href = a.properties?.href;
+        if (typeof href !== 'string')
+            return;
+        const hit = embedFromLink(href, text[0].value ?? '');
+        if (!hit)
+            return;
+        ctx.replaceNode(node, { type: 'raw', value: facadeHtml(hit) });
+        ctx.data[FLAG] = true;
+    };
+}
+/** Takes no options. 2.3.0 took `{ lang, privacyHref }` for the line under the player, since
+ *  removed; a site still passing them builds the same. */
+export function rehypeEmbeds(_legacy) {
+    return {
+        name: 'pmeweb-embeds',
+        element: { filter: ['p'], visit: visitParagraph() },
+        after(root, ctx) {
+            if (ctx.data[FLAG] === true)
+                ctx.appendChild(root, { type: 'raw', value: ASSET_TAGS });
+        },
+    };
+}

package/dist/embeds/scan.d.ts

@@ -0,0 +1,20 @@
+import { type ProviderKey } from './providers.js';
+export interface Page {
+    path: string;
+    html: string;
+}
+export interface Scan {
+    thumbnails: {
+        provider: ProviderKey;
+        id: string;
+    }[];
+    used: ProviderKey[];
+    privacy: ProviderKey[];
+    unconverted: {
+        path: string;
+        href: string;
+    }[];
+}
+export declare function scanPages(pages: Iterable<Page>): Scan;
+/** The build's two refusals, as messages; empty when the site is wired. */
+export declare function selfCheck(s: Scan): string[];

package/dist/embeds/scan.js

@@ -0,0 +1,49 @@
+// What the built pages hold, read off `dist/` after the build: which posters to write, which
+// providers are used, which ones the privacy page lists, and any player paragraph the plugin did
+// not convert. Reading the OUTPUT, not the collections, is what lets the check run in an
+// integration hook with no access to Astro's content layer, and a draft cannot false-positive.
+import { embedFromLink } from './detect.js';
+import { PROVIDERS, PROVIDER_KEYS } from './providers.js';
+const POSTER = /\/_embed\/([a-z]+)-([A-Za-z0-9_-]+)-\d+\.webp/g;
+const FIGURE = /class="pmw-embed [^"]*" data-provider="([a-z]+)"/g;
+const PRIVACY = /data-pmeweb-embeds-privacy="([a-z ]*)"/g;
+/** `<p><a …href="…"…>text</a></p>`, the shape satteri renders a lone link paragraph in. */
+const LONE_LINK = /<p><a\s[^>]*?href="([^"]+)"[^>]*>([^<]+)<\/a><\/p>/g;
+const isKey = (k) => PROVIDER_KEYS.includes(k);
+const ordered = (s) => PROVIDER_KEYS.filter((k) => s.has(k));
+const unescapeHtml = (s) => s.replace(/&quot;/g, '"').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
+export function scanPages(pages) {
+    const thumbs = new Map();
+    const used = new Set();
+    const privacy = new Set();
+    const unconverted = [];
+    for (const { path, html } of pages) {
+        for (const m of html.matchAll(POSTER)) {
+            const [, provider, id] = m;
+            if (isKey(provider) && PROVIDERS[provider].poster.kind === 'thumbnail')
+                thumbs.set(`${provider}:${id}`, { provider, id });
+        }
+        for (const m of html.matchAll(FIGURE))
+            if (isKey(m[1]))
+                used.add(m[1]);
+        for (const m of html.matchAll(PRIVACY))
+            for (const k of m[1].split(' '))
+                if (isKey(k))
+                    privacy.add(k);
+        for (const m of html.matchAll(LONE_LINK)) {
+            const href = unescapeHtml(m[1]);
+            if (embedFromLink(href, unescapeHtml(m[2])))
+                unconverted.push({ path, href });
+        }
+    }
+    return { thumbnails: [...thumbs.values()], used: ordered(used), privacy: ordered(privacy), unconverted };
+}
+/** The build's two refusals, as messages; empty when the site is wired. */
+export function selfCheck(s) {
+    const errors = s.unconverted.map((u) => `embeds : une ligne de lecteur n'a pas été convertie (${u.path} : ${u.href}) -- rehypeEmbeds n'est pas branché sur ce pipeline Markdown`);
+    for (const k of s.used) {
+        if (!s.privacy.includes(k))
+            errors.push(`embeds : la page de confidentialité ne mentionne pas ${PROVIDERS[k].label} -- ajoutez <EmbedPrivacy> avec embedProviders()`);
+    }
+    return errors;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pmeweb/content",
-  "version": "2.2.0",
+  "version": "2.3.1",
   "description": "PmeWeb content contract: content.schema.json types, zodFrom, field checks, scheduling. Read by every site's build and by the client portal.",
   "type": "module",
   "license": "MIT",
@@ -9,7 +9,9 @@
   },
   "files": [
     "dist",
-    "prose.css"
+    "prose.css",
+    "assets",
+    "astro"
   ],
   "exports": {
     "./types": {
@@ -36,6 +38,15 @@
       "types": "./dist/published.d.ts",
       "default": "./dist/published.js"
     },
+    "./embeds": {
+      "types": "./dist/embeds/index.d.ts",
+      "default": "./dist/embeds/index.js"
+    },
+    "./embeds/astro": {
+      "types": "./dist/embeds/astro.d.ts",
+      "default": "./dist/embeds/astro.js"
+    },
+    "./EmbedPrivacy.astro": "./astro/EmbedPrivacy.astro",
     "./prose.css": "./prose.css"
   },
   "scripts": {
@@ -46,6 +57,8 @@
   },
   "devDependencies": {
     "astro": "7.2.9",
+    "happy-dom": "^20.14.5",
+    "sharp": "0.35.5",
     "typescript": "6.0.3",
     "vite": "8.3.0",
     "vitest": "4.1.11"
@@ -54,11 +67,15 @@
     "node": ">=22.12"
   },
   "peerDependencies": {
-    "astro": ">=7"
+    "astro": ">=7",
+    "sharp": ">=0.33"
   },
   "peerDependenciesMeta": {
     "astro": {
       "optional": true
+    },
+    "sharp": {
+      "optional": true
     }
   }
 }