refactor: fix new Biome lint errors/warnings

biome.json

@@ -3,16 +3,16 @@
   "files": {
     "includes": [
       "**",
-      "!**/node_modules/**",
-      "!**/public/**",
-      "!**/resources/**",
-      "!**/_gen/**",
-      "!**/assets/dist/**",
+      "!**/node_modules",
+      "!**/public",
+      "!**/resources",
+      "!**/_gen",
+      "!**/assets/dist",
       "!**/*.min.js",
       "!**/*.min.css",
-      "!**/pagefind/**",
-      "!**/_vendor/**",
-      "!**/vendor/**",
+      "!**/pagefind",
+      "!**/_vendor",
+      "!**/vendor",
       "!**/*.html",
       "!**/layouts/**/*.html",
       "!**/layouts/**/*.htm",
@@ -21,12 +21,13 @@
       "!**/hugo_stats.json",
       "!**/*.code-workspace",
       "!**/modules/blox-tailwind/data/icons/devicon.json",
-      "!**/templates/**",
-      "!**/test/**",
+      "!**/templates",
+      "!**/test",
       "!**/modules/**/package.json",
       "!**/assets/jsconfig.json",
       "!**/docs-local",
-      "!**/backups/**"
+      "!**/backups",
+      "!**/modules/blox-tailwind/assets/css/config/safelist.css"
     ]
   },
   "formatter": {

modules/blox-plugin-reveal/assets/js/hugoblox-slides.js

@@ -14,33 +14,23 @@ import * as params from "@params";
 // Enable core slide features.
 var enabledPlugins = [RevealMarkdown, RevealSearch, RevealNotes, RevealMath.KaTeX, RevealZoom];
 
-const isObject = function (o) {
-  return o === Object(o) && !isArray(o) && typeof o !== "function";
-};
+const isObject = (o) => o === Object(o) && !isArray(o) && typeof o !== "function";
 
-const isArray = function (a) {
-  return Array.isArray(a);
-};
+const isArray = (a) => Array.isArray(a);
 
-const toCamelCase = function (s) {
-  return s.replace(/([-_][a-z])/gi, function (term) {
-    return term.toUpperCase().replace("-", "").replace("_", "");
-  });
-};
+const toCamelCase = (s) => s.replace(/([-_][a-z])/gi, (term) => term.toUpperCase().replace("-", "").replace("_", ""));
 
-const keysToCamelCase = function (o) {
+const keysToCamelCase = (o) => {
   if (isObject(o)) {
     const n = {};
 
-    Object.keys(o).forEach(function (k) {
+    Object.keys(o).forEach((k) => {
       n[toCamelCase(k)] = keysToCamelCase(o[k]);
     });
 
     return n;
   } else if (isArray(o)) {
-    return o.map(function (i) {
-      return keysToCamelCase(i);
-    });
+    return o.map((i) => keysToCamelCase(i));
   }
 
   return o;
@@ -64,7 +54,7 @@ if (pluginOptions.menu_enabled) {
   enabledPlugins.push(RevealMenu);
 }
 
-pluginOptions["plugins"] = enabledPlugins;
+pluginOptions.plugins = enabledPlugins;
 
 Reveal.initialize(pluginOptions);
 
@@ -84,23 +74,23 @@ if (params.slides.diagram) {
   }
 
   // `startOnLoad` must be false since diagrams are lazily rendered.
-  mermaidOptions["startOnLoad"] = false;
+  mermaidOptions.startOnLoad = false;
 
   mermaid.initialize(mermaidOptions);
 
   // Lazily render Mermaid diagrams within Reveal.JS slides
   // See: https://github.com/hakimel/reveal.js/issues/2863#issuecomment-1107444425
-  let renderMermaidDiagrams = function renderMermaidDiagrams(event) {
-    let mermaidDivs = event.currentSlide.querySelectorAll(".mermaid:not(.done)");
-    let indices = Reveal.getIndices();
-    let pageno = `${indices.h}-${indices.v}`;
+  const renderMermaidDiagrams = function renderMermaidDiagrams(event) {
+    const mermaidDivs = event.currentSlide.querySelectorAll(".mermaid:not(.done)");
+    const indices = Reveal.getIndices();
+    const pageno = `${indices.h}-${indices.v}`;
 
-    mermaidDivs.forEach(function (mermaidDiv, i) {
-      let insertSvg = function (svgCode) {
+    mermaidDivs.forEach((mermaidDiv, i) => {
+      const insertSvg = (svgCode) => {
         mermaidDiv.innerHTML = svgCode;
         mermaidDiv.classList.add("done");
       };
-      let graphDefinition = mermaidDiv.textContent;
+      const graphDefinition = mermaidDiv.textContent;
       mermaid.mermaidAPI.render(`mermaid${pageno}-${i}`, graphDefinition, insertSvg);
     });
     Reveal.layout();

modules/blox-tailwind/assets/css/blox/biography.css

@@ -152,12 +152,18 @@
   font-size: 20px;
   background-color: #fff;
   color: #000; /* override parent alpha */
-  box-shadow: 0 10px 20px rgb(0 0 0 / 4%), 0 2px 6px rgb(0 0 0 / 4%), 0 0 1px rgb(0 0 0 / 4%);
+  box-shadow:
+    0 10px 20px rgb(0 0 0 / 4%),
+    0 2px 6px rgb(0 0 0 / 4%),
+    0 0 1px rgb(0 0 0 / 4%);
 }
 
 .dark .avatar-emoji {
   background-color: #000;
-  box-shadow: 0 10px 20px rgb(0 0 0 / 4%), 0 2px 6px rgb(0 0 0 / 4%), 0 0 1px rgb(255 255 255 / 96%);
+  box-shadow:
+    0 10px 20px rgb(0 0 0 / 4%),
+    0 2px 6px rgb(0 0 0 / 4%),
+    0 0 1px rgb(255 255 255 / 96%);
 }
 
 /* Biography Block */
@@ -182,14 +188,14 @@
 
 /* Light Mode Gradient */
 .hbx-bg-gradient::before {
-  background-image: radial-gradient(at 20% 25%, hsla(212, 80%, 95%, 1) 0px, transparent 50%),
-    radial-gradient(at 75% 30%, hsla(160, 80%, 95%, 1) 0px, transparent 50%), radial-gradient(at 25% 80%, hsla(280, 80%, 95%, 1) 0px, transparent 50%),
-    radial-gradient(at 75% 85%, hsla(30, 80%, 95%, 1) 0px, transparent 50%);
+  background-image:
+    radial-gradient(at 20% 25%, hsla(212, 80%, 95%, 1) 0px, transparent 50%), radial-gradient(at 75% 30%, hsla(160, 80%, 95%, 1) 0px, transparent 50%),
+    radial-gradient(at 25% 80%, hsla(280, 80%, 95%, 1) 0px, transparent 50%), radial-gradient(at 75% 85%, hsla(30, 80%, 95%, 1) 0px, transparent 50%);
 }
 
 /* Dark Mode Gradient */
 .dark .hbx-bg-gradient::before {
-  background-image: radial-gradient(at 20% 25%, hsla(212, 35%, 15%, 1) 0px, transparent 50%),
-    radial-gradient(at 75% 30%, hsla(160, 35%, 15%, 1) 0px, transparent 50%), radial-gradient(at 25% 80%, hsla(280, 35%, 15%, 1) 0px, transparent 50%),
-    radial-gradient(at 75% 85%, hsla(30, 35%, 15%, 1) 0px, transparent 50%);
+  background-image:
+    radial-gradient(at 20% 25%, hsla(212, 35%, 15%, 1) 0px, transparent 50%), radial-gradient(at 75% 30%, hsla(160, 35%, 15%, 1) 0px, transparent 50%),
+    radial-gradient(at 25% 80%, hsla(280, 35%, 15%, 1) 0px, transparent 50%), radial-gradient(at 75% 85%, hsla(30, 35%, 15%, 1) 0px, transparent 50%);
 }

modules/blox-tailwind/assets/css/blox/navbar.css

@@ -69,10 +69,6 @@ input#nav-toggle:checked ~ #nav-menu {
   @apply pointer-events-none;
 }
 
-.nav-dropdown.active .nav-dropdown-list {
-  @apply block lg:visible lg:opacity-100;
-}
-
 .nav-dropdown-list {
   @apply bg-white dark:bg-slate-900 z-10 min-w-[180px] rounded py-4 shadow hidden lg:invisible lg:absolute lg:block lg:opacity-0;
   /* Ensure dropdown appears above content and under header */
@@ -80,6 +76,10 @@ input#nav-toggle:checked ~ #nav-menu {
   left: 0;
 }
 
+.nav-dropdown.active .nav-dropdown-list {
+  @apply block lg:visible lg:opacity-100;
+}
+
 /* Ensure hover opens dropdown in desktop (CSS-driven) */
 @media (min-width: 1024px) {
   .nav-dropdown:hover > .nav-dropdown-list {
@@ -88,7 +88,7 @@ input#nav-toggle:checked ~ #nav-menu {
 }
 
 .nav-dropdown-item {
-  @apply px-4  [&:not(:last-child)]:mb-2;
+  @apply px-4 [&:not(:last-child)]:mb-2;
 }
 
 .dark .nav-dropdown-item:hover {
@@ -96,7 +96,7 @@ input#nav-toggle:checked ~ #nav-menu {
 }
 
 .nav-dropdown-link {
-  @apply dark:text-white  dark:hover:text-white block py-1 font-semibold transition;
+  @apply dark:text-white dark:hover:text-white block py-1 font-semibold transition;
 }
 
 .nav-dropdown-link:hover {

modules/blox-tailwind/assets/css/chroma.css

@@ -22,5 +22,6 @@
 .chroma .language-latex *,
 .chroma .language-tex,
 .chroma .language-tex * {
+  /* biome-ignore lint/complexity/noImportantStyles: Required to override Chroma's default italic for LaTeX/TeX */
   font-style: normal !important;
 }

modules/blox-tailwind/assets/css/components/author-notes.css

@@ -2,6 +2,7 @@
 
 /* Hide elements with x-cloak until Alpine.js initializes */
 [x-cloak] {
+  /* biome-ignore lint/complexity/noImportantStyles: Required to reliably hide until Alpine initializes */
   display: none !important;
 }
 

modules/blox-tailwind/assets/css/components/cards.css

@@ -44,16 +44,16 @@
   @apply line-clamp-3 text-sm font-normal text-gray-500 dark:text-gray-400 px-4 mb-4 mt-2;
 }
 
-.hb-card:hover svg {
-  color: currentcolor;
-}
-
 .hb-card svg {
   color: var(--color-neutral-700);
   width: 1.5rem;
   transition: color 0.3s ease;
 }
 
+.hb-card:hover svg {
+  color: currentcolor;
+}
+
 .hb-card p {
   margin-top: 0.5rem;
 }

modules/blox-tailwind/assets/css/components/copy.css

@@ -6,18 +6,14 @@
   @apply relative z-0;
 }
 
-.highlight:hover > .copy-button {
-  @apply visible;
+.copy-button {
+  @apply invisible absolute right-0 top-0 z-10 w-20 py-1 cursor-pointer font-mono text-sm whitespace-nowrap rounded-bl-md rounded-tr-md bg-neutral-200 text-neutral-700 opacity-90 dark:bg-neutral-600 dark:text-neutral-200;
 }
 
 /* Copy Button */
 
-.copy-button {
-  @apply invisible absolute right-0 top-0 z-10 w-20 py-1
-  cursor-pointer font-mono text-sm whitespace-nowrap
-  rounded-bl-md rounded-tr-md
-  bg-neutral-200 text-neutral-700 opacity-90
-  dark:bg-neutral-600 dark:text-neutral-200;
+.highlight:hover > .copy-button {
+  @apply visible;
 }
 
 .copy-button:hover,

modules/blox-tailwind/assets/css/components/glassmorphism.css

@@ -106,11 +106,17 @@
 }
 
 .glass-shadow {
-  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25), 0 0 0 1px rgb(255 255 255 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.1);
+  box-shadow:
+    0 25px 50px -12px rgb(0 0 0 / 0.25),
+    0 0 0 1px rgb(255 255 255 / 0.1),
+    inset 0 1px 0 rgb(255 255 255 / 0.1);
 }
 
 .dark .glass-shadow {
-  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.05), inset 0 1px 0 rgb(255 255 255 / 0.05);
+  box-shadow:
+    0 25px 50px -12px rgb(0 0 0 / 0.5),
+    0 0 0 1px rgb(255 255 255 / 0.05),
+    inset 0 1px 0 rgb(255 255 255 / 0.05);
 }
 
 /* ==========================================================================
@@ -137,7 +143,9 @@
 
   /* Modern border and shadow for light mode */
   border: 1px solid rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.1));
-  box-shadow: 0 32px 64px -12px rgb(0 0 0 / 0.25), inset 0 1px 0 rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.05));
+  box-shadow:
+    0 32px 64px -12px rgb(0 0 0 / 0.25),
+    inset 0 1px 0 rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.05));
 }
 
 .cta-glassmorphism:hover {
@@ -150,7 +158,9 @@
   );
 
   border: 1px solid rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.2));
