Add Giscus comments support (resolve #501)

_config.yml

@@ -97,6 +97,15 @@ comments:
   utterances:
     repo:         # <gh-username>/<repo>
     issue_term:   # < url | pathname | title | ...>
+  # Giscus options › https://giscus.app
+  giscus:
+    repo:             # <gh-username>/<repo>
+    repo_id:
+    category:
+    category_id:
+    mapping:          # optional, default to 'pathname'
+    input_position:   # optional, default to 'bottom'
+    lang:             # optional, default to the value of `site.lang`
 
 # Self-hosted static assets, optional › https://github.com/cotes2020/chirpy-static-assets
 assets:

_includes/comments/giscus.html

@@ -0,0 +1,56 @@
+<!-- https://giscus.app/ -->
+<script type="text/javascript">
+  $(function () {
+    const origin = "https://giscus.app";
+    const iframe = "iframe.giscus-frame";
+    const lightTheme = "light";
+    const darkTheme = "dark_dimmed";
+    let initTheme = lightTheme;
+
+    if ($("html[data-mode=dark]").length > 0
+        || ($("html[data-mode]").length == 0
+            && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
+      initTheme = darkTheme;
+    }
+
+    let giscusAttributes = {
+      "src": "https://giscus.app/client.js",
+      "data-repo": "{{ site.comments.giscus.repo}}",
+      "data-repo-id": "{{ site.comments.giscus.repo_id }}",
+      "data-category": "{{ site.comments.giscus.category }}",
+      "data-category-id": "{{ site.comments.giscus.category_id }}",
+      "data-mapping": "{{ site.comments.giscus.mapping | default: 'pathname' }}",
+      "data-reactions-enabled": "1",
+      "data-emit-metadata": "0",
+      "data-theme": initTheme,
+      "data-input-position": "{{ site.comments.giscus.input_position | default: 'bottom' }}",
+      "data-lang": "{{ site.comments.giscus.lang | default: lang }}",
+      "crossorigin": "anonymous",
+      "async": ""
+    };
+
+    let giscusScript = document.createElement("script");
+    Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
+    document.getElementById("tail-wrapper").appendChild(giscusScript);
+
+    addEventListener("message", (event) => {
+      if (event.source === window && event.data &&
+            event.data.direction === ModeToggle.ID) {
+        /* global theme mode changed */
+        const mode = event.data.message;
+        const theme = (mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme);
+
+        const message = {
+          setConfig: {
+            theme: theme
+          }
+        };
+
+        const giscus = document.querySelector(iframe).contentWindow;
+        giscus.postMessage({ giscus: message }, origin);
+      }
+
+    });
+
+  });
+</script>