Update home, filter repos section

Author: tutosrive

index.html

@@ -55,7 +55,7 @@
         <!-- Header -->
         <header class="w-full flex justify-between items-center p-6 flex-shrink-0">
             <div class="w-full text-center">
-                <h1 class="text-3xl font-bold inline">Dev2Forge</h1>
+                <h1 class="text-3xl font-bold inline"><a href="https://github.com/dev2forge" target="_blank" class="no-decoration underline">Dev2Forge</a></h1>
                 <sub class="text-sm inline"><small>org</small></sub>
             </div>
             <!-- Feature: Add "Toggle Theme" -->
@@ -64,6 +64,7 @@ <h1 class="text-3xl font-bold inline">Dev2Forge</h1>
         <!-- Main Content -->
         <main class="flex-1 flex flex-col items-center w-full px-6 pb-12">
             <!-- Description page -->
+            <!-- Feature: Load README.md from repo -->
             <section id="description" class="my-4"></section>
 
             <!-- Repos -->

src/assets/css/index.css

@@ -15,20 +15,28 @@
 .btn-repo-link {
     width: 100%;
     max-width: 100%;
-    background-color: #00081f98;
-    border-radius: 20px;
+    background-color: #e0e7ff;
+    border-radius: 9999px;
     padding: 5px 10px;
-    color: #003cff;
+    color: #2563eb;
     text-decoration: none;
-    box-shadow: 10px 4px 8px rgba(0, 0, 0, 0.733);
-    transition: all 0.3s linear;
-    display: inline-block;
-    text-align: center;
+    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
+    border: 1.5px solid #93c5fd;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 .btn-repo-link:hover {
-    background-color: #00081f;
+    background-color: #2563eb;
     color: #fff;
-    padding: 5px 40px;
-    transition: all 0.3s linear;
-    box-shadow: 20px 4px 8px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.18);
+    transform: scale(1.12);
+}
+.btn-repo-link img {
+    filter: none;
+    transition: filter 0.2s;
+}
+.btn-repo-link:hover img {
+    filter: brightness(0) invert(1);
 }

src/assets/js/main.js

@@ -17,22 +17,31 @@ async function loadDescription() {
  */
 async function loadRepos() {
     const container = document.querySelector('#carrusel-repos');
+    const configsWeb = await loadConfigs();
     try {
         const res = await fetch('https://api.github.com/orgs/dev2forge/repos');
         const repos = await res.json();
         repos.forEach((repo) => {
-            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 = `
+            // 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>
                 <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">
-                    <a href="${repo.html_url}" target="_blank" class="btn-repo-link inline-block text-center w-full">View Repo</a>
+                <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">
+                        <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>
             `;
-            container.appendChild(card);
+                container.appendChild(card);
+            }
         });
     } catch (e) {
         container.innerHTML = '<p class="text-red-500">Failed to load repositories.</p>';
@@ -57,3 +66,9 @@ async function loadFollowers() {
         container.appendChild(img);
     });
 }
+
+async function loadConfigs() {
+    const req = await fetch('src/assets/json/configs.json');
+    const data = await req.json();
+    return data;
+}

src/assets/json/configs.json

@@ -0,0 +1,3 @@
+{
+    "ignoreRepos": ["discussions-about", "dev2forge.github.io", ".github", "docs"]
+}