Fixes for htmx

3 files changed, 67 insertions, 65 deletions

diff --git a/public/footnotes.js b/public/footnotes.js
index 57ded98..96a9400 100644
--- a/public/footnotes.js
+++ b/public/footnotes.js
@@ -8,7 +8,7 @@ const SIDENOTES = {
   readingWidth: null, // max width of the post text, null = no cap
 };
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("htmx:load", () => {
   const area = document.querySelector("[data-scroll-area]");
   const article = area?.querySelector("article");
   if (!area || !article) return;
diff --git a/public/my_uptime.js b/public/my_uptime.js
index 1fdb457..b5f3ca2 100644
--- a/public/my_uptime.js
+++ b/public/my_uptime.js
@@ -13,7 +13,7 @@ async function updateUptime() {
 }
 
 // Run on page load after all DOM elements loaded
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("htmx:load", () => {
   updateUptime();
   setInterval(updateUptime, 5 * 1000); // in ms
 });
diff --git a/public/shell.js b/public/shell.js
index 9a70846..3f3aef8 100644
--- a/public/shell.js
+++ b/public/shell.js
@@ -1,73 +1,75 @@
-const shell = document.querySelector("[data-shell]");
+document.addEventListener("htmx:load", () => {
+  const shell = document.querySelector("[data-shell]");
 
-if (shell) {
-  const area = shell.closest("[data-scroll-area]");
-  const history = shell.querySelector("#shell-history");
-  const input = shell.querySelector("[data-shell-input]");
-  const caret = shell.querySelector("[data-shell-caret]");
-  let busy = false;
+  if (shell) {
+    const area = shell.closest("[data-scroll-area]");
+    const history = shell.querySelector("#shell-history");
+    const input = shell.querySelector("[data-shell-input]");
+    const caret = shell.querySelector("[data-shell-caret]");
+    let busy = false;
 
-  const updateCaret = () => {
-    const pos = input.selectionStart ?? input.value.length;
-    caret.style.left = `calc(${pos}ch - ${input.scrollLeft}px)`;
-    caret.textContent = input.value[pos] ?? "\u00a0";
-    caret.style.animation = "none"; // restart the blink so the caret is solid while typing
-    void caret.offsetWidth;
-    caret.style.animation = "";
-  };
+    const updateCaret = () => {
+      const pos = input.selectionStart ?? input.value.length;
+      caret.style.left = `calc(${pos}ch - ${input.scrollLeft}px)`;
+      caret.textContent = input.value[pos] ?? "\u00a0";
+      caret.style.animation = "none"; // restart the blink so the caret is solid while typing
+      void caret.offsetWidth;
+      caret.style.animation = "";
+    };
 
-  const snapToBottom = () => {
-    area.scrollTop = area.scrollHeight;
-  };
+    const snapToBottom = () => {
+      area.scrollTop = area.scrollHeight;
+    };
 
-  const run = async (cmd) => {
-    busy = true;
-    try {
-      const res = await fetch("/shell/run", {
-        method: "POST",
-        headers: { "Content-Type": "application/x-www-form-urlencoded" },
-        body: new URLSearchParams({ cmd }),
-      });
-      const data = await res.json();
-      if (data.clear) history.replaceChildren();
-      if (data.html) history.insertAdjacentHTML("beforeend", data.html);
-      if (data.vars) {
-        for (const [key, value] of Object.entries(data.vars)) {
-          document.documentElement.style.setProperty(`--${key}`, value);
+    const run = async (cmd) => {
+      busy = true;
+      try {
+        const res = await fetch("/shell/run", {
+          method: "POST",
+          headers: { "Content-Type": "application/x-www-form-urlencoded" },
+          body: new URLSearchParams({ cmd }),
+        });
+        const data = await res.json();
+        if (data.clear) history.replaceChildren();
+        if (data.html) history.insertAdjacentHTML("beforeend", data.html);
+        if (data.vars) {
+          for (const [key, value] of Object.entries(data.vars)) {
+            document.documentElement.style.setProperty(`--${key}`, value);
+          }
         }
+      } catch {
+        const el = document.createElement("p");
+        el.textContent = "request failed";
+        history.append(el);
+      } finally {
+        busy = false;
+        snapToBottom();
       }
-    } catch {
-      const el = document.createElement("p");
-      el.textContent = "request failed";
-      history.append(el);
-    } finally {
-      busy = false;
-      snapToBottom();
-    }
-  };
+    };
 
-  input.addEventListener("keydown", (e) => {
-    if (e.key !== "Enter") return;
-    e.preventDefault();
-    const cmd = input.value.trim();
-    if (!cmd || busy) return;
-    input.value = "";
-    updateCaret();
-    run(cmd);
-  });
+    input.addEventListener("keydown", (e) => {
+      if (e.key !== "Enter") return;
+      e.preventDefault();
+      const cmd = input.value.trim();
+      if (!cmd || busy) return;
+      input.value = "";
+      updateCaret();
+      run(cmd);
+    });
 
-  for (const event of ["input", "keyup", "click", "focus"]) {
-    input.addEventListener(event, updateCaret);
-  }
-  document.addEventListener("selectionchange", () => {
-    if (document.activeElement === input) updateCaret();
-  });
+    for (const event of ["input", "keyup", "click", "focus"]) {
+      input.addEventListener(event, updateCaret);
+    }
+    document.addEventListener("selectionchange", () => {
+      if (document.activeElement === input) updateCaret();
+    });
 
-  area.addEventListener("click", () => {
-    if (!getSelection().toString()) input.focus({ preventScroll: true });
-  });
+    area.addEventListener("click", () => {
+      if (!getSelection().toString()) input.focus({ preventScroll: true });
+    });
 
-  input.focus({ preventScroll: true });
-  updateCaret();
-  snapToBottom();
-}
+    input.focus({ preventScroll: true });
+    updateCaret();
+    snapToBottom();
+  }
+});