rewrite header

observablehq · Mar 16, 2024 · bbfc152 · bbfc152
1 parent 4721feb
commit bbfc152
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 14 deletions.
diff --git a/observablehq.config.ts b/observablehq.config.ts
@@ -103,7 +103,7 @@ export default {
     </svg>
   </a>
   <div style="display: flex; flex-grow: 1; justify-content: space-between; align-items: baseline;">
-    <a href="https://observablehq.com/framework/">
+    <a href="/">
       <span class="hide-if-small">Observable</span> Framework
     </a>
     <span style="display: flex; align-items: baseline; gap: 0.5rem; font-size: 14px;">

diff --git a/src/html.ts b/src/html.ts
@@ -5,7 +5,7 @@ import type {DOMWindow} from "jsdom";
 import {JSDOM, VirtualConsole} from "jsdom";
 import {isAssetPath, relativePath, resolveLocalPath} from "./path.js";
 
-const ASSET_PROPERTIES: readonly [selector: string, src: string][] = [
+const ASSET_ATTRIBUTES: readonly [selector: string, src: string][] = [
   ["a[href][download]", "href"],
   ["audio source[src]", "src"],
   ["audio[src]", "src"],
@@ -17,6 +17,18 @@ const ASSET_PROPERTIES: readonly [selector: string, src: string][] = [
   ["video[src]", "src"]
 ];
 
+const PATH_ATTRIBUTES: readonly [selector: string, src: string][] = [
+  ["a[href]", "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"]
+];
+
 export function isJavaScript({type}: HTMLScriptElement): boolean {
   if (!type) return true;
   type = type.toLowerCase();
@@ -48,7 +60,7 @@ export function findAssets(html: string, path: string): Assets {
     files.add(relativePath(path, localPath));
   };
 
-  for (const [selector, src] of ASSET_PROPERTIES) {
+  for (const [selector, src] of ASSET_ATTRIBUTES) {
     for (const element of document.querySelectorAll(selector)) {
       const source = decodeURI(element.getAttribute(src)!);
       if (src === "srcset") {
@@ -85,19 +97,39 @@ export function findAssets(html: string, path: string): Assets {
   return {files, localImports, globalImports, staticImports};
 }
 
-interface HtmlResolvers {
-  resolveFile?: (specifier: string) => string;
-  resolveScript?: (specifier: string) => string;
+export function reresolveHtmlPaths(html: string, path: string): string {
+  const {document} = parseHtml(html);
+
+  const resolvePath = (specifier: string): string => {
+    return isAssetPath(specifier) ? relativePath(path, specifier) : specifier;
+  };
+
+  for (const [selector, src] of PATH_ATTRIBUTES) {
+    for (const element of document.querySelectorAll(selector)) {
+      const source = decodeURI(element.getAttribute(src)!);
+      element.setAttribute(src, src === "srcset" ? resolveSrcset(source, resolvePath) : resolvePath(source));
+    }
+  }
+
+  return document.body.innerHTML;
+}
+
+export interface HtmlResolvers {
+  resolveFile: (specifier: string) => string;
+  resolveScript: (specifier: string) => string;
 }
 
-export function rewriteHtml(html: string, {resolveFile = String, resolveScript = String}: HtmlResolvers): string {
+export function rewriteHtml(
+  html: string,
+  {resolveFile = String, resolveScript = String}: Partial<HtmlResolvers>
+): string {
   const {document} = parseHtml(html);
 
   const maybeResolveFile = (specifier: string): string => {
     return isAssetPath(specifier) ? resolveFile(specifier) : specifier;
   };
 
-  for (const [selector, src] of ASSET_PROPERTIES) {
+  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, maybeResolveFile) : maybeResolveFile(source));

diff --git a/src/render.ts b/src/render.ts
@@ -2,8 +2,8 @@ import mime from "mime";
 import type {Config, Page, Script, Section} from "./config.js";
 import {mergeToc} from "./config.js";
 import {getClientPath} from "./files.js";
-import type {Html} from "./html.js";
-import {html, parseHtml, rewriteHtml} from "./html.js";
+import type {Html, HtmlResolvers} from "./html.js";
+import {html, parseHtml, reresolveHtmlPaths as moveHtmlPaths, rewriteHtml} from "./html.js";
 import {transpileJavaScript} from "./javascript/transpile.js";
 import type {MarkdownPage} from "./markdown.js";
 import type {PageLink} from "./pager.js";
@@ -80,7 +80,7 @@ ${preview ? `\nopen({hash: ${JSON.stringify(resolvers.hash)}, eval: (body) => ev
 </script>${sidebar ? html`\n${await renderSidebar(title, pages, root, path, search, normalizeLink)}` : ""}${
     toc.show ? html`\n${renderToc(findHeaders(page), toc.label)}` : ""
   }
-<div id="observablehq-center">${renderHeader(options, data)}
+<div id="observablehq-center">${renderHeader(path, options, data, resolvers)}
 <main id="observablehq-main" class="observablehq${draft ? " observablehq--draft" : ""}">
 ${html.unsafe(rewriteHtml(page.html, resolvers))}</main>${renderFooter(path, options, data, normalizeLink)}
 </div>
@@ -230,9 +230,20 @@ function renderModulePreload(href: string): Html {
   return html`\n<link rel="modulepreload" href="${href}">`;
 }
 
-function renderHeader({header}: Pick<Config, "header">, data: MarkdownPage["data"]): Html | null {
-  if (data?.header !== undefined) header = data?.header;
-  return header ? html`\n<header id="observablehq-header">\n${html.unsafe(header)}\n</header>` : null;
+function renderHeader(
+  path: string,
+  {header}: Pick<Config, "header">,
+  data: MarkdownPage["data"],
+  resolvers: HtmlResolvers
+): Html | null {
+  if (data?.header !== undefined) {
+    header = data?.header;
+  } else if (header) {
+    header = moveHtmlPaths(header, path);
+  }
+  return header
+    ? html`\n<header id="observablehq-header">\n${html.unsafe(rewriteHtml(header, resolvers))}\n</header>`
+    : null;
 }
 
 function renderFooter(