Fix issue with click events being duplicated in settings, i18n update, new favicon

public/favicon.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<path style="fill:#1E0478;" d="M494.176,64.787c15.4,22.42,20.974,52.758,16.123,88.421c-4.751,34.914-19.365,74.181-42.346,113.946
+	c52.234,90.354,58.519,172.178,16.073,214.624c-18.729,18.729-45.127,27.981-76.537,27.981c-39.777,0-87.598-14.839-138.087-44.017
+	c-50.489,29.178-98.309,44.017-138.087,44.017c-31.411,0-57.796-9.252-76.525-27.981c-42.458-42.434-36.186-124.245,16.036-214.611
+	c-10.287-17.806-18.904-35.525-25.724-52.858c-0.262,0-0.511,0.012-0.773,0.012C19.889,214.321,0,194.444,0,169.992
+	c0-18.23,11.073-33.917,26.834-40.713c-0.037-31.884,9.514-58.282,27.956-76.724C97.224,10.096,179.036,16.368,269.402,68.59
+	c52.92-30.575,104.057-45.912,145.818-43.83c7.619-13.43,22.046-22.52,38.568-22.52c24.44,0,44.329,19.889,44.329,44.329
+	C498.116,53.066,496.695,59.226,494.176,64.787z M485.585,149.854c3.591-26.41,0.611-48.755-8.616-65.514
+	c-6.758,4.152-14.689,6.559-23.181,6.559c-23.455,0-42.695-18.318-44.217-41.386c-33.119-0.561-73.32,11.272-115.891,34.104
+	c30.4,20.051,59.741,44.142,87.436,71.836c27.695,27.695,51.773,57.035,71.811,87.423
+	C470.509,210.044,481.732,178.197,485.585,149.854z M473.178,46.569c0-10.686-8.704-19.39-19.39-19.39
+	c-10.686,0-19.39,8.704-19.39,19.39s8.704,19.39,19.39,19.39S473.178,57.256,473.178,46.569z M466.394,464.146
+	c31.884-31.897,26.273-98.421-13.467-172.689c-20.038,30.388-44.117,59.729-71.811,87.423
+	c-27.695,27.695-57.023,51.773-87.423,71.824C367.961,490.431,434.497,496.043,466.394,464.146z M438.887,267.166
+	c-20.35-32.745-45.688-64.367-75.403-94.082c-29.715-29.702-61.325-55.053-94.082-75.415
+	c-32.757,20.363-64.367,45.713-94.082,75.415c-29.702,29.715-55.053,61.325-75.415,94.082
+	c20.363,32.757,45.713,64.367,75.415,94.082c29.715,29.702,61.325,55.053,94.082,75.415c32.757-20.363,64.367-45.713,94.082-75.415
+	C393.199,331.533,418.537,299.911,438.887,267.166z M157.688,155.452c27.682-27.695,57.023-51.773,87.423-71.824
+	C170.831,43.901,104.307,38.29,72.422,70.186c-13.093,13.105-20.138,32.358-20.637,56.125c20.899,3.554,36.872,21.784,36.872,43.68
+	c0,15.337-7.818,28.867-19.677,36.835c4.738,11.834,10.375,23.891,16.884,36.062C105.915,212.488,129.994,183.147,157.688,155.452z
+	 M245.112,450.704c-30.4-20.051-59.729-44.129-87.423-71.824c-27.695-27.695-51.773-57.023-71.824-87.423
+	c-39.728,74.268-45.339,140.805-13.442,172.689C104.307,496.043,170.831,490.431,245.112,450.704z M63.719,169.992
+	c0-10.686-8.691-19.39-19.39-19.39c-10.686,0-19.39,8.704-19.39,19.39c0,10.699,8.704,19.39,19.39,19.39
+	C55.028,189.382,63.719,180.691,63.719,169.992z"/>
+<path style="fill:#9B8CCC;" d="M453.788,27.179c10.686,0,19.39,8.704,19.39,19.39s-8.704,19.39-19.39,19.39
+	c-10.686,0-19.39-8.704-19.39-19.39S443.101,27.179,453.788,27.179z"/>
+<path style="fill:#1E0478;" d="M269.402,201.253c36.348,0,65.913,29.565,65.913,65.913c0,36.336-29.565,65.913-65.913,65.913
+	c-36.336,0-65.901-29.577-65.901-65.913C203.501,230.818,233.066,201.253,269.402,201.253z M310.377,267.166
+	c0-22.595-18.38-40.975-40.975-40.975c-22.582,0-40.962,18.38-40.962,40.975s18.38,40.975,40.962,40.975
+	C291.997,308.141,310.377,289.761,310.377,267.166z"/>
+<path style="fill:#94E7EF;" d="M269.402,226.192c22.595,0,40.975,18.38,40.975,40.975s-18.38,40.975-40.975,40.975
+	c-22.582,0-40.962-18.38-40.962-40.975S246.82,226.192,269.402,226.192z"/>
+<path style="fill:#9B8CCC;" d="M44.329,150.602c10.699,0,19.39,8.704,19.39,19.39c0,10.699-8.691,19.39-19.39,19.39
+	c-10.686,0-19.39-8.691-19.39-19.39C24.939,159.306,33.643,150.602,44.329,150.602z"/>
+</svg>

