Feat: apps page

src/components/ui/Card.astro

@@ -0,0 +1,35 @@
+---
+import { Image } from "astro:assets";
+import type { ImageMetadata } from "astro";
+const images = import.meta.glob<{ default: ImageMetadata }>(
+    "/src/assets/images/**/*.{jpeg,jpg,png,gif,webp}"
+);
+
+interface Props {
+    link?: string;
+    imageSrc: string;
+    text: string;
+    id: string;
+};
+
+const { imageSrc, text, id, link } = Astro.props;
+---
+{link ?
+    <a class="p-2" href={link}>
+        <div id={id} class="rounded-md relative group cursor-pointer h-36 hover:scale-105 duration-100 transition-all">
+            <Image loading="lazy" src={images[imageSrc]()} class="h-36 w-36 aspect-square object-cover rounded-md" alt={text} />
+            <div class="absolute inset-0 h-full w-full opacity-0 group-hover:opacity-100 bg-gradient-to-t from-(--accent) to-transparent rounded-b-md duration-100 flex items-end p-2 px-4 font-semibold">
+                <p> { text } </p>
+            </div>
+        </div>
+    </a>
+    :
+    <div class="p-2">
+        <div id={id} class="rounded-md relative group cursor-pointer h-36 hover:scale-105 duration-100 transition-all">
+            <Image loading="lazy" src={images[imageSrc]()} class="h-36 w-36 aspect-square object-cover rounded-md" alt={text} />
+            <div class="absolute inset-0 h-full w-full opacity-0 group-hover:opacity-100 bg-gradient-to-t from-(--accent) to-transparent rounded-b-md duration-100 flex items-end p-2 px-4 font-semibold">
+                <p> { text } </p>
+            </div>
+        </div>
+    </div>
+}

src/pages/apps.astro

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

src/pages/index.astro

@@ -10,6 +10,8 @@ const genSplash = (): String => {
 }
 
 const randomSplash = genSplash();
+
+const link = Astro.url.searchParams.get('redir');
 ---
 
 <Layout>
@@ -31,6 +33,7 @@ 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>
@@ -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 () => {
+    class CustomComponent extends HTMLElement {
-        try {
+        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;
                     }
-        catch (err) {
+                    input.dispatchEvent(new KeyboardEvent("keypress", { key: "Enter", code: "Enter" }));
-            //console.log(err);
+                    history.pushState({}, "", "/");
+                })();
             }
-    })
+            (async () => { await init(); })();
+        }
+    }
+
+    customElements.define('link-element', CustomComponent);
 </script>