From 07dd11d97ac21394ce527d939c327ed48b0306ee Mon Sep 17 00:00:00 2001
From: wearrrrr <contact@wearr.dev>
Date: Sun, 11 Feb 2024 01:12:46 -0600
Subject: [PATCH] Lint and add Link component for better link handling

---
 README.md                                     |  5 +-
 src/components/Footer.astro                   | 89 ++++++++++---------
 src/components/Link.astro                     | 19 ++++
 .../SettingsContent/CloakingTab.astro         |  5 +-
 4 files changed, 70 insertions(+), 48 deletions(-)
 create mode 100644 src/components/Link.astro

diff --git a/README.md b/README.md
index 8ab1b95..8973680 100644
--- a/README.md
+++ b/README.md
@@ -2,8 +2,6 @@
   <img src="https://github.com/wearrrrr/Alu/assets/99224452/dd1bef45-e96f-49bd-ac09-caa4ddc214d6" alt="AluLogo" width="250"/>
 </p>
 
-
-
 # Alu
 
 Alu is a beautiful, functional, and sleek web proxy, which focuses on customization and ease of use.
@@ -19,7 +17,8 @@ Alu is a beautiful, functional, and sleek web proxy, which focuses on customizat
 - 🔍 Multiple Search Engines to pick from
 
 # Deploying Alu
-Deploying Alu is about as simple as it gets, from your terminal, type 
+
+Deploying Alu is about as simple as it gets, from your terminal, type
 
 `git clone https://github.com/wearrrrr/Alu --recursive-submodules`
 
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 9167869..b3c632d 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,5 +1,6 @@
 ---
 import { getLangFromUrl, useTranslations } from "../i18n/utils";
+import Link from "./Link.astro";
 import WaveSVG from "./WaveSVG.astro";
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
@@ -15,52 +16,52 @@ const t = useTranslations(lang);
     </div>
 
     <div class="footer-madeby">
-      <a href="https://wearr.dev">{t("footer.madeWithLove")}</a>
+      <Link href="https://wearr.dev" newTab linkTextContent={t("footer.madeWithLove")} />
     </div>
-  </div>
-  <div class="footer-bottom">
-    <div class="footer-links">
-      <a href="https://titaniumnetwork.org">{t("footer.poweredBy")}</a>
+    <div class="footer-bottom">
+      <div class="footer-links">
+        <Link href="https://titaniumnetwork.org" newTab linkTextContent={t("footer.poweredBy")} />
+
+        <div class="footer-copyright">
+          <p>&copy; {t("footer.aluProject")} 2024</p>
+        </div>
+      </div>
     </div>
 
-    <div class="footer-copyright">
-      <p>&copy; {t("footer.aluProject")} 2024</p>
-    </div>
+    <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: 150px;
+        gap: 50px;
+      }
+      .footer-top,
+      .footer-bottom {
+        width: 90%;
+        margin: 0 auto;
+      }
+
+      .footer-title {
+        font-size: 20px;
+      }
+
+      a {
+        color: var(--text-color);
+      }
+    </style>
   </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);
-  }
-
-  .footer {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    color: var(--text-color);
-    position: relative;
-    padding-top: 150px;
-    gap: 50px;
-  }
-  .footer-top,
-  .footer-bottom {
-    width: 90%;
-    margin: 0 auto;
-  }
-
-  .footer-title {
-    font-size: 20px;
-  }
-
-  a {
-    color: var(--text-color);
-  }
-</style>
diff --git a/src/components/Link.astro b/src/components/Link.astro
new file mode 100644
index 0000000..f1b144b
--- /dev/null
+++ b/src/components/Link.astro
@@ -0,0 +1,19 @@
+---
+interface LinkProps {
+  href: string;
+  newTab?: boolean;
+  linkTextContent: string;
+}
+
+const { href, newTab, linkTextContent } = Astro.props;
+const target = newTab ? "_blank" : "_self";
+const rel = newTab ? "noopener noreferrer" : "";
+---
+
+<a href={href} target={target} rel={rel}>{linkTextContent}</a>
+
+<style>
+  a {
+    color: var(--text-color);
+  }
+</style>
diff --git a/src/components/SettingsContent/CloakingTab.astro b/src/components/SettingsContent/CloakingTab.astro
index d59f877..511b6f9 100644
--- a/src/components/SettingsContent/CloakingTab.astro
+++ b/src/components/SettingsContent/CloakingTab.astro
@@ -2,7 +2,10 @@
 import Input from "../Input.astro";
 
 const presetCloaks = [
-  { cloakTitle: "None", favicon: "/favicon.png" },
+  {
+    cloakTitle: "None",
+    favicon: "/favicon.png",
+  },
   {
     cloakTitle: "Google",
     favicon: