Add: Downloads Badge

- add downloads badge - count is static at build time
linux-themes · Feb 14, 2025 · aab1df2 · aab1df2
1 parent 196cb43
commit aab1df2
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 21 deletions.
diff --git a/src/pages/database/configs.astro b/src/pages/database/configs.astro
@@ -2,7 +2,7 @@
 import Layout from "../../layouts/Layout.astro";
 import { Icon } from "astro-icon/components";
 
-import { fetchConfigs } from "../../scripts/fetch";
+import { fetchConfigs, getDownloads } from "../../scripts/fetch";
 import { getDesktopColor } from "../../scripts/fetch";
 import { getCategoryColor } from "../../scripts/fetch";
 
@@ -74,12 +74,12 @@ const cards = configs;
                   <span class={`${getDesktopColor(card.desktop)} px-2 py-1 rounded-lg text-sm`}>{card.desktop}</span>
                   <span class={`${getCategoryColor(card.category)} px-2 py-1 rounded-lg text-sm`}>{card.category}</span>
                 </div>
-                {/* <div>
+                <div>
                   <span class={`bg-blue-300 text-blue-900 px-2 py-1 rounded-lg text-sm flex gap-2 items-center`}>
                     <Icon name="material-symbols:download" />
-                    Unable to fetch count
+                    {getDownloads(card.maintainer, card.repository)}
                   </span>
-                </div> */}
+                </div>
               </div>
             </div>
             <div class="bg-gray-100 rounded-b-lg text-center flex gap-2 justify-between dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">

diff --git a/src/pages/database/icons.astro b/src/pages/database/icons.astro
@@ -2,7 +2,7 @@
 import Layout from "../../layouts/Layout.astro";
 import { Icon } from "astro-icon/components";
 
-import { fetchIcons } from "../../scripts/fetch";
+import { fetchIcons, getDownloads } from "../../scripts/fetch";
 import { getDesktopColor } from "../../scripts/fetch";
 import { getCategoryColor } from "../../scripts/fetch";
 
@@ -74,12 +74,12 @@ const cards = icons;
                   <span class={`${getDesktopColor(card.desktop)} px-2 py-1 rounded-lg text-sm`}>{card.desktop}</span>
                   <span class={`${getCategoryColor(card.category)} px-2 py-1 rounded-lg text-sm`}>{card.category}</span>
                 </div>
-                {/* <div>
+                <div>
                   <span class={`bg-blue-300 text-blue-900 px-2 py-1 rounded-lg text-sm flex gap-2 items-center`}>
                     <Icon name="material-symbols:download" />
-                    Unable to fetch count
+                    {getDownloads(card.maintainer, card.repository)}
                   </span>
-                </div> */}
+                </div>
               </div>
             </div>
             <div class="bg-gray-100 rounded-b-lg text-center flex gap-2 justify-between dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">

diff --git a/src/pages/database/themes.astro b/src/pages/database/themes.astro
@@ -2,7 +2,7 @@
 import Layout from "../../layouts/Layout.astro";
 import { Icon } from "astro-icon/components";
 
-import { fetchThemes } from "../../scripts/fetch";
+import { fetchThemes, getDownloads } from "../../scripts/fetch";
 import { getDesktopColor } from "../../scripts/fetch";
 import { getCategoryColor } from "../../scripts/fetch";
 
@@ -74,12 +74,12 @@ const cards = themes;
                   <span class={`${getDesktopColor(card.desktop)} px-2 py-1 rounded-lg text-sm`}>{card.desktop}</span>
                   <span class={`${getCategoryColor(card.category)} px-2 py-1 rounded-lg text-sm`}>{card.category}</span>
                 </div>
-                {/* <div>
+                <div>
                   <span class={`bg-blue-300 text-blue-900 px-2 py-1 rounded-lg text-sm flex gap-2 items-center`}>
                     <Icon name="material-symbols:download" />
-                    Unable to fetch count
+                    {getDownloads(card.maintainer, card.repository)}
                   </span>
-                </div> */}
+                </div>
               </div>
             </div>
             <div class="bg-gray-100 rounded-b-lg text-center flex gap-2 justify-between dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">

diff --git a/src/pages/themesdatabase.astro b/src/pages/themesdatabase.astro
@@ -2,7 +2,7 @@
 import Layout from "../layouts/Layout.astro";
 import { Icon } from "astro-icon/components";
 
-import { fetchIcons } from "../scripts/fetch";
+import { fetchIcons, getDownloads } from "../scripts/fetch";
 import { fetchThemes } from "../scripts/fetch";
 import { fetchConfigs } from "../scripts/fetch";
 import { getDesktopColor } from "../scripts/fetch";
@@ -70,7 +70,7 @@ const cards = icons.concat(themes).concat(configs);
                   <div>
                     <h3 class="text-2xl font-bold mb-2">{card.name}</h3>
                   </div>
-                  <h3 class="text-2xl font-bold mb-2">{card.package_number}</h3>
+                  <h3 class="text-blue-300 text-2xl font-bold mb-2">{card.package_number}</h3>
                 </div>
                 <img src={`${card.url_icon}`} alt={`${card.name}`} class="h-60 self-center p-4" />
                 <p class="text-gray-600 mb-4 text-xl dark:text-gray-300">{card.description}</p>
@@ -79,12 +79,12 @@ const cards = icons.concat(themes).concat(configs);
                     <span class={`${getDesktopColor(card.desktop)} px-2 py-1 rounded-lg text-sm`}>{card.desktop}</span>
                     <span class={`${getCategoryColor(card.category)} px-2 py-1 rounded-lg text-sm`}>{card.category}</span>
                   </div>
-                  {/* <div>
-                  <span class={`bg-blue-300 text-blue-900 px-2 py-1 rounded-lg text-sm flex gap-2 items-center`}>
-                    <Icon name="material-symbols:download" />
-                    Unable to fetch count
-                  </span>
-                </div> */}
+                  <div>
+                    <span class={`bg-blue-300 text-blue-900 px-2 py-1 rounded-lg text-sm flex gap-2 items-center`}>
+                      <Icon name="material-symbols:download" />
+                      {getDownloads(card.maintainer, card.repository)}
+                    </span>
+                  </div>
                 </div>
               </div>
               <div class="bg-gray-100 rounded-b-lg text-center flex gap-2 justify-between dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">

diff --git a/src/scripts/fetch.ts b/src/scripts/fetch.ts
@@ -10,7 +10,7 @@ export async function getDownloads(maintainer: string, repository: string) {
     const data = await response.json();
     return data[0]["assets"][0]["download_count"];
   } catch {
-    return "Unable to fetch download count";
+    return "Download count not available";
   }
 }