Skip to content

Commit

Permalink
Added skeliton loading animation to contributors page
Browse files Browse the repository at this point in the history
  • Loading branch information
@pandeyji711
pandeyji711 committed Jun 12, 2024
1 parent 9223c9c commit 10d13f2
Show file tree
Hide file tree
Showing 3 changed files with 247 additions and 92 deletions.
117 changes: 116 additions & 1 deletion assets/contributors/contributor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<link rel="icon" href="../../favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="../../style.css" />
<link rel="stylesheet" type="text/css" href="./contributor.css" />
<link rel="stylesheet" type="text/css" href="./loading.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css">
Expand Down Expand Up @@ -61,7 +62,121 @@
</header>

<h1>Faces of Dedication: Our Contributing Heroes</h1>
<div id="contributor"></div>

<div id="contributor">
<div id="grid">
<!-- Placeholder elements -->
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<!-- Add more placeholders as needed -->
</div>
</div>

<!-------------------------------------Footer Code Starts --------------------------------------------->
<div class="footer-basic">
Expand Down
188 changes: 97 additions & 91 deletions assets/contributors/contributor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,124 +2,130 @@ 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");
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;
Expand Down
34 changes: 34 additions & 0 deletions assets/contributors/loading.css
View file
Original file line number Diff line number Diff line change
@@ -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%);
}
}

0 comments on commit 10d13f2

Please sign in to comment.