Update repos card design

Author: tutosrive

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

index.html

@@ -211,7 +211,7 @@ <h1 class="text-3xl font-bold inline">
             <section class="w-full">
                 <header><h2 class="text-center text-3xl mb-10">Projects Repositories</h2></header>
                 <!-- Repos will be injected here -->
-                <div id="repositories-container" class="carrusel-img h-full grid grid-rows-1 auto-cols-max grid-flow-col gap-4 overflow-x-auto overflow-y-hidden snap-x snap-mandatory w-full py-4"></div>
+                <div id="repositories-container" loading="lazy" class="carrusel-img h-100 grid grid-rows-1 auto-cols-max grid-flow-col gap-4 overflow-x-auto overflow-y-hidden snap-x snap-mandatory w-full py-4"></div>
             </section>
 
             <!-- Description page -->

src/assets/js/main.js

@@ -26,34 +26,55 @@ async function loadRepos() {
     const container = document.querySelector('#repositories-container');
     const configsWeb = await loadConfigs();
     try {
-        const res = await fetch('https://api.github.com/users/Dev2Forge/repos');
-        const repos = await res.json();
+        const res = await fetch('https://api.github.com/orgs/dev2forge/repos');
+        /**
+         * @type {Array<String>}
+         */
+        let repos = await res.json();
+        repos = repos.sort((a, b) => a?.name?.toLowerCase().charCodeAt(0) - b?.name?.toLowerCase().charCodeAt(0));
         repos.forEach((repo) => {
             // Skip repositories that are not in the configsWeb list
             if (!configsWeb.ignoreRepos.includes(repo.name)) {
                 const card = document.createElement('div');
-                card.className = 'flex flex-col justify-between items-center w-64 h-64 bg-gray-100 dark:bg-gray-800 p-4 rounded shadow hover:shadow-lg transition snap-start row-span-1';
-                card.innerHTML = `<h2 class="text-xl font-semibold text-center w-full mb-2">${repo.name}</h2>
+                card.className = 'flex flex-col justify-between items-center w-64 h-95 bg-gray-100 dark:bg-gray-800 p-4 rounded shadow hover:shadow-lg transition snap-start row-span-1';
+                card.innerHTML = `
+                <h2 class="text-xl font-semibold text-center w-full mb-2">${repo.name}</h2>
                 <div class="flex-1 w-full overflow-y-auto mb-2 no-scrollbar">
                     <p class="text-sm text-gray-600 dark:text-gray-300 text-center break-words">${repo.description || 'No description'}</p>
                 </div>
                 <div class="w-full flex justify-center mt-auto gap-3">
                     <a href="${repo.html_url}" target="_blank" class="btn-repo-link flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 shadow hover:scale-110 hover:bg-blue-500 hover:text-white transition border border-blue-300 dark:border-blue-700 mr-0.5">
                         <img width="24" height="24" src="https://cdn.jsdelivr.net/gh/tutosrive/images-projects-srm-trg@refs/heads/main/svg-icons-flags-cursor/icon/github-logo.svg" alt="GitHub">
                     </a>
-                    <a href="${repo.homepage}" target="_blank" class="btn-repo-link flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 shadow hover:scale-110 hover:bg-blue-500 hover:text-white transition border border-blue-300 dark:border-blue-700 ml-0.5">
+                    <a href="${repo.homepage}" class="btn-repo-link flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 shadow hover:scale-110 hover:bg-blue-500 hover:text-white transition border border-blue-300 dark:border-blue-700 ml-0.5">
                         <img width="16" height="16" src="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/icons/box-arrow-up-right.svg" alt="Icon redirect">
                     </a>
                 </div>
+                <div class="w-full flex justify-center pt-4">
+                  <img alt="Pepy Total Downloads" src="https://img.shields.io/pepy/dt/${fix_name(repo.name)}?color=blue&style=flat-square" class="h-5 object-contain me-1">
+                  <img alt="PyPI - Version" src="https://img.shields.io/pypi/v/${fix_name(repo.name)}?color=orange" class="h-5 object-contain">
+                </div>
+                <div class="w-full flex justify-center">
+                  <img width="100" src="${configsWeb.logos[repo.name.toLowerCase()]}" alt="${repo.name} logo" class="object-cover rounded mt-2">
+                </div>
+                <div class="w-full flex justify-center mt-2">
+                    <code class="text-sm">pip install ${fix_name(repo.name)}</code>
+                </div>
             `;
+
                 container.appendChild(card);
             }
         });
     } catch (e) {
+        console.log(e);
         container.innerHTML = '<p class="text-red-500">Failed to load repositories.</p>';
     }
 }
 
+function fix_name(name) {
+    return name === 'E-SRM' ? 'effect-srm' : name;
+}
+
 async function loadConfigs() {
     const req = await fetch('src/assets/json/configs.json');
     const data = await req.json();

src/assets/json/configs.json

@@ -1,4 +1,12 @@
 {
     "ignoreRepos": ["discussions-about", "dev2forge.github.io", ".github", "docs"],
-    "thumbnail1": "https://cdn.jsdelivr.net/gh/tutosrive/images-projects-srm-trg@main/dev2forge/thumbanil-dev2forge1.webp"
+    "thumbnail1": "https://cdn.jsdelivr.net/gh/tutosrive/images-projects-srm-trg@main/dev2forge/thumbanil-dev2forge1.webp",
+    "logos": {
+        "bridgex": "https://cdn.jsdelivr.net/gh/tutosrive/images-projects-srm-trg@main/dev2forge/logos/bridgex-v0.1.0.webp",
+        "sqlazo": "https://cdn.jsdelivr.net/gh/tutosrive/images-projects-srm-trg@main/dev2forge/logos/sqlazo-v0.2.0.webp",
+        "pdf2wordx": "https://cdn.jsdelivr.net/gh/tutosrive/images-projects-srm-trg@main/dev2forge/logos/pdf2wordx-v2.1.2.svg",
+        "e-srm": "https://cdn.jsdelivr.net/gh/tutosrive/images-projects-srm-trg@main/dev2forge/logos/e-srm-v0.1.0.webp",
+        "chromologger": "https://cdn.jsdelivr.net/gh/tutosrive/images-projects-srm-trg@main/dev2forge/logos/chromologger-v0.1.9.webp",
+        "chromolog": "https://cdn.jsdelivr.net/gh/tutosrive/images-projects-srm-trg@main/dev2forge/logos/chromolog-v0.2.5.webp"
+    }
 }