Feat: apps page
This commit is contained in:
@@ -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
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user