@pmeweb/content 2.2.0 → 2.3.0

package/README.md

@@ -54,6 +54,41 @@ 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)
+
+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 served by the site, 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(options)` (a satteri hast plugin),
+  `embeds(options)` (the Astro integration), `scanPages` / `selfCheck`.
+
+A site with a `rich` body wires FOUR pieces:
+
+1. `rehypeEmbeds({ lang, privacyHref })` through `satteri({ hastPlugins: [...] })` in
+   `astro.config.mjs`, AND through every `createSatteriMarkdownProcessor` the site calls itself.
+2. `embeds({ lang, privacyHref })` in `integrations`. At build it writes `dist/_embed/player.js`,
+   `embed.css` and the posters (a YouTube thumbnail fetched at build and re-encoded to WebP, or a
+   drawn 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` and `--pmw-embed-note`.
+
+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,14 @@
+/* @pmeweb/content/embeds -- the STRUCTURE of a player facade. The look is per site, through the
+ * two variables. Written to dist/_embed/embed.css by the integration, linked only by pages that
+ * hold a player. */
+.pmw-embed { margin: 1.5em 0; }
+.pmw-embed__link { position: relative; display: block; overflow: hidden; border-radius: var(--pmw-embed-radius, 8px); background: #1f2328; color: #fff; text-decoration: none; }
+.pmw-embed--video .pmw-embed__link, .pmw-embed--video .pmw-embed__frame { width: 100%; aspect-ratio: 16 / 9; }
+.pmw-embed--audio .pmw-embed__link, .pmw-embed--audio .pmw-embed__frame { width: 100%; height: 166px; }
+.pmw-embed__link img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.pmw-embed__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
+.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; }
+.pmw-embed__link:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
+.pmw-embed__link:hover .pmw-embed__play path:first-child { fill: #c00; }
+.pmw-embed__frame { display: block; border: 0; border-radius: var(--pmw-embed-radius, 8px); }
+.pmw-embed__note { margin-top: 0.5em; font-size: 0.875rem; color: var(--pmw-embed-note, inherit); }

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,12 @@
+import { type Lang, type ProviderKey } from './providers.js';
+import type { Embed } from './detect.js';
+export interface FacadeOptions {
+    lang: Lang;
+    privacyHref: string;
+}
+/** 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 provider whose poster is drawn shares one file per width; a thumbnail is per video. */
+export declare function posterPath(provider: ProviderKey, id: string, width: number): string;
+export declare function facadeHtml(e: Embed, o: FacadeOptions): string;

package/dist/embeds/facade.js

@@ -0,0 +1,26 @@
+// The HTML a player line becomes on the site: the ORIGINAL link around a poster served by the site,
+// 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 { EMBED_PRIVACY_ID, 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 provider whose poster is drawn shares one file per width; a thumbnail is per video. */
+export function posterPath(provider, id, width) {
+    return PROVIDERS[provider].poster.kind === 'drawn'
+        ? `/_embed/${provider}-drawn-${width}.webp`
+        : `/_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>';
+export function facadeHtml(e, o) {
+    const p = PROVIDERS[e.provider];
+    const copy = p.copy[o.lang];
+    const [w1, w2] = POSTER_WIDTHS;
+    const height = p.shape === 'video' ? Math.round((w2 * 9) / 16) : 166;
+    const img = `<img 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">`;
+    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">${img}<span class="pmw-embed__play" aria-hidden="true">${PLAY}</span><span class="pmw-embed__title">${esc(e.title)}</span></a>`
+        + `<figcaption class="pmw-embed__note">${esc(copy.note)} <a href="${esc(o.privacyHref)}#${EMBED_PRIVACY_ID}">${esc(copy.noteLink)}</a></figcaption>`
+        + '</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,7 @@
+import type { AstroIntegration } from 'astro';
+import type { FacadeOptions } from './facade.js';
+export interface EmbedsOptions extends FacadeOptions {
+    /** 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, drawn: scan.drawn,
+                    fetch: o.fetch ?? ((url) => fetch(url)), warn: (m) => logger.warn(m),
+                });
+            },
+        },
+    };
+}

package/dist/embeds/posters.d.ts

@@ -0,0 +1,12 @@
+import { type ProviderKey } from './providers.js';
+export interface PosterJob {
+    dir: string;
+    thumbnails: {
+        provider: ProviderKey;
+        id: string;
+    }[];
+    drawn: ProviderKey[];
+    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,63 @@
+// The posters, written into dist/_embed/ at build. 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 of job.drawn) {
+        await write(job.dir, provider, 'drawn', Buffer.from(drawnSvg(PROVIDERS[provider].shape)));
+    }
+    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,94 @@
+export type Lang = 'fr' | 'en';
+export interface ProviderCopy {
+    /** The line under the poster: `note` then a link whose words are `noteLink`. */
+    note: string;
+    noteLink: string;
+    /** The privacy page's paragraph, then a link to the provider's own policy. */
+    privacy: string;
+    policyLabel: string;
+    policyHref: string;
+}
+export type Poster = {
+    kind: 'thumbnail';
+    urls(id: string): string[];
+} | {
+    kind: 'drawn';
+};
+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 note: "Lecture par YouTube.";
+                readonly noteLink: "Politique de confidentialité";
+                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 note: "Plays from YouTube.";
+                readonly noteLink: "Privacy policy";
+                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: "drawn";
+        };
+        readonly shape: "audio";
+        readonly oembed: "https://soundcloud.com/oembed";
+        readonly copy: {
+            readonly fr: {
+                readonly note: "Lecture par SoundCloud.";
+                readonly noteLink: "Politique de confidentialité";
+                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 note: "Plays from SoundCloud.";
+                readonly noteLink: "Privacy policy";
+                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, which every facade's note links to. */
+export declare const EMBED_PRIVACY_ID = "lecteurs-integres";
+export {};

package/dist/embeds/providers.js

@@ -0,0 +1,95 @@
+// 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: {
+                note: 'Lecture par YouTube.',
+                noteLink: 'Politique de confidentialité',
+                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: {
+                note: 'Plays from YouTube.',
+                noteLink: 'Privacy policy',
+                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: 'drawn' },
+        shape: 'audio',
+        oembed: 'https://soundcloud.com/oembed',
+        copy: {
+            fr: {
+                note: 'Lecture par SoundCloud.',
+                noteLink: 'Politique de confidentialité',
+                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: {
+                note: 'Plays from SoundCloud.',
+                noteLink: 'Privacy policy',
+                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, which every facade's note links to. */
+export const EMBED_PRIVACY_ID = 'lecteurs-integres';

package/dist/embeds/rehype.d.ts

@@ -0,0 +1,25 @@
+import { type FacadeOptions } from './facade.js';
+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;
+}
+export declare function rehypeEmbeds(o: FacadeOptions): {
+    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,49 @@
+// 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(o) {
+    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, o) });
+        ctx.data[FLAG] = true;
+    };
+}
+export function rehypeEmbeds(o) {
+    return {
+        name: 'pmeweb-embeds',
+        element: { filter: ['p'], visit: visitParagraph(o) },
+        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,21 @@
+import { type ProviderKey } from './providers.js';
+export interface Page {
+    path: string;
+    html: string;
+}
+export interface Scan {
+    thumbnails: {
+        provider: ProviderKey;
+        id: string;
+    }[];
+    drawn: ProviderKey[];
+    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,54 @@
+// 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 drawn = new Set();
+    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))
+                continue;
+            if (id === 'drawn' && PROVIDERS[provider].poster.kind === 'drawn')
+                drawn.add(provider);
+            else
+                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()], drawn: ordered(drawn), 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.0",
   "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
     }
   }
 }