From d315bf57e7d8005c447855d806d49dd929a7e6a9 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 11 Dec 2021 17:24:08 +0800
Subject: [PATCH] Integrate utterances comments

---
 _config.yml                          | 11 +++---
 _includes/comments.html              |  3 +-
 _includes/{ => comments}/disqus.html |  0
 _includes/comments/utterances.html   | 51 ++++++++++++++++++++++++++++
 _sass/layout/post.scss               |  5 ++-
 5 files changed, 64 insertions(+), 6 deletions(-)
 rename _includes/{ => comments}/disqus.html (100%)
 create mode 100644 _includes/comments/utterances.html

diff --git a/_config.yml b/_config.yml
index aa3a19e..0a075a3 100644
--- a/_config.yml
+++ b/_config.yml
@@ -88,10 +88,14 @@ avatar: '/commons/avatar.jpg'
 toc: true
 
 comments:
-  active:        # The global switch for posts comments, e.g., 'disqus'. Keep it empty means disable
-  # The comment active options are as follows
+  active:         # The global switch for posts comments, e.g., 'disqus'.  Keep it empty means disable
+  # The active options are as follows:
   disqus:
-    shortname:   # fill with the Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
+    shortname:    # fill with the Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
+  # utterances settings › https://utteranc.es/
+  utterances:
+    repo:         # <gh-username>/<repo>
+    issue_term:   # < url | pathname | title | ...>
 
 paginate: 10
 
@@ -113,7 +117,6 @@ collections:
     output: true
     sort_by: order
 
-
 defaults:
   -
     scope:
diff --git a/_includes/comments.html b/_includes/comments.html
index 3935aca..39e521f 100644
--- a/_includes/comments.html
+++ b/_includes/comments.html
@@ -1,4 +1,5 @@
 <!--  The comments switcher -->
 {% if page.comments and site.comments.active %}
-  {% include {{ site.comments.active | append: '.html' }}  %}
+  {% capture path %}comments/{{ site.comments.active }}.html{% endcapture %}
+  {% include {{ path }} %}
 {% endif %}
diff --git a/_includes/disqus.html b/_includes/comments/disqus.html
similarity index 100%
rename from _includes/disqus.html
rename to _includes/comments/disqus.html
diff --git a/_includes/comments/utterances.html b/_includes/comments/utterances.html
new file mode 100644
index 0000000..5fa5760
--- /dev/null
+++ b/_includes/comments/utterances.html
@@ -0,0 +1,51 @@
+<!-- https://utteranc.es/ -->
+<script src="https://utteranc.es/client.js"
+        repo="{{ site.comments.utterances.repo }}"
+        issue-term="{{ site.comments.utterances.issue_term }}"
+        crossorigin="anonymous"
+        async>
+</script>
+
+<script type="text/javascript">
+  $(function() {
+    const origin = "https://utteranc.es";
+    const iframe = "iframe.utterances-frame";
+    const lightTheme = "github-light";
+    const darkTheme = "github-dark";
+    let initTheme = lightTheme;
+
+    if ($("html[mode=dark]").length > 0
+        || ($("html[mode]").length == 0
+            && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
+      initTheme = darkTheme;
+    }
+
+    addEventListener("message", (event) => {
+      let theme;
+
+      /* credit to <https://github.com/utterance/utterances/issues/170#issuecomment-594036347> */
+      if (event.origin === origin) {
+        /* page initial */
+        theme = initTheme;
+
+      } else if (event.source === window && event.data &&
+            event.data.direction === ModeToggle.ID) {
+        /* global theme mode changed */
+        const mode = event.data.message;
+        theme = (mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme);
+
+      } else {
+        return;
+      }
+
+      const message = {
+        type: "set-theme",
+        theme: theme
+      };
+
+      const utterances = document.querySelector(iframe).contentWindow;
+      utterances.postMessage(message, origin);
+    });
+
+  });
+</script>
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
index b9e5acd..804b8c6 100644
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -233,9 +233,12 @@ nav[data-toggle=toc] {
 #tail-wrapper {
   min-height: 2rem;
 
+  > div:last-of-type {
+    margin-bottom: 2rem;
+  }
+
   #disqus_thread {
     min-height: 7.5rem;
-    margin-bottom: 2rem;
   }
 
 }