src/components/CloakLoader.astro

@@ -22,7 +22,7 @@
         link = document.createElement("link");
         link.rel = "icon";
       }
-      link.href = "/favicon.png";
+      link.href = "/favicon.svg";
       document.getElementsByTagName("head")[0].appendChild(link);
     }
   }

src/components/Footer.astro

@@ -16,12 +16,12 @@ const t = useTranslations(lang);
     </div>
 
     <div class="footer-madeby">
-      <Link href="https://wearr.dev" newTab linkTextContent={t("footer.madeWithLove")} />
+      <Link href="https://wearr.dev" newTab content={t("footer.madeWithLove")} />
     </div>
   </div>
   <div class="footer-bottom">
     <div class="footer-links">
-      <Link href="https://titaniumnetwork.org" newTab linkTextContent={t("footer.poweredBy")} />
+      <Link href="https://titaniumnetwork.org" newTab content={t("footer.poweredBy")} />
 
       <div class="footer-copyright">
         <p>&copy; {t("footer.aluProject")} 2024</p>

src/components/Link.astro

@@ -2,15 +2,15 @@
 interface LinkProps {
   href: string;
   newTab?: boolean;
-  linkTextContent: string;
+  content: string;
 }
 
-const { href, newTab, linkTextContent } = Astro.props;
+const { href, newTab, content } = Astro.props;
 const target = newTab ? "_blank" : "_self";
 const rel = newTab ? "noopener noreferrer" : "";
 ---
 
