From 5246e6e83b07fc975a4183a430f73361260d8ffd Mon Sep 17 00:00:00 2001
From: wearrrrr <contact@wearr.dev>
Date: Tue, 20 Feb 2024 13:58:27 -0600
Subject: [PATCH] Fix long standing bug with settings and lint.

---
 index.js                             |  15 ++-
 src/components/Footer.astro          |  65 ++++++------
 src/components/SettingsTablist.astro |  32 +++---
 src/pages/[lang]/index.astro         | 153 ++++++++++++++-------------
 tsconfig.json                        |   2 +-
 5 files changed, 130 insertions(+), 137 deletions(-)

diff --git a/index.js b/index.js
index db577c2..278b6ec 100644
--- a/index.js
+++ b/index.js
@@ -42,7 +42,7 @@ const rammerheadScopes = [
 const rammerheadSession = /^\/[a-z0-9]{32}/;
 
 function shouldRouteRh(req) {
-  const url = new URL(req.url, 'http://0.0.0.0');
+  const url = new URL(req.url, "http://0.0.0.0");
   return rammerheadScopes.includes(url.pathname) || rammerheadSession.test(url.pathname);
 }
 
@@ -91,20 +91,19 @@ app.get("/search", async (req, res) => {
   try {
     const { query } = req.query;
 
-    const response = await fetch(
-      `http://api.duckduckgo.com/ac?q=${query}&format=json`
-    ).then((apiRes) => apiRes.json());
-  
+    const response = await fetch(`http://api.duckduckgo.com/ac?q=${query}&format=json`).then(
+      (apiRes) => apiRes.json()
+    );
+
     res.send(response);
   } catch (err) {
     res.redirect(302, "/404.html");
   }
 });
-app.get('*', function(req, res){
-  res.redirect(302, '/404.html');
+app.get("*", function (req, res) {
+  res.redirect(302, "/404.html");
 });
 
-
 console.log(chalk.gray("Starting Alu..."));
 console.log(chalk.green("Alu started successfully!"));
 server.on("listening", () => {
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index a55f681..a887a3f 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -29,40 +29,39 @@ const t = useTranslations(lang);
     </div>
   </div>
 
-    <style>
-      .wave-svg-container {
-        bottom: 0;
-        left: 0;
-        position: absolute;
-        width: 100%;
-        z-index: -1;
-        overflow: hidden;
-        height: 300px;
-        filter: brightness(1.5);
-      }
+  <style>
+    .wave-svg-container {
+      bottom: 0;
+      left: 0;
+      position: absolute;
+      width: 100%;
+      z-index: -1;
+      overflow: hidden;
+      height: 300px;
+      filter: brightness(1.5);
+    }
 
-      .footer {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-around;
-        color: var(--text-color);
-        position: relative;
-        padding-top: 200px;
-        gap: 50px;
-      }
-      .footer-top,
-      .footer-bottom {
-        width: 90%;
-        margin: 0 auto;
-      }
+    .footer {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      color: var(--text-color);
+      position: relative;
+      padding-top: 200px;
+      gap: 50px;
+    }
+    .footer-top,
+    .footer-bottom {
+      width: 90%;
+      margin: 0 auto;
+    }
 
-      .footer-title {
-        font-size: 20px;
-      }
+    .footer-title {
+      font-size: 20px;
+    }
 
-      a {
-        color: var(--text-color);
-      }
-    </style>
-  </div>
+    a {
+      color: var(--text-color);
+    }
+  </style>
 </div>
diff --git a/src/components/SettingsTablist.astro b/src/components/SettingsTablist.astro
index a3c70c3..fddd17b 100644
--- a/src/components/SettingsTablist.astro
+++ b/src/components/SettingsTablist.astro
@@ -47,14 +47,14 @@ const t = useTranslations(lang);
   <div id="current-content"></div>
 </div>
 <script is:inline>
-  document.addEventListener("astro:after-swap", () => {
-    window.currentlySelectedTab = "";
-    document.removeEventListener("setting-tabChange", determineListener);
-  });
-  window.currentlySelectedTab;
-  window.loadedContentStorage = {};
-
-  Array.from(document.getElementsByClassName("setting-tab")).forEach((tab) => {
+  function settingsLoad() {
+    document.addEventListener("astro:after-swap", () => {
+      window.currentlySelectedTab = "";
+      document.removeEventListener("setting-tabChange", determineListener);
+    });
+    window.currentlySelectedTab;
+    window.loadedContentStorage = {};
+    Array.from(document.getElementsByClassName("setting-tab")).forEach((tab) => {
     let contentToLoad = document.getElementById("content-" + tab.id);
     if (contentToLoad) {
       window.loadedContentStorage[tab.id] = contentToLoad.innerHTML;
@@ -159,17 +159,6 @@ const t = useTranslations(lang);
         }
       });
     });
-    // Array.from(item.children).forEach((item) => {
-    //     item.addEventListener('click', () => {
-    //       localStorage.setItem(localStorageItem, item.dataset.setting)
-    //       applySavedLocalStorage(localStorageItem, dropdownID)
-    //       closeDropdown(item.parentElement.id);
-
-    //       if (typeof optionalCallback == "function") {
-    //         optionalCallback();
-    //       }
-    //     })
-    //   })
   }
 
   function applyInputListeners(item, localStorageItem) {
@@ -353,6 +342,11 @@ const t = useTranslations(lang);
         break;
     }
   }
+  }
+  document.addEventListener('astro:after-swap', () => {
+    settingsLoad()
+  })
+  settingsLoad()
 </script>
 <style is:global>
   .content-hidden {
diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro
index e297ea1..e305bd5 100644
--- a/src/pages/[lang]/index.astro
+++ b/src/pages/[lang]/index.astro
@@ -16,7 +16,13 @@ export function getStaticPaths() {
     <h1 class="title-text">{t("menu.welcome")}</h1>
     <div class="form-wrapper">
       <form class="url-input-form" id="url-input-form">
-        <input class="url-input" id="url-input" type="text" placeholder={t("menu.search")} autocomplete="off" />
+        <input
+          class="url-input"
+          id="url-input"
+          type="text"
+          placeholder={t("menu.search")}
+          autocomplete="off"
+        />
         <div id="search-suggestions"></div>
         <div id="loading-content">Loading...</div>
         <div id="top-bar"></div>
@@ -37,12 +43,9 @@ export function getStaticPaths() {
         <h2>How can I contribute to the development of Alu?</h2>
         <p>
           Spreading the word of Alu is a great start, but if you really enjoy Alu, and want private
-          links, consider supporting me through Patreon! You can support me 
-          <Link
-            href="https://www.patreon.com/wearr/membership"
-            newTab
-            linkTextContent="Here!"
-          />, thank you for helping to make Alu great!
+          links, consider supporting me through Patreon! You can support me
+          <Link href="https://www.patreon.com/wearr/membership" newTab linkTextContent="Here!" />,
+          thank you for helping to make Alu great!
         </p>
       </div>
     </div>
@@ -50,80 +53,78 @@ export function getStaticPaths() {
 </Layout>
 
 <script>
-    type Suggestion = {
-        phrase: string;
-    }
-    const debounce = (func: Function, delay: number): (...args: any[]) => void => {
-        let debounceTimer: NodeJS.Timeout;
-        return function (this: Function, ...args: any[]) {
-            const context: any = this;
-            clearTimeout(debounceTimer);
-            debounceTimer = setTimeout(() => {
-                func.apply(context, args);
-            }, delay);
-        };
+  type Suggestion = {
+    phrase: string;
+  };
+  const debounce = (func: Function, delay: number): ((...args: any[]) => void) => {
+    let debounceTimer: NodeJS.Timeout;
+    return function (this: Function, ...args: any[]) {
+      const context: any = this;
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        func.apply(context, args);
+      }, delay);
     };
+  };
 
-    async function sendAPIRequest(urlInput: HTMLInputElement, searchSuggestions: HTMLDivElement) {
-      if (!urlInput) throw new Error("urlInput is null");
-      if (!searchSuggestions) throw new Error("searchSuggestions is null");
-        let url = urlInput.value;
-        let request = await fetch("/search?query=" + url);
-        let data = await request.json();
-        searchSuggestions.innerHTML = "";
-        data.map((suggestion: Suggestion) => {
-            let suggestionElement = document.createElement("div");
-            // For some reason css classes weren't working T^T.
-            suggestionElement.style.cursor = "pointer";
-            suggestionElement.style.marginTop = "5px";
-            suggestionElement.innerText = suggestion.phrase;
-            suggestionElement.addEventListener("click", () => {
-              console.log("here")
-                urlInput.value = suggestion.phrase;
-                // I can't be bothered to extend the window object, so I'm just going to use any
-                (window as any).loadFormContent();
-            });
-            searchSuggestions.appendChild(suggestionElement);
-        });
-        if (data.length === 0) {
-          urlInput.classList.remove("search-results");
-          searchSuggestions.style.opacity = "0";
-        } else {
-          urlInput.classList.add("search-results");
-          searchSuggestions.style.opacity = "1";
-        }
-    }
-    function addEventListeners() {
-      let urlInput = document.getElementById("url-input") as HTMLInputElement;
-      let searchSuggestions = document.getElementById('search-suggestions') as HTMLDivElement;
-      // Silently return if the required elements aren't found, this prevents the console from getting cluttered with errors.
-      if (!urlInput || !searchSuggestions) return;
-        urlInput.addEventListener('focus', () => {
-          if (!searchSuggestions) {
-              throw new Error("searchSuggestions is null");
-          }
-          if (searchSuggestions.children.length > 0) {
-              searchSuggestions.style.opacity = "1";
-              searchSuggestions.style.pointerEvents = "all";
-              urlInput.classList.add("search-results");
-          }
-      })
-      urlInput.addEventListener('blur', () => {
-          searchSuggestions.style.opacity = "0";
-          setTimeout(() => {
-              searchSuggestions.style.pointerEvents = "none";
-          }, 200);
-          urlInput.classList.remove("search-results")
-      })
-
-      urlInput.addEventListener("keyup", () => {
-          debounce(sendAPIRequest, 300).apply(null, [urlInput, searchSuggestions]);
+  async function sendAPIRequest(urlInput: HTMLInputElement, searchSuggestions: HTMLDivElement) {
+    if (!urlInput) throw new Error("urlInput is null");
+    if (!searchSuggestions) throw new Error("searchSuggestions is null");
+    let url = urlInput.value;
+    let request = await fetch("/search?query=" + url);
+    let data = await request.json();
+    searchSuggestions.innerHTML = "";
+    data.map((suggestion: Suggestion) => {
+      let suggestionElement = document.createElement("div");
+      // For some reason css classes weren't working T^T.
+      suggestionElement.style.cursor = "pointer";
+      suggestionElement.style.marginTop = "5px";
+      suggestionElement.innerText = suggestion.phrase;
+      suggestionElement.addEventListener("click", () => {
+        console.log("here");
+        urlInput.value = suggestion.phrase;
+        // I can't be bothered to extend the window object, so I'm just going to use any
+        (window as any).loadFormContent();
       });
+      searchSuggestions.appendChild(suggestionElement);
+    });
+    if (data.length === 0) {
+      urlInput.classList.remove("search-results");
+      searchSuggestions.style.opacity = "0";
+    } else {
+      urlInput.classList.add("search-results");
+      searchSuggestions.style.opacity = "1";
     }
-    document.addEventListener('astro:after-swap', addEventListeners);
-    addEventListeners();
-
+  }
+  function addEventListeners() {
+    let urlInput = document.getElementById("url-input") as HTMLInputElement;
+    let searchSuggestions = document.getElementById("search-suggestions") as HTMLDivElement;
+    // Silently return if the required elements aren't found, this prevents the console from getting cluttered with errors.
+    if (!urlInput || !searchSuggestions) return;
+    urlInput.addEventListener("focus", () => {
+      if (!searchSuggestions) {
+        throw new Error("searchSuggestions is null");
+      }
+      if (searchSuggestions.children.length > 0) {
+        searchSuggestions.style.opacity = "1";
+        searchSuggestions.style.pointerEvents = "all";
+        urlInput.classList.add("search-results");
+      }
+    });
+    urlInput.addEventListener("blur", () => {
+      searchSuggestions.style.opacity = "0";
+      setTimeout(() => {
+        searchSuggestions.style.pointerEvents = "none";
+      }, 200);
+      urlInput.classList.remove("search-results");
+    });
 
+    urlInput.addEventListener("keyup", () => {
+      debounce(sendAPIRequest, 300).apply(null, [urlInput, searchSuggestions]);
+    });
+  }
+  document.addEventListener("astro:after-swap", addEventListeners);
+  addEventListeners();
 </script>
 
 <style>
diff --git a/tsconfig.json b/tsconfig.json
index cd063f3..8c130ec 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,6 +2,6 @@
   "extends": "astro/tsconfigs/strict",
   "exclude": ["node_modules/**", "dist/**"],
   "compilerOptions": {
-    "verbatimModuleSyntax": false,
+    "verbatimModuleSyntax": false
   }
 }