explicit html, head, body (#1732)

observablehq · Oct 9, 2024 · ba59a5e · ba59a5e
1 parent e8e590c
commit ba59a5e
Show file tree

Hide file tree

Showing 59 changed files with 355 additions and 1 deletion.
diff --git a/src/render.ts b/src/render.ts
@@ -36,6 +36,8 @@ export async function renderPage(page: MarkdownPage, options: RenderOptions & Re
   const toc = mergeToc(data.toc, options.toc);
   const {files, resolveFile, resolveImport} = resolvers;
   return String(html`<!DOCTYPE html>
+<html>
+<head>
 <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">
 <meta name="generator" content="Observable Framework v${process.env.npm_package_version}">
@@ -81,13 +83,17 @@ import ${preview || page.code.length ? `{${preview ? "open, " : ""}define} from
 ${preview ? `\nopen({hash: ${JSON.stringify(resolvers.hash)}, eval: (body) => eval(body)});\n` : ""}${page.code
     .map(({node, id, mode}) => `\n${transpileJavaScript(node, {id, path, params, mode, resolveImport, resolveFile})}`)
     .join("")}`)}
-</script>${sidebar ? html`\n${await renderSidebar(options, resolvers)}` : ""}
+</script>
+</head>
+<body>${sidebar ? html`\n${await renderSidebar(options, resolvers)}` : ""}
 <div id="observablehq-center">${renderHeader(page.header, resolvers)}${
     toc.show ? html`\n${renderToc(findHeaders(page), toc.label)}` : ""
   }
 <main id="observablehq-main" class="observablehq${draft ? " observablehq--draft" : ""}">
 ${html.unsafe(rewriteHtml(page.body, resolvers))}</main>${renderFooter(page.footer, resolvers, options)}
 </div>
+</body>
+</html>
 `);
 }
 

diff --git a/test/output/build/404/404.html b/test/output/build/404/404.html
@@ -1,4 +1,6 @@
 <!DOCTYPE html>
+<html>
+<head>
 <meta charset="utf-8">
 <base href="/">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
@@ -25,6 +27,8 @@
 import "./_observablehq/client.00000001.js";
 
 </script>
+</head>
+<body>
 <div id="observablehq-center">
 <aside id="observablehq-toc" data-selector="h1:not(:first-of-type)[id], h2:first-child[id], :not(h1) + h2[id]">
 <nav>
@@ -38,3 +42,5 @@ <h1 id="page-not-found" tabindex="-1"><a class="observablehq-header-anchor" href
 <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>
+</body>
+</html>
diff --git a/test/output/build/archives.posix/tar.html b/test/output/build/archives.posix/tar.html
@@ -1,4 +1,6 @@
 <!DOCTYPE html>
+<html>
+<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta name="generator" content="Observable Framework v1.0.0-test">
@@ -46,6 +48,8 @@
 }});
 
 </script>
+</head>
+<body>
 <input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
 <label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
 <nav id="observablehq-sidebar">
@@ -76,3 +80,5 @@ <h1 id="tar" tabindex="-1"><a class="observablehq-header-anchor" href="#tar">Tar
 <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>
+</body>
+</html>
diff --git a/test/output/build/archives.posix/zip.html b/test/output/build/archives.posix/zip.html
@@ -1,4 +1,6 @@
 <!DOCTYPE html>
+<html>
+<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta name="generator" content="Observable Framework v1.0.0-test">
@@ -36,6 +38,8 @@
 }});
 
 </script>
+</head>
+<body>
 <input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
 <label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
 <nav id="observablehq-sidebar">
@@ -65,3 +69,5 @@ <h1 id="zip" tabindex="-1"><a class="observablehq-header-anchor" href="#zip">Zip
 <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>
+</body>
+</html>
diff --git a/test/output/build/archives.win32/tar.html b/test/output/build/archives.win32/tar.html
@@ -1,4 +1,6 @@
 <!DOCTYPE html>
+<html>
+<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta name="generator" content="Observable Framework v1.0.0-test">
@@ -32,6 +34,8 @@
 }});
 
 </script>