-<a href={href} target={target} rel={rel}>{linkTextContent}</a>
+<a href={href} target={target} rel={rel}>{content}</a>
 
 <style>
   a {

src/components/SettingsContent/CloakingTab.astro

@@ -4,7 +4,7 @@ import Input from "../Input.astro";
 const presetCloaks = [
   {
     cloakTitle: "None",
-    favicon: "/favicon.png",
+    favicon: "/favicon.svg",
   },
   {
     cloakTitle: "Google",

src/components/SettingsTablist.astro

@@ -50,9 +50,11 @@ const t = useTranslations(lang);
   window.loadedContentStorage = {};
   window.currentlySelectedTab;
   function settingsLoad() {
-    document.addEventListener("astro:after-swap", () => {
+    document.addEventListener("astro:before-swap", () => {
+      // Cleanup event, this should remove all added event listeners to prepare for if the page is visited again.
       window.currentlySelectedTab = "";
       document.removeEventListener("setting-tabChange", determineListener);
+
     });
     Array.from(document.getElementsByClassName("setting-tab")).forEach((tab) => {
     let contentToLoad = document.getElementById("content-" + tab.id);
@@ -84,9 +86,14 @@ const t = useTranslations(lang);
   function addDropdownListener() {
     let dropdown_toggles = document.getElementsByClassName("dropdown-toggle");
     Array.from(dropdown_toggles).forEach((toggle) => {
-      toggle.addEventListener("click", () => {
+      toggle.onclick = function() {
+        toggleEventListener(toggle);
+      };
+    });
+  }
+
+  function toggleEventListener(toggle) {
     let dropdown = document.getElementById(toggle.id + "-menu");
-        if (dropdown) {
     if (dropdown.style.maxHeight == "0px" || dropdown.style.maxHeight == "") {
       dropdown.style.maxHeight = dropdown.scrollHeight + "px";
       toggle.style.borderRadius = "10px 10px 0 0";
@@ -97,9 +104,7 @@ const t = useTranslations(lang);
       }, 300);
     }
   }
-      });
+
-    });
-  }
 
   function determineListener(event) {
     if (event.detail == "setting-tab-proxy") {
@@ -146,7 +151,7 @@ const t = useTranslations(lang);
 
   function applyDropdownEventListeners(item, dropdownID, localStorageItem, optionalCallback) {
     Array.from(item.children).forEach((item) => {
-      item.addEventListener("click", () => {
+      item.onclick = () => {
         let localStorageItemContent = {
           name: item.innerText,
           value: item.dataset.setting,
@@ -157,7 +162,7 @@ const t = useTranslations(lang);
         if (typeof optionalCallback == "function") {
           optionalCallback();
         }
-      });
+      };
     });
   }
 
@@ -206,7 +211,7 @@ const t = useTranslations(lang);
         if (cloakName == "None") {
           localStorage.removeItem("alu__selectedCloak");
           cloakName = "Settings | Alu";
-          cloakIcon = "/favicon.png";
+          cloakIcon = "/favicon.svg";
         }
         let link = document.querySelector("link[rel~='icon']");
         if (!link) {
@@ -248,7 +253,7 @@ const t = useTranslations(lang);
       if (cloakName == "None") {
         localStorage.removeItem("alu__selectedCloak");
         cloakName = "Settings | Alu";
-        cloakIcon = "/favicon.png";
+        cloakIcon = "/favicon.svg";
       }
       let link = document.querySelector("link[rel~='icon']");
       if (!link) {

src/i18n/en.json

@@ -10,7 +10,7 @@
   "nav.settings": "Settings",
 
   "menu.welcome": "Welcome to Alu",
-  "menu.search": "Search...",
+  "menu.search": "Search the web...",
 
   "faq.whatIsAProxy": "What is a proxy?",
   "faq.whatIsAProxy.answer": "A proxy is a method of making your internet traffic anonymous by sending your request to a server (proxy), having that make the request, and then send it back to you! This allows for a much larger level of security, as well as bypassing website restrictions in public spaces and censorship.",

src/i18n/jp.json

@@ -10,7 +10,7 @@
   "nav.settings": "設定",
 
   "menu.welcome": "アルーにようこそ",
-  "menu.search": "検索...",
+  "menu.search": "ウェブを検索する...",
 
   "faq.whatIsAProxy": "プロキシとは何ですか？",
   "faq.whatIsAProxy.answer": "プロキシは、ウェブサイトにアクセスするための中継サーバーです。プロキシを使用すると、ウェブサイトにアクセスする際に自分のIPアドレスを隠すことができます。",

src/layouts/Layout.astro

@@ -27,6 +27,19 @@ const { title, optionalPreloads } = Astro.props;
     <CloakLoader transition:persist />
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
+    <meta name="title" content="Alu" />
+    <meta name="description" content="Alu is a sleek web proxy supporting multiple standards of communication, and wide levels of customization." />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://aluu.xyz" />
+    <meta property="og:title" content="Alu" />
+    <meta property="og:description" content="Alu is a sleek web proxy supporting multiple standards of communication, and wide levels of customization." />
+    <meta property="og:image" content="/logo.png" />
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://aluu.xyz" />
+    <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" />
+
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
@@ -51,13 +64,13 @@ const { title, optionalPreloads } = Astro.props;
     <Footer />
     <style is:global>
       :root {
-        --background-color: #080808;
+        --background-color: #211d29;
-        --background-highlight: #252525;
+        --background-highlight: #35314a;
-        --accent-color: #4a008a;
+        --accent-color: #624978;
-        --accent-color-brighter: #5f03a5;
+        --accent-color-brighter: #543d65;
         --text-color: #fff;
         --text-color-accent: #c7c7c7;
-        --dropdown-background-color: #1e1e1e;
+        --dropdown-background-color: #262539;
       }
       * {
         box-sizing: border-box;

src/pages/[lang]/index.astro

@@ -44,7 +44,7 @@ export function getStaticPaths() {
         <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!" />,
+          <Link href="https://www.patreon.com/wearr/membership" newTab content="Here!" />,
           thank you for helping to make Alu great!
         </p>
       </div>