From 10d13f23f6a60670f7d08d15bad18da1a3ae9c5a Mon Sep 17 00:00:00 2001 From: Anurag Pandey Date: Wed, 12 Jun 2024 16:43:48 +0530 Subject: [PATCH 1/5] Added skeliton loading animation to contributors page --- assets/contributors/contributor.html | 117 ++++++++++++++++- assets/contributors/contributor.js | 188 ++++++++++++++------------- assets/contributors/loading.css | 34 +++++ 3 files changed, 247 insertions(+), 92 deletions(-) create mode 100644 assets/contributors/loading.css diff --git a/assets/contributors/contributor.html b/assets/contributors/contributor.html index 655a0ccb1..8bd25d4db 100644 --- a/assets/contributors/contributor.html +++ b/assets/contributors/contributor.html @@ -8,6 +8,7 @@ + @@ -61,7 +62,121 @@

Faces of Dedication: Our Contributing Heroes

-
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
diff --git a/assets/contributors/contributor.js b/assets/contributors/contributor.js index 1c4ce55ba..9f732a57d 100644 --- a/assets/contributors/contributor.js +++ b/assets/contributors/contributor.js @@ -2,17 +2,17 @@ const hamBurger = document.querySelector(".hamburger"); const nMenu = document.querySelector(".nav-menu"); document.addEventListener("DOMContentLoaded", function () { - setTimeout(function () { - document.querySelector("body").classList.add("loaded"); - }, 500); + setTimeout(function () { + document.querySelector("body").classList.add("loaded"); + }, 500); }); // Hamburger menu hamBurger.addEventListener("click", mobileMenu); function mobileMenu() { - hamBurger.classList.toggle("active"); - nMenu.classList.toggle("active"); + hamBurger.classList.toggle("active"); + nMenu.classList.toggle("active"); } const cont = document.getElementById("contributor"); @@ -20,106 +20,112 @@ const owner = "Rakesh9100"; const repoName = "CalcDiverse"; async function fetchContributors(pageNumber) { - const apiUrl = "https://script.googleusercontent.com/macros/echo?user_content_key=HIngl5N6XqT87RP5_NGfOvh4Owd0vsFxGl4j7WfN5JA7XmZ3wfLP6Lm9KtE8MvYr-xqtib3jFCNoJ3gLd--RXPTM6yeCqYRMm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnJlUuZlL1ANkgTfzluynVq_ujwIhHMAx6EPfzKkWJ1uCshAjBuwXySyQgwTqiBx63rp_lIW_4lqd8qNYusW-W_j7amvZZ0XS2Q&lib=MVYp2QNGGJIwIlwc0BFDww2ojRkgaZCOe"; - - async function getkey() { - try { - const response = await fetch(apiUrl); - if (!response.ok) { - throw new Error("Network response was not ok"); - } - const data = await response.json(); - return data.apik[0].apikey; - } catch (error) { - console.error("Error fetching data:", error); - } - } - const token = await getkey(); - const perPage = 100; - const url = `https://api.github.com/repos/${owner}/${repoName}/contributors?page=${pageNumber}&per_page=${perPage}`; - - const response = await fetch(url, { - headers: { - Authorization: `Bearer ${token}`, - }, - }); - if (!response.ok) { - throw new Error( - `Failed to fetch contributors data. Status code: ${response.status}` - ); - } + const apiUrl = + "https://script.googleusercontent.com/macros/echo?user_content_key=HIngl5N6XqT87RP5_NGfOvh4Owd0vsFxGl4j7WfN5JA7XmZ3wfLP6Lm9KtE8MvYr-xqtib3jFCNoJ3gLd--RXPTM6yeCqYRMm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnJlUuZlL1ANkgTfzluynVq_ujwIhHMAx6EPfzKkWJ1uCshAjBuwXySyQgwTqiBx63rp_lIW_4lqd8qNYusW-W_j7amvZZ0XS2Q&lib=MVYp2QNGGJIwIlwc0BFDww2ojRkgaZCOe"; - const contributorsData = await response.json(); - return contributorsData; + async function getkey() { + try { + const response = await fetch(apiUrl); + if (!response.ok) { + throw new Error("Network response was not ok"); + } + const data = await response.json(); + return data.apik[0].apikey; + } catch (error) { + console.error("Error fetching data:", error); + } + } + const token = await getkey(); + const perPage = 100; + const url = `https://api.github.com/repos/${owner}/${repoName}/contributors?page=${pageNumber}&per_page=${perPage}`; + + const response = await fetch(url, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + if (!response.ok) { + throw new Error( + `Failed to fetch contributors data. Status code: ${response.status}` + ); + } + + const contributorsData = await response.json(); + + return contributorsData; } // Function to fetch all contributors async function fetchAllContributors() { - let allContributors = []; - let pageNumber = 1; - - try { - while (true) { - const contributorsData = await fetchContributors(pageNumber); - if (contributorsData.length === 0) { - break; - } - allContributors = allContributors.concat(contributorsData); - pageNumber++; - } - allContributors.forEach((contributor) => { - if (contributor.login === owner) { - return; - } - - 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`; - - const loginLink = document.createElement("a"); - loginLink.href = contributor.html_url; - loginLink.target = "_blank"; - loginLink.appendChild(avatarImg); - - contributorCard.appendChild(loginLink); - - cont.appendChild(contributorCard); - }); - } catch (error) { - console.error(error); + // const loading = document.getElementById("grid"); + // if (loading) loading.remove(loading.firstChild); + let allContributors = []; + let pageNumber = 1; + + try { + while (true) { + const contributorsData = await fetchContributors(pageNumber); + if (contributorsData.length === 0) { + break; + } + allContributors = allContributors.concat(contributorsData); + pageNumber++; } + allContributors.forEach((contributor) => { + const loading = document.getElementById("grid"); + if (loading) loading.remove(loading.firstChild); + if (contributor.login === owner) { + return; + } + + 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`; + + const loginLink = document.createElement("a"); + loginLink.href = contributor.html_url; + loginLink.target = "_blank"; + loginLink.appendChild(avatarImg); + + contributorCard.appendChild(loginLink); + + cont.appendChild(contributorCard); + }); + } catch (error) { + console.error(error); + } } fetchAllContributors(); let calcScrollValue = () => { - let scrollProg = document.getElementById("progress"); - let pos = document.documentElement.scrollTop; - let calcHeight = - document.documentElement.scrollHeight - - document.documentElement.clientHeight; - let scrollValue = Math.round((pos * 100) / calcHeight); - if (pos > 100) { - scrollProg.style.display = "grid"; - } else { - scrollProg.style.display = "none"; - } - scrollProg.addEventListener("click", () => { - document.documentElement.scrollTop = 0; - }); - scrollProg.style.background = `conic-gradient(#0063ba ${scrollValue}%, #d499de ${scrollValue}%)`; + let scrollProg = document.getElementById("progress"); + let pos = document.documentElement.scrollTop; + let calcHeight = + document.documentElement.scrollHeight - + document.documentElement.clientHeight; + let scrollValue = Math.round((pos * 100) / calcHeight); + if (pos > 100) { + scrollProg.style.display = "grid"; + } else { + scrollProg.style.display = "none"; + } + scrollProg.addEventListener("click", () => { + document.documentElement.scrollTop = 0; + }); + scrollProg.style.background = `conic-gradient(#0063ba ${scrollValue}%, #d499de ${scrollValue}%)`; }; window.addEventListener("scroll", function () { - var scrollToTopButton = document.getElementById("progress"); - if (window.pageYOffset > 200) { - scrollToTopButton.style.display = "block"; - } else { - scrollToTopButton.style.display = "none"; - } + var scrollToTopButton = document.getElementById("progress"); + if (window.pageYOffset > 200) { + scrollToTopButton.style.display = "block"; + } else { + scrollToTopButton.style.display = "none"; + } }); window.onscroll = calcScrollValue; diff --git a/assets/contributors/loading.css b/assets/contributors/loading.css new file mode 100644 index 000000000..abdb61a54 --- /dev/null +++ b/assets/contributors/loading.css @@ -0,0 +1,34 @@ + + #grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + gap: 10px; + width: 90%; + /* max-width: 1200px; */ + } + .placeholder { + width: 95px; + height: 95px; + background-color: #ccc; + border-radius: 50%; + position: relative; + overflow: hidden; + } + .placeholder::after { + content: ''; + position: absolute; + top: 0; + left: -150%; + width: 200%; + height: 100%; + background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%); + animation: loading 0.7s infinite; + } +@keyframes loading { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(100%); + } +} From e86761211d65671b8e1b04aeaf51b2e35815ade2 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Fri, 14 Jun 2024 19:38:27 +0530 Subject: [PATCH 2/5] Update contributor.html --- assets/contributors/contributor.html | 147 +++++++++++++-------------- 1 file changed, 73 insertions(+), 74 deletions(-) diff --git a/assets/contributors/contributor.html b/assets/contributors/contributor.html index 8bd25d4db..191ea3da3 100644 --- a/assets/contributors/contributor.html +++ b/assets/contributors/contributor.html @@ -8,7 +8,6 @@ - @@ -103,79 +102,79 @@

