nnw-theme 2.0.1 → 2.0.3

package/THIRD_PARTY_NOTICES.md

@@ -1,8 +1,8 @@
 # Third-party notices
 
 The published package includes rendering files from
-[NetNewsWire](https://github.com/Ranchero-Software/NetNewsWire), release `mac-7.1.3`,
-commit `f2daca0f24f29c08d9cb16e1bdc56293fd6fe286`, under `assets/netnewswire/`.
+[NetNewsWire](https://github.com/Ranchero-Software/NetNewsWire), release `mac-7.2b4`,
+commit `b7f4d8c7d273e4247c5d033ee47014805072297b`, under `assets/netnewswire/`.
 `netnewswire.json` in the source repository records the SHA-256 of every file, and the
 build verifies each one, including NetNewsWire’s MIT license, which ships beside them as
 `assets/netnewswire/LICENSE`. These files are used only to preview themes; they are

package/assets/fixtures/kitchen-sink.toml

@@ -29,6 +29,10 @@ body = """
 <table><thead><tr><th>Viewport</th><th>Purpose</th><th>Expected behavior</th></tr></thead><tbody><tr><td>macOS</td><td>Reading</td><td>Comfortable measure</td></tr><tr><td>iPhone</td><td>Small screen</td><td>No document overflow</td></tr><tr><td>iPad</td><td>Large text</td><td>Stable hierarchy</td></tr></tbody></table>
 <h2>Media and footnotes</h2>
 <figure><img alt="Abstract green and cream test pattern" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='675' viewBox='0 0 1200 675'%3E%3Crect width='1200' height='675' fill='%23d8d2c6'/%3E%3Ccircle cx='380' cy='337' r='240' fill='%232f6655'/%3E%3Cpath d='M0 560L1200 180V675H0Z' fill='%23f7f5f0'/%3E%3C/svg%3E"><figcaption>A synthetic image checks wide-media scaling.</figcaption></figure>
+<p>Embedded players come in the shapes NetNewsWire’s <code>main.js</code> handles: a fixed-size frame that keeps its proportions as the column narrows, a full-width player whose height comes only from an inline <code>aspect-ratio</code>, and a hidden tracking frame that must take no space.</p>
+<iframe width="560" height="315" title="Fixed-size video embed" srcdoc="&lt;body style='margin:0;display:grid;place-items:center;height:100vh;background:#8a8f98;color:#fff;font:600 16px system-ui'&gt;560 × 315 video embed"></iframe>
+<iframe width="560" height="315" style="width: 100%; height: auto; aspect-ratio: 16 / 9;" title="Aspect-ratio video embed" srcdoc="&lt;body style='margin:0;display:grid;place-items:center;height:100vh;background:#8a8f98;color:#fff;font:600 16px system-ui'&gt;16:9 aspect-ratio video embed"></iframe>
+<iframe style="display: none;" title="Hidden tracking frame" srcdoc=""></iframe>
 <p>The note marker uses common generated markup.<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup></p>
 <div class="footnotes"><ol><li id="fn:1"><p>Footnote content should remain readable in place and in NetNewsWire’s popover. <a href="#fnref:1" class="reversefootnote">↩</a></p></li></ol></div>
 <!-- SC_OFF --><div class="md"><p>A comment-wrapped paragraph, as Reddit sends every post.</p></div><!-- SC_ON -->

package/assets/guide/theme-format.md

@@ -39,8 +39,8 @@ comment early and shows the rest of it as text. `check` fails on them. NetNewsWi
 `:root`; a theme with its own typography should not, because that shorthand resets
 `font-family` and `line-height`.
 
-The renderer pins NetNewsWire `mac-7.1.3` commit
-`f2daca0f24f29c08d9cb16e1bdc56293fd6fe286`. It uses upstream `core.css`, macOS and
+The renderer pins NetNewsWire `mac-7.2b4` commit
+`b7f4d8c7d273e4247c5d033ee47014805072297b`. It uses upstream `core.css`, macOS and
 iOS page skeletons, and `main.js`, `main_mac.js`, `main_ios.js`, and `newsfoot.js`.
 These files ship inside the `nnw-theme` package, verified by SHA-256, so previews work
 offline. iPhone and iPad share the iOS skeleton. WebKit native

package/assets/netnewswire/Shared/core.css

@@ -14,6 +14,10 @@ html {
 	position: relative;
 }
 
+pre, code {
+	tab-size: 4;
+}
+
 /* This is the activity indicator (currently iOS only) that is used while image zooming */
 
 .activityIndicatorWrap {

package/assets/netnewswire/Shared/main.js

@@ -1,6 +1,9 @@
 // Here we are making iframes responsive.  Particularly useful for inline Youtube videos.
 function wrapFrames() {
 	document.querySelectorAll("iframe").forEach(element => {
+		if (getComputedStyle(element).display === "none") {
+			return;
+		}
 		if (parseInt(element.height) > 0) {
 			preserveAspectRatioOfFixedSizeFrame(element);
 			return;
@@ -39,7 +42,12 @@ function stripStylesFromElement(element, propertiesToStrip) {
 function stripStyles() {
 	document.getElementsByTagName("body")[0].querySelectorAll("style, link[rel=stylesheet]").forEach(element => element.remove());
 	// Removing "background" and "font" will also remove properties that would be reflected in them, e.g., "background-color" and "font-family"
-	document.getElementsByTagName("body")[0].querySelectorAll("[style]").forEach(element => stripStylesFromElement(element, ["color", "background", "font", "max-width", "max-height", "position"]));
+	// The stylesheet forces images to height: auto, so an author aspect-ratio box can't be filled by its image — content after the box overlaps the overflowing image.
+	// Iframes keep their aspect-ratio: without it an iframe with no pixel height collapses to the default 150px.
+	document.getElementsByTagName("body")[0].querySelectorAll("[style]").forEach(element => {
+		const isIframe = element.tagName === "IFRAME";
+		stripStylesFromElement(element, isIframe ? ["color", "background", "font", "max-width", "max-height", "position"] : ["color", "background", "font", "max-width", "max-height", "position", "aspect-ratio"]);
+	});
 }
 
 // Constrain the height of iframes whose heights are defined relative to the document body to be at most
@@ -167,11 +175,13 @@ function error() {
 
 // Takes into account absoluting of URLs.
 function isLocalFootnote(target) {
-	return target.hash.startsWith("#fn") && target.href.indexOf(document.baseURI) === 0;
+	return (target.hash.startsWith("#fn") || target.hash.startsWith("#footnote")) && target.href.indexOf(document.baseURI) === 0;
 }
 
 function styleLocalFootnotes() {
-	for (elem of document.querySelectorAll("sup > a[href*='#fn'], sup > div > a[href*='#fn']")) {
+	// Multimarkdown-style: <sup><a href="#fn…">. Substack-style: a bare
+	// <a id="footnote-anchor-N" href="#footnote-N"> with no <sup> wrapper.
+	for (elem of document.querySelectorAll("sup > a[href*='#fn'], sup > div > a[href*='#fn'], a[id^='footnote-anchor-']")) {
 		if (isLocalFootnote(elem)) {
 			elem.classList.add("footnote");
 		}
@@ -202,17 +212,24 @@ function removeWpSmiley() {
 	}
 }
 
+// <https://github.com/Ranchero-Software/NetNewsWire/issues/3501>
+function removeInstapaperIgnoreElements() {
+	document.querySelectorAll(".instapaper_ignore").forEach(element => element.remove());
+}
+
 function processPage() {
+	// stripStyles must run first — wrapFrames sets aspect-ratio on fixed-size iframes, which stripStyles would remove.
+	stripStyles();
 	wrapFrames();
 	wrapTables();
 	inlineVideos();
-	stripStyles();
 	sizeTailwindSVGs();
 	constrainBodyRelativeIframes();
 	convertImgSrc();
 	flattenPreElements();
 	styleLocalFootnotes();
 	removeWpSmiley()
+	removeInstapaperIgnoreElements();
 	postRenderProcessing();
 }
 

package/assets/netnewswire/Shared/newsfoot.js

@@ -125,12 +125,37 @@
 		if (!target.hash) return;
 		return decodeURIComponent(target.hash.substring(1));
 	}
-	/** @type {{fnref(target:HTMLAnchorElement): string|undefined}[]} */
+	/**
+	 * @type {{
+	 *   fnref(target:HTMLAnchorElement): string|undefined,
+	 *   content(targetElement:HTMLElement): string
+	 * }[]}
+	 */
 	const footnoteFormats = [
+		{ // Substack: the ref <a id="footnote-anchor-N" href="#footnote-N">
+		  // points at a backlink <a id="footnote-N">N</a> whose note text lives
+		  // in the sibling elements that follow it, not inside the anchor.
+			fnref(target) {
+				if (!target.matches("a[id^='footnote-anchor-']")) return;
+				return idFromHash(target);
+			},
+			content(targetElement) {
+				let html = "";
+				let node = targetElement.nextElementSibling;
+				while (node && !node.matches("a[id^='footnote-']")) {
+					html += node.outerHTML;
+					node = node.nextElementSibling;
+				}
+				return html;
+			}
+		},
 		{ // Multimarkdown
 			fnref(target) {
 				if (!target.matches(".footnote")) return;
 				return idFromHash(target);
+			},
+			content(targetElement) {
+				return targetElement.innerHTML;
 			}
 		}
 	];
@@ -140,22 +165,26 @@
 		if (!(ev.target && ev.target instanceof HTMLAnchorElement)) return;
 
 		let targetId = undefined;
+		let format = undefined;
 		for(const f of footnoteFormats) {
 			targetId = f.fnref(ev.target);
-			if (targetId) break;
+			if (targetId) {
+				format = f;
+				break;
+			}
 		}
 		if (targetId === undefined) return;
-		
+
 		// Only override the default behaviour when we know we can find the
 		// target element
 		const targetElement = document.getElementById(targetId);
 		if (targetElement === null) return;
-				
+
 		ev.preventDefault();
 
 		installContainer(ev.target);
-				
-		void new Footnote(targetElement.innerHTML, ev.target);
+
+		void new Footnote(format.content(targetElement), ev.target);
     });
 										   
 	// Handle clicks on the footnote reverse link

package/assets/netnewswire/netnewswire.json

@@ -1,6 +1,6 @@
 {
-	"release": "mac-7.1.3",
-	"commit": "f2daca0f24f29c08d9cb16e1bdc56293fd6fe286",
+	"release": "mac-7.2b4",
+	"commit": "b7f4d8c7d273e4247c5d033ee47014805072297b",
 	"files": [
 		{
 			"destination": "LICENSE",
@@ -20,17 +20,17 @@
 		{
 			"destination": "Shared/core.css",
 			"source": "Shared/Article Rendering/core.css",
-			"sha256": "5cd07a57d6511d9e043aaaf4dc6cd544da18b9733725375928edb9b11ae96e6b"
+			"sha256": "d67552259cb45261e1aacf0c1af6bc39b560b084c7b9e3943191907e0977cd4d"
 		},
 		{
 			"destination": "Shared/main.js",
 			"source": "Shared/Article Rendering/main.js",
-			"sha256": "7a229f330ca4adc7043803f044776f36fb086483d236e39947ce46a0909f7329"
+			"sha256": "847dc1f06ec0e7f96aee1004fd6186771db907445347cf0371abc67158aadb5a"
 		},
 		{
 			"destination": "Shared/newsfoot.js",
 			"source": "Shared/Article Rendering/newsfoot.js",
-			"sha256": "6a921854ef81214eebb983314023a20417e76c64eb78e2c4742815744476ae4f"
+			"sha256": "828e6889bd976ebce417d808ac726dd9252a801946d77e32de207ba4a14e21fa"
 		},
 		{
 			"destination": "iOS/main_ios.js",

package/dist/render.js

@@ -2,11 +2,11 @@ import { createHash } from "node:crypto";
 import { mkdirSync, readFileSync, rmSync, statSync, writeFileSync } from "node:fs";
 import { join } from "node:path";
 import { decodeHTML } from "entities";
+import { Parser } from "htmlparser2";
 import { renderingInputs } from "./netnewswire.js";
 import { fixturePath, readFixture, repositoryFixtures, ThemeError, themeStem, } from "./project.js";
 import { formatG, pyStr } from "./pyformat.js";
 const MACRO_RE = /\[\[([a-zA-Z0-9_-]+)\]\]/g;
-const SCRIPT_RE = /<script\b[^>]*>[\s\S]*?<\/script>/gi;
 // A whole <img> or <source> tag; quoted attribute values may contain ">".
 const MEDIA_TAG_RE = /<(img|source)\b((?:[^>"']|"[^"]*"|'[^']*')*)>/gi;
 const ATTRIBUTE_RE = /([^\s"'=<>/]+)(?:\s*=\s*("[^"]*"|'[^']*'|[^\s"'=<>`]+))?/g;
@@ -81,7 +81,8 @@ const SCENARIOS = [
         "Stress test",
         "The kitchen-sink fixture: a very long headline, byline, and feed name; inline " +
             "formatting; nested lists; an unbroken identifier that exposes horizontal " +
-            "overflow; a quotation, code block, table, figure, footnote, and HTML comments in the body.",
+            "overflow; a quotation, code block, table, figure, video embeds, footnote, and HTML comments " +
+            "in the body.",
     ],
     [
         "large-text",
@@ -295,7 +296,41 @@ function injectScripts(page, inputs, platform) {
         scripts.push(IOS_LABEL_SHIM);
     scripts.push(read(join(inputs, "Shared", "main.js")), read(ios ? join(inputs, "iOS", "main_ios.js") : join(inputs, "Mac", "main_mac.js")), read(join(inputs, "Shared", "newsfoot.js")));
     const bundle = scripts.map((script) => `<script>\n${script}\n</script>`).join("\n");
-    return page.replace("</body>", () => `${bundle}\n</body>`);
+    // The theme and fixture are already substituted into the page, so an earlier
+    // </body> can be article text; the skeleton's own closing tag is the last one.
+    const end = page.lastIndexOf("</body>");
+    return `${page.slice(0, end)}${bundle}\n${page.slice(end)}`;
+}
+/**
+ * Remove every <script> element as WebKit's tokenizer finds them, including end
+ * tags like "</script >" and a script left open to the end of the document.
+ */
+export function removeScripts(html) {
+    const ranges = [];
+    let start = -1;
+    const parser = new Parser({
+        onopentag(name) {
+            if (name === "script")
+                start = parser.startIndex;
+        },
+        onclosetag(name, isImplied) {
+            if (name !== "script" || start < 0)
+                return;
+            const end = isImplied
+                ? html.length
+                : html.indexOf(">", parser.endIndex) + 1 || html.length;
+            ranges.push([start, end]);
+            start = -1;
+        },
+    });
+    parser.end(html);
+    let result = "";
+    let offset = 0;
+    for (const [from, to] of ranges) {
+        result += html.slice(offset, from);
+        offset = to;
+    }
+    return result + html.slice(offset);
 }
 function isFile(path) {
     try {
@@ -315,7 +350,7 @@ export function renderPage(theme, fixture, target, snapshot = renderingInputs().
     if (!required.every(isFile)) {
         throw new ThemeError("bundled NetNewsWire rendering inputs are incomplete");
     }
-    const skeleton = read(pagePath).replace(SCRIPT_RE, "");
+    const skeleton = removeScripts(read(pagePath));
     const stylesheet = read(join(theme, "stylesheet.css"));
     // styleSubstitutions() is empty on macOS, so the macro must stay literal there.
     const styleSubstitutions = {};
@@ -327,7 +362,7 @@ export function renderPage(theme, fixture, target, snapshot = renderingInputs().
     const template = read(join(theme, "template.html"));
     let body = substitute(template, fixtureMapping(fixture, target));
     if (!target.themeScripts)
-        body = body.replace(SCRIPT_RE, "");
+        body = removeScripts(body);
     let page = substitute(skeleton, {
         title: fixture.title ?? "Theme preview",
         style,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nnw-theme",
-	"version": "2.0.1",
+	"version": "2.0.3",
 	"description": "Create, preview, check, and publish a NetNewsWire theme.",
 	"license": "Apache-2.0",
 	"author": "Dave Marquard",
@@ -44,8 +44,8 @@
 		"entities": "8.1.0",
 		"fflate": "0.8.3",
 		"htmlparser2": "12.0.0",
-		"playwright-core": "1.64.0-alpha-2026-09-14",
-		"smol-toml": "1.8.0"
+		"playwright-core": "1.64.0",
+		"smol-toml": "1.9.1"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "2.5.14",