From c743559a4e8ec9ea53e2aa52f40ba87d426cc879 Mon Sep 17 00:00:00 2001
From: Haohan Yang <37651510+haohanyang@users.noreply.github.com>
Date: Mon, 28 Sep 2020 17:20:43 +0800
Subject: [PATCH] Add Disqus-integration

Fixes #38
---
 README.md                     | 12 ++++++++++++
 assets/scss/tale.scss         |  1 +
 assets/scss/tale/_disqus.scss |  3 +++
 layouts/disqus.html           | 22 ++++++++++++++++++++++
 layouts/partials/footer.html  |  5 +++++
 5 files changed, 43 insertions(+)
 create mode 100644 assets/scss/tale/_disqus.scss
 create mode 100644 layouts/disqus.html

diff --git a/README.md b/README.md
index 12002d28..cc0a97f1 100644
--- a/README.md
+++ b/README.md
@@ -102,6 +102,18 @@ Feel free to submit pull requests for other translations of Tale's texts.
 
 [Hugo documentation for multilingual sites](//gohugo.io/content-management/multilingual/)
 
+### Disqus
+Tale supports Disqus integration, a comment system that empowers dynamic features to static websites. To install it, just add the key `disqusShortname` in your `config.toml`
+``` toml
+disqusShortname = "disqus-example"
+``` 
+Add the parameter `comments` in the front-matter of the pages where you want to allow comments 
+``` 
+---
+comments: true
+---
+```
+
 ### Custom summaries
 
 Tale allows for writing the summary of your posts manually by setting the `summary` variable in the page frontmatter. If this variable is not set, the summary that Hugo automatically generates will be used.
diff --git a/assets/scss/tale.scss b/assets/scss/tale.scss
index 3cdfa991..9d1c12fd 100644
--- a/assets/scss/tale.scss
+++ b/assets/scss/tale.scss
@@ -6,3 +6,4 @@
 @import 'tale/layout';
 @import 'tale/pagination';
 @import 'tale/catalogue';
+@import 'tale/disqus';
diff --git a/assets/scss/tale/_disqus.scss b/assets/scss/tale/_disqus.scss
new file mode 100644
index 00000000..7474acfb
--- /dev/null
+++ b/assets/scss/tale/_disqus.scss
@@ -0,0 +1,3 @@
+.article-discussion {
+    margin: 0;
+}
diff --git a/layouts/disqus.html b/layouts/disqus.html
new file mode 100644
index 00000000..376c36e0
--- /dev/null
+++ b/layouts/disqus.html
@@ -0,0 +1,22 @@
+<div id="disqus_thread"></div>
+<script>
+
+/**
+*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
+*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
+/*
+var disqus_config = function () {
+this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
+this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
+};
+*/
+(function() { // DON'T EDIT BELOW THIS LINE
+var d = document, s = d.createElement('script');
+var disqus_shortname = '{{ .Site.DisqusShortname }}';
+s.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
+s.setAttribute('data-timestamp', +new Date());
+(d.head || d.body).appendChild(s);
+})();
+</script>
+<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 3fdfa4fb..e84a6174 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,4 +1,9 @@
 		<footer>
+			{{ if and .Params.comments (gt (len .Site.DisqusShortname) 0) }}
+            <figure class="article-discussion">
+              {{ template "_internal/disqus.html" . }}
+            </figure>
+			{{ end }}
 			<span>
 			&copy; <time datetime="{{ now }}">{{ now.Format "2006" }}</time> {{ .Site.Author.name }}. {{ i18n "generator" | safeHTML }}
 			</span>