Lint and add Link component for better link handling

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`
 

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-bottom">
+      <div class="footer-links">
-    <div class="footer-links">
+        <Link href="https://titaniumnetwork.org" newTab linkTextContent={t("footer.poweredBy")} />
-      <a href="https://titaniumnetwork.org">{t("footer.poweredBy")}</a>
+
+        <div class="footer-copyright">
+          <p>&copy; {t("footer.aluProject")} 2024</p>
+        </div>
+      </div>
     </div>
 
-    <div class="footer-copyright">
+    <style>
-      <p>&copy; {t("footer.aluProject")} 2024</p>
+      .wave-svg-container {
-    </div>
+        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>

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>

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: