From 94c16b9ee8eb3c95440b6455a840dbad3f30e087 Mon Sep 17 00:00:00 2001 From: Ase's Son Date: Wed, 3 Jul 2024 11:33:36 +0200 Subject: [PATCH] added Recent Github Activity thingy --- index.html | 11 ++++--- other/app.js | 85 +++++++++++++++++++++++++++++++++++++++++++++++++ other/cards.css | 11 ++++++- other/main.css | 30 ++++++++++------- 4 files changed, 119 insertions(+), 18 deletions(-) create mode 100644 other/app.js diff --git a/index.html b/index.html index e98e944..b2e8356 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ +
@@ -45,7 +46,7 @@

Stick War (Flash) Games wiki

- + mad
- + +

Recent Github Activity

+ + diff --git a/other/app.js b/other/app.js new file mode 100644 index 0000000..a7b666a --- /dev/null +++ b/other/app.js @@ -0,0 +1,85 @@ +const fetchContributions = async (username) => { + const response = await fetch(`https://api.github.com/users/${username}/events`); + if (!response.ok) { + throw new Error('Network response was not ok'); + } + const data = await response.json(); + + // Process the events to count contributions per day + const contributions = {}; + data.forEach(event => { + const date = event.created_at.split('T')[0]; // Get the date part + if (!contributions[date]) { + contributions[date] = 0; + } + contributions[date]++; + }); + + // Convert contributions object to array + const contributionArray = Object.keys(contributions).map(date => ({ + date: date, + contributionCount: contributions[date] + })); + + return contributionArray; +}; + +const prepareChartData = (contributions) => { + const dates = contributions.map(item => item.date); + const counts = contributions.map(item => item.contributionCount); + return { dates, counts }; +}; + +const createChart = (dates, contributions) => { + const ctx = document.getElementById('contributionsChart').getContext('2d'); + new Chart(ctx, { + type: 'bar', + data: { + labels: dates, + datasets: [{ + label: 'Contributions', + data: contributions, + backgroundColor: 'rgb(113, 227, 180)', + borderWidth: 0 + }] + }, + options: { + scales: { + x: { + display: true, + title: { + display: true, + text: 'Date' + } + }, + y: { + display: true, + title: { + display: true, + text: 'Contributions' + }, + beginAtZero: true + } + }, + plugins: { + title: { + display: true, + text: 'Daily Contributions' + } + } + } + }); +}; + +const init = async () => { + const username = 'dyzqy'; // Replace with your GitHub username + try { + const contributions = await fetchContributions(username); + const { dates, counts } = prepareChartData(contributions); + createChart(dates, counts); + } catch (error) { + console.error('Error fetching contributions:', error); + } +}; + +init(); diff --git a/other/cards.css b/other/cards.css index 1d9a7cb..5f974a6 100644 --- a/other/cards.css +++ b/other/cards.css @@ -3,7 +3,11 @@ flex-wrap: wrap; justify-content: space-evenly; gap: 0px; - padding: 20px 150px 50px 150px; + padding-bottom: 50px; + padding-top: 20px; + padding-left: 150px; + padding-right: 150px; + /*device-width*/ } .card { @@ -49,6 +53,11 @@ } } +.card +{ + margin-bottom: 10px; +} + .card a { text-decoration: none; } diff --git a/other/main.css b/other/main.css index ecb873a..1902b9f 100644 --- a/other/main.css +++ b/other/main.css @@ -129,19 +129,25 @@ th { } } -::-webkit-scrollbar { - width: 12px; /* Width of the scrollbar */ - } - - /* Style the scrollbar thumb */ - ::-webkit-scrollbar-thumb { - background-color: lightgray; /* Set the thumb color */ - border-radius: 10px; /* Round the edges of the thumb */ - } - - ::-webkit-scrollbar-thumb:hover { +.contributionsChart { + margin: 0px 175px 0px 175px; +} + +::-webkit-scrollbar +{ + width: 12px; +} + +::-webkit-scrollbar-thumb +{ + background-color: lightgray; + border-radius: 10px; +} + +::-webkit-scrollbar-thumb:hover +{ background-color: gray; - } +} #note { font-size: 15px;