From c08e4ce9d5b2313cae049b15d7c56a7319430e2d Mon Sep 17 00:00:00 2001
From: Barrett Ruth <br.barrettruth@gmail.com>
Date: Thu, 22 May 2025 18:51:58 -0500
Subject: [PATCH] feat: final refactor for port

---
 .../{dateHeadings.js => centerKatek.js}       |   0
 public/scripts/index.js                       | 128 ++++++++++++++++
 src/layouts/PostLayout.astro                  |   2 +-
 src/pages/index.astro                         | 141 +-----------------
 4 files changed, 131 insertions(+), 140 deletions(-)
 rename public/scripts/{dateHeadings.js => centerKatek.js} (100%)
 create mode 100644 public/scripts/index.js

diff --git a/public/scripts/dateHeadings.js b/public/scripts/centerKatek.js
similarity index 100%
rename from public/scripts/dateHeadings.js
rename to public/scripts/centerKatek.js
diff --git a/public/scripts/index.js b/public/scripts/index.js
new file mode 100644
index 0000000..788176d
--- /dev/null
+++ b/public/scripts/index.js
@@ -0,0 +1,128 @@
+import { getTopicColor } from "../../src/utils/colors.js";
+
+const TERMINAL_PROMPT = "barrett@ruth:~$ ";
+let typing = false;
+let clearing = false;
+
+function clearPrompt(delay, callback) {
+  if (clearing) return;
+  clearing = true;
+
+  const terminalPrompt = document.querySelector(".terminal-prompt");
+  if (!terminalPrompt) {
+    clearing = false;
+    return;
+  }
+
+  const topicLength =
+    terminalPrompt.innerHTML.length - TERMINAL_PROMPT.length;
+  let i = 0;
+
+  function removeChar() {
+    if (i++ < topicLength) {
+      terminalPrompt.textContent = terminalPrompt.textContent.slice(0, -1);
+      setTimeout(removeChar, delay / topicLength);
+    } else {
+      i = 0;
+      clearing = false;
+      callback && callback();
+    }
+  }
+
+  removeChar();
+}
+
+function typechars(e) {
+  e.preventDefault();
+
+  const topicElement = e.target;
+  if (topicElement.classList.contains("active")) return;
+  if (typing) return;
+  typing = true;
+
+  const topic = topicElement.dataset.topic;
+  const terminalText = ` /${topic.toLowerCase()}`;
+  const terminalPrompt = document.querySelector(".terminal-prompt");
+  const delay =
+    terminalPrompt.innerHTML.length > TERMINAL_PROMPT.length ? 250 : 500;
+
+  const topics = document.querySelectorAll(".topic a");
+  topics.forEach((t) => {
+    t.classList.remove("active");
+    t.style.color = "";
+  });
+
+  topicElement.classList.add("active");
+  topicElement.style.color = getTopicColor(topic);
+
+  clearPrompt(delay, () => {
+    let i = 0;
+    function typechar() {
+      if (i < terminalText.length) {
+        terminalPrompt.innerHTML += terminalText.charAt(i++);
+        setTimeout(typechar, delay / terminalText.length);
+      } else {
+        renderPosts(topic);
+        typing = false;
+      }
+    }
+    typechar();
+  });
+}
+
+function renderPosts(topic) {
+  const posts = document.getElementById("posts");
+  posts.innerHTML = "";
+
+  const categoryPosts = postsByCategory[topic];
+
+  if (!categoryPosts) {
+    return;
+  }
+
+  categoryPosts.forEach((post) => {
+    const postDiv = document.createElement("div");
+    postDiv.classList.add("post");
+
+    const link = document.createElement("a");
+    const slug = post.id
+      .split("/")
+      .pop()
+      .replace(/\.mdx?$/, "");
+
+    link.href = `/posts/${topic}/${slug}.html`;
+    link.textContent = post.data.title;
+    link.style.textDecoration = "underline";
+
+    postDiv.appendChild(link);
+    posts.appendChild(postDiv);
+  });
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+  const topics = document.querySelectorAll(".topic a");
+
+  topics.forEach((topic) => {
+    topic.addEventListener("click", typechars);
+
+    const topicName = topic.dataset.topic;
+
+    topic.addEventListener("mouseenter", () => {
+      const color = getTopicColor(topicName);
+      topic.style.color = color;
+    });
+
+    topic.addEventListener("mouseleave", () => {
+      if (!topic.classList.contains("active")) {
+        topic.style.color = "";
+      }
+    });
+  });
+
+  window.addEventListener("beforeunload", () => {
+    const terminalPrompt = document.querySelector(".terminal-prompt");
+    if (terminalPrompt) {
+      terminalPrompt.innerHTML = TERMINAL_PROMPT;
+    }
+  });
+});
diff --git a/src/layouts/PostLayout.astro b/src/layouts/PostLayout.astro
index 40a7f9c..f94bf21 100644
--- a/src/layouts/PostLayout.astro
+++ b/src/layouts/PostLayout.astro
@@ -55,7 +55,7 @@ const topicColor = getTopicColor(category);
   </div>
 
   <slot name="scripts" slot="scripts">
