From 51ee0156c6ac76e22d916eda538adc2331bead20 Mon Sep 17 00:00:00 2001
From: Vighnesh Brahme <v8ganesh@gmail.com>
Date: Mon, 23 Dec 2024 11:54:02 +0530
Subject: [PATCH 1/7] Added Contributor Avatar fallback svg

---
 assets/svgs/avatar_fallback.svg | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 assets/svgs/avatar_fallback.svg

diff --git a/assets/svgs/avatar_fallback.svg b/assets/svgs/avatar_fallback.svg
new file mode 100644
index 00000000..f872ac75
--- /dev/null
+++ b/assets/svgs/avatar_fallback.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ffffff" d="M406.5 399.6C387.4 352.9 341.5 320 288 320l-64 0c-53.5 0-99.4 32.9-118.5 79.6C69.9 362.2 48 311.7 48 256C48 141.1 141.1 48 256 48s208 93.1 208 208c0 55.7-21.9 106.2-57.5 143.6zm-40.1 32.7C334.4 452.4 296.6 464 256 464s-78.4-11.6-110.5-31.7c7.3-36.7 39.7-64.3 78.5-64.3l64 0c38.8 0 71.2 27.6 78.5 64.3zM256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-272a40 40 0 1 1 0-80 40 40 0 1 1 0 80zm-88-40a88 88 0 1 0 176 0 88 88 0 1 0 -176 0z"/></svg>
\ No newline at end of file

From 06b4f8567cf60c51b940620828dcbe7227b427ab Mon Sep 17 00:00:00 2001
From: Vighnesh Brahme <v8ganesh@gmail.com>
Date: Mon, 23 Dec 2024 11:55:13 +0530
Subject: [PATCH 2/7] Added infinite scroll and lazy loading to Contributors
 page

---
 assets/css_files/contributor.css   |  43 ++++++++
 assets/html_files/contributor.html |  10 +-
 assets/js_files/contributor.js     | 170 +++++++++++++++++++----------
 3 files changed, 165 insertions(+), 58 deletions(-)

diff --git a/assets/css_files/contributor.css b/assets/css_files/contributor.css
index f7239732..14e47348 100644
--- a/assets/css_files/contributor.css
+++ b/assets/css_files/contributor.css
@@ -101,6 +101,8 @@ body {
     margin: 10px;
     transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
     text-align: center;
+    opacity: 0;
+    animation: fadeIn 0.3s ease forwards;
 }
 
 .contributor-card:hover {
@@ -123,3 +125,44 @@ body {
     margin-top: 5px;
     color: #c9d1d9; /* Ensure visibility */
 }
+
+.lazy {
+    filter: blur(5px);
+    transition: filter 0.3s;
+}
+
+.lazy.loaded {
+    filter: blur(0);
+}
+
+#loading-spinner {
+    text-align: center;
+    padding: 20px;
+}
+
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #3498db;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 0 auto;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+#error-message {
+    color: red;
+    text-align: center;
+    padding: 20px;
+    display: none;
+}
\ No newline at end of file
diff --git a/assets/html_files/contributor.html b/assets/html_files/contributor.html
index 366ee15c..4214307e 100644
--- a/assets/html_files/contributor.html
+++ b/assets/html_files/contributor.html
@@ -94,7 +94,15 @@
             <h1 class="heading">Our Valuable Contributors</h1>
             <p class="subheading">Meet the minds</p>
         </div>
-        <div id="contributor"></div>
+        <div id="contributor">
+            <div id="loading-spinner">
+                <div class="spinner"></div>
+                <p>Loading contributors...</p>
+            </div>
+        </div>
+        <div id="error-message">
+            Failed to load contributors. Please try again later.
+        </div>
     </div>
 
     <footer>
diff --git a/assets/js_files/contributor.js b/assets/js_files/contributor.js
index b5fc248e..35a713b5 100644
--- a/assets/js_files/contributor.js
+++ b/assets/js_files/contributor.js
@@ -1,76 +1,132 @@
 const cont = document.getElementById('contributor');
