head, header and footer can be specified as a function

docs/config.md

@@ -154,17 +154,21 @@ Whether to show the previous & next links in the footer; defaults to true. The p
 
 ## head
 
-An HTML fragment to add to the head. Defaults to the empty string.
+An HTML fragment to add to the head. Defaults to the empty string. If specified as a function, receives an object with the page’s `title`, (front-matter) `data`, and `path`, and must return a string.
 
 ## header
 
-An HTML fragment to add to the header. Defaults to the empty string.
+An HTML fragment to add to the header. Defaults to the empty string. If specified as a function, receives an object with the page’s `title`, (front-matter) `data`, and `path`, and must return a string.
 
 ## footer
 
-An HTML fragment to add to the footer. Defaults to “Built with Observable.”
+An HTML fragment to add to the footer. Defaults to “Built with Observable.” If specified as a function, receives an object with the page’s `title`, (front-matter) `data`, and `path`, and must return a string.
 
-head, header and footer can be specified as strings, or as functions that receive as arguments the page’s title, front matter, and path, and return a string.
+For example, the following adds a link to the bottom of each page:
+
+```js run=false
+footer: ({path}) => `<a href="https://github.com/example/test/blob/main/src${path}.md?plain=1">view source</a>`,
+```
 
 ## base
 

src/config.ts

@@ -47,7 +47,15 @@ export interface Script {
 /**
  * A function that generates a page fragment such as head, header or footer.
  */
-type PageFragmentFunction = (title: string | null, data: FrontMatter, path: string) => string;
+export type PageFragmentFunction = ({
+  title,
+  data,
+  path
+}: {
+  title: string | null;
+  data: FrontMatter;
+  path: string;
+}) => string;
 
 export interface Config {
   root: string; // defaults to src

src/markdown.ts

@@ -378,7 +378,7 @@ function getHtml(
       ? String(data[key])
       : null
     : defaultValue != null
-    ? rewriteHtmlPaths(typeof defaultValue === "function" ? defaultValue(title, data, path) : defaultValue, path)
+    ? rewriteHtmlPaths(typeof defaultValue === "function" ? defaultValue({title, data, path}) : defaultValue, path)
     : null;
 }
 

test/input/build/fragments/index.md

@@ -1,8 +1,8 @@
 ---
-author: "Ignored Anonymous"
+author: Ignored Anonymous
 title: Testing fragment functions
 date: 2024-04-18
-keywords: ["very", "much"]
+keywords: [very, much]
 ---
 
 # Display title

test/input/build/fragments/observablehq.config.js

@@ -1,5 +1,5 @@
 export default {
   head: (data) => `<!-- ${JSON.stringify({fragment: "head", data})} -->`,
   header: (data) => `<!-- ${JSON.stringify({fragment: "header", data})} -->`,
-  footer: (data) => `<!-- ${JSON.stringify({fragment: "footer", data})} -->`,
-};
+  footer: (data) => `<!-- ${JSON.stringify({fragment: "footer", data})} -->`
+};

test/output/build/fragments/index.html

@@ -10,7 +10,7 @@
 <link rel="modulepreload" href="./_observablehq/client.js">
 <link rel="modulepreload" href="./_observablehq/runtime.js">
 <link rel="modulepreload" href="./_observablehq/stdlib.js">
-<!-- {"fragment":"head","data":"Testing fragment functions"} -->
+<!-- {"fragment":"head","data":{"title":"Testing fragment functions","data":{"title":"Testing fragment functions","keywords":["very","much"]},"path":"/index"}} -->
 <script type="module">
 
 import "./_observablehq/client.js";
@@ -22,13 +22,13 @@
 </aside>
 <div id="observablehq-center">
 <header id="observablehq-header">
-<!-- {"fragment":"header","data":"Testing fragment functions"} -->
+<!-- {"fragment":"header","data":{"title":"Testing fragment functions","data":{"title":"Testing fragment functions","keywords":["very","much"]},"path":"/index"}} -->
 </header>
 <main id="observablehq-main" class="observablehq">
 <h1 id="display-title" tabindex="-1"><a class="observablehq-header-anchor" href="#display-title">Display title</a></h1>
 <p>Contents.</p>
 </main>
 <footer id="observablehq-footer">
-<div><!-- {"fragment":"footer","data":"Testing fragment functions"} --></div>
+<div><!-- {"fragment":"footer","data":{"title":"Testing fragment functions","data":{"title":"Testing fragment functions","keywords":["very","much"]},"path":"/index"}} --></div>
 </footer>
 </div>