-    <script src="/scripts/dateHeadings.js" is:inline></script>
+    <script src="/scripts/centerKatex.js" is:inline></script>
     {frontmatter.scripts?.map(script => (
       <script src={script} type="module"></script>
     ))}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index f38491d..816c0a4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -48,144 +48,7 @@ Object.keys(postsByCategory).forEach((category) => {
   </div>
 
   <script slot="scripts" define:vars={{ postsByCategory }}>
-    function getTopicColor(topicName) {
-      switch (topicName) {
-        case "software":
-          return "#0073e6";
-        case "algorithms":
-          return "#d50032";
-        case "meditations":
-          return "#6a0dad";
-        default:
-          return "#000000";
-      }
-    }
-
-    const TERMINAL_PROMPT = "barrett@ruth:~$ ";
-    let typing = false;
-    let clearing = false;
-
-    function clearPrompt(delay, callback) {
-      if (clearing) return;
-      clearing = true;
-
-      const terminalPrompt = document.querySelector(".terminal-prompt");
-      if (!terminalPrompt) {
-        clearing = false;
-        return;
-      }
-
-      const topicLength =
-        terminalPrompt.innerHTML.length - TERMINAL_PROMPT.length;
-      let i = 0;
-
-      function removeChar() {
-        if (i++ < topicLength) {
-          terminalPrompt.textContent = terminalPrompt.textContent.slice(0, -1);
-          setTimeout(removeChar, delay / topicLength);
-        } else {
-          i = 0;
-          clearing = false;
-          callback && callback();
-        }
-      }
-
-      removeChar();
-    }
-
-    function typechars(e) {
-      e.preventDefault();
-
-      const topicElement = e.target;
-      if (topicElement.classList.contains("active")) return;
-      if (typing) return;
-      typing = true;
-
-      const topic = topicElement.dataset.topic;
-      const terminalText = ` /${topic.toLowerCase()}`;
-      const terminalPrompt = document.querySelector(".terminal-prompt");
-      const delay =
-        terminalPrompt.innerHTML.length > TERMINAL_PROMPT.length ? 250 : 500;
-
-      const topics = document.querySelectorAll(".topic a");
-      topics.forEach((t) => {
-        t.classList.remove("active");
-        t.style.color = "";
-      });
-
-      topicElement.classList.add("active");
-      topicElement.style.color = getTopicColor(topic);
-
-      clearPrompt(delay, () => {
-        let i = 0;
-        function typechar() {
-          if (i < terminalText.length) {
-            terminalPrompt.innerHTML += terminalText.charAt(i++);
-            setTimeout(typechar, delay / terminalText.length);
-          } else {
-            renderPosts(topic);
-            typing = false;
-          }
-        }
-        typechar();
-      });
-    }
-
-    function renderPosts(topic) {
-      const posts = document.getElementById("posts");
-      posts.innerHTML = "";
-
-      const categoryPosts = postsByCategory[topic];
-
-      if (!categoryPosts) {
-        return;
-      }
-
-      categoryPosts.forEach((post) => {
-        const postDiv = document.createElement("div");
-        postDiv.classList.add("post");
-
-        const link = document.createElement("a");
-        const slug = post.id
-          .split("/")
-          .pop()
-          .replace(/\.mdx?$/, "");
-
-        link.href = `/posts/${topic}/${slug}.html`;
-        link.textContent = post.data.title;
-        link.style.textDecoration = "underline";
-
-        postDiv.appendChild(link);
-        posts.appendChild(postDiv);
-      });
-    }
-
-    document.addEventListener("DOMContentLoaded", function () {
-      const topics = document.querySelectorAll(".topic a");
-
-      topics.forEach((topic) => {
-        topic.addEventListener("click", typechars);
-
-        const topicName = topic.dataset.topic;
-
-        topic.addEventListener("mouseenter", () => {
-          const color = getTopicColor(topicName);
-          topic.style.color = color;
-        });
-
-        topic.addEventListener("mouseleave", () => {
-          if (!topic.classList.contains("active")) {
-            topic.style.color = "";
-          }
-        });
-      });
-
-      window.addEventListener("beforeunload", () => {
-        const terminalPrompt = document.querySelector(".terminal-prompt");
-        if (terminalPrompt) {
-          terminalPrompt.innerHTML = TERMINAL_PROMPT;
-        }
-      });
-    });
+    window.postsByCategory = postsByCategory;
   </script>
+  <script slot="scripts" type="module" src="/scripts/index.js"></script>
 </BaseLayout>