nnw-theme 2.0.0 → 2.0.2

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/browser.js

@@ -154,6 +154,8 @@ export function failures(state) {
         found.push(`broken images: ${pyReprList(state.brokenImages)}`);
     if (state.collapsedImages.length)
         found.push(`images drawn at zero size: ${pyReprList(state.collapsedImages)}`);
+    if (state.unloadedImages.length)
+        found.push(`images still loading: ${pyReprList(state.unloadedImages)}`);
     found.push(...(state.footnotes ?? []));
     if (state.blocked.length)
         found.push(`external requests: ${pyReprList(state.blocked)}`);
@@ -161,6 +163,21 @@ export function failures(state) {
         found.push(`page errors: ${pyReprList(state.pageErrors)}`);
     return found;
 }
+// Runs in the page before its screenshot. A loading="lazy" image outside the viewport
+// never starts loading in a full-page screenshot, so it would draw as blank space and
+// escape the image checks; NetNewsWire loads it as the reader scrolls, so load every
+// image now and wait (up to timeout ms) for each to finish or fail.
+async function loadImages(timeout) {
+    const images = [...document.images];
+    for (const image of images)
+        if (image.loading === "lazy")
+            image.loading = "eager";
+    const settled = images.map((image) => image.decode().catch(() => { }));
+    await Promise.race([
+        Promise.all(settled),
+        new Promise((resolve) => setTimeout(resolve, timeout)),
+    ]);
+}
 // Runs in the page after its screenshot.
 function pageState() {
     const article = document.querySelector(".articleBody");
@@ -194,6 +211,10 @@ function pageState() {
             return box.width < 1 || box.height < 1;
         })
             .map((image) => image.currentSrc || image.src),
+        // Still loading after loadImages: neither drawn nor covered by the checks above.
+        unloadedImages: [...document.images]
+            .filter((image) => !image.complete)
+            .map((image) => image.currentSrc || image.src),
     };
 }
 /**
@@ -260,6 +281,7 @@ async function checkPage(browser, origin, url, target, screenshot, footnotes) {
         const page = await context.newPage();
         page.on("pageerror", (error) => pageErrors.push(String(error)));
         await page.goto(url, { waitUntil: "networkidle" });
+        await page.evaluate(loadImages, 10_000);
         await page.screenshot({ path: screenshot, fullPage: true });
         const state = await page.evaluate(pageState);
         // Last: it clicks footnotes open, so it must not disturb the screenshot.

package/dist/render.js

@@ -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,10 @@ 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)}`;
 }
 function isFile(path) {
     try {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nnw-theme",
-	"version": "2.0.0",
+	"version": "2.0.2",
 	"description": "Create, preview, check, and publish a NetNewsWire theme.",
 	"license": "Apache-2.0",
 	"author": "Dave Marquard",