Improved version of adding utterances

README.md

@@ -170,6 +170,24 @@ To enable it, set your cusdis name in `_config.yml`:
 cusdis_app_id: my_data-app-id                                     
 ```
 
+#### Utterances
+[Utterances](https://utteranc.es) is a very good alternative to Cusdis and Disqus. It has GitHub login, rather than Google/Twitter login and doesn't ask permission. It is open source and the code is on GitHub. It stores the comments as GitHub issues for a page.
+
+To install Utterances, fill out the utterances lines in config.yml and install the app from [here](https://github.com/apps/utterances) to your repo. If you don't, Utterances will post a comment to install the app.
+
+It also has support for labels, which is exactly GitHub Issue labels. And, it supports emojis.
+
+After installing, fill out these lines under the `comments:` line:
+```yaml
+utterances:                                             # just fill out the below parts, and this is important. you MUST give a repo name like sylhare/Type-on-Strap. For more info, go to https://utteranc.es
+    repo:                                                 # your comments repo name
+    issue-term:                                           # your issue term. for info, go to https://utteranc.es
+    theme:                                                # GitHub Light/Dark, type it as github-[light/dark] and choose only one of them.
+    label:                                                # this is optional, but advised if you have two blogs
+```
+Label is optional. But fill the first three to activate Utterances after installing the app on your repo
+
+
 ### Math typesetting with KateX
 
 When KateX is set in `_config.yml`:

_config.yml

@@ -26,10 +26,18 @@ katex: true                                             # Enable if using math m
 mermaid: true                                           # Enable mermaid-js for sequence and diagrams
 google_analytics:                                       # Tracking ID, e.g. "UA-000000-01"
 cookie_consent: false                                   # To respect the usage of cookies
-disqus_shortname:                                       # Your discus shortname for comments
-cusdis_app_id:                                          # Your cusdis data-app-id
 color_theme: auto                                       # auto, dark or light
 
+# Comments
+comments:
+  disqus_shortname:                                       # Your discus shortname for comments
+  cusdis_app_id:                                          # Your cusdis data-app-id
+  utterances:                                             # just fill out the below parts, and this is important. you MUST give a repo name like sylhare/Type-on-Strap. For more info, go to https://utteranc.es
+    repo:                                                 # your comments repo name
+    issue-term:                                           # your issue term. for info, go to https://utteranc.es
+    theme:                                                # GitHub Light/Dark, type it as github-[light/dark] and choose only one of them.
+    label:                                                # this is optional, but advised if you have two blogs
+
 # PAGINATION
 paginate: 5
 paginate_path: "/blog/page:num"

_includes/social/cusdis.html

@@ -1,6 +1,6 @@
 <div class="comments" id="cusdis"
   data-host="https://cusdis.com"
-  data-app-id="{{ site.cusdis_app_id }}"
+  data-app-id="{{ site.comments.cusdis_app_id }}"
   data-page-id="{{ page.relative_path }}"
   data-page-url="{{ page.url }}"
   data-page-title="{{ page.title }}"

_includes/social/disqus.html

@@ -1,7 +1,7 @@
 <div class="comments">
     <div id="disqus_thread"></div>
     <script type="text/javascript">
-      var disqus_shortname = '{{ site.disqus_shortname }}';
+      var disqus_shortname = '{{ site.comments.disqus_shortname }}';
       (function() {
         var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
         dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';

_includes/social/utterances.html

@@ -0,0 +1,8 @@
+<script src="https://utteranc.es/client.js"
+        repo='{{ site.comments.utterances.repo }}'
+        issue-term="{{ site.comments.utterances.issue-term}}"
+        theme="{{ site.comments.utterances.theme }}"
+	label="{{ site.comments.utterances.label }}"
+        crossorigin="anonymous"
+        async>
+</script>

_layouts/post.html

@@ -37,11 +37,14 @@ <h1 id="{{ page.title | cgi_escape }}" class="title">{{ page.title }}</h1>
 {% include blog/post_nav.html %}
 {% endif %}
 
+<!--Utterances-->
+{% if site.comments.utterances.repo and site.comments.utterances.issue-term and site.comments.utterances.theme %} {% include social/utterances.html %} {% endif %}
+
 <!-- Cusdis -->
-{% if site.cusdis_app_id %}{% include social/cusdis.html %}{% endif %}
+{% if site.comments.cusdis_app_id %}{% include social/cusdis.html %}{% endif %}
 
 <!-- Disqus -->
-{% if site.disqus_shortname or site.theme_settings.disqus_shortname %}
+{% if site.comments.disqus_shortname or site.theme_settings.disqus_shortname %}
 {% include social/disqus.html %}{% endif %}
 
 <!-- To change color of links in the page -->