split into multiple files

templates/blog/footer.html

@@ -2,43 +2,8 @@
   <a href="/blog">Retour à la liste des posts</a>
 </footer>
 
-{{#data}} {{#post}} {{#metadata}} {{#math}}
-<!-- KaTeX -->
-<script
-  defer
-  src="//cdn.jsdelivr.net/npm/katex@0.16.6/dist/katex.min.js"
-  integrity="sha384-j/ZricySXBnNMJy9meJCtyXTKMhIJ42heyr7oAdxTDBy/CYA9hzpMo+YTNV5C+1X"
-  crossorigin="anonymous"
-></script>
-<script
-  defer
-  src="//cdn.jsdelivr.net/npm/katex@0.16.6/dist/contrib/auto-render.min.js"
-  integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05"
-  crossorigin="anonymous"
-  onload="renderMathInElement(document.body);"
-></script>
-<script>
-  window.addEventListener("load", () => {
-    for (let item of document.getElementsByClassName("language-math")) {
-      katex.render(item.textContent, item, {
-        displayMode: item.classList.contains("math-display"),
-      });
-    }
-  });
-</script>
-{{/math}} {{#mermaid}}
-<!-- Mermaid diagrams -->
-<script type="module">
-  import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
-  mermaid.initialize({ startOnLoad: false });
-  await mermaid.run({
-    querySelector: ".language-mermaid",
-  });
-</script>
-{{/mermaid}} {{#syntax_highlight}}
-<!-- Syntax highligthing -->
-<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-<script>
-  hljs.highlightAll();
-</script>
-{{/syntax_highlight}} {{/metadata}} {{/post}} {{/data}}
+{{#data}} {{#post}} {{#metadata}}
+{{#mermaid}}{{>libs/mermaid_footer.html}}{{/mermaid}}
+{{#math}}{{>libs/katex_footer.html}}{{/math}}
+{{#syntax_highlight}}{{>libs/hljs_footer.html}}{{/syntax_highlight}}
+{{/metadata}} {{/post}} {{/data}}

templates/blog/head.html

@@ -39,19 +39,7 @@
   <meta content="/icons/apple-touch-icon.png" property="og:image" />
   <meta content="#43B581" data-react-helmet="true" name="theme-color" />
 
-  {{#data}} {{#post}} {{#metadata}} {{#math}}
-  <!-- KaTeX -->
-  <link
-    rel="stylesheet"
-    href="//cdn.jsdelivr.net/npm/katex@0.16.6/dist/katex.min.css"
-    integrity="sha384-mXD7x5S50Ko38scHSnD4egvoExgMPbrseZorkbE49evAfv9nNcbrXJ8LLNsDgh9d"
-    crossorigin="anonymous"
-  />
-  {{/math}} {{#syntax_highlight}}
-  <!-- Syntax highligthing -->
-  <link
-    rel="stylesheet"
-    href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css"
-  />
-  {{/syntax_highlight}} {{/metadata}} {{/post}} {{/data}}
+  {{#data}} {{#post}} {{#metadata}} {{#math}} {{>libs/katex_head.html}}
+  {{/math}} {{#syntax_highlight}} {{>libs/hljs_head.html}} {{/syntax_highlight}}
+  {{/metadata}} {{/post}} {{/data}}
 </head>

templates/libs/hljs_footer.html

@@ -0,0 +1,4 @@
+<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
+<script>
+  hljs.highlightAll();
+</script>

templates/libs/hljs_head.html

@@ -0,0 +1,4 @@
+<link
+  rel="stylesheet"
+  href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css"
+/>

templates/libs/katex_footer.html

@@ -0,0 +1,27 @@
+<script
+  defer
+  src="//cdn.jsdelivr.net/npm/katex@0.16.6/dist/katex.min.js"
+  integrity="sha384-j/ZricySXBnNMJy9meJCtyXTKMhIJ42heyr7oAdxTDBy/CYA9hzpMo+YTNV5C+1X"
+  crossorigin="anonymous"
+></script>
+<script
+  defer
+  src="//cdn.jsdelivr.net/npm/katex@0.16.6/dist/contrib/auto-render.min.js"
+  integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05"
+  crossorigin="anonymous"
+  onload="renderMathInElement(document.body);"
+></script>
+<script>
+  window.addEventListener("load", () => {
+    const macros = {};
+
+    renderMathInElement(document.body, {
+      delimiters: [
+        { left: "$$", right: "$$", display: true },
+        { left: "$", right: "$", display: false },
+      ],
+      throwOnError: false,
+      macros,
+    });
+  });
+</script>

templates/libs/katex_head.html

@@ -0,0 +1,6 @@
+<link
+  rel="stylesheet"
+  href="//cdn.jsdelivr.net/npm/katex@0.16.6/dist/katex.min.css"
+  integrity="sha384-mXD7x5S50Ko38scHSnD4egvoExgMPbrseZorkbE49evAfv9nNcbrXJ8LLNsDgh9d"
+  crossorigin="anonymous"
+/>

templates/libs/mermaid_footer.html

@@ -0,0 +1,7 @@
+<script type="module">
+  import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
+  mermaid.initialize({ startOnLoad: false });
+  await mermaid.run({
+    querySelector: ".language-mermaid",
+  });
+</script>