WIP Marketplace page, hopefully will be functional soon 🎉

src/components/UI/Header.astro

@@ -10,6 +10,7 @@ const t = i18n.useTranslations(lang);
       <a href={`/${lang}/`} class="header-item">{t("nav.brand")}</a>
     </div>
     <div class="right">
+      <a href={`/${lang}/marketplace/`} class="header-item">Marketplace</a>
       <a href={`/${lang}/games/`} class="header-item">{t("nav.games")}</a>
       <a href={`/${lang}/settings/`} class="header-item">{t("nav.settings")}</a>
     </div>

src/json/marketplace.json

@@ -0,0 +1,9 @@
+{
+    "adblock": {
+        "title": "Adblocker",
+        "version": "0.0.1",
+        "image": "/marketplace/adblock/adblock.png",
+        "script": "/marketplace/adblock/adblocker.js",
+        "slug": "adblock"
+    }
+}

src/pages/[lang]/marketplace.astro

@@ -0,0 +1,76 @@
+---
+import { STATIC_PATHS } from "@i18n/utils";
+import Layout from "src/layouts/Layout.astro"
+import marketplace from "../../json/marketplace.json"
+
+export const getStaticPaths = (() => {
+    return STATIC_PATHS;
+});
+
+type MarketplaceItem = {
+    title: string,
+    version: string | number,
+    image: string,
+    script: string,
+    slug: string
+};
+---
+
+<Layout title="Marketplace | Alu">
+    <div id="main-content">
+        <h1 class="title-text">Marketplace</h1>
+        <div class="marketplace-ext-grid">
+            {Object.keys(marketplace).map((mp_item) => {
+                const item = (marketplace as {[key: string ]: MarketplaceItem})[mp_item]
+                return <div class="marketplace-item" id={item.slug}>
+                    <img class="marketplace-item-image" src={item.image} alt={`${item.title} Logo`}/>
+                    <div class="marketplace-item-title">{item.title}</div>
+                    <button class="marketplace-install-btn">Install</button>
+                </div>
+            })}
+        </div>
+    </div>
+</Layout>
+
+<script>
+    const installButtons = document.getElementsByClassName("marketplace-install-btn") as HTMLCollectionOf<HTMLButtonElement>;
+    Array.from(installButtons).forEach(btn => {
+        btn.addEventListener("click", (event) => {
+            console.log(event.target)
+        })
+    });
+</script>
+
+<style>
+    .marketplace-ext-grid {
+        display: grid;
+        width: 90%;
+        margin: 0 auto;
+        color: var(--text-color);
+        display: grid;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        text-align: center;
+        justify-content: center;
+    }
+    .marketplace-item {
+        border: 3px solid var(--accent-color);
+        padding: 20px;
+        border-radius: 15px;
+    }
+    .marketplace-item-image {
+        width: 64px;
+        height: 64px;
+    }
+    .marketplace-install-btn {
+        width: 100%;
+        background-color: var(--accent-color);
+        color: var(--text-color);
+        border: none;
+        margin-top: 3px;
+        padding: 3px;
+        cursor: pointer;
+        font-family: "Varela Round", sans-serif;
+    }
+</style>