+</head>
+<body>
 <input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
 <label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
 <nav id="observablehq-sidebar">
@@ -60,3 +64,5 @@ <h1 id="tar" tabindex="-1"><a class="observablehq-header-anchor" href="#tar">Tar
 <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>
+</body>
+</html>
diff --git a/test/output/build/archives.win32/zip.html b/test/output/build/archives.win32/zip.html
@@ -1,4 +1,6 @@
 <!DOCTYPE html>
+<html>
+<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta name="generator" content="Observable Framework v1.0.0-test">
@@ -25,6 +27,8 @@
 }});
 
 </script>
+</head>
+<body>
 <input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
 <label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
 <nav id="observablehq-sidebar">
@@ -52,3 +56,5 @@ <h1 id="zip" tabindex="-1"><a class="observablehq-header-anchor" href="#zip">Zip
 <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>
+</body>
+</html>
diff --git a/test/output/build/config/closed/page.html b/test/output/build/config/closed/page.html
@@ -1,4 +1,6 @@
 <!DOCTYPE html>
+<html>
+<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta name="generator" content="Observable Framework v1.0.0-test">
@@ -16,6 +18,8 @@
 import "../_observablehq/client.00000001.js";
 
 </script>
+</head>
+<body>
 <input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
 <label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
 <nav id="observablehq-sidebar">
@@ -50,3 +54,5 @@ <h1 id="a-page" tabindex="-1"><a class="observablehq-header-anchor" href="#a-pag
 <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>
+</body>
+</html>
diff --git a/test/output/build/config/index.html b/test/output/build/config/index.html
@@ -1,4 +1,6 @@
 <!DOCTYPE html>
+<html>
+<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta name="generator" content="Observable Framework v1.0.0-test">
@@ -16,6 +18,8 @@
 import "./_observablehq/client.00000001.js";
 
 </script>
+</head>
+<body>
 <input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
 <label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
 <nav id="observablehq-sidebar">
@@ -53,3 +57,5 @@ <h1 id="index" tabindex="-1"><a class="observablehq-header-anchor" href="#index"
 <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>
+</body>
+</html>
diff --git a/test/output/build/config/one.html b/test/output/build/config/one.html
@@ -1,4 +1,6 @@
 <!DOCTYPE html>
+<html>
+<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta name="generator" content="Observable Framework v1.0.0-test">
@@ -16,6 +18,8 @@
 import "./_observablehq/client.00000001.js";
 
 </script>
+</head>
+<body>
 <input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
 <label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
 <nav id="observablehq-sidebar">
@@ -49,3 +53,5 @@ <h1 id="one" tabindex="-1"><a class="observablehq-header-anchor" href="#one">One
 <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>
+</body>
+</html>
diff --git a/test/output/build/config/sub/two.html b/test/output/build/config/sub/two.html
@@ -1,4 +1,6 @@
 <!DOCTYPE html>
+<html>
+<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta name="generator" content="Observable Framework v1.0.0-test">
@@ -16,6 +18,8 @@
 import "../_observablehq/client.00000001.js";
 
 </script>
+</head>
+<body>
 <input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
 <label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
 <nav id="observablehq-sidebar">
@@ -49,3 +53,5 @@ <h1 id="two" tabindex="-1"><a class="observablehq-header-anchor" href="#two">Two
 <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>
+</body>
+</html>
diff --git a/test/output/build/config/toc-override.html b/test/output/build/config/toc-override.html
@@ -1,4 +1,6 @@
 <!DOCTYPE html>
+<html>
+<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta name="generator" content="Observable Framework v1.0.0-test">
@@ -16,6 +18,8 @@
 import "./_observablehq/client.00000001.js";
 
 </script>
+</head>
+<body>
 <input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
 <label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
 <nav id="observablehq-sidebar">
@@ -57,3 +61,5 @@ <h3 id="h3-section-1" tabindex="-1"><a class="observablehq-header-anchor" href="
 <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>
