nnw-theme 2.1.0 → 2.3.0

package/dist/commands.js

@@ -19,6 +19,8 @@ export const BUILT_IN_FIXTURE_NAMES = ["article", "kitchen-sink"];
 export const CATALOG_FIXTURES = {
     ghost: "Ghost cards, galleries, and lazy images",
     medium: "Medium figures, unsized images, and footer",
+    "media-rss": "Image, video, and YouTube enclosures with captions",
+    podcast: "Podcast audio enclosure and episode artwork",
     substack: "Substack images, widgets, and footnotes",
     wordpress: "WordPress block and classic editor markup",
 };
@@ -109,8 +111,10 @@ export const COMMANDS = [
     {
         name: "screenshot",
         summary: "check one case in WebKit and save its image",
-        description: "Render and check a single case in WebKit and save its full-page screenshot. " +
-            "With --promote, it becomes screenshots/theme-preview.png, the marketplace card.",
+        description: "Render and check a single case in WebKit and save its full-page screenshot: any " +
+            "fixture, on any platform. With --card, capture an 800x552 viewport at 2x, the " +
+            "shape of the marketplace card. With --promote, it becomes " +
+            "screenshots/theme-preview.png, the marketplace card.",
         options: [
             {
                 name: "fixture",
@@ -121,6 +125,7 @@ export const COMMANDS = [
             },
             { name: "platform", type: "string", choices: ["mac", "iphone", "ipad"], default: "mac" },
             { name: "appearance", type: "string", choices: ["light", "dark"], default: "light" },
+            { name: "card", type: "boolean", help: "capture the marketplace card's shape at 2x" },
             { name: "promote", type: "boolean", help: "use it as the marketplace screenshot" },
         ],
     },

package/dist/enclosures.js

@@ -0,0 +1,299 @@
+// A port of NetNewsWire's enclosure rendering: Attachment.displayMedium
+// (Modules/Articles/Sources/Articles/Attachment.swift) and the [[enclosures]] HTML
+// (Shared/Article Rendering/ArticleRenderer+Enclosures.swift), at the pinned commit.
+// Keep it line for line with the Swift, so a diff of the two stays easy to review.
+import { ThemeError } from "./project.js";
+export const MEDIA = ["image", "audio", "video", "document", "executable"];
+const STRING_KEYS = ["url", "mime_type", "title"];
+const INTEGER_KEYS = ["size_in_bytes", "duration_in_seconds", "width", "height"];
+const ATTACHMENT_KEYS = [...STRING_KEYS, ...INTEGER_KEYS, "medium"];
+function isTable(value) {
+    return (!!value && typeof value === "object" && !Array.isArray(value) && !(value instanceof Date));
+}
+/**
+ * A fixture's [[attachments]], validated. Like Attachment(url:…), an empty url makes
+ * no attachment, so NetNewsWire never sees it.
+ */
+export function fixtureAttachments(fixture, name) {
+    const value = fixture.attachments;
+    if (value === undefined)
+        return [];
+    if (!Array.isArray(value) || !value.every(isTable)) {
+        throw new ThemeError(`${name}: attachments must be [[attachments]] tables`);
+    }
+    return value.flatMap((table, index) => {
+        const where = `${name}: attachments[${index}]`;
+        const unknown = Object.keys(table)
+            .filter((key) => !ATTACHMENT_KEYS.includes(key))
+            .sort();
+        if (unknown.length)
+            throw new ThemeError(`${where}: unknown key(s): ${unknown.join(", ")}`);
+        for (const key of STRING_KEYS) {
+            if (key in table && typeof table[key] !== "string") {
+                throw new ThemeError(`${where}: ${key} must be a string`);
+            }
+        }
+        for (const key of INTEGER_KEYS) {
+            if (key in table && !Number.isSafeInteger(table[key])) {
+                throw new ThemeError(`${where}: ${key} must be an integer`);
+            }
+        }
+        if ("medium" in table && !MEDIA.includes(table.medium)) {
+            throw new ThemeError(`${where}: medium must be one of ${MEDIA.join(", ")}`);
+        }
+        if (typeof table.url !== "string")
+            throw new ThemeError(`${where}: url is required`);
+        return table.url ? [table] : [];
+    });
+}
+/** A fixture's image_url, else its thumbnail_url: Article.imageLink ?? thumbnailLink. */
+export function fixtureImageURL(fixture, name) {
+    for (const key of ["image_url", "thumbnail_url"]) {
+        const value = fixture[key];
+        if (value === undefined)
+            continue;
+        if (typeof value !== "string")
+            throw new ThemeError(`${name}: ${key} must be a string`);
+        return value;
+    }
+    return undefined;
+}
+const AUDIO_EXTENSIONS = new Set(["mp3", "m4a", "aac", "wav", "ogg", "oga", "opus", "flac"]);
+const VIDEO_EXTENSIONS = new Set(["mp4", "m4v", "mov", "webm"]);
+const IMAGE_EXTENSIONS = new Set(["jpg", "jpeg", "png", "gif", "webp", "heic", "avif"]);
+const VISUAL_ELEMENT_TAGS = ["<img", "<picture", "<video", "<iframe"];
+const YOUTUBE_FLASH_PLAYER_PATH_PREFIX = "/v/";
+const YOUTUBE_EMBED_URL_PREFIX = "https://www.youtube-nocookie.com/embed/";
+/** Foundation's URL(string:), enough for host and path: relative URLs have no host. */
+function parseURL(value) {
+    try {
+        const url = new URL(value);
+        return { host: url.hostname, path: url.pathname };
+    }
+    catch {
+        if (/[\s<>"]/.test(value))
+            return undefined;
+        return { host: "", path: value.replace(/[?#].*$/s, "") };
+    }
+}
+function lastPathComponent(path) {
+    const parts = path.split("/").filter(Boolean);
+    return parts.at(-1) ?? (path.startsWith("/") ? "/" : "");
+}
+function pathExtension(path) {
+    const last = lastPathComponent(path);
+    const dot = last.lastIndexOf(".");
+    return dot > 0 ? last.slice(dot + 1) : "";
+}
+/** How the article view shows an attachment, or undefined for anything else. */
+export function displayMedium(attachment) {
+    const mimeType = attachment.mime_type?.toLowerCase();
+    if (mimeType !== undefined) {
+        if (mimeType.startsWith("audio/"))
+            return "audio";
+        if (mimeType.startsWith("video/"))
+            return "video";
+        if (mimeType.startsWith("image/"))
+            return "image";
+    }
+    const { medium } = attachment;
+    if (medium === "audio" || medium === "video" || medium === "image")
+        return medium;
+    const path = parseURL(attachment.url)?.path;
+    const extension = path === undefined ? "" : pathExtension(path).toLowerCase();
+    if (!extension)
+        return undefined;
+    if (AUDIO_EXTENSIONS.has(extension))
+        return "audio";
+    if (VIDEO_EXTENSIONS.has(extension))
+        return "video";
+    if (IMAGE_EXTENSIONS.has(extension))
+        return "image";
+    return undefined;
+}
+/** RSCore's escapingSpecialXMLCharacters: drops characters XML cannot hold. */
+export function escapeXML(value) {
+    let escaped = "";
+    for (const character of value) {
+        const code = character.codePointAt(0) ?? 0;
+        if (character === "&")
+            escaped += "&amp;";
+        else if (character === "<")
+            escaped += "&lt;";
+        else if (character === ">")
+            escaped += "&gt;";
+        else if (character === '"')
+            escaped += "&quot;";
+        else if (character === "'")
+            escaped += "&apos;";
+        else if (code === 0x9 ||
+            code === 0xa ||
+            code === 0xd ||
+            (code >= 0x20 && code <= 0xd7ff) ||
+            (code >= 0xe000 && code <= 0xfffd) ||
+            code >= 0x10000) {
+            escaped += character;
+        }
+    }
+    return escaped;
+}
+/** ArticleRenderingSpecialCases.youTubeEmbedURL(forAttachmentURL:). */
+export function youTubeEmbedURL(value) {
+    const url = parseURL(value);
+    const host = url?.host.toLowerCase().replace(/^www\./, "");
+    if (!url || !host || !(host === "youtube.com" || host.endsWith(".youtube.com"))) {
+        return undefined;
+    }
+    if (!url.path.startsWith(YOUTUBE_FLASH_PLAYER_PATH_PREFIX))
+        return undefined;
+    const videoID = url.path.slice(YOUTUBE_FLASH_PLAYER_PATH_PREFIX.length);
+    if (!videoID || !/^[A-Za-z0-9_-]+$/.test(videoID))
+        return undefined;
+    return YOUTUBE_EMBED_URL_PREFIX + videoID;
+}
+/** Foundation's ByteCountFormatter.string(fromByteCount:countStyle: .file), en_US. */
+export function byteCount(bytes) {
+    if (bytes === 0)
+        return "Zero KB";
+    if (Math.abs(bytes) < 1000)
+        return `${bytes} ${Math.abs(bytes) === 1 ? "byte" : "bytes"}`;
+    const units = ["KB", "MB", "GB", "TB", "PB", "EB"];
+    let value = bytes / 1000;
+    let unit = 0;
+    while (Math.abs(value) >= 1000 && unit < units.length - 1) {
+        value /= 1000;
+        unit += 1;
+    }
+    const digits = Math.min(unit, 2);
+    const text = value.toLocaleString("en-US", { maximumFractionDigits: digits });
+    return `${text} ${units[unit]}`;
+}
+function durationString(durationInSeconds) {
+    const hours = Math.trunc(durationInSeconds / 3600);
+    const minutes = Math.trunc((durationInSeconds % 3600) / 60);
+    const seconds = durationInSeconds % 60;
+    const pad = (value) => String(value).padStart(2, "0");
+    return hours > 0 ? `${hours}:${pad(minutes)}:${pad(seconds)}` : `${minutes}:${pad(seconds)}`;
+}
+function fileName(value) {
+    const path = parseURL(value)?.path;
+    if (path === undefined)
+        return undefined;
+    const last = lastPathComponent(path);
+    if (!last || last === "/")
+        return undefined;
+    try {
+        return decodeURIComponent(last);
+    }
+    catch {
+        return last;
+    }
+}
+/** Title (or file name), duration, and size, such as “Episode 311 · 1:54:09 · 54.9 MB”. */
+function audioCaption(attachment) {
+    const components = [];
+    const name = attachment.title || fileName(attachment.url);
+    if (name)
+        components.push(name);
+    if (attachment.duration_in_seconds !== undefined) {
+        components.push(durationString(attachment.duration_in_seconds));
+    }
+    if (attachment.size_in_bytes !== undefined)
+        components.push(byteCount(attachment.size_in_bytes));
+    return components.join(" · ");
+}
+function dimensionAttributes(attachment) {
+    if (attachment.width === undefined || attachment.height === undefined)
+        return "";
+    return ` width="${attachment.width}" height="${attachment.height}"`;
+}
+function isVisual(attachment) {
+    if (youTubeEmbedURL(attachment.url) !== undefined)
+        return true;
+    const medium = displayMedium(attachment);
+    return medium === "image" || medium === "video";
+}
+function bodyContainsVisualElement(body) {
+    const lower = body.toLowerCase();
+    return VISUAL_ELEMENT_TAGS.some((tag) => lower.includes(tag));
+}
+/** Body HTML escapes `&` in attributes, so check both forms of the URL. */
+function bodyContainsURL(body, url) {
+    return body.includes(url) || body.includes(escapeXML(url));
+}
+function enclosureHTML(attachment, posterURL) {
+    const youTube = youTubeEmbedURL(attachment.url);
+    if (youTube !== undefined) {
+        const iframe = `<iframe src="${youTube}"${dimensionAttributes(attachment)} allowfullscreen></iframe>`;
+        return `<div class="nnw-enclosure nnw-enclosure-video">${iframe}</div>`;
+    }
+    const medium = displayMedium(attachment);
+    if (medium === undefined)
+        return undefined;
+    const src = escapeXML(attachment.url);
+    let mediaElement;
+    let caption;
+    switch (medium) {
+        case "audio":
+            mediaElement = `<audio controls preload="none" src="${src}"></audio>`;
+            caption = audioCaption(attachment);
+            break;
+        case "video": {
+            let attributes = `controls preload="metadata" playsinline src="${src}"${dimensionAttributes(attachment)}`;
+            if (posterURL)
+                attributes += ` poster="${escapeXML(posterURL)}"`;
+            mediaElement = `<video ${attributes}></video>`;
+            caption = attachment.title;
+            break;
+        }
+        case "image":
+            mediaElement = `<img src="${src}" alt=""${dimensionAttributes(attachment)}>`;
+            caption = attachment.title;
+            break;
+        default:
+            return undefined;
+    }
+    let html = `<div class="nnw-enclosure nnw-enclosure-${medium}">${mediaElement}`;
+    if (caption)
+        html += `<div class="nnw-enclosure-caption">${escapeXML(caption)}</div>`;
+    return `${html}</div>`;
+}
+/**
+ * HTML for the [[enclosures]] substitution, empty when there's nothing to show.
+ * Skips attachments whose URLs already appear in the body. imageURL is shown only
+ * when nothing else visual is: no image or video enclosure, nor one in the body.
+ */
+export function enclosuresHTML(attachments, body, imageURL) {
+    const enclosures = [];
+    let hasVisualEnclosure = false;
+    for (const attachment of attachments) {
+        if (bodyContainsURL(body, attachment.url))
+            continue;
+        const enclosure = enclosureHTML(attachment, imageURL);
+        if (enclosure === undefined)
+            continue;
+        enclosures.push(enclosure);
+        hasVisualEnclosure ||= isVisual(attachment);
+    }
+    if (!hasVisualEnclosure &&
+        imageURL &&
+        !bodyContainsVisualElement(body) &&
+        !bodyContainsURL(body, imageURL)) {
+        enclosures.unshift(`<div class="nnw-enclosure nnw-enclosure-image"><img src="${escapeXML(imageURL)}" alt=""></div>`);
+    }
+    if (!enclosures.length)
+        return "";
+    return `<div class="nnw-enclosures">\n${enclosures.join("\n")}\n</div>`;
+}
+/**
+ * The body and [[enclosures]] values, as ArticleRenderer.articleSubstitutions() sets
+ * them. A template without the macro gets its enclosures after the body, which a
+ * wrapper <div> closes so an unclosed tag in it can't swallow them.
+ */
+export function placeEnclosures(template, body, enclosures) {
+    if (template.includes("[[enclosures]]"))
+        return { body, enclosures };
+    if (!enclosures)
+        return { body };
+    return { body: `<div>${body}</div>${enclosures}` };
+}

package/dist/render.js

@@ -1,8 +1,9 @@
 import { createHash } from "node:crypto";
-import { mkdirSync, readFileSync, rmSync, statSync, writeFileSync } from "node:fs";
-import { join } from "node:path";
+import { mkdirSync, readFileSync, realpathSync, rmSync, statSync, writeFileSync, } from "node:fs";
+import { extname, isAbsolute, join, relative } from "node:path";
 import { decodeHTML } from "entities";
 import { Parser } from "htmlparser2";
+import { enclosuresHTML, fixtureAttachments, fixtureImageURL, placeEnclosures, } from "./enclosures.js";
 import { renderingInputs } from "./netnewswire.js";
 import { fixturePath, readFixture, repositoryFixtures, ThemeError, themeStem, } from "./project.js";
 import { formatG, pyStr } from "./pyformat.js";
@@ -61,6 +62,35 @@ const VIEWPORTS = {
     iphone: [393, 852],
     ipad: [834, 1112],
 };
+// The marketplace card shows its image at 347x240, cropped from the top.
+const CARD_VIEWPORT = [800, 552];
+// Fixture images a fixture may reference as media/NAME, from fixtures/media/NAME.
+const IMAGE_TYPES = {
+    ".avif": "image/avif",
+    ".gif": "image/gif",
+    ".jpeg": "image/jpeg",
+    ".jpg": "image/jpeg",
+    ".png": "image/png",
+    ".svg": "image/svg+xml",
+    ".webp": "image/webp",
+};
+// Enclosure players may also play a fixture's own audio or video file.
+const PLAYABLE_TYPES = {
+    ".aac": "audio/aac",
+    ".flac": "audio/flac",
+    ".m4a": "audio/mp4",
+    ".m4v": "video/mp4",
+    ".mov": "video/quicktime",
+    ".mp3": "audio/mpeg",
+    ".mp4": "video/mp4",
+    ".oga": "audio/ogg",
+    ".ogg": "audio/ogg",
+    ".opus": "audio/ogg",
+    ".wav": "audio/wav",
+    ".webm": "video/webm",
+};
+// An enclosure's own tag, as enclosuresHTML writes it.
+const ENCLOSURE_TAG_RE = /<(video|audio|iframe)\b([^>]*)>/g;
 // The template's own fixtures get the full matrix and the stress cases. Any other
 // fixture a theme adds is an extra: checked on Mac and iPhone in both appearances.
 export const FIXTURE_NAMES = {
@@ -90,6 +120,12 @@ const SCENARIOS = [
         "The kitchen-sink fixture at a large reading size: the xxLargeText size class on " +
             "Mac and 23 pt Dynamic Type on iPhone.",
     ],
+    [
+        "older-netnewswire",
+        "Older NetNewsWire",
+        "The article fixture as NetNewsWire releases before enclosure support render it: " +
+            "they leave the template's [[enclosures]] macro as literal text, which must not show.",
+    ],
     [
         "article-javascript-off",
         "Article JavaScript off",
@@ -105,6 +141,8 @@ const CHECKS = [
     "no broken images",
     "no external requests",
     "no JavaScript errors",
+    "enclosure players and images show, fit the window, and keep their shape",
+    "enclosure captions are legible",
 ];
 export class RenderTarget {
     fixture;
@@ -114,13 +152,19 @@ export class RenderTarget {
     height;
     largeText;
     themeScripts;
-    constructor(fixture, platform, appearance, { largeText = false, themeScripts = true } = {}) {
+    /** Rendered as NetNewsWire before [[enclosures]]: the macro stays literal. */
+    olderNetNewsWire;
+    /** A 2x capture of the card viewport alone, for the marketplace card. */
+    card;
+    constructor(fixture, platform, appearance, { largeText = false, themeScripts = true, olderNetNewsWire = false, card = false } = {}) {
         this.fixture = fixture;
         this.platform = platform;
         this.appearance = appearance;
-        [this.width, this.height] = VIEWPORTS[platform];
+        [this.width, this.height] = card ? CARD_VIEWPORT : VIEWPORTS[platform];
         this.largeText = largeText;
         this.themeScripts = themeScripts;
+        this.olderNetNewsWire = olderNetNewsWire;
+        this.card = card;
     }
     get ios() {
         return this.platform === "iphone" || this.platform === "ipad";
@@ -135,6 +179,10 @@ export class RenderTarget {
             parts.push("large text");
         if (!this.themeScripts)
             parts.push("Article JavaScript off");
+        if (this.olderNetNewsWire)
+            parts.push("older NetNewsWire");
+        if (this.card)
+            parts.push("card");
         return parts.join(" · ");
     }
     get scenario() {
@@ -142,6 +190,8 @@ export class RenderTarget {
             return "large-text";
         if (!this.themeScripts)
             return "article-javascript-off";
+        if (this.olderNetNewsWire)
+            return "older-netnewswire";
         return this.fixture;
     }
     get slug() {
@@ -150,6 +200,10 @@ export class RenderTarget {
             parts.push("large-text");
         if (!this.themeScripts)
             parts.push("no-article-js");
+        if (this.olderNetNewsWire)
+            parts.push("older-netnewswire");
+        if (this.card)
+            parts.push("card");
         return parts.join("-");
     }
 }
@@ -180,14 +234,27 @@ export function normalTargets(extras = []) {
     }
     return targets;
 }
-export function checkTargets(extras = []) {
-    return [
+/**
+ * Everything check renders. A template that places [[enclosures]] itself also gets
+ * the older-NetNewsWire cases, since releases before enclosure support leave that
+ * macro as text in every article.
+ */
+export function checkTargets(extras = [], { enclosuresMacro = false } = {}) {
+    const targets = [
         ...normalTargets(extras),
         new RenderTarget("kitchen-sink", "mac", "light", { largeText: true }),
         new RenderTarget("kitchen-sink", "iphone", "light", { largeText: true }),
         new RenderTarget("article", "mac", "light", { themeScripts: false }),
         new RenderTarget("article", "iphone", "light", { themeScripts: false }),
     ];
+    if (enclosuresMacro) {
+        targets.push(new RenderTarget("article", "mac", "light", { olderNetNewsWire: true }), new RenderTarget("article", "iphone", "dark", { olderNetNewsWire: true }));
+    }
+    return targets;
+}
+/** Whether a theme places enclosures itself, as NetNewsWire decides it. */
+export function placesEnclosures(theme) {
+    return read(join(theme, "template.html")).includes("[[enclosures]]");
 }
 /** Perform NetNewsWire's single-pass, non-recursive macro substitution. */
 export function substitute(template, mapping) {
@@ -235,14 +302,34 @@ function placeholder(width, height) {
         '<rect width="100%" height="100%" fill="#8a8f98" fill-opacity=".35"/></svg>';
     return `data:image/svg+xml;base64,${base64(svg)}`;
 }
+/**
+ * A fixture's own image, media/NAME, as a data URI read from fixtures/media/NAME.
+ * Undefined, so a placeholder as before, unless it is an image inside that directory.
+ */
+function mediaDataURI(media, src, types = IMAGE_TYPES) {
+    const type = types[extname(src).toLowerCase()];
+    if (!src.startsWith("media/") || !type)
+        return undefined;
+    try {
+        const path = realpathSync(join(media, src.slice("media/".length)));
+        const inside = relative(realpathSync(media), path);
+        if (inside.startsWith("..") || isAbsolute(inside))
+            return undefined;
+        return `data:${type};base64,${readFileSync(path).toString("base64")}`;
+    }
+    catch {
+        return undefined;
+    }
+}
 /**
  * Swap a fixture's network images for same-size placeholders.
  *
  * Previews never touch the network, so a captured article's images would otherwise
  * render broken. Each <img> keeps its attributes and width/height (16:9 when it has
  * none), so layout matches; a <source> that would fetch is dropped for its <img>.
+ * With a media directory, an <img src="media/NAME"> shows that file instead.
  */
-export function offlineMedia(body) {
+export function offlineMedia(body, media) {
     return body.replace(MEDIA_TAG_RE, (whole, tagName, rest) => {
         const tag = tagName.toLowerCase();
         const attributes = [...rest.matchAll(ATTRIBUTE_RE)].map((match) => [
@@ -253,8 +340,9 @@ export function offlineMedia(body) {
             name.toLowerCase(),
             decodeHTML(value.replace(/^["']+|["']+$/g, "")),
         ]));
+        const src = values.get("src") ?? "";
         const srcset = (values.get("srcset") ?? "").split(",").some(fetches);
-        if (!(srcset || fetches(values.get("src") ?? "")))
+        if (!(srcset || fetches(src)))
             return whole;
         if (tag === "source")
             return "";
@@ -262,17 +350,75 @@ export function offlineMedia(body) {
             .filter(([name]) => !["src", "srcset", "sizes"].includes(name.toLowerCase()))
             .map(([name, value]) => (value ? ` ${name}=${value}` : ` ${name}`))
             .join("");
-        return `<${tagName}${kept} src="${placeholder(values.get("width"), values.get("height"))}">`;
+        const local = media === undefined ? undefined : mediaDataURI(media, src);
+        return `<${tagName}${kept} src="${local ?? placeholder(values.get("width"), values.get("height"))}">`;
+    });
+}
+/** A tag's attributes, in order, with their raw (still quoted) values. */
+function parseAttributes(rest) {
+    return [...rest.matchAll(ATTRIBUTE_RE)].map((match) => [
+        match[1] ?? "",
+        match[2] ?? "",
+    ]);
+}
+function attributeValue(attributes, name) {
+    const found = attributes.find(([key]) => key.toLowerCase() === name);
+    return found && decodeHTML(found[1].replace(/^["']+|["']+$/g, ""));
+}
+/**
+ * Take enclosures offline, as offlineMedia does a body. Images and a video's poster
+ * become placeholders (media/NAME shows the fixture's file); a player that would
+ * fetch loses its source, as if the file had not loaded, unless it plays a media/
+ * file; a video with nothing to show gets a placeholder poster at its own size, for
+ * the frame it would load; and the YouTube player becomes a same-size placeholder.
+ */
+export function offlineEnclosures(html, media) {
+    const local = (src, types) => media === undefined ? undefined : mediaDataURI(media, src, types);
+    return offlineMedia(html, media).replace(ENCLOSURE_TAG_RE, (_whole, tagName, rest) => {
+        const attributes = parseAttributes(rest);
+        const width = attributeValue(attributes, "width");
+        const height = attributeValue(attributes, "height");
+        const src = attributeValue(attributes, "src") ?? "";
+        if (tagName === "iframe") {
+            const label = `${width && height ? `${width} × ${height} ` : ""}YouTube player`;
+            const page = "<body style='margin:0;display:grid;place-items:center;height:100vh;" +
+                `background:#8a8f98;color:#fff;font:600 16px system-ui'>${label}`;
+            const kept = attributes.filter(([name]) => name.toLowerCase() !== "src");
+            return `<iframe${kept.map(([n, v]) => (v ? ` ${n}=${v}` : ` ${n}`)).join("")} srcdoc="${escapeHTML(page)}">`;
+        }
+        const playable = fetches(src) ? local(src, PLAYABLE_TYPES) : src;
+        const kept = attributes.filter(([name]) => !["src", "poster"].includes(name.toLowerCase()));
+        let tag = `<${tagName}${kept.map(([n, v]) => (v ? ` ${n}=${v}` : ` ${n}`)).join("")}`;
+        if (playable)
+            tag += ` src="${escapeHTML(playable)}"`;
+        if (tagName === "video") {
+            const poster = attributeValue(attributes, "poster");
+            let shown;
+            if (poster)
+                shown = fetches(poster) ? (local(poster) ?? placeholder(width, height)) : poster;
+            else if (!playable)
+                shown = placeholder(width, height);
+            if (shown)
+                tag += ` poster="${escapeHTML(shown)}"`;
+        }
+        return `${tag}>`;
     });
 }
-function fixtureMapping(fixture, target) {
+function fixtureMapping(fixture, target, template, media) {
     const mapping = {};
     for (const key of TEMPLATE_KEYS)
         mapping[key] = pyStr(fixture[key] ?? "");
     if (!mapping.dateline_style) {
         mapping.dateline_style = mapping.title ? "articleDateline" : "articleDatelineTitle";
     }
-    mapping.body = offlineMedia(mapping.body ?? "");
+    const body = mapping.body ?? "";
+    mapping.body = offlineMedia(body, media);
+    // NetNewsWire before enclosure support ignores attachments and leaves the macro.
+    if (!target.olderNetNewsWire) {
+        const name = `fixtures/${target.fixture}.toml`;
+        const enclosures = enclosuresHTML(fixtureAttachments(fixture, name), body, fixtureImageURL(fixture, name));
+        Object.assign(mapping, placeEnclosures(template, mapping.body, offlineEnclosures(enclosures, media)));
+    }
     if (!mapping.avatar_src || fetches(mapping.avatar_src)) {
         mapping.avatar_src = avatarDataURI(mapping.feed_link_title ?? "");
     }
@@ -340,7 +486,7 @@ function isFile(path) {
         return false;
     }
 }
-export function renderPage(theme, fixture, target, snapshot = renderingInputs().path) {
+export function renderPage(theme, fixture, target, snapshot = renderingInputs().path, media) {
     const pagePath = join(snapshot, target.ios ? "iOS" : "Mac", "page.html");
     const required = [
         pagePath,
@@ -360,7 +506,7 @@ export function renderPage(theme, fixture, target, snapshot = renderingInputs().
     }
     const style = substitute(`${read(join(snapshot, "Shared", "core.css"))}\n${stylesheet}`, styleSubstitutions);
     const template = read(join(theme, "template.html"));
-    let body = substitute(template, fixtureMapping(fixture, target));
+    let body = substitute(template, fixtureMapping(fixture, target, template, media));
     if (!target.themeScripts)
         body = removeScripts(body);
     let page = substitute(skeleton, {
@@ -390,7 +536,7 @@ export function renderSite(root, theme, targets, snapshot = renderingInputs().pa
     const name = themeStem(theme);
     for (const target of targets) {
         const fixture = readFixture(fixturePath(root, target.fixture));
-        writeFileSync(join(pages, `${target.slug}.html`), renderPage(theme, fixture, target, snapshot), "utf8");
+        writeFileSync(join(pages, `${target.slug}.html`), renderPage(theme, fixture, target, snapshot, join(root, "fixtures", "media")), "utf8");
         const label = escapeHTML(target.label);
         const viewer = `<!doctype html>
 <html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width">