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

README.md

@@ -89,7 +89,8 @@ I hope you will LoveIt ❤️!
 * **Valine** comment system supported by [Valine](https://valine.js.org/)
 * **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
 * **Telegram comments** system supported by [Telegram Comments](https://comments.app/)
-* **Commento** comments system supported by [Commento](https://commento.io/)
+* **Commento** comment system supported by [Commento](https://commento.io/)
+* **Utterances** comment system supported by [Utterances](https://utteranc.es/)
 
 ### Extended Features
 

README.zh-cn.md

@@ -85,6 +85,7 @@
 * 支持 **[Facebook](https://developers.facebook.com/docs/plugins/comments/) 评论**系统
 * 支持 **[Telegram comments](https://comments.app/) 评论**系统
 * 支持 **[Commento](https://commento.io/)** 评论系统
+* 支持 **[Utterances](https://utteranc.es/)** 评论系统
 
 ### 扩展功能
 

assets/css/_partial/_single/_comment.scss

@@ -1,3 +1,3 @@
-.comment {
+#comments {
   padding: 4rem 0;
 }

assets/css/_variables.scss

@@ -371,4 +371,4 @@ $admonition-background-color-map: (
 ) !default;
 // ========== Admonition ========== //
 
-$MAX_LENGTH: 9999px;
+$MAX_LENGTH: 12000px;

exampleSite/config.toml

@@ -892,10 +892,20 @@ enableEmoji = true
         colorful = true
         dislikes = false
         outlined = false
-      # Commento comments config (https://commento.io/)
-      # Commento comments 评论系统设置 (https://commento.io/)
+      # Commento comment config (https://commento.io/)
+      # Commento comment 评论系统设置 (https://commento.io/)
       [params.page.comment.commento]
         enable = false
+      # Utterances comment config (https://utteranc.es/)
+      # Utterances comment 评论系统设置 (https://utteranc.es/)
+      [params.page.comment.utterances]
+        enable = false
+        # owner/repo
+        repo = ""
+        issueTerm = "pathname"
+        label = ""
+        lightTheme = "github-light"
+        darkTheme = "github-dark"
     # SEO config
     # SEO 配置
     [params.page.seo]

exampleSite/content/about.en.md

@@ -56,7 +56,8 @@ math:
 * :(far fa-comment-alt fa-fw): **Valine** comment system supported by [Valine](https://valine.js.org/)
 * :(far fa-comments fa-fw): **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
 * :(fas fa-comment fa-fw): **Telegram comments** system supported by [Comments](https://comments.app/)
-* :(fas fa-comment-dots fa-fw): **Commento** comments system supported by [Commento](https://commento.io/)
+* :(fas fa-comment-dots fa-fw): **Commento** comment system supported by [Commento](https://commento.io/)
+* :(fas fa-comment-alt fa-fw): **Utterances** comment system supported by [Utterances](https://utteranc.es/)
 
 #### Extended Features
 

exampleSite/content/about.fr.md

@@ -61,7 +61,8 @@ Welcome to take the time to propose a translation by [:(fas fa-code-branch fa-fw
 * :(far fa-comment-alt fa-fw): **Valine** comment system supported by [Valine](https://valine.js.org/)
 * :(far fa-comments fa-fw): **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
 * :(fas fa-comment fa-fw): **Telegram comments** system supported by [Comments](https://comments.app/)
-* :(fas fa-comment-dots fa-fw): **Commento** comments system supported by [Commento](https://commento.io/)
+* :(fas fa-comment-dots fa-fw): **Commento** comment system supported by [Commento](https://commento.io/)
+* :(fas fa-comment-alt fa-fw): **Utterances** comment system supported by [Utterances](https://utteranc.es/)
 
 #### Extended Features
 

exampleSite/content/about.zh-cn.md

@@ -57,6 +57,7 @@ math:
 * :(far fa-comments fa-fw): 支持 **[Facebook](https://developers.facebook.com/docs/plugins/comments/) 评论**系统
 * :(fas fa-comment fa-fw): 支持 **[Telegram comments](https://comments.app/) 评论**系统
 * :(fas fa-comment-dots fa-fw): 支持 **[Commento](https://commento.io/)** 评论系统
+* :(far fa-comment-alt fa-fw): 支持 **[Utterances](https://utteranc.es/)** 评论系统
 
 #### 扩展功能
 

exampleSite/content/posts/theme-documentation-basics.en.md

@@ -533,6 +533,15 @@ Please open the code block below to view the complete sample configuration :(far
       # {{< version 0.2.0 >}} {{< link "https://commento.io/" "Commento" >}} comment config
       [params.page.comment.commento]
         enable = false
+      # {{< version 0.2.5 >}} {{< link "https://utteranc.es/" "Utterances" >}} comment config
+      [params.page.comment.utterances]
+        enable = false
+        # owner/repo
+        repo = ""
+        issueTerm = "pathname"
+        label = ""
+        lightTheme = "github-light"
+        darkTheme = "github-dark"
     # {{< version 0.2.0 >}} SEO config
     [params.page.seo]
       # Publisher info

exampleSite/content/posts/theme-documentation-basics.fr.md

@@ -538,6 +538,15 @@ Please open the code block below to view the complete sample configuration :(far
       # {{< version 0.2.0 >}} {{< link "https://commento.io/" "Commento" >}} comment config
       [params.page.comment.commento]
         enable = false
+      # {{< version 0.2.5 >}} {{< link "https://utteranc.es/" "Utterances" >}} comment config
+      [params.page.comment.utterances]
+        enable = false
+        # owner/repo
+        repo = ""
+        issueTerm = "pathname"
+        label = ""
+        lightTheme = "github-light"
+        darkTheme = "github-dark"
     # {{< version 0.2.0 >}} SEO config
     [params.page.seo]
       # Publisher info

exampleSite/content/posts/theme-documentation-basics.zh-cn.md

@@ -540,6 +540,15 @@ hugo
       # {{< version 0.2.0 >}} {{< link "https://commento.io/" "Commento" >}} 评论系统设置
       [params.page.comment.commento]
         enable = false
+      # {{< version 0.2.5 >}} {{< link "https://utteranc.es/" "Utterances" >}} 评论系统设置
+      [params.page.comment.utterances]
+        enable = false
+        # owner/repo
+        repo = ""
+        issueTerm = "pathname"
+        label = ""
+        lightTheme = "github-light"
+        darkTheme = "github-dark"
     # {{< version 0.2.0 >}} SEO config
     [params.page.seo]
       # 出版者信息

layouts/partials/comment.html

@@ -1,6 +1,6 @@
 {{- $cdn := .Scratch.Get "cdn" | default dict -}}
 {{- $fingerprint := .Scratch.Get "fingerprint" -}}
-{{- $comment := .Scratch.Get "comment" | default (dict "disqus" dict "gitalk" dict "valine" dict "facebook" dict "telegram" dict "commento" dict) -}}
+{{- $comment := .Scratch.Get "comment" | default (dict "disqus" dict "gitalk" dict "valine" dict "facebook" dict "telegram" dict "commento" dict "utterances" dict) -}}
 {{- $commentConfig := dict -}}
 
 {{- if $comment.enable -}}
@@ -107,6 +107,20 @@
                 Please enable JavaScript to view the comments powered by <a href="https://commento.io/">Commento</a>.
             </noscript>
         {{- end -}}
+
+        {{- /* Utterances Comment System */ -}}
+        {{- if $comment.utterances.enable -}}
+            <div id="utterances"></div>
+            {{- $utterances := $comment.utterances -}}
+            {{- $commentConfig = dict "repo" $utterances.repo | dict "utterances" | merge $commentConfig -}}
+            {{- $commentConfig = $utterances.issueTerm | default "pathname" | dict "issueTerm" | dict "utterances" | merge $commentConfig -}}
+            {{- $commentConfig = dict "label" $utterances.label | dict "utterances" | merge $commentConfig -}}
+            {{- $commentConfig = $utterances.lightTheme | default "github-light" | dict "lightTheme" | dict "utterances" | merge $commentConfig -}}
+            {{- $commentConfig = $utterances.darkTheme | default "github-dark" | dict "darkTheme" | dict "utterances" | merge $commentConfig -}}
+            <noscript>
+                Please enable JavaScript to view the comments powered by <a href="https://utteranc.es/">Utterances</a>.
+            </noscript>
+        {{- end -}}
     </div>
 {{- end -}}
 

package.json

@@ -22,6 +22,7 @@
     "build": "npm run babel && hugo -v --source=exampleSite --themesDir ../.. --gc",
     "build-lunr-segmentit": "browserify src/lib/lunr.segmentit.js -o assets/lib/lunr/lunr.segmentit.js -t babelify --presets @babel/preset-env --presets minify",
     "start": "npm run babel && hugo server --source=exampleSite --themesDir ../.. -D --disableFastRender",
+    "start-production": "npm run babel && hugo server --source=exampleSite --themesDir ../.. -D --disableFastRender -e production",
     "check": "htmlproofer exampleSite/public --check-html --allow-hash-href --empty-alt-ignore --disable-external",
     "copy": "rm -rf resources && cp -rf exampleSite/resources resources"
   },

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() {