From 4a3faa97613153bb3e8df2c2061ac24f7eacfbd0 Mon Sep 17 00:00:00 2001
From: wearrrrr <contact@wearr.dev>
Date: Sun, 11 Feb 2024 16:49:57 -0600
Subject: [PATCH] Fix bug where iframe isn't fully destroyed, add FAQ.

---
 src/components/Footer.astro          | 88 ++++++++++++++--------------
 src/components/ProxyRegistrar.astro  | 20 ++++++-
 src/components/SettingsTablist.astro |  2 +-
 src/i18n/en.json                     |  5 ++
 src/i18n/jp.json                     |  6 ++
 src/layouts/Layout.astro             |  8 ---
 src/pages/[lang]/index.astro         | 50 +++++++++++++++-
 tsconfig.json                        |  3 +-
 8 files changed, 125 insertions(+), 57 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 6bc51d8..5358e3e 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -16,52 +16,52 @@ 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 linkTextContent={t("footer.madeWithLove")} />
     </div>
-  </div>
-  <div class="footer-bottom">
-    <div class="footer-links">
-      <Link href="https://titaniumnetwork.org" newTab linkTextContent={t("footer.poweredBy")}>
+    <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: 200px;
+        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/ProxyRegistrar.astro b/src/components/ProxyRegistrar.astro
index a240bd4..42f89a7 100644
--- a/src/components/ProxyRegistrar.astro
+++ b/src/components/ProxyRegistrar.astro
@@ -1,5 +1,5 @@
-<script src="/uv/uv.bundle.js" transition:persist></script>
-<script src="/uv.config.js" transition:persist></script>
+<script src="/uv/uv.bundle.js" transition:persist is:inline></script>
+<script src="/uv.config.js" transition:persist is:inline></script>
 <script>
   //@ts-nocheck
   let form = document.querySelector("form");
@@ -60,6 +60,22 @@
         topBar.style.opacity = 0;
         iframe.style.pointerEvents = "none";
         topBar.style.pointerEvents = "none";
+        setTimeout(() => {
+          iframe.remove();
+          topBar.remove();
+
+          // recreate them
+          iframe = document.createElement("iframe");
+          iframe.id = "proxy-frame";
+          iframe.style.opacity = 0;
+          iframe.style.pointerEvents = "none";
+          topBar = document.createElement("div");
+          topBar.id = "top-bar";
+          topBar.style.opacity = 0;
+          topBar.style.pointerEvents = "none";
+          document.body.appendChild(topBar);
+          document.body.appendChild(iframe);
+        }, 500);
       });
       let urlText = document.createElement("p");
       urlText.classList.add("url-text");
diff --git a/src/components/SettingsTablist.astro b/src/components/SettingsTablist.astro
index 8d23cf0..a3c70c3 100644
--- a/src/components/SettingsTablist.astro
+++ b/src/components/SettingsTablist.astro
@@ -47,7 +47,7 @@ const t = useTranslations(lang);
   <div id="current-content"></div>
 </div>
 <script is:inline>
-  document.addEventListener("astro:before-swap", () => {
+  document.addEventListener("astro:after-swap", () => {
     window.currentlySelectedTab = "";
     document.removeEventListener("setting-tabChange", determineListener);
   });
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f88e177..312fa49 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -12,6 +12,11 @@
   "menu.welcome": "Welcome to Alu",
   "menu.search": "Search...",
 
+  "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.",
+
+  "faq.whyIsAluSoSlow": "Why is Alu so slow?",
+  "faq.whyIsAluSoSlow.answer": "This could be for a number of reasons, but it is most likely due to the proxy you are using. If you are far away from where Alu is hosted, it will take longer for the request to be sent and received. If the proxy you are using is congested with traffic, it will also be slower.",
   "footer.brand": "Alu",
   "footer.madeWithLove": "Made with ❤️ by wearr",
   "footer.poweredBy": "Powered by Ultraviolet",
diff --git a/src/i18n/jp.json b/src/i18n/jp.json
index a04a0cb..b3b6f1c 100644
--- a/src/i18n/jp.json
+++ b/src/i18n/jp.json
@@ -12,6 +12,12 @@
   "menu.welcome": "アルーにようこそ",
   "menu.search": "検索...",
 
+  "faq.whatIsAProxy": "プロキシとは何ですか？",
+  "faq.whatIsAProxy.answer": "プロキシは、ウェブサイトにアクセスするための中継サーバーです。プロキシを使用すると、ウェブサイトにアクセスする際に自分のIPアドレスを隠すことができます。",
+
+  "faq.whyIsAluSoSlow": "なぜアルーは遅いのですか？",
+  "faq.whyIsAluSoSlow.answer": "アルーは、プロキシを使用してウェブサイトにアクセスするため、ウェブサイトの読み込みに時間がかかることがあります。また、アルーはまだ開発中のため、パフォーマンスが低いことがあります。",
+
   "footer.brand": "アルー",
   "footer.madeWithLove": "wearrによる❤️で作られました",
   "footer.poweredBy": "「ウルトラバイオレット」による駆動",
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 6255935..02bd8bb 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -138,14 +138,6 @@ const { title, optionalPreloads } = Astro.props;
       ::-webkit-scrollbar {
         display: none;
       }
-      .main-content {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        width: 100%;
-        height: 60vh;
-      }
       #proxy-frame {
         display: block;
         position: absolute;
diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro
index 710f7fc..aa4bcac 100644
--- a/src/pages/[lang]/index.astro
+++ b/src/pages/[lang]/index.astro
@@ -2,6 +2,7 @@
 import Layout from "../../layouts/Layout.astro";
 
 import { getLangFromUrl, useTranslations } from "../../i18n/utils";
+import Link from "../../components/Link.astro";
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
 
@@ -19,12 +20,42 @@ export function getStaticPaths() {
       <div id="top-bar"></div>
       <iframe title="proxy-iframe" id="proxy-frame"></iframe>
     </form>
+    <div class="faq-section">
+      <div class="faq-card">
+        <h2>{t("faq.whatIsAProxy")}</h2>
+        <p>{t("faq.whatIsAProxy.answer")}</p>
+      </div>
+      <div class="faq-card">
+        <h2>{t("faq.whyIsAluSoSlow")}</h2>
+        <p>{t("faq.whyIsAluSoSlow.answer")}</p>
+      </div>
+      <div class="faq-card faq-large">
+        <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!
+        </p>
+      </div>
+    </div>
   </div>
 </Layout>
 
 <style>
+  .main-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width: 100%;
+    height: 75vh;
+    margin-top: 50px;
+  }
   form {
-    width: 30%;
+    width: 40%;
   }
 
   .title-text {
@@ -67,4 +98,21 @@ export function getStaticPaths() {
     transition: 250ms ease-in-out;
     text-align: center;
   }
+  .faq-section {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+    margin: 0 auto;
+    width: 90%;
+  }
+
+  .faq-card {
+    background-color: var(--dropdown-background-color);
+    border-radius: 10px;
+    padding: 20px;
+    color: var(--text-color);
+  }
+  .faq-large {
+    grid-column: span 2;
+  }
 </style>
diff --git a/tsconfig.json b/tsconfig.json
index 7f2829e..1c5b504 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
-    "verbatimModuleSyntax": false
+    "verbatimModuleSyntax": false,
+    "allowSyntheticDefaultImports": true
   }
 }