feat: add client-side rendering for mermaid diagrams

template.html

@@ -20,10 +20,13 @@
 	$endif$
 	<title>$if(title-prefix)$$title-prefix$ - $endif$$pagetitle$</title>
 	<style>
-		$styles.html()$
+		$styles.html$
 	</style>
 	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
+	<script type="module">
+		import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+	</script>
 	$for(css)$
 	<link rel="stylesheet" href="$css$" />
 	$endfor$
@@ -80,6 +83,17 @@
 					header.innerHTML = "<a href=\"#" + header.id + "\"><i class=\"bi bi-link-45deg\"></i></a> - " + header.innerHTML;
 				});
 			});
+
+			// Render mermaid diagrams
+
+			document.querySelectorAll("pre.mermaid").forEach((pre) => {
+				let code_el = pre.querySelector("code");
+				if(code_el) {
+					pre.innerHTML = code_el.innerHTML;
+				}
+			});
+
+			mermaid.initialize();
 		});
 	</script>
 </head>
@@ -88,9 +102,9 @@
 	<div class="container">
 		<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
 			<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
-				<img src="/logo.svg" width="26" class="rounded-0">
+				<img src="/logo.svg" width="20">
 				<span class="fs-4">
-					$if(title)$$title$ — $endif$Appunti TiTilda
+					$if(title)$$title$ - $endif$Appunti TiTilda
 				</span>
 			</a>