feature: utterances talk (#81)

* feature: utterances talk

https://github.com/utterance/utterances

* update README.md

* merge parameters

* update README.md

* resolve conversations

* Update README.md

Co-authored-by: zwbetz-gh <37317628+zwbetz-gh@users.noreply.github.com>

Co-authored-by: zwbetz-gh <37317628+zwbetz-gh@users.noreply.github.com>

README.md

@@ -22,6 +22,7 @@ An accessibility-friendly Hugo theme, ported from the [original Cupper](https://
 - [Localization](#localization)
 - [Custom CSS and JS](#custom-css-and-js)
 - [Default to Dark Theme](#default-to-dark-theme)
+- [Enable utterances](#enable-utterances)
 - [Non-Git Repo](#non-git-repo)
 - [Getting help](#getting-help)
 - [Credits](#credits)
@@ -128,6 +129,28 @@ To reset to a 'first visit' scenario (e.g. for testing), one needs to either bro
 
 Check your browser's help or documentation for details.
 
+## Enable utterances
+
+`utterances` is a lightweight comments widget built on GitHub issues.
+
+Firstly, choose the repository utterances will connect to:
+1. Make sure the repo is public, otherwise your readers will not be able to view the issues/comments.
+2. Make sure the [utterances app](https://github.com/apps/utterances) is installed on the repo, otherwise users will not be able to post comments.
+3. If your repo is a fork, navigate to its settings tab and confirm the issues feature is turned on.
+
+Secondly,In the site config file set the param `utterances.repo` to enable it.
+
+E.g. for `config.yaml`
+```yaml
+params:
+  utterances:
+    repo: username/username.github.io
+    issueTerm: title
+    theme: github-light
+```
+
+Refer to [utterances](https://utteranc.es/) for more information!
+
 ## Non-Git Repo
 
 If your site is **not** a git repo, then set `enableGitInfo` to `false` in your config file.

exampleSite/config.yaml

@@ -37,6 +37,10 @@ params:
   customJs:
     - js/custom_01.js
     - js/custom_02.js
+  utterances:
+    repo: username/username.github.io
+    issueTerm: title
+    theme: github-light
 
 menu:
   nav:

layouts/partials/utterances.html

@@ -0,0 +1,40 @@
+<!-- utterances -->
+{{- if .Site.Params.utterances.repo}}
+<script src="https://utteranc.es/client.js"
+        repo="{{ .Site.Params.utterances.repo }}"
+        issue-term="{{ .Site.Params.utterances.issueTerm }}"
+        theme="{{ .Site.Params.utterances.theme }}"
+        crossorigin="anonymous"
+        async>
+</script>
+<style>
+    .utterances-frame {
+        background-color: transparent;
+    }
+</style>
+<script>
+    function changeTheme(theme) {
+        const message = {
+            type: "set-theme",
+            theme
+        };
+        const utteranc = document.querySelector(".utterances-frame");
+        utteranc.contentWindow.postMessage(message, "https://utteranc.es");
+    }
+
+    document.onreadystatechange = () => {
+        if (document.readyState === "complete") {
+            // 1. try immediately when single page ready
+            if (!document.getElementById("darkTheme").disabled) {
+                changeTheme("photon-dark");
+            }
+            // 2. exchange when click "theme change button"
+            document.getElementById("themer").addEventListener("click", () => {
+                changeTheme(document.getElementById("darkTheme").disabled ? "photon-dark" : "github-light");
+            });
+        }
+    };
+</script>
+<noscript>Please enable JavaScript to view the <a href="https://github.com/utterance">comments powered by
+    utterances.</a></noscript>
+{{- end }}

layouts/post/single.html

@@ -41,4 +41,5 @@
     {{ .Content }}
   </main>
   {{ partial "disqus.html" . }}
+  {{ partial "utterances.html" . }}
 {{ end }}