home: fix js not being able to load after routing through htmx

static/style.css

@@ -216,7 +216,6 @@ table {
 }
 
 body {
-
   background-image: url(assets/images/tiledbgpink.webp);
   background-size: cover;
   background-position: center;

templates/partials/home.html

@@ -91,15 +91,15 @@
 
 <!-- I know I know but I need it for this pretty rainbow flagish animation -->
 <script>
+  (function() {
     <!-- For rainbow text -->
     const el = document.querySelector('woopwoop');
+    if (!el) return;
     const text = el.textContent;
     el.innerHTML = text.split('').map((ch, i) =>
       `<span style="animation-delay: ${i * 0.08}s">${ch === ' ' ? '&nbsp;' : ch}</span>`
     ).join('');
 
-
-
     const BIBOU_QUOTES = {{bibou_quotes| tojson | safe }};
 
     const txtEl = document.querySelector('bibou-text');
@@ -117,9 +117,11 @@
           clearInterval(intervalRef); intervalRef = null;
         }
       }, 40);
-  }; ctrEl.addEventListener('mouseenter', () => {
+    };
+
+    ctrEl.addEventListener('mouseenter', () => {
       const quote = BIBOU_QUOTES[Math.floor(Math.random() * BIBOU_QUOTES.length)];
       ttText(quote);
     });
-
+  })();
 </script>