From a34947a630b536a2f0d0de9d43a2d02ec8d07ece Mon Sep 17 00:00:00 2001
From: Served Smart <195884188+servedsmart@users.noreply.github.com>
Date: Wed, 18 Jun 2025 22:50:12 +0200
Subject: [PATCH] :recycle: Refactor: Move 2 inline event handlers out of line

If MDN explicitly warns user not to use them, we probably shouldn't.

MDN also states: "Note that inline event handlers are blocked as well[...]You should replace them with addEventListener calls[...]" regarding CSP.
---
 assets/js/button-likes.js               |  4 ++++
 assets/js/katex-render.js               |  4 ++++
 layouts/partials/head.html              |  4 ++++
 layouts/partials/meta/likes_button.html |  3 +--
 layouts/partials/vendor.html            | 15 +++++++--------
 5 files changed, 20 insertions(+), 10 deletions(-)
 create mode 100644 assets/js/button-likes.js
 create mode 100644 assets/js/katex-render.js

diff --git a/assets/js/button-likes.js b/assets/js/button-likes.js
new file mode 100644
index 00000000..2ffc71be
--- /dev/null
+++ b/assets/js/button-likes.js
@@ -0,0 +1,4 @@
+document.getElementById("button_likes") &&
+  document.getElementById("button_likes").addEventListener("click", () => {
+    process_article();
+  });
diff --git a/assets/js/katex-render.js b/assets/js/katex-render.js
new file mode 100644
index 00000000..24453af1
--- /dev/null
+++ b/assets/js/katex-render.js
@@ -0,0 +1,4 @@
+document.getElementById("katex-render") &&
+  document.getElementById("katex-render").addEventListener("load", () => {
+    renderMathInElement(document.body);
+  });
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 424f8c98..61cd3d95 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -68,6 +68,10 @@
   {{ end }}
   {{ $jsMobileMenu := resources.Get "js/mobilemenu.js" }}
   {{ $assets.Add "js" (slice $jsMobileMenu) }}
+  {{ $buttonLikes := resources.Get "js/button-likes.js" }}
+  {{ $assets.Add "js" (slice $buttonLikes) }}
+  {{ $katexRender := resources.Get "js/katex-render.js" }}
+  {{ $assets.Add "js" (slice $katexRender) }}
   {{ if $assets.Get "js" }}
   {{ $bundleJS := $assets.Get "js" | resources.Concat "js/main.bundle.js" | resources.Minify | resources.Fingerprint
   (.Site.Params.fingerprintAlgorithm | default "sha512") }}
diff --git a/layouts/partials/meta/likes_button.html b/layouts/partials/meta/likes_button.html
index a0572657..31ec53ea 100644
--- a/layouts/partials/meta/likes_button.html
+++ b/layouts/partials/meta/likes_button.html
@@ -1,8 +1,7 @@
 <span>
   <button
     id="button_likes"
-    class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"
-    onclick="process_article()">
+    class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">
     <span id="button_likes_heart" class="inline-block align-text-bottom hidden"
       >{{ partial "icon.html" "heart" }}
     </span>
diff --git a/layouts/partials/vendor.html b/layouts/partials/vendor.html
index 98394da2..4f6fefc9 100644
--- a/layouts/partials/vendor.html
+++ b/layouts/partials/vendor.html
@@ -37,16 +37,15 @@
     rel="stylesheet"
     href="{{ $katexCSS.RelPermalink }}"
     integrity="{{ $katexCSS.Data.Integrity }}">
-  {{ $katexJS := resources.Get "lib/katex/katex.min.js" }}
-  {{ $katexJS := $katexJS | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
-  <script defer src="{{ $katexJS.RelPermalink }}" integrity="{{ $katexJS.Data.Integrity }}"></script>
-  {{ $katexRenderJS := resources.Get "lib/katex/auto-render.min.js" }}
-  {{ $katexRenderJS := $katexRenderJS | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
+  {{ $katexLib := resources.Get "lib/katex/katex.min.js" }}
+  {{ $katexRenderLib := resources.Get "lib/katex/auto-render.min.js" }}
+  {{ $katexJS := slice $katexLib $katexRenderLib | resources.Concat "js/katex.bundle.js" | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
   <script
     defer
-    src="{{ $katexRenderJS.RelPermalink }}"
-    integrity="{{ $katexRenderJS.Data.Integrity }}"
-    onload="renderMathInElement(document.body);"></script>
+    type="text/javascript"
+    src="{{ $katexJS.RelPermalink }}"
+    integrity="{{ $katexJS.Data.Integrity }}"
+    id="katex-render"></script>
   {{ $katexFonts := resources.Match "lib/katex/fonts/*" }}
   {{ range $katexFonts }}
     <!-- {{ .RelPermalink }} -->