Add description field to extension manifest

src/components/ts/IDBManager.ts

@@ -1,8 +1,7 @@
 type VALID_EXT_TYPES = "serviceWorker" | "theme" | "page";
 export interface ExtensionMetadata {
   title: string;
-  // TODO: Add description to the manifest
+  description?: string;
-  // description: string;
 
   // Versions should follow semantic versioning
   version: string;

src/json/marketplace.json

@@ -1,6 +1,7 @@
 {
   "dev.wearr.adblock": {
-    "title": "Adblocker",
+    "title": "Alu Adblocker",
+    "description": "Alu Adblocker is the best adblocker for web proxy services. It blocks up to 97% of all trackers and ads.",
     "version": "0.0.1",
     "image": "/marketplace/adblock/adblock.png",
     "script": "/marketplace/adblock/index.js",
@@ -10,6 +11,52 @@
   },
   "dev.wearr.oled-theme": {
     "title": "OLED Theme",
+    "description": "A beautiful OLED theme for Alu.",
+    "version": "0.0.1",
+    "image": "/marketplace/oled-theme/theme.png",
+    "script": "/marketplace/oled-theme/theme.css",
+    "type": "theme",
+    "themeName": "oled"
+  },
+  "dev.wearr.oled-theme2": {
+    "title": "OLED Theme",
+    "description": "A beautiful OLED theme for Alu.",
+    "version": "0.0.1",
+    "image": "/marketplace/oled-theme/theme.png",
+    "script": "/marketplace/oled-theme/theme.css",
+    "type": "theme",
+    "themeName": "oled"
+  },
+  "dev.wearr.oled-theme3": {
+    "title": "OLED Theme",
+    "description": "A beautiful OLED theme for Alu.",
+    "version": "0.0.1",
+    "image": "/marketplace/oled-theme/theme.png",
+    "script": "/marketplace/oled-theme/theme.css",
+    "type": "theme",
+    "themeName": "oled"
+  },
+  "dev.wearr.oled-theme4": {
+    "title": "OLED Theme",
+    "description": "A beautiful OLED theme for Alu.",
+    "version": "0.0.1",
+    "image": "/marketplace/oled-theme/theme.png",
+    "script": "/marketplace/oled-theme/theme.css",
+    "type": "theme",
+    "themeName": "oled"
+  },
+  "dev.wearr.oled-theme5": {
+    "title": "OLED Theme",
+    "description": "A beautiful OLED theme for Alu.",
+    "version": "0.0.1",
+    "image": "/marketplace/oled-theme/theme.png",
+    "script": "/marketplace/oled-theme/theme.css",
+    "type": "theme",
+    "themeName": "oled"
+  },
+  "dev.wearr.oled-theme6": {
+    "title": "OLED Theme",
+    "description": "A beautiful OLED theme for Alu.",
     "version": "0.0.1",
     "image": "/marketplace/oled-theme/theme.png",
     "script": "/marketplace/oled-theme/theme.css",

src/pages/[lang]/marketplace.astro

@@ -9,6 +9,7 @@ export const getStaticPaths = () => {
 
 type MarketplaceItem = {
   title: string;
+  description: string;
   version: string;
   image: string;
   script: string;
@@ -33,6 +34,7 @@ type MarketplaceItem = {
             <div class="marketplace-item" data-slug={slug}>
               <img class="marketplace-item-image" src={item.image} alt={`${item.title} Logo`} />
               <div class="marketplace-item-title">{item.title}</div>
+              <div class="marketplace-item-desc">{item.description}</div>
               <button class="marketplace-btn btn-install" data-slug={slug} data-title={item.title}>
                 Install
               </button>
@@ -58,9 +60,8 @@ type MarketplaceItem = {
     margin: 0 auto;
     color: var(--text-color);
     display: grid;
-    display: flex;
+    grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
-    flex-direction: row;
+    align-items: center;
-    flex-wrap: wrap;
     text-align: center;
     justify-content: center;
     gap: 20px;
@@ -69,12 +70,16 @@ type MarketplaceItem = {
     border: 3px solid var(--accent-color);
     padding: 20px;
     border-radius: 15px;
-    width: 180px;
+    width: 100%;
   }
   .marketplace-item-image {
     width: 64px;
     height: 64px;
   }
+  .marketplace-item-desc {
+    width: 80%;
+    margin: 0 auto;
+  }
   .marketplace-btn {
     width: 100%;
     background-color: var(--accent-color);