Add Giscus comments integration and styling

Author: devnomadic

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

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