Update the architecture page (#25)

After gitgitgadget/gitgitgadget#609 has been addressed, the architecture
is noticeably different. Here is an attempt to visualize the new lay of
the land:


![gitgitgadget-architecture](https://github.com/user-attachments/assets/aaee971f-f7fd-43fe-be0d-eedd8c8c5311)

Author: dscho

.github/workflows/deploy.yml

@@ -41,6 +41,9 @@ jobs:
           HUGO_ENVIRONMENT: production
           HUGO_RELATIVEURLS: false
         run: hugo config && hugo --minify --baseURL '${{ steps.pages.outputs.base_url }}/'
+      - uses: actions/setup-node@v5
+      - name: pre-render the Graphviz diagrams
+        run: npm ci && node ./script/graphviz-ssr.js
       - uses: actions/upload-pages-artifact@v3
         with:
           path: ./public

.github/workflows/pr.yml

@@ -17,6 +17,8 @@ jobs:
         sudo dpkg -i /tmp/hugo.deb
     - name: run Hugo to build the pages
       run: hugo
+    - uses: actions/setup-node@v5
+    - run: npm ci && node ./script/graphviz-ssr.js
     - name: build tar archive
       run: cd public && tar czvf ../pages.tar.gz *
     - name: Upload build artifact

content/architecture.md

@@ -0,0 +1,4 @@
+---
+outputs:
+  - json
+---

content/diagram-list.html

@@ -9,9 +9,13 @@ markup:
   goldmark:
     renderer:
       unsafe: true
+mediaTypes:
+  application/json:
+    suffixes:
+    - json
 module:
   mounts:
   - source: content
     target: content
 params:
-  hugo_version: 0.145.0
+  hugo_version: 0.149.1

hugo.yml

@@ -12,4 +12,33 @@
     {{ .Content }}
     {{ end }}
   </body>
+{{- if .Store.Get "hasGraphviz" }}
+  <script src="{{ relURL "js/viz-global.js" }}"> </script>
+  <script type="text/javascript">
+    let vizInstance
+    window.addEventListener("DOMContentLoaded", async () => {
+      [...document.querySelectorAll("pre[class=graphviz]")].forEach(async (x) => {
+        if (!vizInstance) vizInstance = await Viz.instance()
+        if (x.style.display === 'none') return
+        const options = {
+          format: "svg",
+          graphAttributes: {
+            bgcolor: "transparent",
+          },
+          engine: x.getAttribute("engine") || "dot",
+        }
+        const svg = vizInstance.renderString(x.innerText, options)
+        const img = document.createElement('img')
+        img.setAttribute(
+          'src',
+          `data:image/svg+xml;utf8,${encodeURIComponent(svg.substring(svg.indexOf('<svg')))}`
+        )
+        const alt = x.getAttribute("alt")
+        if (alt) img.setAttribute("alt", alt)
+        x.parentNode.insertBefore(img, x);
+        x.style.display = 'none'
+      })
+    })
+  </script>
+{{- end }}
 </html>

layouts/_default/baseof.html

@@ -0,0 +1,2 @@
+{{- $diagram_list := where .Site.Pages "RawContent" "like" "```graphviz" -}}
+{{- $diagram_list | jsonify -}}

layouts/_default/single.json.json

@@ -0,0 +1,7 @@
+<pre class="graphviz"
+{{- if (and (isset "engine" .Attributes) (ne "" .Attributes.engine)) }} engine="{{ .Attributes.engine }}"{{ end -}}
+{{- if (and (isset "alt" .Attributes) (ne "" .Attributes.alt)) }} alt="{{ .Attributes.alt }}"{{ end -}}
+>
+  {{- .Inner | htmlEscape | safeHTML -}}
+</pre>
+{{- .Page.Store.Set "hasGraphviz" true }}

layouts/_markup/render-codeblock-graphviz.html

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