migrate comment system from giscus to disqus

copdips · Jan 20, 2024 · 4394cbb · 4394cbb
1 parent e1b85ea
commit 4394cbb
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 45 deletions.
diff --git a/docs/overrides/partials/comments.html b/docs/overrides/partials/comments.html
@@ -1,53 +1,29 @@
 {% if page.meta.comments %}
 <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 -->
+<div id="disqus_thread"></div>
 <script>
-  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";
-
-    // Instruct Giscus to set theme
-    giscus.setAttribute("data-theme", theme);
+  var disqus_config = function() {
+    this.page.url = "{{ page.canonical_url }}"
+    this.page.identifier =
+      "{{ page.canonical_url | replace(config.site_url, '') }}" // (1)!
   }
 
-  // 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 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 change theme
-        var frame = document.querySelector(".giscus-frame");
-        frame.contentWindow.postMessage(
-          { giscus: { setConfig: { theme } } },
-          "https://giscus.app"
-        );
-      }
-    });
-  });
+    /* Inject script tag */
+    document.body.appendChild(script)
+
+  /* Set up on navigation (instant loading) */
+  } else {
+    DISQUS.reset({
+      reload: true,
+      config: disqus_config
+    })
+  }
 </script>
 {% endif %}
diff --git a/docs/overrides/partials/comments.html.disqus b/docs/overrides/partials/comments.html.disqus
@@ -0,0 +1,29 @@
+{% if page.meta.comments %}
+<h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
+<div id="disqus_thread"></div>
+<script>
+  var disqus_config = function() {
+    this.page.url = "{{ page.canonical_url }}"
+    this.page.identifier =
+      "{{ page.canonical_url | replace(config.site_url, '') }}" // (1)!
+  }
+
+  /* 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())
+
+    /* Inject script tag */
+    document.body.appendChild(script)
+
+  /* Set up on navigation (instant loading) */
+  } else {
+    DISQUS.reset({
+      reload: true,
+      config: disqus_config
+    })
+  }
+</script>
+{% endif %}
diff --git a/docs/overrides/partials/comments.html.giscus b/docs/overrides/partials/comments.html.giscus
@@ -0,0 +1,53 @@
+{% if page.meta.comments %}
+<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 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";
+
+    // Instruct Giscus to set theme
+    giscus.setAttribute("data-theme", theme);
+  }
+
+  // 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";
+
+        // Instruct Giscus to change theme
+        var frame = document.querySelector(".giscus-frame");
+        frame.contentWindow.postMessage(
+          { giscus: { setConfig: { theme } } },
+          "https://giscus.app"
+        );
+      }
+    });
+  });
+</script>
+{% endif %}
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -15,6 +15,11 @@ watch:
 
 # Additional configuration
 extra:
+  # disqus docs:
+  #   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
   analytics:
     property: G-L9KPHRQNQN
     provider: google