feat: now alert only needs to be removed once and works across pages (#…

…387)

* chore: update prettier to adapt to our standards

* chore: clean format

* unused eslint ignore & markdownlint rule

* refactor: Remove unused dark mode JavaScript files and update color mode implementation

* config: disable automatic formatting on save and paste in VS Code settings

* chore: update .prettierignore to include additional file types

* feat: Add esbuild.html partial for building javascript modules with esbuild

* refactor: Update color mode implementation and remove unused dark mode JavaScript files

* feat: now alert only needs to be removed once and works across pages

assets/js/dismissable-alert.js

@@ -0,0 +1,47 @@
+(() => {
+    "use strict";
+
+    // Check if alert has been closed, and set data-global-alert to closed
+    Object.keys(localStorage).forEach(function (key) {
+        if (/^global-alert-/.test(key)) {
+            document.documentElement.setAttribute(
+                "data-global-alert",
+                "closed"
+            );
+        }
+    });
+
+    // Enable alert closing, on DOMContentLoaded
+    window.addEventListener("DOMContentLoaded", () => {
+        var announcement = document.getElementById("announcement");
+
+        if (announcement !== null) {
+            var id = announcement.dataset.id;
+
+            // Check if the alert has been previously closed
+            if (localStorage.getItem(id) === "closed") {
+                announcement.style.display = "none"; // Hide the alert if it's closed
+            } else {
+                announcement.classList.remove("d-none"); // Show the alert if it's not closed
+            }
+
+            // Remove other alerts from localStorage and DOM
+            Object.keys(localStorage).forEach(function (key) {
+                if (/^global-alert-/.test(key)) {
+                    if (key !== id) {
+                        localStorage.removeItem(key);
+                        document.documentElement.removeAttribute(
+                            "data-global-alert"
+                        );
+                    }
+                }
+            });
+
+            // Event listener for the alert's closing button
+            var closeButton = announcement.querySelector(".btn-close");
+            closeButton.addEventListener("click", function () {
+                localStorage.setItem(id, "closed"); // Store the closed state in localStorage
+            });
+        }
+    });
+})();

layouts/partials/footer/script-footer.html

@@ -35,12 +35,6 @@
     {{ $slice = $slice | append $instantPage -}}
 {{ end -}}
 
-{{ if and (.Site.Params.alert) (.Site.Params.alertDismissable) -}}
-    {{ $alert := resources.Get "js/alert.js" -}}
-    {{ $alert := $alert | js.Build -}}
-    {{ $slice = $slice | append $alert -}}
-{{ end -}}
-
 {{ if .Site.Params.options.kaTex -}}
     {{ $katexConfig := resources.Get "js/katex.js" -}}
     {{ $katexConfig := $katexConfig | js.Build -}}

layouts/partials/head/script-header.html

@@ -2,8 +2,7 @@
     {{- partial "footer/esbuild" (dict "src" "js/color-mode.js" "transpile" false) }}
 {{ end -}}
 {{- if and (.Site.Params.alert) (.Site.Params.alertDismissable) -}}
-    {{ $alertInit := resources.Get "js/alert-init.js" | js.Build | minify -}}
-  <script nonce="dXNlcj0iaGVsbG8iLGRvbWFpbj0iaGVua3ZlcmxpbmRlLmNvbSIsZG9jdW1lbnQud3JpdGUodXNlcisiQCIrZG9tYWluKTs=">{{ $alertInit.Content | safeJS }}</script>
+    {{- partial "footer/esbuild" (dict "src" "js/dismissable-alert.js" "transpile" false) }}
 {{- end -}}
 {{ if eq (hugo.Environment) "production" -}}
     <script async src="https://hive.caefisica.com/sb.js"></script>

layouts/partials/header/alert.html

@@ -2,9 +2,11 @@
     <div
         id="announcement"
         data-id="global-alert-{{ md5 .Site.Params.alertText }}"
-        class="alert alert-primary alert-dismissible fade show text-lg-center"
+        class="alert alert-primary alert-dismissible fade show text-lg-center d-none"
         role="alert">
-        {{ .Site.Params.alertText | safeHTML | emojify }}
+        <span class="alert-text">
+            {{ .Site.Params.alertText | safeHTML }}
+        </span>
         <button
             type="button"
             class="btn-close"