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"
+import Viz from "../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 () => {
+  const opts = { format: "svg" }
+  for (const path of readFileSync("public/diagram-list.html", "utf-8")
+    .split("\n")
+    .filter((x) => x.startsWith("public/"))) {
+    const contents = readFileSync(path, "utf-8")
+    const html = parse(contents)
+    const vizImport = 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 (const pre of html.querySelectorAll("pre.graphviz")) {
+      const svg = (await Viz.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
+})