Convert Plantuml code to images using Kroki

_config.ts

@@ -11,6 +11,10 @@ import lang_typescript from "npm:highlight.js/lib/languages/typescript";
 import lang_javascript from "npm:highlight.js/lib/languages/javascript";
 import lang_bash from "npm:highlight.js/lib/languages/bash";
 
+import { deflateSync } from "node:zlib";
+
+const textEncoder = new TextEncoder();
+
 const site = lume({
   src: "./src",
   location: new URL("https://www.fosterhangdaan.com/"),
@@ -90,6 +94,28 @@ site.process([".html"], (pages) => {
           codeCommentElement.classList.add("docstring");
         }
       }
+
+      /**
+       * Convert Plantuml code to images using Kroki.
+       */
+      const diagrams = page.document.getElementsByClassName(
+        "language-plantuml",
+      );
+      if (diagrams.length > 0) {
+        for (const diagram of diagrams) {
+          if (diagram.textContent && diagram.parentElement) {
+            const encoded = textEncoder.encode(diagram.textContent);
+            const compressed = deflateSync(encoded);
+            const result = compressed.toString("base64url");
+            const img = page.document.createElement("img");
+            const url = new URL(
+              `https://kroki.fosterhangdaan.com/plantuml/svg/${result}`,
+            );
+            img.setAttribute("src", url.toString());
+            diagram.parentElement.replaceWith(img);
+          }
+        }
+      }
     }
   });
 });