From cd5d170d018dafd1659a4f21e7be5bef985ca25a Mon Sep 17 00:00:00 2001
From: Drew Kennedy <drewkenn@gmail.com>
Date: Sun, 27 Jul 2025 01:01:19 +1000
Subject: [PATCH 1/3] Add Giscus comments integration and styling

---
 _config.yml           | 13 +++++++++++++
 _includes/giscus.html | 20 ++++++++++++++++++++
 _layouts/post.html    |  4 ++--
 assets/css/custom.css | 24 ++++++++++++++++++++++++
 4 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 _includes/giscus.html

diff --git a/_config.yml b/_config.yml
index 462b37e..ad9e9e4 100644
--- a/_config.yml
+++ b/_config.yml
@@ -27,6 +27,19 @@ plugins:
 mermaid:
   src: 'https://unpkg.com/mermaid@10.6.1/dist/mermaid.min.js'
 
+# Giscus comments configuration
+giscus:
+  repo: "devnomadic/devnomadic.github.io"
+  repo-id: "MDEwOlJlcG9zaXRvcnkyOTYyMjkxOTE="  # Get this from giscus.app
+  category: "General"
+  category-id: "DIC_kwDOEagZR84CtcBV"  # Get this from giscus.app
+  mapping: "pathname"
+  reactions-enabled: "1"
+  emit-metadata: "0"
+  input-position: "bottom"
+  theme: "preferred_color_scheme"
+  lang: "en"
+
 # Theme settings
 dash:
   date_format: "%b %-d, %Y"
diff --git a/_includes/giscus.html b/_includes/giscus.html
new file mode 100644
index 0000000..df619be
--- /dev/null
+++ b/_includes/giscus.html
@@ -0,0 +1,20 @@
+{% if site.giscus and site.giscus.repo %}
+<div class="giscus-comments">
+  <script 
+    src="https://giscus.app/client.js"
+    data-repo="{{ site.giscus.repo }}"
+    data-repo-id="{{ site.giscus.repo-id }}"
+    data-category="{{ site.giscus.category }}"
+    data-category-id="{{ site.giscus.category-id }}"
+    data-mapping="{{ site.giscus.mapping }}"
+    data-strict="0"
+    data-reactions-enabled="{{ site.giscus.reactions-enabled }}"
+    data-emit-metadata="{{ site.giscus.emit-metadata }}"
+    data-input-position="{{ site.giscus.input-position }}"
+    data-theme="{{ site.giscus.theme }}"
+    data-lang="{{ site.giscus.lang }}"
+    crossorigin="anonymous"
+    async>
+  </script>
+</div>
+{% endif %}
diff --git a/_layouts/post.html b/_layouts/post.html
index 8dd118f..aa89f89 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -28,9 +28,9 @@ <h1 class="post-title">{{ page.title }}</h1>
   {{ content }}
 </div>
 
-{% if site.dash.disqus.shortname %}
+{% if site.giscus and site.giscus.repo %}
 <div class="comments">
-{% include disqus.html %}
+{% include giscus.html %}
 </div>
 {% endif %}
 
diff --git a/assets/css/custom.css b/assets/css/custom.css
index add37db..4859cef 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -192,3 +192,27 @@
     margin-bottom: 0.5em;
   }
 }
+
+/* Giscus comments styling */
+.comments {
+  margin-top: 3rem;
+  padding-top: 2rem;
+  border-top: 1px solid #e8eaed;
+}
+
+.giscus-comments {
+  margin: 1rem 0;
+}
+
+/* Ensure Giscus adapts to theme */
+.giscus-frame {
+  width: 100% !important;
+  border: none;
+}
+
+/* Dark mode support for Giscus if needed */
+@media (prefers-color-scheme: dark) {
+  .comments {
+    border-top-color: #3c4043;
+  }
+}

From 2c9c6748373791ad70fdbf21ddbb8b2a47129c6c Mon Sep 17 00:00:00 2001
From: Drew Kennedy <drewkenn@gmail.com>
Date: Sun, 27 Jul 2025 01:42:21 +1000
Subject: [PATCH 2/3] Update Giscus theme setting and improve dark mode support
 comments

---
 _includes/giscus.html | 2 +-
 assets/css/custom.css | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/_includes/giscus.html b/_includes/giscus.html
index df619be..7cdd6c1 100644
--- a/_includes/giscus.html
+++ b/_includes/giscus.html
@@ -11,7 +11,7 @@
     data-reactions-enabled="{{ site.giscus.reactions-enabled }}"
     data-emit-metadata="{{ site.giscus.emit-metadata }}"
     data-input-position="{{ site.giscus.input-position }}"
-    data-theme="{{ site.giscus.theme }}"
+    data-theme="preferred_color_scheme"
     data-lang="{{ site.giscus.lang }}"
     crossorigin="anonymous"
     async>
diff --git a/assets/css/custom.css b/assets/css/custom.css
index 4859cef..5114cd1 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -210,7 +210,7 @@
   border: none;
 }
 
