Add Giscus comments integration and styling

_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"

_includes/giscus.html

@@ -0,0 +1,69 @@
+{% 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="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 %}

_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>

_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 %}
 

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 */
+@media (prefers-color-scheme: dark) {
+  .comments {
+    border-top-color: #3c4043;
+  }
+}