Fixed the Bug in Contributors Data Fetching in Contributors Page (#445)

* Update contributor.html * Update contributor.css
EternoSeeker · Aug 8, 2024 · 5e710d8 · 5e710d8
1 parent 6340d5f
commit 5e710d8
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 31 deletions.
diff --git a/contributor.html b/contributor.html
@@ -27,7 +27,7 @@
 
     <div class="content min-h-screen text-black dark:text-gray-200">
         <div class="container mx-auto py-8">
-            <h1 class="text-center text-3xl font-semibold mb-8">🤝Our Contributors</h1>
+            <h1 class="text-center text-3xl font-semibold mb-8">Our Contributors</h1>
             <div id="contributors" class="contributors"></div>
         </div>
     </div>
@@ -66,36 +66,47 @@ <h1 class="text-center text-3xl font-semibold mb-8">🤝Our Contributors</h1>
           window.scrollTo({ top: 0, behavior: 'smooth' });
         });
       </script>
-    <script>
-        document.addEventListener('DOMContentLoaded', function () {
-            const contributorsContainer = document.getElementById('contributors');
+ <script>
+  document.addEventListener('DOMContentLoaded', function () {
+      const contributorsContainer = document.getElementById('contributors');
 
-            async function fetchContributors() {
-                try {
-                    const response = await fetch('https://api.github.com/repos/EternoSeeker/gameoflife/contributors');
-                    const contributors = await response.json();
+      async function fetchContributors() {
+          try {
+              let page = 1;
+              const perPage = 100;
+              let totalContributors = [];
 
-                    contributors.forEach(contributor => {
-                        const contributorCard = document.createElement('a');
-                        contributorCard.href = contributor.html_url;
-                        contributorCard.target = '_blank';
-                        contributorCard.className = 'contributor-card';
-                        contributorCard.innerHTML = `
-                            <img src="${contributor.avatar_url}" alt="${contributor.login}">
-                            <h2>${contributor.login}</h2>
-                            <p>Contributions: ${contributor.contributions}</p>
-                            <p><i class="fa-brands fa-github mr-2"></i> GitHub Profile</p>
-                        `;
-                        contributorsContainer.appendChild(contributorCard);
-                    });
-                } catch (error) {
-                    console.error('Error fetching contributors:', error);
-                }
-            }
+              while (true) {
+                  const response = await fetch(`https://api.github.com/repos/EternoSeeker/gameoflife/contributors?per_page=${perPage}&page=${page}`);
+                  const contributors = await response.json();
 
-            fetchContributors();
-        });
-    </script>
+                  if (contributors.length === 0) break;
+
+                  totalContributors = totalContributors.concat(contributors);
+                  page++;
+              }
+
+              totalContributors.forEach(contributor => {
+                  const contributorCard = document.createElement('a');
+                  contributorCard.href = contributor.html_url;
+                  contributorCard.target = '_blank';
+                  contributorCard.className = 'contributor-card';
+                  contributorCard.innerHTML = `
+              <img src="${contributor.avatar_url}" alt="${contributor.login}">
+              <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">${contributor.login}</h2>
+              <p class="text-gray-700 dark:text-gray-400">Contributions: ${contributor.contributions}</p>
+              <p class="text-gray-700 dark:text-gray-400 flex-center"><i class="fab fa-github mr-1"></i> GitHub Profile</p>
+          `;
+                  contributorsContainer.appendChild(contributorCard);
+              });
+          } catch (error) {
+              console.error('Error fetching contributors:', error);
+          }
+      }
+
+      fetchContributors();
+  });
+</script>
 
     <div class="back-up">
         <a class="gotopbtn" href="javascript:void(0);"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>

diff --git a/css/contributor.css b/css/contributor.css
@@ -27,16 +27,17 @@ body {
 }
 
 .contributor-card {
-    background: linear-gradient(135deg, #6a93ff, #a9c7ff);
+    background: rgb(14, 14, 76);
     color: #ffffff;
-    border: 1px solid #333;
+    border: 3px solid rgb(52, 163, 255);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     border-radius: 10px;
     padding: 20px;
     text-align: center;
     margin: 10px;
     transition: transform 0.3s, box-shadow 0.3s;
     width: calc(25% - 40px); 
+    text-decoration: none;
 }
 
 .contributor-card img {
@@ -45,21 +46,25 @@ body {
     height: 100px;
     object-fit: cover;
     margin-bottom: 10px;
+    border: 3px solid rgb(52, 163, 255);
 }
 
 .contributor-card h2 {
     font-size: 1.2em;
     margin-bottom: 5px;
+    text-decoration: none;
 }
 
 .contributor-card p {
     font-size: 0.9em;
     margin-bottom: 5px;
+    text-decoration: none;
 }
 
 .contributor-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
+    background: rgb(0, 0, 42);
 }
 
 /* Responsive Design */
@@ -120,11 +125,22 @@ body {
     font-weight: 700;
     text-align: center;
     margin-bottom: 20px;
-    color: #ffffff;
+    color: rgb(14, 14, 76);
     text-shadow: none; 
     animation: none;
 }
 
+.container {
+    max-width: 1200px;
+    width: 90%;
+    margin: auto;
+    padding: 30px;
+    background-color: #c6cede !important; 
+    border-radius: 10px;
+    box-shadow: none !important;
+
+}
+
 @media (max-width: 1024px) {
     .container h1 {
         font-size: 2rem; /