nnw-theme 2.3.0 → 2.5.0

package/dist/enclosures.js

@@ -1,7 +1,9 @@
 // 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.
+// (Modules/Articles/Sources/Articles/Attachment.swift) and the [[enclosures]] and
+// [[primary_media]] HTML (Shared/Article Rendering/ArticleRenderer+Enclosures.swift and
+// ArticleRenderer+PrimaryMedia.swift), at the pinned commit.
 // Keep it line for line with the Swift, so a diff of the two stays easy to review.
+import { significantImageURLs } from "./body-images.js";
 import { ThemeError } from "./project.js";
 export const MEDIA = ["image", "audio", "video", "document", "executable"];
 const STRING_KEYS = ["url", "mime_type", "title"];
@@ -46,24 +48,26 @@ export function fixtureAttachments(fixture, name) {
         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"]) {
+/** A fixture's image_url and thumbnail_url: Article.imageLink and thumbnailLink. */
+export function fixtureImages(fixture, name) {
+    const text = (key) => {
         const value = fixture[key];
-        if (value === undefined)
-            continue;
-        if (typeof value !== "string")
+        if (value !== undefined && typeof value !== "string") {
             throw new ThemeError(`${name}: ${key} must be a string`);
+        }
         return value;
-    }
-    return undefined;
+    };
+    return { imageLink: text("image_url"), thumbnailLink: text("thumbnail_url") };
 }
 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/";
+const YOUTUBE_EMBED_PATHS = ["youtube.com/embed/", "youtube-nocookie.com/embed/"];
+const WORDPRESS_SIZE_SUFFIX = /-\d+x\d+(?=\.[A-Za-z0-9]+$)/;
+const ENGADGET_LARGE_IMAGE_PREFIX = "l-";
+const SHORT_POST_MAXIMUM_BODY_LENGTH = 2048;
 /** Foundation's URL(string:), enough for host and path: relative URLs have no host. */
 function parseURL(value) {
     try {
@@ -207,20 +211,64 @@ function dimensionAttributes(attachment) {
         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));
 }
