feat: support utterances comment (#83)

3 files changed, 61 insertions, 0 deletions

diff --git a/_config.yml b/_config.yml
index 9029b67..989eabb 100644
--- a/_config.yml
+++ b/_config.yml
@@ -194,6 +194,17 @@ yat:
 #   client_secret: "Your client secret"
 #   redirect_uri: "Your redirect url"   # If you use a custom domain name
 
+# Utterances comments
+# See https://utteranc.es/
+# set follow_site_theme true to make utterances' theme follow the site's
+
+# utterances:
+#   repo: "owner/repo"
+#   issue_term: "title"
+#   label: "utterances comment"
+#   theme: "github-light"
+#   follow_site_theme: true
+
 # Build settings
 # highlighter: none
 markdown: kramdown
diff --git a/_includes/extensions/comments/utterances.html b/_includes/extensions/comments/utterances.html
new file mode 100644
index 0000000..4743562
--- /dev/null
+++ b/_includes/extensions/comments/utterances.html
@@ -0,0 +1,46 @@
+<script async
+        crossorigin="anonymous"
+        issue-term="{{ site.utterances.issue_term }}"
+        label="{{ site.utterances.label }}"
+        {%- if site.utterances.follow_site_theme -%}
+        onload="initUtterancesTheme()"
+        {%- endif -%}
+        repo="{{ site.utterances.repo }}"
+        src="https://utteranc.es/client.js"
+        theme="{{ site.utterances.theme }}">
+</script>
+
+{%- if site.utterances.follow_site_theme -%}
+<script>
+  const setUtterancesTheme = (dataTheme) => {
+    const iframe = document.querySelector('.utterances-frame');
+    if (iframe) {
+      const utterancesTheme = dataTheme === 'dark' ? 'github-dark' : 'github-light'
+      const message = {
+        type: 'set-theme',
+        theme: utterancesTheme
+      };
+      iframe.contentWindow.postMessage(message, 'https://utteranc.es');
+    }
+  }
+
+  // init theme
+  const initUtterancesTheme = () => {
+    const iframe = document.querySelector('.utterances-frame');
+    if (!iframe) return
+    iframe.onload = () => {
+      setUtterancesTheme(document.documentElement.getAttribute('data-theme'))
+    }
+  }
+
+  // dynamic change
+  const observer = new MutationObserver((mutationsList, observer) => {
+    for (let mutation of mutationsList) {
+      if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
+        setUtterancesTheme(document.documentElement.getAttribute('data-theme'))
+      }
+    }
+  });
+  observer.observe(document.documentElement, {attributes: true, childList: false, subtree: false});
+</script>
+{%- endif -%}
diff --git a/_layouts/post.html b/_layouts/post.html
index d1680a2..c561308 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -69,6 +69,10 @@ sidebar:
       {%- include extensions/comments/gitment.html -%}
       {%- endif -%}
 
+      {%- if site.utterances.repo -%}
+      {%- include extensions/comments/utterances.html -%}
+      {%- endif -%}
+
       {%- endif -%}
     </div>
     {%- endif -%}