feat(comments): add support for CommentBox

Author: talha131

documentation/content/Connecting With Your Readers/commentbox-comments.md

@@ -0,0 +1,53 @@
+---
+Title: Comments -- Enable CommentBox
+Tags: interaction
+Category: Connecting With Your Readers
+Date: 2020-02-05 22:35
+Slug: enable-commentbox-comments
+Summary: Elegant offers CommentBox comments out of the box with few unique features
+authors: Talha Mansoor
+comment_id: 3a307b7d45
+commentbox_filter: off
+---
+
+You can use [CommentBox](https://commentbox.io/) for comments. You have to set `COMMENTBOX_PROJECT` to your CommentBox project ID.
+
+That's it. Elegant will take care of the rest.
+
+You can see a working example of CommentBox comments in this article.
+
+## Show CommentBox comments by default
+
+Just set `COMMENTBOX_PROJECT` variable.
+
+## Hide CommentBox comments by default
+
+Unset `COMMENTBOX_PROJECT` variable.
+
+This is the default setting.
+
+## Hide CommentBox comments by default. Show on Selected
+
+1. Set `COMMENTBOX_PROJECT`
+1. Set `COMMENTBOX_FILTER` to `True`
+
+This will hide CommentBox form on all pages.
+
+Now to show CommentBox form on selected posts, in article metadata set
+
+```yaml
+commentbox_filter: off
+```
+
+## Show CommentBox comments by default. Hide on Selected
+
+1. Set `COMMENTBOX_PROJECT`
+1. Remove `COMMENTBOX_FILTER` or set it to `False` which is its default value
+
+This will hide CommentBox form on all pages.
+
+Now to hide CommentBox form on selected posts, in article metadata set
+
+```yaml
+commentbox_filter: on
+```

documentation/pelicanconf.py

@@ -190,3 +190,4 @@
 }
 DISQUS_FILTER = True
 UTTERANCES_FILTER = True
+COMMENTBOX_FILTER = True

documentation/publishconf.py

@@ -22,6 +22,7 @@
     STAT_COUNTER_SECURITY = os.environ.get("STAT_COUNTER_SECURITY_PROD")
     GOOGLE_ANALYTICS = os.environ.get("GOOGLE_ANALYTICS_PROD")
     DISQUS_SITENAME = os.environ.get("DISQUS_SITENAME")
+    COMMENTBOX_PROJECT = os.environ.get("COMMENTBOX_PROJECT")
 
 elif os.environ.get("CONTEXT") == "branch-deploy" and os.environ.get("HEAD") == "next":
     SITENAME = "Elegant (Next)"

templates/_includes/_defaults.html

@@ -85,6 +85,12 @@
 {% set UTTERANCES_LABEL = UTTERANCES_LABEL %}
 {% endif %}
 
+{% if not COMMENTBOX_FILTER %}
+{% set COMMENTBOX_FILTER = False %}
+{% else %}
+{% set COMMENTBOX_FILTER = COMMENTBOX_FILTER %}
+{% endif %}
+
 {# Author's twitter handle. Used in Twitter card meta data #}
 {% if not TWITTER_USERNAME %}
 {% set TWITTER_USERNAME = '' %}

templates/_includes/commentbox_scripts.html

@@ -0,0 +1,14 @@
+{% macro comments_script_commentbox(project, identifier) %}
+<div class="commentbox" id="{{ identifier }}"></div>
+<script src="https://unpkg.com/commentbox.io/dist/commentBox.min.js"></script>
+<script>
+    commentBox("{{ project }}", {
+        onCommentCount(count) {
+            const ele = document.querySelector("#comment-accordion-toggle")
+            if (ele && count > 0) {
+                ele.innerText = `${count} Comment${count > 1 ? 's' : ''}`
+            }
+        }
+    });
+</script>
+{% endmacro %}

templates/_includes/comments.html

@@ -1,11 +1,13 @@
 {% macro comments_section(article) %}
 
-{% from '_includes/_defaults.html' import DISQUS_FILTER, UTTERANCES_FILTER with context %}
+{% from '_includes/_defaults.html' import DISQUS_FILTER, UTTERANCES_FILTER, COMMENTBOX_FILTER with context %}
 
 {% set use_disqus = (not DISQUS_FILTER or article.disqus_filter == "off") and DISQUS_SITENAME and article.disqus_filter != "on" %}
 
 {% set use_utterances = (not UTTERANCES_FILTER or article.utterances_filter == "off") and UTTERANCES_REPO and article.utterances_filter != "on" %}
 
+{% set use_commentbox = (not COMMENTBOX_FILTER or article.commentbox_filter == "off") and COMMENTBOX_PROJECT and article.commentbox_filter != "on" %}
+
 {% set url = SITEURL+ '/' + article.url %}
 {% set identifier = SITEURL+ '/' + article.url %}
 {% if article.comment_id %}
@@ -20,7 +22,7 @@
 {% set intro = article.comments_intro %}
 {% endif %}
 
-{% if article.status != 'draft' and article.comments != 'False' and (use_disqus or use_utterances) %}
+{% if article.status != 'draft' and article.comments != 'False' and (use_disqus or use_utterances or use_commentbox) %}
 
 <section>
     <h6 style="display:none;">Comments</h6>
@@ -29,7 +31,7 @@ <h6 style="display:none;">Comments</h6>
     <div class="accordion" id="accordion2">
         <div class="accordion-group">
             <div class="accordion-heading">
-                <a class="accordion-toggle disqus-comment-count comment-count"
+                <a class="accordion-toggle disqus-comment-count comment-count collapsed"
                    data-toggle="collapse"
                    data-parent="#accordion2"
                    {% if use_disqus %}
@@ -53,6 +55,12 @@ <h6 style="display:none;">Comments</h6>
                         {% from '_includes/utterances_scripts.html' import comments_script_utterances with context %}
                         {{ comments_script_utterances(UTTERANCES_REPO, identifier, UTTERANCES_LABEL, UTTERANCES_THEME) }}
                         {% endif %}
+
+
+                        {% if use_commentbox %}
+                        {% from '_includes/commentbox_scripts.html' import comments_script_commentbox with context %}
+                        {{ comments_script_commentbox(COMMENTBOX_PROJECT, identifier) }}
+                        {% endif %}
                     </div>
                 </div>
             </div>