+let currentPage = 1; // Start from page 1
+let isLoading = false; // Flag to track loading state
+let hasMore = true; // Flag to track if theres more data to load
+
+// Loading spinner element
+const loadingSpinner = document.getElementById('loading-spinner');
+
+// Error message element
+const errorMessage = document.getElementById('error-message');
+
+// Intersection Observer for infinite scroll
+const observerOptions = {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.1
+};
+
+// use when one page is loaded, and then scroll down to load more
+const intersectionObserver = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting && !isLoading && hasMore) {
+            // if intersecting, not in loading state, and has more data to load
+            fetchContributors(currentPage);
+        }
+    });
+}, observerOptions);
+
+// Lazy loading observer for avatars
+const lazyLoadObserver = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            const img = entry.target;
+            img.src = img.dataset.src;
+            img.classList.remove('lazy');
+            lazyLoadObserver.unobserve(img);
+        }
+    });
+}, observerOptions);
 
+/** loads a single page of contributors */
 async function fetchContributors(pageNumber) {
-    const perPage = 100;
-    const apiUrl = '/.netlify/functions/contributors'; // Netlify serverless function path
-
-    const response = await fetch(`${apiUrl}?page=${pageNumber}&per_page=${perPage}`);
+    if (isLoading) return;
     
-    if (!response.ok) {
-        throw new Error(`Failed to fetch the contributors data. Status code: ${response.status}`);
-    }
-
-    const contributorsData = await response.json();
-    return contributorsData;
-}
-
-async function fetchAllContributors() {
-    let allContributors = [];
-    let pageNumber = 1;
-    const maxPages = 10;  // Limiting the number of pages to avoid overload (can be adjusted)
+    isLoading = true;
+    const perPage = 20; // Reduced number of items per page
+    const apiUrl = '/.netlify/functions/contributors';
 
     try {
-        // Fetch all contributors in parallel using Promise.all()
-        const fetchPromises = [];
+        // Show loading spinner at the bottom
+        loadingSpinner.style.display = 'block';
 
-        // Fetch data for multiple pages concurrently
-        for (let i = 1; i <= maxPages; i++) {
-            fetchPromises.push(fetchContributors(i));
+        const response = await fetch(`${apiUrl}?page=${pageNumber}&per_page=${perPage}`);
+        
+        if (!response.ok) {
+            throw new Error(`Failed to fetch contributors. Status: ${response.status}`);
         }
 
-        const contributorsArray = await Promise.all(fetchPromises);
+        const contributorsData = await response.json();
 
-        // Combine all the results
-        contributorsArray.forEach(contributorsData => {
-            allContributors = allContributors.concat(contributorsData);
-        });
+        /* Dummy data: for testing only, not for production */
+        // const response = await fetch("../dummy/dummyContributors.json");
+        // const contributorsData = await response.json();
 
-        // Display contributor cards
-        allContributors.forEach((contributor) => {
-            if (contributor.login === 'Rakesh9100') return;  // Skip owner
+        // Check if we have more data to load
+        hasMore = contributorsData.length === perPage;
+        
+        // Create and append contributor cards
+        await displayContributors(contributorsData);
+        
+        currentPage++;
+    } catch (error) {
+        errorMessage.style.display = 'block';
+        console.error('Error fetching contributors:', error);
+    } finally {
+        isLoading = false;
+        loadingSpinner.style.display = 'none';
+        
+        // Add observer to the last card for infinite scroll
+        const allCards = cont.querySelectorAll('.contributor-card');
+        if (allCards.length > 0) {
+            intersectionObserver.observe(allCards[allCards.length - 1]);
+        }
+    }
+}
+
+/** Displays the contributors on the page */
+async function displayContributors(contributors) {
+    const fragment = document.createDocumentFragment();
+
+    for (const contributor of contributors) {
+        if (contributor.login === 'Rakesh9100') continue; // Skip owner
 
-            const contributorCard = document.createElement('div');
-            contributorCard.classList.add('contributor-card');
+        const contributorCard = document.createElement('div');
+        contributorCard.classList.add('contributor-card');
 
-            const avatarImg = document.createElement('img');
-            avatarImg.src = contributor.avatar_url;
-            avatarImg.alt = `${contributor.login}'s Picture`;
+        // Create avatar with lazy loading
+        const avatarImg = document.createElement('img');
+        avatarImg.classList.add('lazy');
+        avatarImg.src = '../svgs/avatar_fallback.svg'; // Add a placeholder image
+        avatarImg.dataset.src = contributor.avatar_url;
+        avatarImg.alt = `${contributor.login}'s Picture`;
 
-            const loginLink = document.createElement('a');
-            loginLink.href = contributor.html_url;
-            loginLink.target = '_blank';
-            loginLink.appendChild(avatarImg);
+        const loginLink = document.createElement('a');
+        loginLink.href = contributor.html_url;
+        loginLink.target = '_blank';
+        loginLink.appendChild(avatarImg);
 
+        try {
             // Fetch detailed info for the name
-            fetch(contributor.url)
-                .then(contributorDetails => contributorDetails.json())
-                .then(contributorData => {
-                    const displayName = contributorData.name || contributor.login;
-
-                    const nameDiv = document.createElement('div');
-                    nameDiv.classList.add('contributor-name');
-                    nameDiv.textContent = displayName;
-
-                    contributorCard.appendChild(loginLink);
-                    contributorCard.appendChild(nameDiv);
-
-                    cont.appendChild(contributorCard);
-                })
-                .catch(error => console.error('Error fetching the contributor details:', error));
-        });
-    } catch (error) {
-        console.error('Error fetching the contributors:', error);
+            const displayName = contributor.login;
+
+            const nameDiv = document.createElement('div');
+            nameDiv.classList.add('contributor-name');
+            nameDiv.textContent = displayName;
+
+            contributorCard.appendChild(loginLink);
+            contributorCard.appendChild(nameDiv);
+            fragment.appendChild(contributorCard);
+
+            // Observe the image for lazy loading
+            lazyLoadObserver.observe(avatarImg);
+        } catch (error) {
+            console.error('Error fetching contributor details:', error);
+        }
     }
+
+    cont.appendChild(fragment);
 }
 
-fetchAllContributors();
\ No newline at end of file
+// Initial load
+fetchContributors(currentPage);
\ No newline at end of file

From ebac7e19f6cf87661a67144d2b864dd972e63bae Mon Sep 17 00:00:00 2001
From: Vighnesh Brahme <v8ganesh@gmail.com>
Date: Mon, 23 Dec 2024 11:55:37 +0530
Subject: [PATCH 3/7] ignored dummy data folder for local testing

---
 .gitignore | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 85829d64..2b2c8a95 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,4 +19,7 @@ yarn-error.log*
 
 # Linux/Mac temporary files
 *.swp
-*.swo
\ No newline at end of file
+*.swo
+
+# testing files
+dummy/
\ No newline at end of file

From 245fcfa103eb4e0e515cf41cef544fddd3f5b2f4 Mon Sep 17 00:00:00 2001
From: Vighnesh Brahme <v8ganesh@gmail.com>
Date: Mon, 23 Dec 2024 12:13:53 +0530
Subject: [PATCH 4/7] removed dummy data code

---
 assets/js_files/contributor.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/assets/js_files/contributor.js b/assets/js_files/contributor.js
index 35a713b5..f07b961f 100644
--- a/assets/js_files/contributor.js
+++ b/assets/js_files/contributor.js
@@ -58,10 +58,6 @@ async function fetchContributors(pageNumber) {
 
         const contributorsData = await response.json();
 
-        /* Dummy data: for testing only, not for production */
-        // const response = await fetch("../dummy/dummyContributors.json");
-        // const contributorsData = await response.json();
-
         // Check if we have more data to load
         hasMore = contributorsData.length === perPage;
         

From 50753f2c9e5fd9cb350000e90c05e448e6aca5d2 Mon Sep 17 00:00:00 2001
From: Vighnesh Brahme <v8ganesh@gmail.com>
Date: Mon, 23 Dec 2024 12:51:12 +0530
Subject: [PATCH 5/7] added contributions count bubble on avatar

---
 assets/css_files/contributor.css | 16 +++++++++++++++
 assets/js_files/contributor.js   | 34 ++++++++++++++++----------------
 2 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/assets/css_files/contributor.css b/assets/css_files/contributor.css
index 14e47348..644d7987 100644
--- a/assets/css_files/contributor.css
+++ b/assets/css_files/contributor.css
@@ -126,6 +126,22 @@ body {
     color: #c9d1d9; /* Ensure visibility */
 }
 
+.contributions-count-bubble {
+    font-size: 12px;
+    color: #c9d1d9;
+    background-color: #3A0088;
+    padding: 5px;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    top: -130px;
+    right: -40px;
+}
+
 .lazy {
     filter: blur(5px);
     transition: filter 0.3s;
diff --git a/assets/js_files/contributor.js b/assets/js_files/contributor.js
index f07b961f..39fab36e 100644
--- a/assets/js_files/contributor.js
+++ b/assets/js_files/contributor.js
@@ -102,23 +102,23 @@ async function displayContributors(contributors) {
         loginLink.target = '_blank';
         loginLink.appendChild(avatarImg);
 
-        try {
-            // Fetch detailed info for the name
-            const displayName = contributor.login;
-
-            const nameDiv = document.createElement('div');
-            nameDiv.classList.add('contributor-name');
-            nameDiv.textContent = displayName;
-
-            contributorCard.appendChild(loginLink);
-            contributorCard.appendChild(nameDiv);
-            fragment.appendChild(contributorCard);
-
-            // Observe the image for lazy loading
-            lazyLoadObserver.observe(avatarImg);
-        } catch (error) {
-            console.error('Error fetching contributor details:', error);
-        }
+        const displayName = contributor.login;
+
+        const nameDiv = document.createElement('div');
+        nameDiv.classList.add('contributor-name');
+        nameDiv.textContent = displayName;
+
+        const contributionsCountBubbleDiv = document.createElement('div');
+        contributionsCountBubbleDiv.classList.add('contributions-count-bubble');
+        contributionsCountBubbleDiv.textContent = contributor.contributions;
+
+        contributorCard.appendChild(loginLink);
+        contributorCard.appendChild(nameDiv);
+        contributorCard.appendChild(contributionsCountBubbleDiv);
+        fragment.appendChild(contributorCard);
+
+        // Observe the image for lazy loading
+        lazyLoadObserver.observe(avatarImg);
     }
 
     cont.appendChild(fragment);

From c2a68c4bd26bcfd75be02111b0f37c3755d58856 Mon Sep 17 00:00:00 2001
From: Rakesh Roshan <roshanrakesh7362@gmail.com>
Date: Sun, 29 Dec 2024 05:20:35 +0530
Subject: [PATCH 6/7] Minor updates

---
 .gitignore                                    |  5 +---
 assets/css_files/contributor.css              | 26 ++++++++++++++-----
 assets/html_files/contributor.html            |  2 +-
 .../avatar_fallback.svg => images/avatar.svg} |  0
 assets/js_files/contributor.js                | 12 ++++-----
 5 files changed, 27 insertions(+), 18 deletions(-)
 rename assets/{svgs/avatar_fallback.svg => images/avatar.svg} (100%)

diff --git a/.gitignore b/.gitignore
index 2b2c8a95..85829d64 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,7 +19,4 @@ yarn-error.log*
 
 # Linux/Mac temporary files
 *.swp
-*.swo
-
-# testing files
-dummy/
\ No newline at end of file
+*.swo
\ No newline at end of file
diff --git a/assets/css_files/contributor.css b/assets/css_files/contributor.css
index 644d7987..e3a1457e 100644
--- a/assets/css_files/contributor.css
+++ b/assets/css_files/contributor.css
@@ -97,7 +97,7 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
-    width: 120px; 
+    width: 120px;
     margin: 10px;
     transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
     text-align: center;
@@ -167,18 +167,30 @@ body {
 }
 
 @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
 }
 
 @keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
 }
 
 #error-message {
