From 5666f243bbf25d418af1e62893aad09cc112f6f6 Mon Sep 17 00:00:00 2001
From: Isaac Mills <rooster0055@protonmail.com>
Date: Thu, 10 Jul 2025 12:39:25 -0600
Subject: [PATCH] Move HTMX code to module

---
 src/components/head.html | 24 +-----------------------
 src/htmx_import.js       |  1 +
 src/index.js             | 22 ++++++++++++++++++++++
 3 files changed, 24 insertions(+), 23 deletions(-)
 create mode 100644 src/htmx_import.js
 create mode 100644 src/index.js

diff --git a/src/components/head.html b/src/components/head.html
index 44ab682..83d7bba 100644
--- a/src/components/head.html
+++ b/src/components/head.html
@@ -14,9 +14,7 @@
   <link rel="icon" href="/assets/favicon.ico" sizes="16x16 32x32">
   <link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
-  <script type="module">
-    window.htmx = require('htmx.org');
-  </script>
+  <script type="module" src="index.js"></script>
   <meta name="htmx-config" content='{"responseHandling": [{"code":"204", "swap": false},{"code":"...", "swap": true}]}'>
   <style>
     .flex-container {
@@ -198,26 +196,6 @@
       }
     }
   </script>
-  <script type="module">
-    import AudioMotionAnalyzer from 'audiomotion-analyzer';
-    const container = document.getElementById('audioContainer');
-    const audioSource = document.getElementById('player');
-    const audioMotion = new AudioMotionAnalyzer(container, {source: audioSource});
-    audioMotion.registerGradient('sandwich', {
-      dir: 'h',           // add this property to create a horizontal gradient (optional)
-      colorStops: [       // list your gradient colors in this array (at least one color is required)
-        {color: '#957b09', pos: .0},  // use `level` to set the max bar amplitude (0 to 1) to use this color
-        {color: '#f8d170', pos: .65}, // in an object, use `pos` to adjust the offset (0 to 1) of a colorStop
-      ]
-    });
-    audioMotion.setOptions({source: audioSource, height: 256, overlay: true, bgAlpha: 0.0, showScaleX: false, gradient: 'sandwich', ledBars: true, mode: 7, reflexRatio: 0.5, reflexAlpha: 1.0, alphaBars: true, weightingFilter: '468', onCanvasDraw: drawCallback});
-
-
-    function drawCallback(instance, info) {
-      const energy = instance.getEnergy() * 150;
-      document.documentElement.style.setProperty('--energy', energy + 'px');
-    }
-  </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/htmx_import.js b/src/htmx_import.js
new file mode 100644
index 0000000..43766a4
--- /dev/null
+++ b/src/htmx_import.js
@@ -0,0 +1 @@
+window.htmx = require('htmx.org');
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..fca8a6f
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,22 @@
+import htmx from 'htmx.org';
+import '/src/htmx_import.js'
+import AudioMotionAnalyzer from 'audiomotion-analyzer';
+htmx.onLoad(function(target) {
+  const container = document.getElementById('audioContainer');
+  const audioSource = document.getElementById('player');
+  const audioMotion = new AudioMotionAnalyzer(container, { source: audioSource });
+  audioMotion.registerGradient('sandwich', {
+    dir: 'h',           // add this property to create a horizontal gradient (optional)
+    colorStops: [       // list your gradient colors in this array (at least one color is required)
+      { color: '#957b09', pos: .0 },  // use `level` to set the max bar amplitude (0 to 1) to use this color
+      { color: '#f8d170', pos: .65 }, // in an object, use `pos` to adjust the offset (0 to 1) of a colorStop
+    ]
+  });
+  audioMotion.setOptions({ source: audioSource, height: 256, overlay: true, bgAlpha: 0.0, showScaleX: false, gradient: 'sandwich', ledBars: true, mode: 7, reflexRatio: 0.5, reflexAlpha: 1.0, alphaBars: true, weightingFilter: '468', onCanvasDraw: drawCallback });
+
+
+  function drawCallback(instance, _info) {
+    const energy = instance.getEnergy() * 150;
+    target.style.setProperty('--energy', energy + 'px');
+  }
+});