+/** URL.pathComponents without the root, percent-decoded. */
+function pathComponents(value) {
+    const path = parseURL(value)?.path;
+    if (path === undefined)
+        return undefined;
+    return path
+        .split("/")
+        .filter(Boolean)
+        .map((component) => {
+        try {
+            return decodeURIComponent(component);
+        }
+        catch {
+            return component;
+        }
+    });
+}
+/** ArticleRenderingSpecialCases.bodyEmbedsYouTubeVideo(stillImageURL:body:). */
+function bodyEmbedsYouTubeVideo(stillImageURL, body) {
+    return (pathComponents(stillImageURL) ?? []).some((component) => /^[A-Za-z0-9_-]{11}$/.test(component) &&
+        YOUTUBE_EMBED_PATHS.some((path) => body.includes(path + component)));
+}
+function isEngadgetImage(value) {
+    const host = parseURL(value)
+        ?.host.toLowerCase()
+        .replace(/^www\./, "") ?? "";
+    return host === "engadget.com" || host.endsWith(".engadget.com");
+}
+/**
+ * The last two path components, lowercased, without a WordPress size suffix or Engadget
+ * size prefix. Ignores the host and query: resized copies often come through a service.
+ */
+function imageIdentity(value) {
+    const components = pathComponents(value);
+    const last = components?.at(-1);
+    if (!components || last === undefined)
+        return undefined;
+    const name = (last.startsWith(ENGADGET_LARGE_IMAGE_PREFIX) && isEngadgetImage(value)
+        ? last.slice(ENGADGET_LARGE_IMAGE_PREFIX.length)
+        : last).replace(WORDPRESS_SIZE_SUFFIX, "");
+    return [...components.slice(0, -1).slice(-1), name].join("/").toLowerCase();
+}
+/** ArticleRenderer.bodyImageIdentities: for spotting a resized copy of a body image. */
+export function bodyImageIdentities(body, baseURL) {
+    return new Set(significantImageURLs(body, baseURL)
+        .map(imageIdentity)
+        .filter((identity) => identity !== undefined));
+}
+function bodyContains(url, body, identities) {
+    if (bodyContainsURL(body, url) || bodyEmbedsYouTubeVideo(url, body))
+        return true;
+    const identity = imageIdentity(url);
+    return identity !== undefined && identities.has(identity);
+}
 function enclosureHTML(attachment, posterURL) {
     const youTube = youTubeEmbedURL(attachment.url);
     if (youTube !== undefined) {
@@ -259,32 +307,118 @@ function enclosureHTML(attachment, posterURL) {
     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.
+ * HTML for the [[enclosures]] substitution, empty when there's nothing to show. Skips
+ * attachments already in the body, including resized copies. posterURL is a video's poster.
  */
-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>`);
-    }
+export function enclosuresHTML(attachments, body, identities, posterURL) {
+    const enclosures = attachments
+        .filter((attachment) => !bodyContains(attachment.url, body, identities))
+        .map((attachment) => enclosureHTML(attachment, posterURL))
+        .filter((enclosure) => enclosure !== undefined);
     if (!enclosures.length)
         return "";
     return `<div class="nnw-enclosures">\n${enclosures.join("\n")}\n</div>`;
 }
+/** Untitled and short, as Mastodon posts are: their images follow the text. */
+function isShortUntitledPost(title, body) {
+    if (title)
+        return false;
+    return [...new Intl.Segmenter().segment(body)].length < SHORT_POST_MAXIMUM_BODY_LENGTH;
+}
+function isVideo(attachment) {
+    return displayMedium(attachment) === "video" || youTubeEmbedURL(attachment.url) !== undefined;
+}
+/** The article image, else the first image attachment, else the thumbnail; undefined if in the body. */
+function primaryImage(imageLink, thumbnailLink, attachments, body, identities) {
+    let image;
+    if (imageLink) {
+        image = attachments.find((attachment) => attachment.url === imageLink) ?? {
+            url: imageLink,
+            medium: "image",
+        };
+    }
+    else {
+        image = attachments.find((attachment) => displayMedium(attachment) === "image");
+        if (!image && thumbnailLink)
+            image = { url: thumbnailLink, medium: "image" };
+    }
+    return image && !bodyContains(image.url, body, identities) ? image : undefined;
+}
+function collapsingWhitespace(value) {
+    return value.split(/\s+/).filter(Boolean).join(" ").toLowerCase();
+}
+function primaryImageHTML(image, articleTitle) {
+    let attributes = `src="${escapeXML(image.url)}"`;
+    let caption = "";
+    if (image.title) {
+        const title = escapeXML(image.title);
+        attributes += ` alt="${title}" title="${title}"`;
+        if (collapsingWhitespace(image.title) !== collapsingWhitespace(articleTitle)) {
+            caption = `<div class="nnw-primary-image-caption">${title}</div>`;
+        }
+    }
+    else {
+        attributes += ' alt=""';
+    }
+    return `<div class="nnw-primary-image"><img ${attributes}${dimensionAttributes(image)}>${caption}</div>`;
+}
+/** A video, else audio with the article image, else the article image. */
+function primaryMedia(article, identities, includesImage) {
+    const { attachments, imageLink, thumbnailLink, title, body } = article;
+    const wrap = (html) => `<div class="nnw-primary-media">${html}</div>`;
+    const playable = attachments.filter(({ url }) => !bodyContains(url, body, identities));
+    const posterURL = imageLink ?? thumbnailLink;
+    const video = playable.find(isVideo);
+    const videoHTML = video && enclosureHTML(video, posterURL);
+    if (video && videoHTML !== undefined) {
+        const urls = new Set([video.url]);
+        if (posterURL !== undefined)
+            urls.add(posterURL);
+        return { html: wrap(videoHTML), urls };
+    }
+    let imageHTML = "";
+    const urls = new Set();
+    const image = includesImage
+        ? primaryImage(imageLink, thumbnailLink, attachments, body, identities)
+        : undefined;
+    if (image) {
+        imageHTML = primaryImageHTML(image, title);
+        urls.add(image.url);
+    }
+    const audio = playable.find((attachment) => displayMedium(attachment) === "audio");
+    const audioHTML = audio && enclosureHTML(audio, undefined);
+    if (audio && audioHTML !== undefined) {
+        urls.add(audio.url);
+        return { html: wrap(imageHTML + audioHTML), urls };
+    }
+    return imageHTML ? { html: wrap(imageHTML), urls } : undefined;
+}
+/**
+ * The [[primary_media]] and [[enclosures]] HTML, as articleSubstitutions() builds them.
+ * A template without [[primary_media]], or a short untitled post, gets the article image
+ * in the enclosures instead; only [[primary_media]] uses the thumbnail as an image.
+ */
+export function articleMediaHTML(article, hasPrimaryMedia) {
+    const { imageLink, thumbnailLink, title, body } = article;
+    const identities = bodyImageIdentities(body, article.baseURL);
+    let attachments = [...article.attachments];
+    const showsPrimaryImage = hasPrimaryMedia && !isShortUntitledPost(title, body);
+    const primary = hasPrimaryMedia
+        ? primaryMedia(article, identities, showsPrimaryImage)
+        : undefined;
+    if (primary)
+        attachments = attachments.filter(({ url }) => !primary.urls.has(url));
+    if (!showsPrimaryImage) {
+        const image = primaryImage(imageLink, undefined, attachments, body, identities);
+        if (image && !primary?.urls.has(image.url) && !attachments.includes(image)) {
+            attachments.unshift(image);
+        }
+    }
+    return {
+        primaryMedia: primary?.html ?? "",
+        enclosures: enclosuresHTML(attachments, body, identities, imageLink ?? thumbnailLink),
+    };
+}
 /**
  * The body and [[enclosures]] values, as ArticleRenderer.articleSubstitutions() sets
  * them. A template without the macro gets its enclosures after the body, which a

package/dist/project.js

@@ -5,6 +5,8 @@ import { parse as parseToml } from "smol-toml";
 import { BUILT_IN_FIXTURE_NAMES, CATALOG_FIXTURE_NAMES } from "./commands.js";
 import { buildPlist, parsePlist } from "./plist.js";
 export const REQUIRED_THEME_FILES = ["Info.plist", "template.html", "stylesheet.css"];
+/** NetNewsWire 7.3 reads this instead of template.html; older releases ignore it. */
+export const TEMPLATE_7_3_FILE = "template7.3.html";
 export const PLACEHOLDER_MARKER = ".nnw-theme-uninitialized";
 export const IDENTITY_START = "<!-- nnw-theme-identity:start -->";
 export const IDENTITY_END = "<!-- nnw-theme-identity:end -->";
@@ -153,6 +155,7 @@ export function fixturePath(root, name) {
     }
     throw new ThemeError(`fixture not found: ${own}`);
 }
+const FOOTNOTE_KEYS = ["notes", "plain_links", "keep_with_word", "all_converted"];
 function isTable(value) {
     return (!!value && typeof value === "object" && !Array.isArray(value) && !(value instanceof Date));
 }
@@ -161,7 +164,9 @@ function isTable(value) {
  *
  * notes maps each footnote marker's rendered text to the note text its popover must
  * show; plain_links lists CSS selectors for links that must not become footnotes;
- * keep_with_word requires markers written against a word to stay on its line.
+ * keep_with_word requires markers written against a word to stay on its line;
+ * all_converted fails, rather than warns about, a footnote link that never became a
+ * marker.
  */
 export function footnoteExpectations(fixture, name) {
     const expect = fixture.expect ?? {};
@@ -172,7 +177,7 @@ export function footnoteExpectations(fixture, name) {
         throw new ThemeError(`${name}: [expect] may contain only a [expect.footnotes] table`);
     }
     const unknown = Object.keys(footnotes)
-        .filter((key) => !["notes", "plain_links", "keep_with_word"].includes(key))
+        .filter((key) => !FOOTNOTE_KEYS.includes(key))
         .sort();
     if (unknown.length) {
         throw new ThemeError(`${name}: unknown [expect.footnotes] key(s): ${unknown.join(", ")}`);
@@ -198,5 +203,11 @@ export function footnoteExpectations(fixture, name) {
         }
         result.keep_with_word = footnotes.keep_with_word;
     }
+    if ("all_converted" in footnotes) {
+        if (typeof footnotes.all_converted !== "boolean") {
+            throw new ThemeError(`${name}: expect.footnotes.all_converted must be true or false`);
+        }
+        result.all_converted = footnotes.all_converted;
+    }
     return result;
 }

package/dist/render.js

@@ -1,11 +1,12 @@
 import { createHash } from "node:crypto";
-import { mkdirSync, readFileSync, realpathSync, rmSync, statSync, writeFileSync, } from "node:fs";
+import { existsSync, 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 { DELIVERIES, DELIVERY_NAMES, deliver } from "./delivery.js";
+import { articleMediaHTML, fixtureAttachments, fixtureImages, placeEnclosures, } from "./enclosures.js";
 import { renderingInputs } from "./netnewswire.js";
-import { fixturePath, readFixture, repositoryFixtures, ThemeError, themeStem, } from "./project.js";
+import { fixturePath, readFixture, repositoryFixtures, TEMPLATE_7_3_FILE, ThemeError, themeStem, } from "./project.js";
 import { formatG, pyStr } from "./pyformat.js";
 const MACRO_RE = /\[\[([a-zA-Z0-9_-]+)\]\]/g;
 // A whole <img> or <source> tag; quoted attribute values may contain ">".
@@ -123,8 +124,9 @@ const SCENARIOS = [
     [
         "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.",
+        "The article fixture as NetNewsWire releases before enclosures and primary media " +
+            "render it: template.html, with [[enclosures]] and [[primary_media]] left as " +
+            "literal text, which must not show.",
     ],
     [
         "article-javascript-off",
@@ -152,11 +154,13 @@ export class RenderTarget {
     height;
     largeText;
     themeScripts;
-    /** Rendered as NetNewsWire before [[enclosures]]: the macro stays literal. */
+    /** Rendered as older NetNewsWire: template.html, macros it lacks left 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 } = {}) {
+    /** The sync service the article arrives through, rewritten as it delivers it. */
+    delivery;
+    constructor(fixture, platform, appearance, { largeText = false, themeScripts = true, olderNetNewsWire = false, card = false, delivery = undefined, } = {}) {
         this.fixture = fixture;
         this.platform = platform;
         this.appearance = appearance;
@@ -165,6 +169,7 @@ export class RenderTarget {
         this.themeScripts = themeScripts;
         this.olderNetNewsWire = olderNetNewsWire;
         this.card = card;
+        this.delivery = delivery;
     }
     get ios() {
         return this.platform === "iphone" || this.platform === "ipad";
@@ -181,6 +186,8 @@ export class RenderTarget {
             parts.push("Article JavaScript off");
         if (this.olderNetNewsWire)
             parts.push("older NetNewsWire");
+        if (this.delivery)
+            parts.push(`via ${DELIVERY_NAMES[this.delivery]}`);
         if (this.card)
             parts.push("card");
         return parts.join(" · ");
@@ -192,6 +199,8 @@ export class RenderTarget {
             return "article-javascript-off";
         if (this.olderNetNewsWire)
             return "older-netnewswire";
+        if (this.delivery)
+            return `${this.fixture} via ${DELIVERY_NAMES[this.delivery]}`;
         return this.fixture;
     }
     get slug() {
@@ -202,6 +211,8 @@ export class RenderTarget {
             parts.push("no-article-js");
         if (this.olderNetNewsWire)
             parts.push("older-netnewswire");
+        if (this.delivery)
+            parts.push(this.delivery);
         if (this.card)
             parts.push("card");
         return parts.join("-");
@@ -216,45 +227,92 @@ export function extraFixtures(root) {
     }
     return extras;
 }
-export function normalTargets(extras = []) {
+/** A fixture's deliveries = [...] key, validated: the services to also render it through. */
+export function fixtureDeliveries(fixture, name) {
+    const value = fixture.deliveries;
+    if (value === undefined)
+        return [];
+    if (!Array.isArray(value) ||
+        !value.every((item) => DELIVERIES.includes(item)) ||
+        new Set(value).size !== value.length) {
+        throw new ThemeError(`${name}: deliveries must list distinct services from ${DELIVERIES.join(", ")}`);
+    }
+    return value;
+}
+/**
+ * Each fixture's deliveries = [...], for those that list any. fixtures are the names
+ * to read: the template's own and the extras.
+ */
+export function readDeliveries(root, fixtures) {
+    const result = {};
+    for (const name of fixtures) {
+        const deliveries = fixtureDeliveries(readFixture(fixturePath(root, name)), `fixtures/${name}.toml`);
+        if (deliveries.length)
+            result[name] = deliveries;
+    }
+    return result;
+}
+/** The fixtures a repository renders: the template's own, then its extras. */
+export function allFixtures(extras) {
+    return [...Object.keys(FIXTURE_NAMES), ...extras];
+}
+/**
+ * Every fixture's matrix. A fixture that lists deliveries is also rendered through
+ * each service, on Mac in light and iPhone in dark, right after its own cases.
+ */
+export function normalTargets(extras = [], deliveries = {}) {
     const targets = [];
-    for (const fixture of Object.keys(FIXTURE_NAMES)) {
-        for (const platform of PLATFORMS) {
+    for (const fixture of allFixtures(extras)) {
+        const platforms = fixture in FIXTURE_NAMES ? PLATFORMS : EXTRA_PLATFORMS;
+        for (const platform of platforms) {
             for (const appearance of APPEARANCES) {
                 targets.push(new RenderTarget(fixture, platform, appearance));
             }
         }
-    }
-    for (const fixture of extras) {
-        for (const platform of EXTRA_PLATFORMS) {
-            for (const appearance of APPEARANCES) {
-                targets.push(new RenderTarget(fixture, platform, appearance));
-            }
+        for (const delivery of deliveries[fixture] ?? []) {
+            targets.push(new RenderTarget(fixture, "mac", "light", { delivery }), new RenderTarget(fixture, "iphone", "dark", { delivery }));
         }
     }
     return targets;
 }
+/** A repository's normal matrix, including each fixture's deliveries. */
+export function repositoryTargets(root) {
+    const extras = extraFixtures(root);
+    return normalTargets(extras, readDeliveries(root, allFixtures(extras)));
+}
 /**
- * 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.
+ * Everything check renders. A theme whose older releases render differently (see
+ * rendersDifferentlyWhenOlder) also gets the older-NetNewsWire cases.
  */
-export function checkTargets(extras = [], { enclosuresMacro = false } = {}) {
+export function checkTargets(extras = [], { olderNetNewsWire = false, deliveries = {} } = {}) {
     const targets = [
-        ...normalTargets(extras),
+        ...normalTargets(extras, deliveries),
         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) {
+    if (olderNetNewsWire) {
         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]]");
+/**
+ * Whether older NetNewsWire renders this theme differently: it ignores template7.3.html,
+ * and leaves a macro it doesn't know as text in every article.
+ */
+export function rendersDifferentlyWhenOlder(theme) {
+    if (existsSync(join(theme, TEMPLATE_7_3_FILE)))
+        return true;
+    const template = read(join(theme, "template.html"));
+    return ["[[enclosures]]", "[[primary_media]]"].some((macro) => template.includes(macro));
+}
+/** The template NetNewsWire reads: 7.3 prefers template7.3.html, older releases can't. */
+function themeTemplate(theme, target) {
+    const preferred = join(theme, TEMPLATE_7_3_FILE);
+    return read(!target.olderNetNewsWire && existsSync(preferred)
+        ? preferred
+        : join(theme, "template.html"));
 }
 /** Perform NetNewsWire's single-pass, non-recursive macro substitution. */
 export function substitute(template, mapping) {
@@ -411,12 +469,21 @@ function fixtureMapping(fixture, target, template, media) {
     if (!mapping.dateline_style) {
         mapping.dateline_style = mapping.title ? "articleDateline" : "articleDatelineTitle";
     }
-    const body = mapping.body ?? "";
+    let body = mapping.body ?? "";
+    if (target.delivery)
+        body = deliver(body, target.delivery, mapping.preferred_link ?? "");
     mapping.body = offlineMedia(body, media);
-    // NetNewsWire before enclosure support ignores attachments and leaves the macro.
+    // NetNewsWire before these macros ignores attachments and leaves them literal.
     if (!target.olderNetNewsWire) {
         const name = `fixtures/${target.fixture}.toml`;
-        const enclosures = enclosuresHTML(fixtureAttachments(fixture, name), body, fixtureImageURL(fixture, name));
+        const { primaryMedia, enclosures } = articleMediaHTML({
+            attachments: fixtureAttachments(fixture, name),
+            ...fixtureImages(fixture, name),
+            title: mapping.title ?? "",
+            body,
+            baseURL: pageBaseURL(fixture, target),
+        }, template.includes("[[primary_media]]"));
+        mapping.primary_media = offlineEnclosures(primaryMedia, media);
         Object.assign(mapping, placeEnclosures(template, mapping.body, offlineEnclosures(enclosures, media)));
     }
     if (!mapping.avatar_src || fetches(mapping.avatar_src)) {
@@ -486,6 +553,42 @@ function isFile(path) {
         return false;
     }
 }
+/**
+ * Article.baseURL, made absolute as NetNewsWire does: no fragment, and nothing unless
+ * http or https.
+ */
+export function articleBaseURL(value) {
+    let url;
+    try {
+        url = new URL(value);
+    }
+    catch {
+        return "";
+    }
+    if (url.protocol !== "http:" && url.protocol !== "https:")
+        return "";
+    url.hash = "";
+    return url.href;
+}
+/**
+ * The page's base URL: the fixture's base_url when it gives one, else its link. An
+ * article synced through the Reader API (FreshRSS, Miniflux, Inoreader) has only an
+ * external link, so NetNewsWire falls back to the feed's home page: a delivered case
+ * uses feed_link, unless base_url gives the home page the service reports instead.
+ */
+function pageBaseURL(fixture, target) {
+    const name = `fixtures/${target.fixture}.toml`;
+    const baseURL = fixture.base_url;
+    if (baseURL !== undefined && typeof baseURL !== "string") {
+        throw new ThemeError(`${name}: base_url must be a string`);
+    }
+    if (baseURL !== undefined)
+        return articleBaseURL(baseURL);
+    if (target.delivery && typeof fixture.feed_link === "string" && fixture.feed_link) {
+        return articleBaseURL(fixture.feed_link);
+    }
+    return pyStr(fixture.preferred_link || fixture.feed_link || "");
+}
 export function renderPage(theme, fixture, target, snapshot = renderingInputs().path, media) {
     const pagePath = join(snapshot, target.ios ? "iOS" : "Mac", "page.html");
     const required = [
@@ -505,7 +608,7 @@ export function renderPage(theme, fixture, target, snapshot = renderingInputs().
         styleSubstitutions["font-size"] = formatG(Number(fixture.font_size ?? size));
     }
     const style = substitute(`${read(join(snapshot, "Shared", "core.css"))}\n${stylesheet}`, styleSubstitutions);
-    const template = read(join(theme, "template.html"));
+    const template = themeTemplate(theme, target);
     let body = substitute(template, fixtureMapping(fixture, target, template, media));
     if (!target.themeScripts)
         body = removeScripts(body);
@@ -513,7 +616,7 @@ export function renderPage(theme, fixture, target, snapshot = renderingInputs().
         title: fixture.title ?? "Theme preview",
         style,
         body,
-        baseURL: fixture.preferred_link || fixture.feed_link || "",
+        baseURL: pageBaseURL(fixture, target),
         windowScrollY: "0",
     });
     page = injectScripts(page, snapshot, target.platform);
@@ -603,7 +706,18 @@ export function writeGallery(site, themeName, targets, results = null) {
     const known = new Set(RESERVED_FIXTURE_NAMES);
     const scenarios = new Map(SCENARIOS.map(([scenario, heading, text]) => [scenario, [heading, text]]));
     for (const target of targets) {
-        if (!known.has(target.scenario) && !scenarios.has(target.scenario)) {
+        if (known.has(target.scenario) || scenarios.has(target.scenario))
+            continue;
+        if (target.delivery) {
+            const service = DELIVERY_NAMES[target.delivery];
+            scenarios.set(target.scenario, [
+                target.scenario,
+                `fixtures/${target.fixture}.toml as ${service} delivers it through the Reader ` +
+                    `API: its body rewritten by ${service}'s sanitizer, and the feed's home page ` +
+                    "as the page's base URL.",
+            ]);
+        }
+        else {
             scenarios.set(target.scenario, [target.fixture, `Your fixtures/${target.fixture}.toml.`]);
         }
     }