From 8e8d8e40307256887694a947f14b9593d3c89789 Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Sun, 03 Jan 2021 19:32:03 +0000
Subject: [PATCH] Utteranc.es comments

---
 layouts/_default/single.html              |    6 ++++++
 layouts/partials/comments/utterances.html |   10 ++++++++++
 assets/css/style.css                      |    4 ++++
 README.md                                 |   17 +++++++++++++++--
 4 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 6cdfcd0..1d14a34 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@
 - Multilingual
 - 100⁄100 Google Lighthouse score
 - Google Analytics (optional)
-- Comments powered by Disqus (optional)
+- Comments powered by Disqus or Utterances (optional)
 - Katex support (optional)
 - Formspree Contact Form (optional)
 - Twitter Cards support
@@ -195,12 +195,25 @@
 
 ### Comments powered by Disqus
 
-No comment section is shown on the `single.html`, unless a disqus code is specified in the `config.toml` file.
+No comment section is shown on the `single.html`, unless a Disqus code is specified in the `config.toml` file.
 
 ```toml
 disqusShortname = "XXX"
 ```
 
+### Comments powered by Utterance.es
+
+No comment section is shown on the `single.html`, unless a `repo` is specified in the `config.toml` file. If uncertain how parameter to configure, check out the official [documentation}(https://utteranc.es/).
+
+```toml
+[params.utterances]
+repo = "githubuser/reponame"
+issueTerm = "pathname"
+theme= "preferred-color-scheme"
+# label = 
+```
+If you are using a strict CSP, you'll have to add the domain to it. 
+
 ### Google Analytics
 
 To use Google Analytics, a valid tracking code has to be added. If you don't want to load the code, then commend out the parameter.
diff --git a/assets/css/style.css b/assets/css/style.css
index 693b4f3..ab5bbd6 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -698,6 +698,10 @@
     margin: 30px;
 }
 
+.utterances {
+    max-width: unset;
+}
+
 /* Buttons */
 a.btn {
     color: #868686;
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 352a37d..08749d3 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -34,6 +34,12 @@
                     {{ template "_internal/disqus.html" . }}
                 </div>
             {{- end }}
+            {{ if .Site.Params.utterances.repo  -}}
+            <div id="fb_comments_container">
+                <h2>{{ i18n "comments" }}</h2>
+                {{ partial "comments/utterances.html" . }}
+            </div>
+            {{- end }}
         {{ end }}
     </div>
 
diff --git a/layouts/partials/comments/utterances.html b/layouts/partials/comments/utterances.html
new file mode 100644
index 0000000..f17a592
--- /dev/null
+++ b/layouts/partials/comments/utterances.html
@@ -0,0 +1,10 @@
+<script src="https://utteranc.es/client.js" 
+        repo="{{ .Site.Params.utterances.repo }}"
+        issue-term="{{ .Site.Params.utterances.issueTerm }}"
+        theme="{{ .Site.Params.utterances.theme }}" 
+        {{ with .Site.Params.utterances.label }}
+        label="{{ . }}"
+        {{ end }}
+        crossorigin="anonymous" 
+        async>
+</script>
\ No newline at end of file

--
Gitblit v1.10.0