Optionally pre-render the Graphviz diagrams

Since the WebAssembly version of Graphviz is not exactly light (1.4MB at the time of writing), and since it is a waste to let everybody re-render the SVG client-side over and over again even though the diagram's definition hasn't changed, let's add a script that performs that rendering "on the server side" (more precisely: during deployment). This script takes no arguments and post-processes the output of Hugo in `public/`. For performance reasons, it requires the list of files that contain Graphviz diagrams. With this here site, it might not matter much because there are only a handful images here. However, I want to reuse the same method on git-scm.com where there _are_ thousands of files that do not contain any Graphviz diagrams, and therefore it is a necessary optimization to process only the files that _do_ contain Graphviz diagrams. To get that list, a new layout and page are added that Hugo processes, identifyng said list of files and writing the result to `public/diagram-list.html`. Since this script runs via Node.JS and therefore lacks the convenient built-in HTML parser of browser-based JavaScript engines, a prerequisite is now to run `npm install` so that the `node-html-parser` package is available. Signed-off-by: Johannes Schindelin <[email protected]>

Author: dscho

content/diagram-list.html

@@ -0,0 +1,3 @@
+---
+layout: diagram-list
+---

layouts/diagram-list.html

@@ -0,0 +1,7 @@
+<pre>
+{{- range .Site.RegularPages -}}
+{{- if in .RawContent "```graphviz" -}}
+ public{{.Path }}.html
+{{- end }}
+{{end -}}
+</pre>

package-lock.json

@@ -0,0 +1,5 @@
+{
+"dependencies":{
+"node-html-parser": "^7.0.1"
+ }
+}

package.json

@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+
+import{readFileSync,writeFileSync}from"node:fs"
+import{parse}from"node-html-parser"
+importVizfrom"../static/js/viz-global.js"
+
+/*
+ * This script post-processes the site as generated via Hugo, replacing the
+ * `<pre class="graphviz">` elements with inline `<svg>` ones, pre-rendered
+ * via `viz-js`.
+ */
+;(async()=>{
+constopts={format: "svg"}
+for(constpathofreadFileSync("public/diagram-list.html","utf-8")
+.split("\n")
+.filter((x)=>x.startsWith("public/"))){
+constcontents=readFileSync(path,"utf-8")
+consthtml=parse(contents)
+constvizImport=html.querySelector('script[src$="viz-global.js"]')
+if(!vizImport){
+console.error(`No 'viz-global.js' import found in ${path}; skipping`)
+continue
+}
+vizImport.nextElementSibling.remove()// remove the inline script
+vizImport.remove()// remove the import
+
+for(constpreofhtml.querySelectorAll("pre.graphviz")){
+constsvg=(awaitViz.instance()).renderString(pre.textContent,opts)
+pre.replaceWith(svg.substring(svg.indexOf("<svg")))
+}
+console.log(`Rewriting ${path}`)
+writeFileSync(`${path}`,html.toString())
+}
+})().catch((e)=>{
+console.error(e)
+process.exitCode=1
+})