Faces of Dedication: Our Contributing Heroes

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+ @@ -210,4 +209,4 @@

Faces of Dedication: Our Contributing Heroes

- \ No newline at end of file + From 16da6831d124f4c2605e8d67ac8be92241da37d7 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Fri, 14 Jun 2024 19:41:28 +0530 Subject: [PATCH 3/5] Update contributor.css --- assets/contributors/contributor.css | 87 ++++++++++++++++++++--------- 1 file changed, 60 insertions(+), 27 deletions(-) diff --git a/assets/contributors/contributor.css b/assets/contributors/contributor.css index 82569139e..ebbc8391e 100644 --- a/assets/contributors/contributor.css +++ b/assets/contributors/contributor.css @@ -6,11 +6,37 @@ --dark: #f50414; } +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + html { font-size: 62.5%; scroll-behavior: smooth; } +body { + justify-content: center; + align-items: center; + min-height: 100vh; + background-image: url(../../assets/images/background.jpg); + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + font-size: 1.4rem; +} + +body, +html { + font-family: "Poppins", sans-serif; + font-weight: 300; + line-height: 1.4; + scroll-behavior: smooth; +} + h1 { font-family: Arial, sans-serif; font-weight: bold; @@ -35,34 +61,45 @@ h1:hover { align-items: center; } -* { - margin: 0; - padding: 0; - box-sizing: border-box; +#grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + gap: 10px; + width: 90%; } -div { - display: block; +.placeholder { + width: 95px; + height: 95px; + background-color: #ccc; + border-radius: 50%; + position: relative; + overflow: hidden; } -body, -html { - font-family: "Poppins", sans-serif; - font-weight: 300; - line-height: 1.4; - scroll-behavior: smooth; +.placeholder::after { + content: ''; + position: absolute; + top: 0; + left: -150%; + width: 200%; + height: 100%; + background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%); + animation: loading 0.7s infinite; } -body { - justify-content: center; - align-items: center; - min-height: 100vh; - background-image: url(../../assets/images/background.jpg); - background-attachment: fixed; - background-position: center; - background-repeat: no-repeat; - background-size: cover; - font-size: 1.4rem; +@keyframes loading { + 0% { + transform: translateX(-100%); + } + + 100% { + transform: translateX(100%); + } +} + +div { + display: block; } .contributor-card:nth-child(4n+1), @@ -80,14 +117,12 @@ body { .contributor-card:hover { box-shadow: 0 0 10px rgba(253, 251, 251, 0.5); - /* Adjust the color and size of the glow as needed */ } .contributor-card:active { transform: scale(1.1); opacity: 0.8; box-shadow: 0 0 20px rgb(188, 240, 210); - /* Adjust the color and size of the glow as needed */ } /* Footer Styling */ @@ -196,7 +231,6 @@ body { bottom: 0; right: 0; margin: 0 2rem 2rem 0; - height: fit-content; width: fit-content; z-index: 100000; @@ -207,8 +241,7 @@ body { height: 42px; width: 42px; background-color: rgba(255, 255, 255, 0.9); - border: 0; cursor: pointer; box-shadow: 0px 0px 10px 1px palevioletred; -} \ No newline at end of file +} From 041ff55554a4885c4fab29b744fd924a0a2e7c07 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Fri, 14 Jun 2024 19:42:12 +0530 Subject: [PATCH 4/5] Delete assets/contributors/loading.css --- assets/contributors/loading.css | 34 --------------------------------- 1 file changed, 34 deletions(-) delete mode 100644 assets/contributors/loading.css diff --git a/assets/contributors/loading.css b/assets/contributors/loading.css deleted file mode 100644 index abdb61a54..000000000 --- a/assets/contributors/loading.css +++ /dev/null @@ -1,34 +0,0 @@ - - #grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); - gap: 10px; - width: 90%; - /* max-width: 1200px; */ - } - .placeholder { - width: 95px; - height: 95px; - background-color: #ccc; - border-radius: 50%; - position: relative; - overflow: hidden; - } - .placeholder::after { - content: ''; - position: absolute; - top: 0; - left: -150%; - width: 200%; - height: 100%; - background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%); - animation: loading 0.7s infinite; - } -@keyframes loading { - 0% { - transform: translateX(-100%); - } - 100% { - transform: translateX(100%); - } -} From f6d3a99d3d42b1f9b63c76fea08be01f78d4742d Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Fri, 14 Jun 2024 19:43:56 +0530 Subject: [PATCH 5/5] Update contributor.js --- assets/contributors/contributor.js | 193 ++++++++++++++--------------- 1 file changed, 96 insertions(+), 97 deletions(-) diff --git a/assets/contributors/contributor.js b/assets/contributors/contributor.js index 9f732a57d..0cdfe29e6 100644 --- a/assets/contributors/contributor.js +++ b/assets/contributors/contributor.js @@ -2,17 +2,17 @@ const hamBurger = document.querySelector(".hamburger"); const nMenu = document.querySelector(".nav-menu"); document.addEventListener("DOMContentLoaded", function () { - setTimeout(function () { - document.querySelector("body").classList.add("loaded"); - }, 500); + setTimeout(function () { + document.querySelector("body").classList.add("loaded"); + }, 500); }); // Hamburger menu hamBurger.addEventListener("click", mobileMenu); function mobileMenu() { - hamBurger.classList.toggle("active"); - nMenu.classList.toggle("active"); + hamBurger.classList.toggle("active"); + nMenu.classList.toggle("active"); } const cont = document.getElementById("contributor"); @@ -20,112 +20,111 @@ const owner = "Rakesh9100"; const repoName = "CalcDiverse"; async function fetchContributors(pageNumber) { - const apiUrl = - "https://script.googleusercontent.com/macros/echo?user_content_key=HIngl5N6XqT87RP5_NGfOvh4Owd0vsFxGl4j7WfN5JA7XmZ3wfLP6Lm9KtE8MvYr-xqtib3jFCNoJ3gLd--RXPTM6yeCqYRMm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnJlUuZlL1ANkgTfzluynVq_ujwIhHMAx6EPfzKkWJ1uCshAjBuwXySyQgwTqiBx63rp_lIW_4lqd8qNYusW-W_j7amvZZ0XS2Q&lib=MVYp2QNGGJIwIlwc0BFDww2ojRkgaZCOe"; - - async function getkey() { - try { - const response = await fetch(apiUrl); - if (!response.ok) { - throw new Error("Network response was not ok"); - } - const data = await response.json(); - return data.apik[0].apikey; - } catch (error) { - console.error("Error fetching data:", error); + const apiUrl = "https://script.googleusercontent.com/macros/echo?user_content_key=HIngl5N6XqT87RP5_NGfOvh4Owd0vsFxGl4j7WfN5JA7XmZ3wfLP6Lm9KtE8MvYr-xqtib3jFCNoJ3gLd--RXPTM6yeCqYRMm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnJlUuZlL1ANkgTfzluynVq_ujwIhHMAx6EPfzKkWJ1uCshAjBuwXySyQgwTqiBx63rp_lIW_4lqd8qNYusW-W_j7amvZZ0XS2Q&lib=MVYp2QNGGJIwIlwc0BFDww2ojRkgaZCOe"; + + async function getkey() { + try { + const response = await fetch(apiUrl); + if (!response.ok) { + throw new Error("Network response was not ok"); + } + const data = await response.json(); + return data.apik[0].apikey; + } catch (error) { + console.error("Error fetching data:", error); + } } - } - const token = await getkey(); - const perPage = 100; - const url = `https://api.github.com/repos/${owner}/${repoName}/contributors?page=${pageNumber}&per_page=${perPage}`; - - const response = await fetch(url, { - headers: { - Authorization: `Bearer ${token}`, - }, - }); - if (!response.ok) { - throw new Error( - `Failed to fetch contributors data. Status code: ${response.status}` - ); - } - - const contributorsData = await response.json(); - - return contributorsData; -} - -// Function to fetch all contributors -async function fetchAllContributors() { - // const loading = document.getElementById("grid"); - // if (loading) loading.remove(loading.firstChild); - let allContributors = []; - let pageNumber = 1; - - try { - while (true) { - const contributorsData = await fetchContributors(pageNumber); - if (contributorsData.length === 0) { - break; - } - allContributors = allContributors.concat(contributorsData); - pageNumber++; + const token = await getkey(); + const perPage = 100; + const url = `https://api.github.com/repos/${owner}/${repoName}/contributors?page=${pageNumber}&per_page=${perPage}`; + + const response = await fetch(url, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + if (!response.ok) { + throw new Error( + `Failed to fetch contributors data. Status code: ${response.status}` + ); } - allContributors.forEach((contributor) => { - const loading = document.getElementById("grid"); - if (loading) loading.remove(loading.firstChild); - if (contributor.login === owner) { - return; - } - const contributorCard = document.createElement("div"); - contributorCard.classList.add("contributor-card"); + const contributorsData = await response.json(); - const avatarImg = document.createElement("img"); - avatarImg.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); + return contributorsData; +} - contributorCard.appendChild(loginLink); +// Function to fetch all contributors +async function fetchAllContributors() { + // const loading = document.getElementById("grid"); + // if (loading) loading.remove(loading.firstChild); + let allContributors = []; + let pageNumber = 1; - cont.appendChild(contributorCard); - }); - } catch (error) { - console.error(error); - } + try { + while (true) { + const contributorsData = await fetchContributors(pageNumber); + if (contributorsData.length === 0) { + break; + } + allContributors = allContributors.concat(contributorsData); + pageNumber++; + } + allContributors.forEach((contributor) => { + const loading = document.getElementById("grid"); + if (loading) loading.remove(loading.firstChild); + if (contributor.login === owner) { + return; + } + + 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`; + + const loginLink = document.createElement("a"); + loginLink.href = contributor.html_url; + loginLink.target = "_blank"; + loginLink.appendChild(avatarImg); + + contributorCard.appendChild(loginLink); + + cont.appendChild(contributorCard); + }); + } catch (error) { + console.error(error); + } } fetchAllContributors(); let calcScrollValue = () => { - let scrollProg = document.getElementById("progress"); - let pos = document.documentElement.scrollTop; - let calcHeight = - document.documentElement.scrollHeight - - document.documentElement.clientHeight; - let scrollValue = Math.round((pos * 100) / calcHeight); - if (pos > 100) { - scrollProg.style.display = "grid"; - } else { - scrollProg.style.display = "none"; - } - scrollProg.addEventListener("click", () => { - document.documentElement.scrollTop = 0; - }); - scrollProg.style.background = `conic-gradient(#0063ba ${scrollValue}%, #d499de ${scrollValue}%)`; + let scrollProg = document.getElementById("progress"); + let pos = document.documentElement.scrollTop; + let calcHeight = + document.documentElement.scrollHeight - + document.documentElement.clientHeight; + let scrollValue = Math.round((pos * 100) / calcHeight); + if (pos > 100) { + scrollProg.style.display = "grid"; + } else { + scrollProg.style.display = "none"; + } + scrollProg.addEventListener("click", () => { + document.documentElement.scrollTop = 0; + }); + scrollProg.style.background = `conic-gradient(#0063ba ${scrollValue}%, #d499de ${scrollValue}%)`; }; window.addEventListener("scroll", function () { - var scrollToTopButton = document.getElementById("progress"); - if (window.pageYOffset > 200) { - scrollToTopButton.style.display = "block"; - } else { - scrollToTopButton.style.display = "none"; - } + var scrollToTopButton = document.getElementById("progress"); + if (window.pageYOffset > 200) { + scrollToTopButton.style.display = "block"; + } else { + scrollToTopButton.style.display = "none"; + } }); window.onscroll = calcScrollValue;