Revela-v4/src/pages/[lang]/index.astro

---
import Layout from "../../layouts/Layout.astro";

import { STATIC_PATHS, getLangFromUrl, useTranslations } from "../../i18n/utils";
import Link from "../../components/Link.astro";
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);

export function getStaticPaths() {
  return STATIC_PATHS;
}
---

<Layout title={t("pages.home")}>
  <script src="/libcurl/index.js" is:inline></script>
  <script src="/epoxy/index.js" is:inline></script>
  <script src="/bare_transport.js" is:inline></script>
  <div class="main-content">
    <h1 class="title-text">{t("menu.welcome")}</h1>
    <div class="form-wrapper">
      <form class="url-input-form" id="url-input-form">
        <input
          class="url-input"
          id="url-input"
          type="text"
          placeholder={t("menu.search")}
          autocomplete="off"
        />
        <div id="search-suggestions"></div>
        <div id="loading-content">Loading...</div>
      </form>
      <div id="top-bar">
        <div class="top-bar-left">
          <button id="close-button">Close</button>
        </div>
        <div class="top-bar-right">
          <img id="proxied-favicon" alt="favicon" />
          <span id="url-text"></span>
        </div>
      </div>
      <iframe title="proxy-iframe" id="proxy-frame"></iframe>
    </div>

    <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>{t("faq.contributeToAlu")}</h2>
        <p>
          {t("faq.contributeToAlu.answer.segment1")}
          <Link
            href="https://www.patreon.com/wearr"
            newTab
            content={t("faq.contributeToAlu.answer.patreonLinkText")}
          />
          {t("faq.contributeToAlu.answer.segment2")}
        </p>
      </div>
    </div>
  </div>
</Layout>
<script>
  import { initTransport, TransportMgr } from "../../components/ts/TransportManager";
  document.addEventListener("astro:after-swap", async () => {
    let savedTransport = localStorage.getItem("alu__selectedTransport");
    if (savedTransport) {
      let parsedTransport = JSON.parse(savedTransport);
      TransportMgr.setTransport(parsedTransport.value);
    }
    initTransport();
  });
  initTransport();
  type Suggestion = {
    phrase: string;
  };

  async function sendAPIRequest(urlInput: HTMLInputElement, searchSuggestions: HTMLDivElement) {
    if (!urlInput) throw new Error("urlInput is null");
    if (!searchSuggestions) throw new Error("searchSuggestions is null");
    let url = urlInput.value;
    let request = await fetch("/search?query=" + url);
    let data = await request.json();
    searchSuggestions.innerHTML = "";
      data.map((suggestion: Suggestion) => {
      let suggestionElement = document.createElement("div");
      // For some reason css classes weren't working T^T.
      suggestionElement.style.cursor = "pointer";
      suggestionElement.style.marginTop = "5px";
      suggestionElement.innerText = suggestion.phrase;
      suggestionElement.addEventListener("click", async () => {
        urlInput.value = suggestion.phrase;
        // I can't be bothered to extend the window object, so I'm just going to use any
        (window as any).loadFormContent();
      });
      searchSuggestions.appendChild(suggestionElement);
    });
    if (data.length === 0) {
      urlInput.classList.remove("search-results");
      searchSuggestions.style.opacity = "0";
    } else {
      urlInput.classList.add("search-results");
      searchSuggestions.style.opacity = "1";
    }
  }

  function addEventListeners() {
    let urlInput = document.getElementById("url-input") as HTMLInputElement;
    let searchSuggestions = document.getElementById("search-suggestions") as HTMLDivElement;
    // Silently return if the required elements aren't found, this prevents the console from getting cluttered with errors.
    if (!urlInput || !searchSuggestions) return;
    urlInput.addEventListener("focus", () => {
      if (!searchSuggestions) {
        throw new Error("searchSuggestions is null");
      }
      if (searchSuggestions.children.length > 0) {
        searchSuggestions.style.opacity = "1";
        searchSuggestions.style.pointerEvents = "all";
        urlInput.classList.add("search-results");
      }
    });
    urlInput.addEventListener("blur", () => {
      searchSuggestions.style.opacity = "0";
      setTimeout(() => {
        searchSuggestions.style.pointerEvents = "none";
      }, 200);
      urlInput.classList.remove("search-results");
    });

    function debounce(cb: Function, delay = 1000) {
      let timeout: string | number | NodeJS.Timeout | undefined;
      return (...args: any) => {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          cb(...args);
        }, delay);
      }
    }

    urlInput.addEventListener("keyup", async () => {
      const search = debounce(async () => {
        return await sendAPIRequest(urlInput, searchSuggestions);
      }, 500)();
    });
  }
  document.addEventListener("astro:after-swap", addEventListeners);
  addEventListeners();
</script>

<style>
  .main-content {
    width: 100%;
    margin-top: 50px;
  }

  .form-wrapper {
    display: flex;
    justify-content: center;
  }
  form {
    width: 350px;
    height: 56px;
  }

  .title-text {
    font-size: 38px;
  }

  .url-input-form {
    border: none;
    padding: 0;
  }

  .url-input {
    display: block;
    background: transparent url("/img/search.svg") no-repeat 13px center;
    background-color: var(--dropdown-background-color);
    color: var(--text-color);
    border: 3px solid var(--text-color);
    border-radius: 30px;
    padding: 15px;
    width: 100%;
    text-align: center;
    transition: 250ms ease-in-out;
    outline: none;
    font-family: "Varela Round", sans-serif;
    font-size: 16px;
  }

  .url-input.search-results {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
  }

  .url-input::placeholder {
    color: var(--text-color);
  }

  #search-suggestions {
    background-color: var(--accent-color-brighter);
    z-index: 3;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text-color);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    transition: 250ms ease-in-out;
    opacity: 0;
    height: 240px;
    overflow: hidden;
    border: 3px solid var(--text-color);
    box-shadow: 10px 10px 20px var(--dropdown-background-color);
  }

  #loading-content {
    color: var(--text-color);
    padding: 8px;
    position: relative;
    /* hack */
    top: -325px;
    opacity: 0;
    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%;
    margin-top: 40px;
  }

  .faq-card {
    background-color: var(--dropdown-background-color);
    border-radius: 10px;
    padding: 20px;
    color: var(--text-color);
  }
  @media (max-width: 768px) {
    .faq-card {
      grid-column: span 2;
    }
  }
  .faq-large {
    grid-column: span 2;
  }
</style>