-/* Dark mode support for Giscus if needed */
+/* Dark mode support for Giscus */
 @media (prefers-color-scheme: dark) {
   .comments {
     border-top-color: #3c4043;

From 6688734977a7dec7749a6bd87fd65e152c4b2889 Mon Sep 17 00:00:00 2001
From: Drew Kennedy <drewkenn@gmail.com>
Date: Sun, 27 Jul 2025 01:48:49 +1000
Subject: [PATCH 3/3] Implement theme toggle functionality and update Giscus
 theme handling

---
 _includes/giscus.html | 51 +++++++++++++++++++++++++++++++-
 _includes/header.html | 67 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 117 insertions(+), 1 deletion(-)

diff --git a/_includes/giscus.html b/_includes/giscus.html
index 7cdd6c1..d6ee1ca 100644
--- a/_includes/giscus.html
+++ b/_includes/giscus.html
@@ -11,10 +11,59 @@
     data-reactions-enabled="{{ site.giscus.reactions-enabled }}"
     data-emit-metadata="{{ site.giscus.emit-metadata }}"
     data-input-position="{{ site.giscus.input-position }}"
-    data-theme="preferred_color_scheme"
+    data-theme="dark"
     data-lang="{{ site.giscus.lang }}"
     crossorigin="anonymous"
     async>
   </script>
 </div>
+
+<script>
+// Function to update Giscus theme based on Jekyll theme
+function updateGiscusTheme() {
+  const currentTheme = document.documentElement.getAttribute('data-theme');
+  const giscusFrame = document.querySelector('iframe.giscus-frame');
+  
+  if (giscusFrame) {
+    const giscusTheme = currentTheme === 'dark' ? 'dark' : 'light';
+    giscusFrame.contentWindow.postMessage({
+      giscus: {
+        setConfig: {
+          theme: giscusTheme
+        }
+      }
+    }, 'https://giscus.app');
+    console.log('Updated Giscus theme to:', giscusTheme);
+  }
+}
+
+// Set initial theme when Giscus loads
+document.addEventListener('DOMContentLoaded', function() {
+  // Wait for Giscus to load, then set initial theme
+  setTimeout(updateGiscusTheme, 1000);
+  
+  // Also try updating theme when iframe loads
+  const checkForGiscus = setInterval(() => {
+    if (document.querySelector('iframe.giscus-frame')) {
+      updateGiscusTheme();
+      clearInterval(checkForGiscus);
+    }
+  }, 500);
+});
+
+// Watch for theme changes on the document element
+const observer = new MutationObserver(function(mutations) {
+  mutations.forEach(function(mutation) {
+    if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
+      setTimeout(updateGiscusTheme, 100); // Small delay to ensure theme change is complete
+    }
+  });
+});
+
+// Start observing theme changes
+observer.observe(document.documentElement, {
+  attributes: true,
+  attributeFilter: ['data-theme']
+});
+</script>
 {% endif %}
diff --git a/_includes/header.html b/_includes/header.html
index f1823ac..dbd010c 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -10,6 +10,25 @@
         {% endif %}
         {% endfor %}
     </span>
+    
+    <!-- Theme Toggle -->
+    <div class="toggleWrapper">
+        <input type="checkbox" class="dn" id="theme-toggle" onclick="modeSwitcher()" checked />
+        <label for="theme-toggle" class="toggle">
+        <span class="toggle__handler">
+          <span class="crater crater--1"></span>
+          <span class="crater crater--2"></span>
+          <span class="crater crater--3"></span>
+        </span>
+            <span class="star star--1"></span>
+            <span class="star star--2"></span>
+            <span class="star star--3"></span>
+            <span class="star star--4"></span>
+            <span class="star star--5"></span>
+            <span class="star star--6"></span>
+        </label>
+    </div>
+    
     <br style="clear: both;">
     <div style="margin-top: 0.5em; padding-top: 0.75em;">
       <a href="/about/" style="display: inline-block; margin-right: 2em; color: #de5684; text-decoration: none; font-size: 1em;">About</a>
@@ -18,3 +37,51 @@
     </div>
   </div>
 </div>
+
+<script type="text/javascript">
+const theme = localStorage.getItem('theme');
+
+if (theme === "light") {
+    document.documentElement.setAttribute('data-theme', 'light');
+} else {
+    document.documentElement.setAttribute('data-theme', 'dark');
+}
+const userPrefers = getComputedStyle(document.documentElement).getPropertyValue('content');
+
+function activateDarkTheme() {
+    document.getElementById('theme-toggle').checked = true;
+    document.documentElement.setAttribute('data-theme', 'dark');
+    document.documentElement.classList.add('theme--dark');
+    document.documentElement.classList.remove('theme--light');
+	document.getElementById("theme-toggle").className = 'light';
+	window.localStorage.setItem('theme', 'dark');
+}
+
+function activateLightTheme() {
+    document.getElementById('theme-toggle').checked = false;
+    document.documentElement.setAttribute('data-theme', 'light');
+    document.documentElement.classList.add('theme--light');
+    document.documentElement.classList.remove('theme--dark');
+	document.getElementById("theme-toggle").className = 'dark';
+	window.localStorage.setItem('theme', 'light');
+}
+
+if (theme === "dark") {
+    activateDarkTheme();
+} else if (theme === "light") {
+    activateLightTheme();
+} else if  (userPrefers === "light") {
+    activateDarkTheme();
+} else {
+    activateDarkTheme();
+}
+
+function modeSwitcher() {
+	let currentMode = document.documentElement.getAttribute('data-theme');
+	if (currentMode === "dark") {
+	    activateLightTheme();
+	} else {
+	    activateDarkTheme();
+	}
+}
+</script>