Merge branch 'main' of https://github.com/wearrrrr/AlusUnblocker

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/components/UI/Input.astro

@@ -6,6 +6,7 @@ const {
   placeholder,
   className,
   defaultStyles = true,
+  autocomplete = "on",
 } = Astro.props;
 
 const styleList = className ? className.split(" ") : [];
@@ -21,6 +22,7 @@ interface Props {
   placeholder?: string;
   className?: string;
   defaultStyles?: boolean;
+  autocomplete?: string;
 }
 ---
 
@@ -31,4 +33,5 @@ interface Props {
   value={defaultTextContent || ""}
   type="text"
   class={styleList.map((style) => style).join(" ")}
+  autocomplete={autocomplete}
 />

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]/index.astro

@@ -25,6 +25,7 @@ export function getStaticPaths() {
             placeholder={t("menu.search")}
             defaultStyles={false}
             transition:persist
+            autocomplete="off"
           />
           <div id="search-suggestions"></div>
           <div id="loading-content">Loading...</div>

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>