progress on conversion to tailwind

static/js/base.js

@@ -1,33 +1,26 @@
-$(document).ready(function () {
-  // Initialize Gravatar
-  Gravatar.init();
+const $ = x => Array.from(document.querySelectorAll(x));
+const $$ = x => Array.from(document.querySelector(x));
 
-  // Initialize tooltips
-  $('[data-bs-toggle="tooltip"]').each(function () {
-    new bootstrap.Tooltip(this);
-  });
-
-  // Initialize select2 fields
+document.addEventListener('DOMContentLoaded', function() {
+  // Initialize Gravatar if available
+  if (typeof Gravatar !== 'undefined' && typeof Gravatar.init === 'function') {
+    Gravatar.init();
+  }
 
 
-  // Updated slider functionality for tab content
-  $("button[data-bs-toggle='tab']").on("click", function(e) {
-    e.preventDefault(); // Prevent default Bootstrap behavior
-
-    // Get the target pane selector from the button attribute
-    var targetSelector = $(this).attr("data-bs-target");
-    var $targetPane = $(targetSelector);
-
-    // Update active class on the nav buttons
-    $(this).closest("ul").find("button").removeClass("active");
-    $(this).addClass("active");
-
-    // Compute the offset of the target pane relative to the grid container
-    // Using the DOM property offsetLeft ensures any grid gap is taken into account
-    var offset = $targetPane[0].offsetLeft;
-
-    // Slide the grid: translate the container to align the target pane with the viewport
-    $("#cardsetTabsContent").css("transform", "translateX(-" + offset + "px)");
-  });
-});
-
+  const themeToggleBtn = document.getElementById('theme-toggle-btn');
+  if (themeToggleBtn) {
+    themeToggleBtn.addEventListener('click', function() {
+      const root = document.documentElement;
+      if (root.classList.contains("dark")) {
+        root.classList.remove("dark");
+        root.setAttribute("data-theme", "light");
+        localStorage.setItem("theme", "light");
+      } else {
+        root.classList.add("dark");
+        root.setAttribute("data-theme", "dark");
+        localStorage.setItem("theme", "dark");
+      }
+    });
+  }
+});