From d0830206dc55de91f68b4578f12af4d89913e7a5 Mon Sep 17 00:00:00 2001
From: Souvik Majee <souvikmajee039@gmail.com>
Date: Fri, 8 Nov 2024 19:06:43 +0530
Subject: [PATCH] Added all the contributors

---
 contributors/contributors.js | 81 ++++++++++++++++++++++++++----------
 1 file changed, 58 insertions(+), 23 deletions(-)

diff --git a/contributors/contributors.js b/contributors/contributors.js
index e453ab7..4fe3554 100644
--- a/contributors/contributors.js
+++ b/contributors/contributors.js
@@ -5,35 +5,70 @@ const repoUrl = `https://api.github.com/repos/${repoOwner}/${repoName}`;
 
 async function fetchContributorData() {
   try {
-    const [contributorsRes, repoRes] = await Promise.all([
-      fetch(contributorsUrl),
-      fetch(repoUrl)
-    ]);
+    // Fetch all contributors using pagination
+    const contributors = await fetchAllContributors();
 
-    const contributors = await contributorsRes.json();
+    // Fetch repository data (stars, forks, etc.)
+    const repoRes = await fetch(repoUrl);
     const repoData = await repoRes.json();
 
-    const statsGrid = document.getElementById("statsGrid");
-
-    statsGrid.innerHTML = `
-      <div class="contributor-stat-card"><h3>${contributors.length}</h3><p>Contributors</p></div>
-      <div class="contributor-stat-card"><h3>${contributors.reduce((sum, { contributions }) => sum + contributions, 0)}</h3><p>Total Contributions</p></div>
-      <div class="contributor-stat-card"><h3>${repoData.stargazers_count}</h3><p>GitHub Stars</p></div>
-      <div class="contributor-stat-card"><h3>${repoData.forks_count}</h3><p>Forks</p></div>
-    `;
-
-    const contributorsContainer = document.getElementById("contributors");
-    contributorsContainer.innerHTML = contributors.map(({ login, contributions, avatar_url, html_url }) => `
-      <div class="contributor-card">
-        <img src="${avatar_url}" alt="${login}'s avatar">
-        <p><strong>${login}</strong></p>
-        <p>Contributions: ${contributions}</p>
-        <a href="${html_url}" target="_blank">GitHub Profile</a>
-      </div>
-    `).join('');
+    // Render stats
+    renderStats(repoData, contributors);
+
+    // Render contributors
+    renderContributors(contributors);
+
   } catch (error) {
     console.error("Error fetching data:", error);
   }
 }
 
+// Fetch all contributors across multiple pages
+async function fetchAllContributors() {
+  let contributors = [];
+  let page = 1;
+  let response;
+
+  do {
+    response = await fetch(`${contributorsUrl}?page=${page}&per_page=100`);
+    const contributorsData = await response.json();
+    contributors.push(...contributorsData);
+    page++;
+  } while (response.headers.get('link') && response.headers.get('link').includes('rel="next"')); // Check for "next" link in the header
+
+  return contributors;
+}
+
+// Render stats like total contributions, stars, forks, etc.
+function renderStats(repoData, contributors) {
+  const statsGrid = document.getElementById("statsGrid");
+
+  statsGrid.innerHTML = `
+    <div class="contributor-stat-card"><h3>${contributors.length}</h3><p>Contributors</p></div>
+    <div class="contributor-stat-card"><h3>${contributors.reduce((sum, { contributions }) => sum + contributions, 0)}</h3><p>Total Contributions</p></div>
+    <div class="contributor-stat-card"><h3>${repoData.stargazers_count}</h3><p>GitHub Stars</p></div>
+    <div class="contributor-stat-card"><h3>${repoData.forks_count}</h3><p>Forks</p></div>
+  `;
+}
+
+// Render the list of contributors
+function renderContributors(contributors) {
+  const contributorsContainer = document.getElementById("contributors");
+
+  contributorsContainer.innerHTML = contributors.map(({ login, contributions, avatar_url, html_url }) => `
+    <div class="contributor-card">
+      <img src="${avatar_url}" alt="${login}'s avatar">
+      <p><strong>${login}</strong></p>
+      <p>Contributions: ${contributions}</p>
+      <a href="${html_url}" target="_blank">GitHub Profile</a>
+    </div>
+  `).join('');
+}
+
+// Call the function to fetch and display data
 fetchContributorData();
+
+// Initialize the page when the DOM is loaded
+document.addEventListener('DOMContentLoaded', function () {
+  // Your initialization code here if needed
+});