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

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

export function getStaticPaths() {
  return [{ params: { lang: "en" } }, { params: { lang: "jp" } }];
}
---

<Layout title={t("pages.home")}>
  <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>
        <div id="top-bar"></div>
        <iframe title="proxy-iframe" id="proxy-frame"></iframe>
      </form>
    </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>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>

<script>
  type Suggestion = {
    phrase: string;
  };
  const debounce = (func: Function, delay: number): ((...args: any[]) => void) => {
    let debounceTimer: NodeJS.Timeout;
    return function (this: Function, ...args: any[]) {
      const context: any = this;
      clearTimeout(debounceTimer);
      debounceTimer = setTimeout(() => {
        func.apply(context, args);
      }, delay);
    };
  };

  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", () => {
        console.log("here");
        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");
    });

    urlInput.addEventListener("keyup", () => {
      debounce(sendAPIRequest, 300).apply(null, [urlInput, searchSuggestions]);
    });
  }
  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);
  }

  #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>