Fix bug where iframe isn't fully destroyed, add FAQ.

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-bottom">
+      <div class="footer-links">
-    <div class="footer-links">
+        <Link href="https://titaniumnetwork.org" newTab linkTextContent={t("footer.poweredBy")} />
-      <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">
+    <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: 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>

src/components/ProxyRegistrar.astro

@@ -1,5 +1,5 @@
-<script src="/uv/uv.bundle.js" transition:persist></script>
+<script src="/uv/uv.bundle.js" transition:persist is:inline></script>
-<script src="/uv.config.js" transition:persist></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");

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);
   });

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",

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": "「ウルトラバイオレット」による駆動",

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;

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>

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
-    "verbatimModuleSyntax": false
+    "verbatimModuleSyntax": false,
+    "allowSyntheticDefaultImports": true
   }
 }