+</body>
+</html>
diff --git a/test/output/build/config/toc.html b/test/output/build/config/toc.html
@@ -1,4 +1,6 @@
 <!DOCTYPE html>
+<html>
+<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta name="generator" content="Observable Framework v1.0.0-test">
@@ -16,6 +18,8 @@
 import "./_observablehq/client.00000001.js";
 
 </script>
+</head>
+<body>
 <input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
 <label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
 <nav id="observablehq-sidebar">
@@ -59,3 +63,5 @@ <h2 id="h2-script-alert-1-script-not-nice" tabindex="-1"><a class="observablehq-
 <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>
+</body>
+</html>
diff --git a/test/output/build/data-loaders/index.html b/test/output/build/data-loaders/index.html
@@ -1,4 +1,6 @@
 <!DOCTYPE html>
+<html>
+<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta name="generator" content="Observable Framework v1.0.0-test">
@@ -28,6 +30,8 @@
 }});
 
 </script>
+</head>
+<body>
 <div id="observablehq-center">
 <aside id="observablehq-toc" data-selector="h1:not(:first-of-type)[id], h2:first-child[id], :not(h1) + h2[id]">
 <nav>
@@ -41,3 +45,5 @@ <h1 id="data-loader-test" tabindex="-1"><a class="observablehq-header-anchor" hr
 <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>
+</body>
+</html>
diff --git a/test/output/build/draft/index.html b/test/output/build/draft/index.html
@@ -1,4 +1,6 @@
 <!DOCTYPE html>
+<html>
+<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta name="generator" content="Observable Framework v1.0.0-test">
@@ -16,6 +18,8 @@
 import "./_observablehq/client.00000001.js";
 
 </script>
+</head>
+<body>
 <input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
 <label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
 <nav id="observablehq-sidebar">
@@ -42,3 +46,5 @@ <h1 id="draft-test" tabindex="-1"><a class="observablehq-header-anchor" href="#d
 <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>
+</body>
+</html>
diff --git a/test/output/build/draft/page-published.html b/test/output/build/draft/page-published.html
@@ -1,4 +1,6 @@
 <!DOCTYPE html>
+<html>
+<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta name="generator" content="Observable Framework v1.0.0-test">
@@ -16,6 +18,8 @@
 import "./_observablehq/client.00000001.js";
 
 </script>
+</head>
+<body>
 <input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
 <label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
 <nav id="observablehq-sidebar">
@@ -42,3 +46,5 @@ <h1 id="this-is-for-real" tabindex="-1"><a class="observablehq-header-anchor" hr
 <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>
+</body>
+</html>
diff --git a/test/output/build/embed/index.html b/test/output/build/embed/index.html
@@ -1,4 +1,6 @@
 <!DOCTYPE html>
+<html>
+<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta name="generator" content="Observable Framework v1.0.0-test">
@@ -16,6 +18,8 @@
 import "./_observablehq/client.00000001.js";
 
 </script>
+</head>
+<body>
 <input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
 <label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
 <nav id="observablehq-sidebar">
@@ -51,3 +55,5 @@ <h1 id="embeds" tabindex="-1"><a class="observablehq-header-anchor" href="#embed
 <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>
+</body>
+</html>
diff --git a/test/output/build/embed/w3c.js.html b/test/output/build/embed/w3c.js.html
@@ -1,4 +1,6 @@
 <!DOCTYPE html>
+<html>
+<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta name="generator" content="Observable Framework v1.0.0-test">
@@ -16,6 +18,8 @@
 import "./_observablehq/client.00000001.js";
 
 </script>
+</head>
+<body>
 <input id="observablehq-sidebar-toggle" type="checkbox" title="Toggle sidebar">
 <label id="observablehq-sidebar-backdrop" for="observablehq-sidebar-toggle"></label>
 <nav id="observablehq-sidebar">
@@ -45,3 +49,5 @@ <h1 id="w3-c-js" tabindex="-1"><a class="observablehq-header-anchor" href="#w3-c
 <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>
+</body>
+</html>