feat(comment): add Utterances comment system (#317)

1 files changed, 29 insertions, 5 deletions

diff --git a/src/js/theme.js b/src/js/theme.js
index b0ef2db..7658e91 100644
--- a/src/js/theme.js
+++ b/src/js/theme.js
@@ -590,12 +590,36 @@ class Theme {
     }
 
     initComment() {
-        if (this.config.comment && this.config.comment.gitalk) {
-            this.config.comment.gitalk.body = decodeURI(window.location.href);
-            const gitalk = new Gitalk(this.config.comment.gitalk.body);
-            gitalk.render('gitalk');
+        if (this.config.comment) {
+            if (this.config.comment.gitalk) {
+                this.config.comment.gitalk.body = decodeURI(window.location.href);
+                const gitalk = new Gitalk(this.config.comment.gitalk.body);
+                gitalk.render('gitalk');
+            }
+            if (this.config.comment.valine) new Valine(this.config.comment.valine);
+            if (this.config.comment.utterances) {
+                const utterancesConfig = this.config.comment.utterances;
+                const script = document.createElement('script');
+                script.src = 'https://utteranc.es/client.js';
+                script.type = 'text/javascript';
+                script.setAttribute('repo', utterancesConfig.repo);
+                script.setAttribute('issue-term', utterancesConfig.issueTerm);
+                if (utterancesConfig.label) script.setAttribute('label', utterancesConfig.label);
+                script.setAttribute('theme', this.isDark ? utterancesConfig.darkTheme : utterancesConfig.lightTheme);
+                script.crossOrigin = 'anonymous';
+                script.async = true;
+                document.getElementById('utterances').appendChild(script);
+                this._utterancesOnSwitchTheme = this._utterancesOnSwitchTheme || (() => {
+                    const message = {
+                        type: 'set-theme',
+                        theme: this.isDark ? utterancesConfig.darkTheme : utterancesConfig.lightTheme,
+                    };
+                    const iframe = document.querySelector('.utterances-frame');
+                    iframe.contentWindow.postMessage(message, 'https://utteranc.es');
+                });
+                this.switchThemeEventSet.add(this._utterancesOnSwitchTheme);
+            }
         }
-        if (this.config.comment && this.config.comment.valine) new Valine(this.config.comment.valine);
     }
 
     initSmoothScroll() {