base option (#747)

mbostock · web-flow · commit 49a3c8490454 · 2024-02-10T11:42:03.000-08:00
* base option

* adopt base
diff --git a/docs/config.md b/docs/config.md
@@ -148,6 +148,10 @@ An HTML fragment to add to the header. Defaults to the empty string.
 
 An HTML fragment to add to the footer. Defaults to “Built with Observable.”
 
+## base
+
+The base path when serving the site. Currently this only affects the custom 404 page, if any.
+
 ## toc
 
 The table of contents configuration.
diff --git a/observablehq.config.ts b/observablehq.config.ts
@@ -83,6 +83,7 @@ export default {
     },
     {name: "Contributing", path: "/contributing"}
   ],
+  base: "/framework",
   scripts: [{type: "module", async: true, src: "analytics.js"}],
   head: `<link rel="apple-touch-icon" href="https://static.observablehq.com/favicon-512.0667824687f99c942a02e06e2db1a060911da0bf3606671676a255b1cf97b4fe.png">
 <link rel="icon" type="image/png" href="https://static.observablehq.com/favicon-512.0667824687f99c942a02e06e2db1a060911da0bf3606671676a255b1cf97b4fe.png" sizes="512x512">
diff --git a/src/config.ts b/src/config.ts
@@ -34,6 +34,7 @@ export interface Script {
 export interface Config {
   root: string; // defaults to docs
   output: string; // defaults to dist
+  base: string; // defaults to "/"
   title?: string;
   pages: (Page | Section)[]; // TODO rename to sidebar?
   pager: boolean; // defaults to true
@@ -87,6 +88,7 @@ export async function normalizeConfig(spec: any = {}, defaultRoot = "docs"): Pro
   let {
     root = defaultRoot,
     output = "dist",
+    base = "/",
     style,
     theme = "default",
     deploy,
@@ -99,6 +101,7 @@ export async function normalizeConfig(spec: any = {}, defaultRoot = "docs"): Pro
   } = spec;
   root = String(root);
   output = String(output);
+  base = normalizeBase(base);
   if (style === null) style = null;
   else if (style !== undefined) style = {path: String(style)};
   else style = {theme: (theme = normalizeTheme(theme))};
@@ -112,7 +115,14 @@ export async function normalizeConfig(spec: any = {}, defaultRoot = "docs"): Pro
   footer = String(footer);
   toc = normalizeToc(toc);
   deploy = deploy ? {workspace: String(deploy.workspace).replace(/^@+/, ""), project: String(deploy.project)} : null;
-  return {root, output, title, pages, pager, scripts, head, header, footer, toc, style, deploy};
+  return {root, output, base, title, pages, pager, scripts, head, header, footer, toc, style, deploy};
+}
+
+function normalizeBase(base: any): string {
+  base = String(base);
+  if (!base.startsWith("/")) throw new Error(`base must start with slash: ${base}`);
+  if (!base.endsWith("/")) base += "/";
+  return base;
 }
 
 function normalizeTheme(spec: any): string[] {
diff --git a/src/render.ts b/src/render.ts
@@ -58,10 +58,10 @@ type RenderInternalOptions =
   | {preview: true}; // preview
 
 async function render(parseResult: ParseResult, options: RenderOptions & RenderInternalOptions): Promise<string> {
-  const {root, path, pages, title, preview} = options;
+  const {root, base, path, pages, title, preview} = options;
   const toc = mergeToc(parseResult.data?.toc, options.toc);
   return String(html`<!DOCTYPE html>
-<meta charset="utf-8">${path === "/404" ? html`\n<base href="/">` : ""}
+<meta charset="utf-8">${path === "/404" ? html`\n<base href="${preview ? "/" : base}">` : ""}
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 ${
   parseResult.title || title
diff --git a/test/config-test.ts b/test/config-test.ts
@@ -9,6 +9,7 @@ describe("readConfig(undefined, root)", () => {
     assert.deepStrictEqual(await readConfig(undefined, "test/input/build/config"), {
       root: "test/input/build/config",
       output: "dist",
+      base: "/",
       style: {theme: ["air", "near-midnight"]},
       pages: [
         {path: "/index", name: "Index"},
@@ -34,6 +35,7 @@ describe("readConfig(undefined, root)", () => {
     assert.deepStrictEqual(await readConfig(undefined, "test/input/build/simple"), {
       root: "test/input/build/simple",
       output: "dist",
+      base: "/",
       style: {theme: ["air", "near-midnight"]},
       pages: [{name: "Build test case", path: "/simple"}],
       title: undefined,
