251 lines
7 KiB
Text
251 lines
7 KiB
Text
---
|
|
import Layout from "../../layouts/Layout.astro";
|
|
|
|
import { STATIC_PATHS, i18n } from "@i18n/utils";
|
|
import Link from "@components/UI/Link.astro";
|
|
import ProxyRegistrar from "@components/ProxyRegistrar.astro";
|
|
import Input from "@components/UI/Input.astro";
|
|
const t = i18n.inferLangUseTranslations(Astro.url);
|
|
|
|
export function getStaticPaths() {
|
|
return STATIC_PATHS;
|
|
}
|
|
---
|
|
|
|
<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
|
|
className="url-input"
|
|
inputName="url-input"
|
|
height="50px"
|
|
placeholder={t("menu.search")}
|
|
defaultStyles={false}
|
|
/>
|
|
<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>
|
|
<ProxyRegistrar />
|
|
</Layout>
|
|
<script>
|
|
import { TransportMgr } from "@components/ts/TransportManager";
|
|
document.addEventListener("astro:after-swap", () => {
|
|
console.log("Updating transport...");
|
|
TransportMgr.updateTransport();
|
|
});
|
|
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 is:global>
|
|
.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>
|