added Recent Github Activity thingy

dyzqy · Jul 3, 2024 · 94c16b9 · 94c16b9
1 parent fd68687
commit 94c16b9
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
     <!--<link rel="shortcut icon" href="./other/favicon.ico" type="image/x-icon" />-->
     <link rel="stylesheet" href="other/main.css">
     <link rel="stylesheet" href="other/cards.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
     <div class="topnav">
@@ -45,7 +46,7 @@ <h2 style="font-size: 20px;" class="card-title">Stick War (Flash) Games wiki</h2
             </a>
         </div>
         <div class="card">
-            <a target="_blank" href="https://github.com/dyzqy/Stick-War-2-Kaizo/releases/download/v1.1.1/SW2KaizoOfficial.swf">
+            <a target="_blank" href="https://discord.gg/ZY3fSbKKMQ">
                 <img src="/other/imgs/Madness.png" alt="mad">
                 <div class="card-content">
                     <h2 style="font-size: 20px;" class="card-title">Madness Accelerant Remake</h2>
@@ -54,9 +55,9 @@ <h2 style="font-size: 20px;" class="card-title">Madness Accelerant Remake</h2>
             </a>
         </div>
     </div>
-    <!--h2>Contact Me</h2>
-    <div class="contant-list">
-        <a href="https://www.youtube.com/c/asesson"><img src="other/contact/youtube.png" width="50" height="50" alt="yt"></a>
-    </div-->
+
+    <center><h1>Recent Github Activity</h1></center>
+    <canvas class="contributionsChart" id="contributionsChart" width="6" height="2"></canvas>
+    <script src="other/app.js"></script>
 </body>
 </html>
diff --git a/other/app.js 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
@@ -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
@@ -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;