Merge pull request #11 from Dev2Forge/develop

Update layout, better repos card

Author: tutosrive

docs/assets/js/index.js

@@ -33,7 +33,7 @@ async function loadRepos() {
       // 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.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">
@@ -47,15 +47,31 @@ async function loadRepos() {
                         <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('./assets/json/configs.json');
   const data = await req.json();

docs/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"
+  "ignoreRepos": ["discussions-about", "dev2forge.github.io", ".github", "docs"],
+  "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"
+  }
 }

docs/index.html

@@ -77,7 +77,7 @@ <h1 class="text-3xl font-bold inline" id="title-head"></h1>
     <!-- Main Content -->
     <main class="flex-1 flex flex-col items-center w-full px-6 pb-12">
       <!-- Repos -->
-      <section id="carrusel-repos" class="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">
+      <section id="carrusel-repos" class="h-100 grid grid-rows-1 grid-flow-col gap-4 overflow-x-auto snap-x snap-mandatory w-full py-4">
         <!-- Repos will be injected here -->
       </section>