moving comment from disqus back to giscus

Author: copdips

docs/overrides/partials/comments.html

@@ -1,34 +1,53 @@
 {% if page.meta.comments %}
-<h2 id="__comments">
-  <span class="twemoji" style="margin-right: 10px;">
-    {% include ".icons/octicons/comment-discussion-24.svg" %}
-  </span>
-  {{ lang.t("meta.comments") }}
-</h2>
-<div id="disqus_thread"></div>
+<h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
+<!-- Insert generated snippet here -->
+<script
+  src="https://giscus.app/client.js"
+  data-repo="copdips/copdips.github.io"
+  data-repo-id="MDEwOlJlcG9zaXRvcnkxMzMyNzI0OTY="
+  data-category="Q&A"
+  data-category-id="DIC_kwDOB_GTsM4Cbgni"
+  data-mapping="pathname"
+  data-strict="0"
+  data-reactions-enabled="1"
+  data-emit-metadata="0"
+  data-input-position="bottom"
+  data-theme="preferred_color_scheme"
+  data-lang="en"
+  crossorigin="anonymous"
+  async
+></script>
+
+<!-- Synchronize Giscus theme with palette -->
 <script>
-  var disqus_config = function () {
-    this.page.url = "{{ page.canonical_url }}";
-    this.page.identifier =
-      "{{ page.canonical_url | replace(config.site_url, '') }}"; // (1)!
-  };
+  var giscus = document.querySelector("script[src*=giscus]");
+
+  // Set palette on initial load
+  var palette = __md_get("__palette");
+  if (palette && typeof palette.color === "object") {
+    var theme = palette.color.scheme === "slate" ? "transparent_dark" : "light";
 
-  /* Set up for the first time */
-  if (typeof DISQUS === "undefined") {
-    var script = document.createElement("script");
-    script.async = true;
-    script.src = "https://{{ config.extra.disqus }}.disqus.com/embed.js";
-    script.setAttribute("data-timestamp", Date.now());
+    // Instruct Giscus to set theme
+    giscus.setAttribute("data-theme", theme);
+  }
 
-    /* Inject script tag */
-    document.body.appendChild(script);
+  // Register event handlers after documented loaded
+  document.addEventListener("DOMContentLoaded", function () {
+    var ref = document.querySelector("[data-md-component=palette]");
+    ref.addEventListener("change", function () {
+      var palette = __md_get("__palette");
+      if (palette && typeof palette.color === "object") {
+        var theme =
+          palette.color.scheme === "slate" ? "transparent_dark" : "light";
 
-    /* Set up on navigation (instant loading) */
-  } else {
-    DISQUS.reset({
-      reload: true,
-      config: disqus_config,
+        // Instruct Giscus to change theme
+        var frame = document.querySelector(".giscus-frame");
+        frame.contentWindow.postMessage(
+          { giscus: { setConfig: { theme } } },
+          "https://giscus.app"
+        );
+      }
     });
-  }
+  });
 </script>
 {% endif %}

mkdocs.yml

@@ -19,7 +19,7 @@ extra:
   #   1. https://github.com/squidfunk/mkdocs-material/discussions/2138#discussioncomment-250454
   #   2. https://github.com/squidfunk/mkdocs-material/pull/3329#issuecomment-1013855846
   #   3. https://github.com/squidfunk/mkdocs-material/commit/f9e94184620806ceff55b6a8c2df0292b39369e4
-  disqus: copdips
+  # disqus: copdips
   analytics:
     provider: google
     property: UA-118578681-1