-  box-shadow: 0 40px 80px -16px rgb(0 0 0 / 0.3), inset 0 1px 0 rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.1));
+  box-shadow:
+    0 40px 80px -16px rgb(0 0 0 / 0.3),
+    inset 0 1px 0 rgb(255 255 255 / calc(var(--glassmorphism-opacity) + 0.1));
 }
 
 /* Dark mode adjustments for CTA glassmorphism */
@@ -163,7 +173,9 @@
   );
 
   border: 1px solid rgb(255 255 255 / var(--glassmorphism-opacity));
-  box-shadow: 0 32px 64px -12px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.5));
+  box-shadow:
+    0 32px 64px -12px rgb(0 0 0 / 0.4),
+    inset 0 1px 0 rgb(255 255 255 / calc(var(--glassmorphism-opacity) * 0.5));
 }
 
 .dark .cta-glassmorphism:hover {
@@ -196,20 +208,29 @@
   /* Light mode button background */
   background: rgb(255 255 255 / 0.9);
   border: 1px solid rgb(0 0 0 / 0.1);
-  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.3);
+  box-shadow:
+    0 10px 25px -5px rgb(0 0 0 / 0.1),
+    0 4px 6px -2px rgb(0 0 0 / 0.1),
+    inset 0 1px 0 rgb(255 255 255 / 0.3);
 }
 
 .dark .cta-glassmorphism .group > div:first-child {
   /* Dark mode button background */
   background: rgb(0 0 0 / 0.4);
   border: 1px solid rgb(255 255 255 / 0.2);
-  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.3), 0 4px 6px -2px rgb(0 0 0 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.1);
+  box-shadow:
+    0 10px 25px -5px rgb(0 0 0 / 0.3),
+    0 4px 6px -2px rgb(0 0 0 / 0.2),
+    inset 0 1px 0 rgb(255 255 255 / 0.1);
 }
 
 .cta-glassmorphism .group:hover > div:first-child {
   background: rgb(255 255 255);
   border: 1px solid rgb(0 0 0 / 0.15);
-  box-shadow: 0 20px 40px -8px rgb(0 0 0 / 0.15), 0 8px 12px -4px rgb(0 0 0 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.4);
+  box-shadow:
+    0 20px 40px -8px rgb(0 0 0 / 0.15),
+    0 8px 12px -4px rgb(0 0 0 / 0.1),
+    inset 0 1px 0 rgb(255 255 255 / 0.4);
 }
 
 .dark .cta-glassmorphism .group:hover > div:first-child {

modules/blox-tailwind/assets/css/framework/components.css

@@ -29,8 +29,11 @@
 
   /* 2025 Glassmorphism texture support - disable conflicting defaults */
   .home-section-bg.bg-image[style*="background-size"][style*="background-repeat"] {
+    /* biome-ignore lint/complexity/noImportantStyles: Required to override inline background-size for glass textures */
     background-size: revert !important;
+    /* biome-ignore lint/complexity/noImportantStyles: Required to override inline background-repeat for glass textures */
     background-repeat: revert !important;
+    /* biome-ignore lint/complexity/noImportantStyles: Required to override inline background-position for glass textures */
     background-position: revert !important;
   }
 

modules/blox-tailwind/assets/js/hb-head.js

@@ -7,11 +7,11 @@ const defaultTheme = root.dataset.wcThemeDefault || "system";
 // Create global HBB object with theme functions
 window.hbb = {
   defaultTheme: defaultTheme,
-  setDarkTheme: function () {
+  setDarkTheme: () => {
     root.classList.add("dark");
     root.style.colorScheme = "dark";
   },
-  setLightTheme: function () {
+  setLightTheme: () => {
     root.classList.remove("dark");
     root.style.colorScheme = "light";
   },

modules/blox-tailwind/assets/js/hb-init.js

@@ -23,7 +23,7 @@ export function initTheme() {
 }
 
 export function applyHugoStyleFixes() {
-  document.addEventListener("DOMContentLoaded", function () {
+  document.addEventListener("DOMContentLoaded", () => {
     const checkboxes = document.querySelectorAll("li input[type='checkbox'][disabled]");
     checkboxes.forEach((e) => {
       const parent = e.parentElement?.parentElement;

modules/blox-tailwind/assets/js/hb-nav.js

@@ -2,7 +2,7 @@
 
 const applyScrollPadding = () => {
   const header = document.querySelector(".page-header");
-  let position = header.getBoundingClientRect();
+  const position = header.getBoundingClientRect();
   document.documentElement.style.scrollPaddingTop = position.height.toString() + "px";
   const r = document.querySelector(":root");
   r.style.setProperty("--navbar-height", position.height.toString() + "px");

modules/blox-tailwind/assets/js/hb-notifier.js

@@ -21,7 +21,7 @@ export function showNotification(message, type = "success", duration = 3000) {
 
   // Remove any existing notifications with same message
   const existingNotification = container.querySelector(".hb-notification");
-  if (existingNotification && existingNotification.textContent.includes(message)) {
+  if (existingNotification?.textContent?.includes(message)) {
     existingNotification.remove();
   }
 

modules/blox-tailwind/assets/js/hb-search.js

@@ -8,7 +8,7 @@ document.addEventListener("DOMContentLoaded", () => {
   // Handle search toggle buttons
   const searchButtons = document.querySelectorAll("[data-search-toggle]");
   searchButtons.forEach((button) => {
-    button.addEventListener("click", (e) => {
+    button.addEventListener("click", () => {
       const prefilledQuery = button.dataset.searchQuery;
 
       if (window.Alpine && Alpine.store("search")) {

modules/blox-tailwind/assets/js/hb-sidebar.js

@@ -1,7 +1,7 @@
-document.addEventListener("DOMContentLoaded", function () {
+document.addEventListener("DOMContentLoaded", () => {
   const buttons = document.querySelectorAll("[data-hb-sidebar-toggle]");
-  buttons.forEach(function (button) {
-    button.addEventListener("click", function (e) {
+  buttons.forEach((button) => {
+    button.addEventListener("click", (e) => {
       e.preventDefault();
       const parent = button.parentElement.parentElement;
       if (parent) {
@@ -12,7 +12,7 @@ document.addEventListener("DOMContentLoaded", function () {
 });
 
 // Hamburger menu for mobile navigation
-document.addEventListener("DOMContentLoaded", function () {
+document.addEventListener("DOMContentLoaded", () => {
   const menu = document.querySelector("#nav-toggle");
   const overlay = document.querySelector(".hb-sidebar-mobile-menu");
   const sidebarContainer = document.querySelector(".hb-sidebar-container");

modules/blox-tailwind/assets/js/hb-theme.js

@@ -1,5 +1,5 @@
 // Hugo Blox Builder Light / Dark theme toggle
-document.addEventListener("DOMContentLoaded", function () {
+document.addEventListener("DOMContentLoaded", () => {
   addThemeToggleListener();
 });
 
@@ -24,7 +24,7 @@ function addThemeToggleListener() {
 
   // Add click event handler to the light/dark buttons
   themeToggleButtons.forEach((el) => {
-    el.addEventListener("click", function () {
+    el.addEventListener("click", () => {
       console.debug("Theme toggled");
       if (localStorage.getItem("wc-color-theme")) {
         if (localStorage.getItem("wc-color-theme") === "light") {

modules/blox-tailwind/assets/js/katex-config.js

@@ -1,4 +1,4 @@
-document.addEventListener("DOMContentLoaded", function () {
+document.addEventListener("DOMContentLoaded", () => {
   window.renderMathInElement(document.body, {
     delimiters: [
       {left: "$$", right: "$$", display: true},

modules/blox-tailwind/blox/shared/js/components/Icon.jsx

@@ -1,3 +1,4 @@
+// biome-ignore lint/correctness/noUnusedImports: Classic Preact JSX runtime may require 'h' for JSX transform
 import {h} from "preact";
 
 /**
@@ -22,7 +23,7 @@ export const Icon = ({svg, attributes}) => {
 
   if (hasWrapper) {
     if (/<svg[^>]*class=/i.test(decoded)) {
-      decoded = decoded.replace(/<svg([^>]*?)class=\"([^\"]*)\"([^>]*)>/i, '<svg$1class="$2 inline-block w-4 h-4"$3>');
+      decoded = decoded.replace(/<svg([^>]*?)class="([^"]*)"([^>]*)>/i, '<svg$1class="$2 inline-block w-4 h-4"$3>');
     } else {
       decoded = decoded.replace(/<svg\b/i, '<svg class="inline-block w-4 h-4"');
     }

vite.config.js

@@ -7,7 +7,7 @@
  * Usage: pnpm run vendor:libs
  */
 
-import {resolve} from "path";
+import {resolve} from "node:path";
 import del from "rollup-plugin-delete";
 import {defineConfig} from "vite";
 import {viteStaticCopy} from "vite-plugin-static-copy";