-    color: red;
-    text-align: center;
+    color: white;
     padding: 20px;
     display: none;
+    font-size: 19px;
+    font-weight: 600;
+    text-align: center;
 }
\ No newline at end of file
diff --git a/assets/html_files/contributor.html b/assets/html_files/contributor.html
index 4214307e..6e74f1b4 100644
--- a/assets/html_files/contributor.html
+++ b/assets/html_files/contributor.html
@@ -101,7 +101,7 @@ <h1 class="heading">Our Valuable Contributors</h1>
             </div>
         </div>
         <div id="error-message">
-            Failed to load contributors. Please try again later.
+            Failed to load the contributors. Please try again later.
         </div>
     </div>
 
diff --git a/assets/svgs/avatar_fallback.svg b/assets/images/avatar.svg
similarity index 100%
rename from assets/svgs/avatar_fallback.svg
rename to assets/images/avatar.svg
diff --git a/assets/js_files/contributor.js b/assets/js_files/contributor.js
index 39fab36e..ca8eb5b3 100644
--- a/assets/js_files/contributor.js
+++ b/assets/js_files/contributor.js
@@ -41,7 +41,7 @@ const lazyLoadObserver = new IntersectionObserver((entries) => {
 /** loads a single page of contributors */
 async function fetchContributors(pageNumber) {
     if (isLoading) return;
-    
+
     isLoading = true;
     const perPage = 20; // Reduced number of items per page
     const apiUrl = '/.netlify/functions/contributors';
@@ -51,7 +51,7 @@ async function fetchContributors(pageNumber) {
         loadingSpinner.style.display = 'block';
 
         const response = await fetch(`${apiUrl}?page=${pageNumber}&per_page=${perPage}`);
-        
+
         if (!response.ok) {
             throw new Error(`Failed to fetch contributors. Status: ${response.status}`);
         }
@@ -60,10 +60,10 @@ async function fetchContributors(pageNumber) {
 
         // Check if we have more data to load
         hasMore = contributorsData.length === perPage;
-        
+
         // Create and append contributor cards
         await displayContributors(contributorsData);
-        
+
         currentPage++;
     } catch (error) {
         errorMessage.style.display = 'block';
@@ -71,7 +71,7 @@ async function fetchContributors(pageNumber) {
     } finally {
         isLoading = false;
         loadingSpinner.style.display = 'none';
-        
+
         // Add observer to the last card for infinite scroll
         const allCards = cont.querySelectorAll('.contributor-card');
         if (allCards.length > 0) {
@@ -93,7 +93,7 @@ async function displayContributors(contributors) {
         // Create avatar with lazy loading
         const avatarImg = document.createElement('img');
         avatarImg.classList.add('lazy');
-        avatarImg.src = '../svgs/avatar_fallback.svg'; // Add a placeholder image
+        avatarImg.src = '../images/avatar.svg'; // Add a placeholder image
         avatarImg.dataset.src = contributor.avatar_url;
         avatarImg.alt = `${contributor.login}'s Picture`;
 

From ba62b1a29f903da71e3bffea490687f1c2b5bba7 Mon Sep 17 00:00:00 2001
From: Rakesh Roshan <roshanrakesh7362@gmail.com>
Date: Sun, 29 Dec 2024 05:27:08 +0530
Subject: [PATCH 7/7] Few comments update

---
 assets/js_files/contributor.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/assets/js_files/contributor.js b/assets/js_files/contributor.js
index ca8eb5b3..978508b0 100644
--- a/assets/js_files/contributor.js
+++ b/assets/js_files/contributor.js
@@ -1,7 +1,7 @@
 const cont = document.getElementById('contributor');
 let currentPage = 1; // Start from page 1
 let isLoading = false; // Flag to track loading state
-let hasMore = true; // Flag to track if theres more data to load
+let hasMore = true; // Flag to track if there's more data to load
 
 // Loading spinner element
 const loadingSpinner = document.getElementById('loading-spinner');
@@ -16,11 +16,11 @@ const observerOptions = {
     threshold: 0.1
 };
 
-// use when one page is loaded, and then scroll down to load more
+// Use when one page is loaded, and then scroll down to load more
 const intersectionObserver = new IntersectionObserver((entries) => {
     entries.forEach(entry => {
         if (entry.isIntersecting && !isLoading && hasMore) {
-            // if intersecting, not in loading state, and has more data to load
+            // If intersecting, not in loading state, and has more data to load
             fetchContributors(currentPage);
         }
     });
@@ -38,12 +38,12 @@ const lazyLoadObserver = new IntersectionObserver((entries) => {
     });
 }, observerOptions);
 
-/** loads a single page of contributors */
+// Loads a single page of contributors
 async function fetchContributors(pageNumber) {
     if (isLoading) return;
 
     isLoading = true;
-    const perPage = 20; // Reduced number of items per page
+    const perPage = 20; // Number of items per page
     const apiUrl = '/.netlify/functions/contributors';
 
     try {
@@ -80,7 +80,7 @@ async function fetchContributors(pageNumber) {
     }
 }
 
-/** Displays the contributors on the page */
+// Displays the contributors on the page
 async function displayContributors(contributors) {
     const fragment = document.createDocumentFragment();