Try this
i call it the GCCE
GITHUB CONTRIBUTION CALENDAR EMBED
links:
- github.com/Ali-Cheikh/GCCE
- codepen.io/Ali-Cheikh/pen/QWXxBLq
Ali-Cheikh / GCCE
GitHub contribution calendar for the past 30 days, providing a visual representation of your GitHub activity.
30 Days GitHub Contribution Calendar
- first let me tell you why i made this all the old one's out there have 0 styling in them and takes a lot of time experience and effort to understand,
my layout is simple my code is vanilla its perfect for just putting it in your portfolio but still i do have a problem wich is that you can't commit it
on github without creating a .env file with the token and setting a react and node comunication server thingy wich may risk the code base by adding
tons of modules also can risk your account by making the token not only visible but also setting it up to be usable at least in my layout the token is
just there to read it wont do anyone any good hhhh
+ hope who's reading this can help
…index.html
<div class="calender">
<p class="port-text"> This is Github My Contribution Calendar of the month </p>
<center>
<div class="calendar-container">
<div id="days-of-week" class="days-of-week"></div>
<div id="calendar-grid" class="calendar-grid"></div>
<div class="legend">
less
<div class="legend-item low" title="Low contributions"></div>
<div class="legend-item medium" title="Medium contributions"></div>
<div class="legend-item high" title="High contributions"></div>
<div class="legend-item very-high" title="Very high contributions"></div>
more
</div>
</div>
</center>
<p class="port-text"> Ali Cheikh
<br> <u>using your personal <a href="https://github.com/settings/tokens" class="alink">Github Token</a> you can see your's </p></u>
</div>
script.js
document.addEventListener('DOMContentLoaded', () => {
const token = '<u>Replace with your GitHub token</u>'; // replace the text inside the brackets
const daysOfWeek = document.getElementById('days-of-week');
const calendarGrid = document.getElementById('calendar-grid');
const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
let currentDate = new Date();
function fetchGitHubContributions() {
const startOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).toISOString();
const endOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).toISOString();
const query = `
{
viewer {
contributionsCollection {
contributionCalendar {
weeks {
contributionDays {
date
contributionCount
}
}
}
}
}
}`;
return fetch('https://api.github.com/graphql', {
method: 'POST',
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({ query })
}).then(response => response.json());
}
function renderCalendar(contributions) {
const year = currentDate.getFullYear();
const month = currentDate.getMonth();
const firstDayOfMonth = new Date(year, month, 1).getDay();
const lastDateOfMonth = new Date(year, month + 1, 0).getDate();
// Clear previous content
daysOfWeek.innerHTML = '';
calendarGrid.innerHTML = '';
// Render days of the week
dayNames.forEach(day => {
const dayElement = document.createElement('div');
dayElement.className = 'day-of-week';
dayElement.textContent = day;
daysOfWeek.appendChild(dayElement);
});
// Add empty cells for the days before the first day of the month
for (let i = 0; i < firstDayOfMonth; i++) {
const emptyCell = document.createElement('div');
emptyCell.className = 'date-cell';
calendarGrid.appendChild(emptyCell);
}
// Add cells for each day of the month with contribution levels
const contributionsMap = new Map(contributions.map(c => [new Date(c.date).getDate(), c.contributionCount]));
for (let day = 1; day <= lastDateOfMonth; day++) {
const dateCell = document.createElement('div');
dateCell.className = 'date-cell';
dateCell.textContent = day;
// Set contribution level based on fetched data
const contributionCount = contributionsMap.get(day) || 0;
const level = getContributionLevel(contributionCount);
dateCell.classList.add(level);
calendarGrid.appendChild(dateCell);
}
}
function getContributionLevel(count) {
if (count >= 12) return 'very-high'; // For the darkest green
if (count >= 8) return 'high'; // For the dark green
if (count >= 1) return 'medium'; // For the light green
return 'low'; // For the lightest gray
}
function updateCalendar() {
fetchGitHubContributions().then(data => {
if (data.data) {
const contributions = data.data.viewer.contributionsCollection.contributionCalendar.weeks.flatMap(week => week.contributionDays);
const filteredContributions = contributions.filter(c => {
const contributionDate = new Date(c.date);
return contributionDate.getFullYear() === currentDate.getFullYear() &&
contributionDate.getMonth() === currentDate.getMonth();
});
renderCalendar(filteredContributions);
} else {
console.error('No contribution data found');
}
}).catch(error => console.error('Error fetching data:', error));
}
// Initial render
updateCalendar();
});
document.querySelectorAll('.legend-item').forEach(item => {
item.addEventListener('click', () => {
const level = item.classList[1]; // Get the level class (e.g., "low", "medium", "high", "very-high")
const newThreshold = prompt(`Enter the new threshold for ${level} contributions:`);
if (newThreshold !== null) {
contributionLevels[level] = parseInt(newThreshold);
updateCalendar();
}
});
});
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
.alink:link{
color:#da3e3e !important;
}
:root {
--color-primary: #191d2b;
--color-secondary: #da3e3e;
--color-white: #FFFFFF;
--color-black: #000;
--color-grey0: #f8f8f8;
--color-grey-1: #dbe1e8;
--color-grey-2: #b2becd;
--color-grey-3: #6c7983;
--color-grey-4: #a98114;
--color-grey-5: #2a2e35;
--color-grey-6: #12181b;
--br-sm-2: 14px;
--box-shadow-1: 0 3px 15px rgba(0,0,0,.3);
}
body {
background-color: var(--color-primary);
font-family: "Poppins", sans-serif;
font-size: 1.1rem;
color: var(--color-white);
transition: all 0.4s ease-in-out;
}
.timeline-blog{
color:var(--color-primary) ;
font-family: cursive;
}
.timeline-blog {
color:black ;
font-family: cursive;
.content-blog{
background-color: #94bb3b;
}
}
a {
display: inline-block;
text-decoration: none;
color: inherit;
font-family: inherit;
}
header {
min-height: 100vh;
color: var(--color-white);
overflow: hidden;
padding: 0 !important;
}
section {
min-height: 100vh;
width: 100%;
position: absolute;
left: 0;
top: 0;
padding: 3rem 18rem;
}
.container {
display: none;
transform: translateY(-100%) scale(0);
transition: all 0.4s ease-in-out;
background-color: var(--color-primary);
}
.active {
display: block;
animation: appear 1s ease-in-out;
transform: translateY(0) scaleY(1);
}
@keyframes appear {
0% {
transform: translateY(-100%) scaleY(0);
}
100% {
transform: translateY(0) scaleY(1);
}
}
body.loaded { overflow: overlay; }
body.nav-active { overflow: hidden; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background-color: var(--white);
border-radius: 20px;
}
.calendar {
background-color: #1a202c; /* Dark background */
color: #cbd5e0; /* Light text color */
display: flex;
justify-content: center;
align-items: center;display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 2rem;
margin-top: 3rem;
}
.port-text {
padding: 2rem 0;
text-align: center;
}
.calendar-container {
width: 90%;
max-width: 600px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
color: #e0e0e0;
padding: 10px;
padding-bottom: 20px;
position: relative; /* Needed for positioning the legend */
}
.days-of-week {
display: grid;
grid-template-columns: repeat(7, 1fr);
background-color: #2b2b2b; /* Background for days of the week */
border-bottom: 1px solid #444;
}
.day-of-week {
text-align: center;
padding: 5px;
font-weight: bold;
font-size: 0.8em; /* Smaller font size for days of the week */
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
padding: 10px;
}
.date-cell {
width: 100%;
height: 20px; /* Smaller height for date cells */
border-radius: 4px;
text-align: center;
cursor: pointer;
background-color: #2e2e2e;
font-size: 0.8em; /* Smaller font size for dates */
}
.date-cell.low {
background-color: #312f2f; /* Fade gray */
}
.date-cell.medium {
background-color: #c6e48b; /* Light green */
color: #0009;
}
.date-cell.high {
background-color: #7bc96f; /* Medium green */
color: #0017;
}
.date-cell.very-high {
background-color: #239a3b; /* Dark green */
}
.date-cell:hover {
background-color: #00ccff2f; /* Light cyan on hover */
}
/* New legend styles */
.legend {
position: absolute;
display: flex;
gap: 5px;
background-color: #1a202c;
border-radius: 2px;
font-size: small;
}
/* Styling for individual legend items */
.legend-item {
margin-top: 5px;
width: 10px;
height: 10px;
border: 1px solid #444; /* Border color to match the calendar */
}
/* Color styles for legend items */
.legend-item.low {
background-color: #312f2f; /* Fade gray */
}
.legend-item.medium {
background-color: #c6e48b; /* Light green */
}
.legend-item.high {
background-color: #7bc96f; /* Medium green */
}
.legend-item.very-high {
background-color: #239a3b; /* Dark green */
}
/* Optional: Add hover effect for legend items */
.legend-item:hover {
border-color: #00ccff; /* Change border color on hover */
}
/* Additional styles for responsiveness */
@media screen and (max-width: 768px) {
.calendar-container {
width: 95%;
}
.date-cell {
height: 30px;
font-size: 1em;
}
}
Top comments (0)