Feat: apps page

This commit is contained in:
MotorTruck1221
2025-05-04 23:33:39 -06:00
parent 64728e5c43
commit 5e42a918ff
19 changed files with 88 additions and 10 deletions
+27
View File
@@ -0,0 +1,27 @@
---
import Layout from "@layouts/Layout.astro";
import Card from "@components/ui/Card.astro";
---
<Layout>
<div class="h-full w-full mt-14 font-inter items-center flex flex-col">
<h1 class="text-6xl font-semibold py-4 w-full text-center border-b-2 border-(--accent) h-26"> Apps </h1>
<div class="flex flex-wrap justify-center mt-12 gap-2 px-24">
<Card text="Suggest a new App!" imageSrc="/src/assets/images/apps/google_form.jpg" id="appsGoogleForm" link=`/?redir=${btoa('https://forms.gle/ksbQCXNyncJr9MMu5')}` />
<Card text="Amazon" imageSrc="/src/assets/images/apps/Amazon.jpg" id="appsAmazon" link=`/?redir=${btoa('https://amazon.com')}` />
<Card text="Discord" imageSrc="/src/assets/images/apps/Discord.jpeg" id="appsDiscord" link=`/?redir=${btoa('https://discord.com/login')}` />
<Card text="Duolingo" imageSrc="/src/assets/images/apps/Duolingo.png" id="appsDuolingo" link=`/?redir=${btoa('https://duolingo.com')}` />
<Card text="Ebay" imageSrc="/src/assets/images/apps/Ebay.png" id="appsEbay" link=`/?redir=${btoa('https://ebay.com')}` />
<Card text="GitHub" imageSrc="/src/assets/images/apps/GitHub.png" id="appsGithub" link=`/?redir=${btoa('https://github.com')}` />
<Card text="Invidious" imageSrc="/src/assets/images/apps/Invidious.png" id="appsInvidious" link=`/?redir=${btoa('https://yewtu.be')}` />
<Card text="Pinterest" imageSrc="/src/assets/images/apps/Pinterest.png" id="appsPinterest" link=`/?redir=${btoa('https://pinterest.com')}` />
<Card text="Spotify" imageSrc="/src/assets/images/apps/Spotify.png" id="appSpotify" link=`/?redir=${btoa('https://spotify.com')}` />
<Card text="Temu" imageSrc="/src/assets/images/apps/Temu.png" id="appsTemu" link=`/?redir=${btoa('https://temu.com')}` />
<Card text="TikTok" imageSrc="/src/assets/images/apps/Tiktok.png" id="appsTiktok" link=`/?redir=${btoa('https://tiktok.com')}` />
<Card text="X/Twitter" imageSrc="/src/assets/images/apps/Twitter.png" id="appsX" link=`/?redir=${btoa('https://x.com')}` />
<Card text="Vercel" imageSrc="/src/assets/images/apps/Vercel.jpeg" id="appsVercel" link=`/?redir=${btoa('https://vercel.com')}` />
<Card text="Wattpad" imageSrc="/src/assets/images/apps/Wattpad.png" id="appsWattpad" link=`/?redir=${btoa('https://wattpad.com/home')}` />
<Card text="Webtoon" imageSrc="/src/assets/images/apps/Webtoon.png" id="appsWebtoon" link=`/?redir=${btoa('https://www.webtoons.com/en/')}` />
<Card text="YouTube" imageSrc="/src/assets/images/apps/Youtube.jpg" id="appsYoutube" link=`/?redir=${btoa('https://youtube.com')}` />
</div>
</div>
</Layout>
+26 -10
View File
@@ -10,6 +10,8 @@ const genSplash = (): String => {
}
const randomSplash = genSplash();
const link = Astro.url.searchParams.get('redir');
---
<Layout>
@@ -31,12 +33,13 @@ const randomSplash = genSplash();
</div> */}
</div>
<iframe id="iframe" class="fixed h-[calc(100%-3.5rem)] mt-14 w-full hidden bg-(--background)" />
<link-element data-link={link} />
</div>
</Layout>
<script>
import { SW } from "@utils/proxy.ts";
import { Settings } from "@utils/settings.ts";
import { BareClient } from "@mercuryworkshop/bare-mux";
import { BareClient } from "@mercuryworkshop/bare-mux";
const init = async () => {
const input = document.getElementById("input") as HTMLInputElement;
@@ -86,9 +89,9 @@ const randomSplash = genSplash();
proxyReload.addEventListener("click", () => {
iframeWin!.location.reload();
});
proxyShortcut.button.addEventListener("click", () => {
/** proxyShortcut.button.addEventListener("click", () => {
console.log("yet to be implemented");
});
}); */
}
iframe.addEventListener("load", async () => {
@@ -104,12 +107,25 @@ const randomSplash = genSplash();
});
}
document.addEventListener("astro:page-load", async () => {
try {
await init();
class CustomComponent extends HTMLElement {
connectedCallback() {
const link = this.dataset.link;
const input = document.getElementById("input") as HTMLInputElement;
if (link) {
return (async () => {
await init();
try {
input.value = atob(link);
} catch (_) {
input.value = link;
}
input.dispatchEvent(new KeyboardEvent("keypress", { key: "Enter", code: "Enter" }));
history.pushState({}, "", "/");
})();
}
(async () => { await init(); })();
}
catch (err) {
//console.log(err);
}
})
}
customElements.define('link-element', CustomComponent);
</script>