From 33bc9032946170e5ff5a6ad2491329f3118e100e Mon Sep 17 00:00:00 2001 From: Anurag Pandey Date: Wed, 19 Jun 2024 14:36:51 +0530 Subject: [PATCH] Added contributor page enaable dark mode --- new-website/contibuters.js | 129 ++++++++++++++++++++++ new-website/contributor.html | 208 +++++++++++++++++++++++++++++++++++ new-website/contributors.css | 88 +++++++++++++++ 3 files changed, 425 insertions(+) create mode 100644 new-website/contibuters.js create mode 100644 new-website/contributor.html create mode 100644 new-website/contributors.css diff --git a/new-website/contibuters.js b/new-website/contibuters.js new file mode 100644 index 00000000..8a092942 --- /dev/null +++ b/new-website/contibuters.js @@ -0,0 +1,129 @@ +// const hamBurger = document.querySelector(".hamburger"); +// const nMenu = document.querySelector(".nav-menu"); + +// document.addEventListener("DOMContentLoaded", function () { +// setTimeout(function () { +// document.querySelector("body").classList.add("loaded"); +// }, 500); +// }); +const loading = document.getElementById("loading1"); +loading.innerHTML = `

Loading

`; +// Hamburger menu +// hamBurger.addEventListener("click", mobileMenu); +// function mobileMenu() { +// hamBurger.classList.toggle("active"); +// nMenu.classList.toggle("active"); +// } + +const cont = document.getElementById("contributor"); +const owner = "jfmartinz"; +const repoName = "ResourceHub"; + +async function fetchContributors(pageNumber) { + const apiUrl = + "https://script.googleusercontent.com/macros/echo?user_content_key=SOnBnlAhhwAY2lLH5HfppGmJGT_2ps5V6IQnMqMGBXbQfQRkZzw_v_5iRGG0aocf2N5fb1QagfriAH_KtdGjmF5EZ-d2l64Mm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnC62rQSNc23BPEU_1j4s8hh_HP6kAPpX9xtypcE4mPgzpikbBkSG4MZLP8aImUTewbmUkdfzbTtyUarIvNXMDMKXAagsogLIsQ&lib=MghKih2WtI3ppVHa2nSvtXXt7vnFOnL-L"; + + 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(); + console.log(data); // Log the response data + 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 (loading) loading.innerHTML = ``; + 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}%)`; +}; + +window.addEventListener("scroll", function () { + var scrollToTopButton = document.getElementById("progress"); + if (window.pageYOffset > 200) { + scrollToTopButton.style.display = "block"; + } else { + scrollToTopButton.style.display = "none"; + } +}); + +window.onscroll = calcScrollValue; +window.onload = calcScrollValue; diff --git a/new-website/contributor.html b/new-website/contributor.html new file mode 100644 index 00000000..8346388a --- /dev/null +++ b/new-website/contributor.html @@ -0,0 +1,208 @@ + + + + + + + ResourceHub + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ ResourceHub + +
+ + + + + + +
+ +
+ + +
+
+ +
+
+
+

Faces of Dedication: Our Contributing Heroes

+ +
+
+ +
+
+
+
+ ResourceHub Image +

ResourceHub

+
+

ResourceHub is an open-source project that serves as a one-stop repository of + valuable resources curated by the amazing contributors in the community

+
+ + + + + + + + + + +
+
+
+ +
+
+
+

Copyright © 2024 ResourceHub. All Rights Reserved.

+
+
+
+ + + +
+
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/new-website/contributors.css b/new-website/contributors.css new file mode 100644 index 00000000..357347c1 --- /dev/null +++ b/new-website/contributors.css @@ -0,0 +1,88 @@ +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} +.contributor-card:nth-child(4n+1), +.contributor-card:nth-child(4n+3) { + margin-top: -4px; +} + +.contributor-card { + width: 95px; + height: 95px; + clip-path: circle(40%); + margin: 5px; + transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; +} + +.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 */ +} +h1 { + font-family: Arial, sans-serif; + font-weight: bold; + margin-top: 25px; + font-size: 45px; + color: var(--light); + text-align: center; + transition: color 0.3s ease-in-out; + cursor: pointer; + } + + h1:hover { + color: var(--primary); + } + + #contributor { + margin: 0; + padding: 50px 0; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + } + .loading{ + font-size: xx-large; + } + .loading:after { + overflow: hidden; + display: inline-block; + vertical-align: bottom; + -webkit-animation: ellipsis steps(4, end) 900ms infinite; + animation: ellipsis steps(4, end) 900ms infinite; + content: "\2026"; + /* ascii code for the ellipsis character */ + width: 0px; + } + + @keyframes ellipsis { + to { + width: 40px; + } + } + + @-webkit-keyframes ellipsis { + to { + width: 40px; + } + } + ::before, + ::after { + --tw-content: ''; + } + \ No newline at end of file