From 75176522e39b22fd33a8a04bc171515fa11a5f4c Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Fri, 10 Dec 2021 21:12:52 +0800
Subject: [PATCH 1/2] Prepare for multiple comment systems

---
 _config.yml             | 8 +++++---
 _includes/comments.html | 4 ++++
 _includes/disqus.html   | 8 ++------
 _layouts/post.html      | 2 +-
 4 files changed, 12 insertions(+), 10 deletions(-)
 create mode 100644 _includes/comments.html

diff --git a/_config.yml b/_config.yml
index 8c7eec5..aa3a19e 100644
--- a/_config.yml
+++ b/_config.yml
@@ -87,9 +87,11 @@ avatar: '/commons/avatar.jpg'
 # boolean type, the global switch for ToC in posts.
 toc: true
 
-disqus:
-  comments: false  # boolean type, the global switch for posts comments.
-  shortname: ''    # Fill with your Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
+comments:
+  active:        # The global switch for posts comments, e.g., 'disqus'. Keep it empty means disable
+  # The comment active options are as follows
+  disqus:
+    shortname:   # fill with the Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
 
 paginate: 10
 
diff --git a/_includes/comments.html b/_includes/comments.html
new file mode 100644
index 0000000..3935aca
--- /dev/null
+++ b/_includes/comments.html
@@ -0,0 +1,4 @@
+<!--  The comments switcher -->
+{% if page.comments and site.comments.active %}
+  {% include {{ site.comments.active | append: '.html' }}  %}
+{% endif %}
diff --git a/_includes/disqus.html b/_includes/disqus.html
index f4897c8..8b4e633 100644
--- a/_includes/disqus.html
+++ b/_includes/disqus.html
@@ -1,9 +1,6 @@
 <!--
   The Disqus lazy loading.
 -->
-
-{% if site.disqus.comments and page.comments %}
-
 <div id="disqus_thread" class="pt-2 pb-2">
   <p class="text-center text-muted small">
     Comments powered by <a href="https://disqus.com/">Disqus</a>.
@@ -11,6 +8,7 @@
 </div>
 
 <script type="text/javascript">
+
   var disqus_config = function () {
     this.page.url = '{{ page.url | absolute_url }}';
     this.page.identifier = '{{ page.url }}';
@@ -22,7 +20,7 @@
     if(entries[0].isIntersecting) {
         (function () {
             var d = document, s = d.createElement('script');
-            s.src = 'https://{{ site.disqus.shortname }}.disqus.com/embed.js';
+            s.src = 'https://{{ site.comments.disqus.shortname }}.disqus.com/embed.js';
             s.setAttribute('data-timestamp', +new Date());
             (d.head || d.body).appendChild(s);
         })();
@@ -54,5 +52,3 @@
   }
 
 </script>
-
-{% endif %}
diff --git a/_layouts/post.html b/_layouts/post.html
index ef2450e..3249939 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -5,7 +5,7 @@ pannel_includes:
 tail_includes:
   - related-posts
   - post-nav
-  - disqus
+  - comments
 ---
 
 {% include lang.html %}

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 2/2] 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;
   }
 
 }