Fully migrate to Alu.store

src/alu.d.ts

@@ -5,7 +5,7 @@ export declare global {
     type DefaultKeys = {
       [key: string]: AluKey;
     };
-    type Key = Record<string, string>;
+    type Key = Record<string?, string>;
     type ValidStoreKeys = "proxy" | "search" | "openpage" | "wisp" | "bareUrl" | "transport" | "searxng" | "theme" | "lang" | "cloak";
   }
 }

src/components/SettingsContent/CustomizationTab.astro

@@ -24,10 +24,10 @@ const languageList = [
 <div class="settings-container">
   <div class="setting__theme">
     <label for="dropdown__selected-theme" aria-label="Theme" class="setting-label">{t("settings.customization.theme")}</label>
-    <Dropdown buttonNameDefault="Alu" localStorageKey="alu__selectedTheme" dropdownList={themeList} id="dropdown__selected-theme" />
+    <Dropdown buttonNameDefault="Alu" localStorageKey="theme" dropdownList={themeList} id="dropdown__selected-theme" />
   </div>
   <div class="setting__language">
     <label for="dropdown__selected-language" aria-label="Language" class="setting-label">{t("settings.customization.language")}</label>
-    <Dropdown buttonNameDefault="English" localStorageKey="alu__selectedLanguage" dropdownList={languageList} id="dropdown__selected-language" />
+    <Dropdown buttonNameDefault="English" localStorageKey="lang" dropdownList={languageList} id="dropdown__selected-language" />
   </div>
 </div>

src/components/SettingsContent/ProxyTab.astro

@@ -39,19 +39,19 @@ const wispURLList = [
 <div class="settings-container">
   <div class="setting__selected-proxy">
     <label for="dropdown__selected-proxy" aria-label="Selected Proxy" class="setting-label">{t("settings.proxy.selectedProxy")}</label>
-    <Dropdown buttonNameDefault="Ultraviolet" dropdownList={proxyList} localStorageKey="alu__selectedProxy" id="dropdown__selected-proxy" />
+    <Dropdown buttonNameDefault="Ultraviolet" dropdownList={proxyList} localStorageKey="proxy" id="dropdown__selected-proxy" />
   </div>
   <div class="setting__search-engine">
     <label for="dropdown__search-engine" aria-label="Search Engine" class="setting-label">{t("settings.proxy.searchEngine")}</label>
-    <Dropdown buttonNameDefault="Google" dropdownList={searchEngineList} localStorageKey="alu__searchEngine" id="dropdown__search-engine" />
+    <Dropdown buttonNameDefault="Google" dropdownList={searchEngineList} localStorageKey="search" id="dropdown__search-engine" />
   </div>
   <div class="setting__open_with">
     <label for="dropdown__open-with" aria-label="Open Page With" class="setting-label">{t("settings.proxy.openPageWith")}</label>
-    <Dropdown buttonNameDefault={t("settings.proxy.openPageWith.embed")} dropdownList={openPageWith} localStorageKey="alu__selectedOpenWith" id="dropdown__open-with" />
+    <Dropdown buttonNameDefault={t("settings.proxy.openPageWith.embed")} dropdownList={openPageWith} localStorageKey="openpage" id="dropdown__open-with" />
   </div>
   <div class="setting__wisp_url">
     <label for="dropdown__wisp-url" aria-label="Wisp URL" for="dropdown__wisp-url" class="setting-label">{t("settings.proxy.wispURL")}</label>
-    <Dropdown buttonNameDefault={wispURLList[0].name} dropdownList={wispURLList} localStorageKey="alu__selectedWispURL" id="dropdown__wisp-url" />
+    <Dropdown buttonNameDefault={wispURLList[0].name} dropdownList={wispURLList} localStorageKey="wisp" id="dropdown__wisp-url" />
   </div>
   <div class="setting__bare_url">
     <label aria-label="Bare Server URL" for="bare-url-input" class="setting-label">{t("settings.proxy.bareURL")}</label>
@@ -59,7 +59,7 @@ const wispURLList = [
   </div>
   <div class="setting__transport">
     <label for="dropdown__transport" aria-label="Wisp Transport" class="setting-label">{t("settings.proxy.transport")}</label>
-    <Dropdown buttonNameDefault="Epoxy" dropdownList={transportsList} localStorageKey="alu__selectedTransport" id="dropdown__transport" />
+    <Dropdown buttonNameDefault="Epoxy" dropdownList={transportsList} localStorageKey="transport" id="dropdown__transport" />
   </div>
 </div>
 <div class="setting__searxng-url">

src/components/UI/Dropdown.astro

@@ -1,5 +1,12 @@
 ---
 const { buttonNameDefault, dropdownList, id, localStorageKey } = Astro.props;
+
+interface Props {
+  buttonNameDefault: string;
+  dropdownList: { name: string; value: string }[];
+  id: string;
+  localStorageKey: Alu.ValidStoreKeys;
+}
 ---
 
 <div class="dropdown">

src/components/ts/AluStore.ts

@@ -16,25 +16,19 @@ const KEYSTORE: Alu.DefaultKeys = {
     value: "wss://aluu.xyz/wisp/",
   },
   bareUrl: {
-    name: `${window.location.protocol}//${window.location.host}/bare/`,
     value: `${window.location.protocol}//${window.location.host}/bare/`,
   },
   transport: {
     name: "Epoxy",
-    value: "epoxy",
+    value: "/epoxy/index.mjs",
   },
   searxng: {
-    name: "https://searxng.site",
     value: "https://searxng.site",
   },
   theme: {
     name: "Alu",
     value: "alu",
   },
-  lang: {
-    name: "English",
-    value: "en",
-  },
 };
 
 if (localStorage.getItem("AluStore") === null) {
@@ -57,12 +51,17 @@ class AluStore {
     return this.store[key];
   }
   public set(key: Alu.ValidStoreKeys, value: Alu.Key): void {
+    console.log(value);
     this.store[key] = value;
     this.save();
   }
   public reset(key: Alu.ValidStoreKeys) {
     this.set(key, KEYSTORE[key]);
   }
+  public remove(key: Alu.ValidStoreKeys) {
+    delete this.store[key];
+    this.save();
+  }
   private save(): void {
     localStorage.setItem("AluStore", JSON.stringify(this.store));
   }

src/i18n/utils.ts

@@ -9,8 +9,9 @@ for (const lang in ui) {
   STATIC_PATHS.push({ params: { lang } });
 }
 
+
 function getLangFromUrl(url: URL) {
-  const [lang] = url.pathname.split("/");
+  const [,lang] = url.pathname.split("/");
   if (lang in ui) return lang as keyof typeof ui;
   return defaultLang;
 }
@@ -29,5 +30,4 @@ function useTranslations(lang: LanguageKeys) {
 }
 
 export const i18n = { getLangFromUrl, useTranslations, inferLangUseTranslations };
-
 export { STATIC_PATHS };

src/pages/[lang]/settings.astro

@@ -151,7 +151,7 @@ export function getStaticPaths() {
       if (dropdown && dropdownMenu) {
         // Now we find the child that matches localStorageItem.value.
         const dropdownItem = Array.from(dropdownMenu.children).find((item) => {
-          return JSON.parse(localStorage.getItem(localStorageItem)).value == item.dataset.setting;
+          return Alu.store.get(localStorageItem).value == item.dataset.setting;
         });
         // Now set the inner text to the name in the dropdownItem.
         return dropdownItem.innerText;
@@ -159,7 +159,7 @@ export function getStaticPaths() {
     }
 
     function applySavedLocalStorage(localStorageItem, dropdownID) {
-      if (localStorage.getItem(localStorageItem)) {
+      if (Alu.store.get(localStorageItem)) {
         const dropdown_toggle = document.getElementById(dropdownID);
         if (dropdown_toggle) {
           dropdown_toggle.innerText = getLocalStorageValue(localStorageItem, dropdownID);
@@ -176,7 +176,7 @@ export function getStaticPaths() {
             name: child.innerText,
             value: child.dataset.setting,
           };
-          localStorage.setItem(localStorageItem, JSON.stringify(localStorageItemContent));
+          Alu.store.set(localStorageItem, localStorageItemContent);
           applySavedLocalStorage(localStorageItem, dropdown.id);
           closeDropdown(dropdownSibling.id);
 
@@ -189,7 +189,7 @@ export function getStaticPaths() {
 
     function applyInputListeners(item, localStorageItem) {
       item.addEventListener("input", () => {
-        localStorage.setItem(localStorageItem, item.value);
+        Alu.store.set(localStorageItem, { value: item.value });
       });
     }
 
@@ -226,8 +226,8 @@ export function getStaticPaths() {
             }
           });
         }
-        applySavedLocalStorage("alu__selectedTheme", "dropdown__selected-theme");
+        applySavedLocalStorage("theme", "dropdown__selected-theme");
-        applySavedLocalStorage("alu__selectedLanguage", "dropdown__selected-language");
+        applySavedLocalStorage("lang", "dropdown__selected-language");
 
         const themeDropdown = document.getElementById("dropdown__selected-theme");
         const languageDropdown = document.getElementById("dropdown__selected-language");
@@ -242,15 +242,15 @@ export function getStaticPaths() {
           let cloakName = cloak.dataset.cloakName;
           let cloakIcon = cloak.dataset.cloakIcon;
 
-          const localStorageItem = {
+          const cloakItem = {
             name: cloakName,
             icon: cloakIcon,
             isCustom: false,
           };
-          localStorage.setItem("alu__selectedCloak", JSON.stringify(localStorageItem));
+          Alu.store.set("cloak", cloakItem);
 
           if (cloakName == "None") {
-            localStorage.removeItem("alu__selectedCloak");
+            Alu.store.remove("cloak");
             cloakName = "Settings | Alu";
             cloakIcon = "/favicon.svg";
           }
@@ -274,25 +274,25 @@ export function getStaticPaths() {
 
       const customNameInput = document.getElementById("cloak-custom-name-input");
       const customFaviconInput = document.getElementById("cloak-custom-favicon-input");
-      if (localStorage.getItem("alu__selectedCloak")) {
+      const cloak = Alu.store.get("cloak");
-        const selectedCloak = JSON.parse(localStorage.getItem("alu__selectedCloak"));
+      if (cloak) {
-        if (selectedCloak.isCustom) {
+        if (cloak.isCustom) {
-          customNameInput.value = selectedCloak.name;
+          customNameInput.value = cloak.name;
-          customFaviconInput.value = selectedCloak.icon;
+          customFaviconInput.value = cloak.icon;
         }
       }
 
       document.getElementById("cloak-custom-button").addEventListener("click", () => {
         let cloakName = document.getElementById("cloak-custom-name-input").value;
         let cloakIcon = document.getElementById("cloak-custom-favicon-input").value;
-        const localStorageItem = {
+        const cloakItem = {
           name: cloakName,
           icon: cloakIcon,
           isCustom: true,
         };
-        localStorage.setItem("alu__selectedCloak", JSON.stringify(localStorageItem));
+        Alu.store.set("cloak", cloakItem);
         if (cloakName == "None") {
-          localStorage.removeItem("alu__selectedCloak");
+          Alu.store.remove("cloak");
           cloakName = "Settings | Alu";
           cloakIcon = "/favicon.svg";
         }
@@ -308,23 +308,17 @@ export function getStaticPaths() {
     }
 
     function changeTheme() {
-      const theme = JSON.parse(localStorage.getItem("alu__selectedTheme")).value;
+      const theme = Alu.store.get("theme").value;
-      if (theme) {
+      document.documentElement.setAttribute("data-theme", theme);
-        document.documentElement.setAttribute("data-theme", theme.toLowerCase());
-        const footer = document.getElementById("footer");
-        if (footer) {
-          footer.dataset.theme = theme.toLowerCase();
-        }
-      }
     }
 
     function setupSettings(event) {
       if (event.detail == "setting-tab-proxy") {
-        applySavedLocalStorage("alu__selectedProxy", "dropdown__selected-proxy");
+        applySavedLocalStorage("proxy", "dropdown__selected-proxy");
-        applySavedLocalStorage("alu__search_engine", "dropdown__search-engine");
+        applySavedLocalStorage("search", "dropdown__search-engine");
-        applySavedLocalStorage("alu__selectedOpenWith", "dropdown__open-with");
+        applySavedLocalStorage("openpage", "dropdown__open-with");
-        applySavedLocalStorage("alu__selectedWispURL", "dropdown__wisp-url");
+        applySavedLocalStorage("wisp", "dropdown__wisp-url");
-        applySavedLocalStorage("alu__selectedTransport", "dropdown__transport");
+        applySavedLocalStorage("transport", "dropdown__transport");
         // Dropdowns
         const selectedProxyDropdown = document.getElementById("dropdown__selected-proxy");
         const searchEngineDropdown = document.getElementById("dropdown__search-engine");
@@ -335,15 +329,8 @@ export function getStaticPaths() {
         // Inputs
         const searxngUrlInput = document.getElementById("searxng-url-input");
         const bareURLInput = document.getElementById("bare-url-input");
-        const savedSearxngUrl = localStorage.getItem("alu__searxngUrl");
-        if (savedSearxngUrl != null) {
-          if (savedSearxngUrl == "") localStorage.setItem("alu__searxngUrl", "https://searxng.site/");
-          searxngUrlInput.value = localStorage.getItem("alu__searxngUrl");
-        }
-        const savedBareUrl = localStorage.getItem("alu__bareUrl");
-        if (savedBareUrl == null || savedBareUrl == "") localStorage.setItem("alu__bareUrl", location.origin + "/bare/");
 
-        bareURLInput.value = localStorage.getItem("alu__bareUrl");
+        bareURLInput.value = Alu.store.get("bareUrl").value;
         // Proxy settings
         [selectedProxyDropdown, openWithDropdown, currentTransportDropdown, wispURLDropdown].forEach((dropdown) => {
           applyDropdownEventListeners(dropdown);
@@ -351,8 +338,8 @@ export function getStaticPaths() {
         applyDropdownEventListeners(searchEngineDropdown, checkSearxng);
         checkSearxng();
 
-        applyInputListeners(searxngUrlInput, "alu__searxngUrl");
+        applyInputListeners(searxngUrlInput, "searxng");
-        applyInputListeners(bareURLInput, "alu__bareUrl");
+        applyInputListeners(bareURLInput, "bareUrl");
       } else if (event.detail == "setting-tab-customization") {
         setupCustomizationSettings();
       } else if (event.detail == "setting-tab-cloaking") {
@@ -362,20 +349,18 @@ export function getStaticPaths() {
 
     function checkSearxng() {
       // Callback for search engine dropdown
-      const search_engine = JSON.parse(localStorage.getItem("alu__search_engine"));
+      const searchEngine = Alu.store.get("search");
-      if (search_engine) {
+      if (searchEngine.value.toLowerCase() == "searx") {
-        if (search_engine.value.toLowerCase() == "searx") {
+        document.getElementsByClassName("setting__searxng-url")[0].style.opacity = "1";
-          document.getElementsByClassName("setting__searxng-url")[0].style.opacity = "1";
+      } else {
-        } else {
+        document.getElementsByClassName("setting__searxng-url")[0].style.opacity = "0";
-          document.getElementsByClassName("setting__searxng-url")[0].style.opacity = "0";
-        }
       }
     }
 
     document.addEventListener("setting-tabLoad", setupSettings);
 
     function navigateToNewLangaugePage() {
-      const value = JSON.parse(localStorage.getItem("alu__selectedLanguage")).value;
+      const value = Alu.store.get("lang").value;
       const currentLanguage = window.location.pathname.split("/")[1];
       if (value == currentLanguage) return;
       window.location.href = `/${value}/settings`;

src/pages/index.astro

@@ -1,8 +1,4 @@
----
+<!DOCTYPE html>
-import { ViewTransitions } from "astro:transitions";
----
-
-<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -19,7 +15,7 @@ import { ViewTransitions } from "astro:transitions";
     <meta property="twitter:title" content="Alu" />
     <meta property="twitter:description" content="Alu is a sleek web proxy supporting multiple standards of communication, and wide levels of customization." />
     <meta property="twitter:image" content="/logo.png" />
-    <ViewTransitions />
+    <script src="@components/ts/AluStore.ts"></script>
     <script src="https://www.googletagmanager.com/gtag/js?id=G-P1JX4G9KSF" is:inline></script>
     <script is:inline>
       window.dataLayer = window.dataLayer || [];
@@ -31,26 +27,26 @@ import { ViewTransitions } from "astro:transitions";
       gtag("config", "G-P1JX4G9KSF");
     </script>
     <script>
-      const currentLang = localStorage.getItem("alu__selectedLanguage");
+      const lang = Alu.store.get("lang");
       const redirect = (loc: string) => (window.location.href = loc);
-      if (currentLang) {
+      if (lang) {
         try {
-          const parsed = JSON.parse(currentLang).value;
+          redirect(`/${lang.value}/`);
-          redirect(`/${parsed}/`);
         } catch {
           localStorage.clear();
           window.location.reload();
         }
       } else {
-        if (navigator.language.includes("ja")) {
+        const lang = navigator.language;
-          localStorage.setItem("alu__selectedLanguage", JSON.stringify({ value: "jp" }));
+        if (lang.includes("ja")) {
+          Alu.store.set("lang", { value: "jp" });
           redirect("/jp/");
-        } else if (navigator.language.includes("fr")) {
+        } else if (lang.includes("es")) {
-          localStorage.setItem("alu__selectedLanguage", JSON.stringify({ value: "fr" }));
+          Alu.store.set("lang", { value: "fr" });
           redirect("/fr/");
-        } else {
+        } else if (lang.includes("fr")) {
-          localStorage.setItem("alu__selectedLanguage", JSON.stringify({ value: "en" }));
+          Alu.store.set("lang", { value: "es" });
-          redirect("/en/");
+          redirect("/es/");
         }
       }
     </script>