promote links to file assets unless we already know they are pages

closes #639
observablehq · May 15, 2024 · 57b0a1b · 57b0a1b
1 parent d244fa1
commit 57b0a1b
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 17 deletions.
diff --git a/src/html.ts b/src/html.ts
@@ -1,24 +1,13 @@
 /* eslint-disable import/no-named-as-default-member */
+import {extname} from "node:path/posix";
 import he from "he";
 import hljs from "highlight.js";
 import type {DOMWindow} from "jsdom";
 import {JSDOM, VirtualConsole} from "jsdom";
 import {isAssetPath, relativePath, resolveLocalPath} from "./path.js";
 
-const ASSET_ATTRIBUTES: readonly [selector: string, src: string][] = [
-  ["a[href][download]", "href"],
-  ["audio source[src]", "src"],
-  ["audio[src]", "src"],
-  ["img[src]", "src"],
-  ["img[srcset]", "srcset"],
-  ["link[href]", "href"],
-  ["picture source[srcset]", "srcset"],
-  ["video source[src]", "src"],
-  ["video[src]", "src"]
-];
-
-const PATH_ATTRIBUTES: readonly [selector: string, src: string][] = [
-  ["a[href]", "href"],
+const ASSET_ATTRIBUTES: readonly [selector: string, src: string, skip?: (source: string) => boolean][] = [
+  ["a[href]", "href", (p: string) => !(p = extname(p)) || p === ".html"],
   ["audio source[src]", "src"],
   ["audio[src]", "src"],
   ["img[src]", "src"],
@@ -63,9 +52,10 @@ export function findAssets(html: string, path: string): Assets {
     }
   };
 
-  for (const [selector, src] of ASSET_ATTRIBUTES) {
+  for (const [selector, src, skip] of ASSET_ATTRIBUTES) {
     for (const element of document.querySelectorAll(selector)) {
       const source = decodeURI(element.getAttribute(src)!);
+      if (skip?.(source)) continue;
       if (src === "srcset") {
         for (const s of parseSrcset(source)) {
           maybeFile(s);
@@ -107,7 +97,7 @@ export function rewriteHtmlPaths(html: string, path: string): string {
     return isAssetPath(specifier) ? relativePath(path, specifier) : specifier;
   };
 
-  for (const [selector, src] of PATH_ATTRIBUTES) {
+  for (const [selector, src] of ASSET_ATTRIBUTES) {
     for (const element of document.querySelectorAll(selector)) {
       const source = decodeURI(element.getAttribute(src)!);
       element.setAttribute(src, src === "srcset" ? resolveSrcset(source, resolvePath) : encodeURI(resolvePath(source)));
@@ -134,9 +124,10 @@ export function rewriteHtml(
     return isAssetPath(specifier) ? resolveFile(specifier) : resolveImport(specifier);
   };
 
-  for (const [selector, src] of ASSET_ATTRIBUTES) {
+  for (const [selector, src, skip] of ASSET_ATTRIBUTES) {
     for (const element of document.querySelectorAll(selector)) {
       const source = decodeURI(element.getAttribute(src)!);
+      if (skip?.(source)) continue;
       element.setAttribute(src, src === "srcset" ? resolveSrcset(source, resolvePath) : encodeURI(resolvePath(source)));
     }
   }

diff --git a/test/input/build/assets/horse.jpg b/test/input/build/assets/horse.jpg
diff --git a/test/input/build/assets/horse.md b/test/input/build/assets/horse.md
@@ -0,0 +1,9 @@
+# horse
+
+<a href="horse.jpg">horse.jpg</a>
+
+<a href="horse">horse (md)</a>
+
+<a href="horse.html">horse.html</a>
+
+<a href="horse.md">horse.md</a>
diff --git a/test/output/build/assets/_file/horse.2d33a223.jpg b/test/output/build/assets/_file/horse.2d33a223.jpg
diff --git a/test/output/build/assets/_file/horse.dbb90817.md b/test/output/build/assets/_file/horse.dbb90817.md
@@ -0,0 +1,9 @@
+# horse
+
+<a href="horse.jpg">horse.jpg</a>
+
+<a href="horse">horse (md)</a>
+
+<a href="horse.html">horse.html</a>
+
+<a href="horse.md">horse.md</a>
diff --git a/test/output/build/assets/horse.html b/test/output/build/assets/horse.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>horse</title>
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&amp;display=swap" crossorigin>
+<link rel="preload" as="style" href="./_observablehq/theme-air,near-midnight.css">
+<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&amp;display=swap" crossorigin>
+<link rel="stylesheet" type="text/css" href="./_observablehq/theme-air,near-midnight.css">
+<link rel="modulepreload" href="./_observablehq/client.js">
+<link rel="modulepreload" href="./_observablehq/runtime.js">
+<link rel="modulepreload" href="./_observablehq/stdlib.js">
+<script type="module">
+
+import "./_observablehq/client.js";
+
+</script>
+<input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
+<label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
+<nav id="observablehq-sidebar">
+  <ol>
+    <label id="observablehq-sidebar-close" for="observablehq-sidebar-toggle"></label>
+    <li class="observablehq-link"><a href="./">Home</a></li>
+  </ol>
+  <ol>
+    <li class="observablehq-link observablehq-link-active"><a href="./horse">horse</a></li>
+  </ol>
+</nav>
+<script>{/* redacted init script */}</script>
+<aside id="observablehq-toc" data-selector="h1:not(:first-of-type)[id], h2:first-child[id], :not(h1) + h2[id]">
+<nav>
+</nav>
+</aside>
+<div id="observablehq-center">
+<main id="observablehq-main" class="observablehq">
+<h1 id="horse" tabindex="-1"><a class="observablehq-header-anchor" href="#horse">horse</a></h1>
+<p><a href="./_file/horse.2d33a223.jpg">horse.jpg</a></p>
+<p><a href="./horse">horse (md)</a></p>
+<p><a href="./horse">horse.html</a></p>
+<p><a href="./_file/horse.dbb90817.md">horse.md</a></p>
+</main>
+<footer id="observablehq-footer">
+<nav><a rel="prev" href="./"><span>Home</span></a></nav>
+<div>Built with <a href="https://observablehq.com/" target="_blank" rel="noopener noreferrer">Observable</a> on <a title="2024-01-10T16:00:00">Jan 10, 2024</a>.</div>
+</footer>
+</div>