From 3912506f24b3c2971187d37d0b37982969c900e6 Mon Sep 17 00:00:00 2001
From: teddy <edward.middletonsmith@gmail.com>
Date: Wed, 5 Mar 2025 13:04:57 +0000
Subject: [PATCH] Feat: GitHub contributions calendar added to bottom of page.

---
 index.html         | 61 +++++++++++++++++++++++++++++++++++++++++++++-
 scripts/scripts.js | 10 --------
 styles/styles.css  | 28 +++++++++++++++++++++
 3 files changed, 88 insertions(+), 11 deletions(-)
diff --git a/index.html b/index.html
index b7bbf3b..8b9f2f3 100644
--- a/index.html
+++ b/index.html
@@ -7,9 +7,22 @@
     <!-- SEO -->
     <meta name="yandex-verification" content="6d6eae9d533ef680" />
     <!-- Security -->
+    <!--
     <meta http-equiv="X-Frame-Options" content="SAMEORIGIN">
     <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate">
-    <!-- Stylesheet -->
+    -->
+    <!-- Stylesheets -->
+    <!-- 
+        GitHub Contributions Calendar (light mode default)
+            - Statistics under calendar do not work.
+    -->
+        <link rel="stylesheet" href="https://unpkg.com/github-calendar@latest/dist/github-calendar-responsive.css" /> 
+    <!-- 
+        GitHub Contributions Calendar (dark mode default)
+            - Statistics under calendar do not work.
+            - Requires https://github.com/forresttindall/Github-Activity-Calendar
+        <link rel="stylesheet" href="./Github-Activity-Calendar/github-calendar.css"/>
+    -->
     <link rel="stylesheet" href="styles/styles.css">
 </head>
 <body>
@@ -200,6 +213,9 @@
                     <li>LinkedIn: <a href="https://www.linkedin.com/in/teddyms/">linkedin.com/in/teddyms</a></li>
                     <li>GitHub: <a href="https://github.com/Teddy-1024/">github.com/Teddy-1024</a></li>
                 </ul>
+                <div class="github-calendar">
+                    <!-- GitHub activity calendar will be rendered here -->
+                </div>
             </div>
         </section>
     </main>
@@ -210,8 +226,51 @@
     </footer>
 
     <!-- Scripts -->
+    <!-- Internal -->
     <script type="text/javascript" src="scripts/scripts.js"></script>
+    <!-- External -->
+    <!-- Google Translate -->
+    <script>
+        function initGoogleTranslateElement() {
+            new google.translate.TranslateElement({
+                pageLanguage: 'en',
+                // layout: google.translate.TranslateElement.InlineLayout.SIMPLE
+                layout: google.translate.TranslateElement.InlineLayout.VERTICAL
+            }, 'google_translate_element');
+        }
+    </script>
     <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=initGoogleTranslateElement"></script>
+    <!-- 
+        GitHub Contributions Calendar (light mode default)
+            - Statistics under calendar do not work.
+    -->
+    <script src="https://unpkg.com/github-calendar@latest/dist/github-calendar.min.js"></script>
+    <script>
+        // Basic implementation
+        // e - statistics are all 0
+        // GitHubCalendar(".github-calendar", "Teddy-1024");
+        
+        // Or with responsive option enabled:
+        // e - statistics are all 0
+        // GitHubCalendar(".github-calendar", "Teddy-1024", { responsive: true });
+
+        GitHubCalendar(".github-calendar", "Teddy-1024", {
+            responsive: true,
+            proxy: function(username) {
+            return fetch(`https://cors-anywhere.herokuapp.com/https://github.com/users/${username}/contributions`)
+                .then(response => response.text());
+            }
+        });
+    </script>
+    <!-- 
+        GitHub Contributions Calendar (dark mode default)
+            - Statistics under calendar do not work.
+            - Requires https://github.com/forresttindall/Github-Activity-Calendar
+    <script src="./Github-Activity-Calendar/github-calendar.js"></script>
+    <script>
+        GitHubCalendar(".github-calendar", "Teddy-1024");
+    </script>
+    -->
 
     <script>
         window.onload = function() {
diff --git a/scripts/scripts.js b/scripts/scripts.js
index dc5f18b..5dc203b 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -93,13 +93,3 @@ function hookupProjectDetailButtons() {
         });
     });
 }
-
-// Google Translate 
-function initGoogleTranslateElement() {
-    new google.translate.TranslateElement({
-        pageLanguage: 'en',
-        // layout: google.translate.TranslateElement.InlineLayout.SIMPLE
-        layout: google.translate.TranslateElement.InlineLayout.VERTICAL
-    }, 'google_translate_element');
-}
-
diff --git a/styles/styles.css b/styles/styles.css
index 036d5aa..00ed0c3 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -80,6 +80,11 @@ nav a:hover {
 /* Google Translate styles
     - Hide poorly styled iframes
 */
+#google_translate_element {
+    background-color: white;
+    border-radius: 0.25vh;
+    padding: 0.5vh;
+}
 iframe.skiptranslate {    
     display: none !important;
 }
@@ -201,6 +206,8 @@ ul, li {
     font-size: 0.9rem;
     text-decoration: underline;
     margin-top: 1vh;
+    cursor: pointer;
+    width: fit-content;
 }
 .project-thumbnail {
     margin-top: 2vh;
@@ -320,4 +327,25 @@ footer a {
     .projects-grid {
         grid-template-columns: 1fr;
     }
+}
+
+
+/* GitHub Contributions Calendar */
+/* Hide broken statistics */
+.github-calendar > :not(:first-child) {
+    display: none;
+}
+/* Hide the "How we calculate contributions" text */
+.github-calendar .js-calendar-graph .width-full .float-left {
+    display: none;
+}
+/* Change title text */
+.github-calendar table.js-calendar-graph-table > caption:first-child {
+    color: transparent;
+    font-size: 0;
+}
+.github-calendar table.js-calendar-graph-table > caption:first-child::before {
+    content: "GitHub Contributions Calendar";
+    color: var(--text-color);
+    font-size: 1rem;
 }
\ No newline at end of file
