Skip to content
Permalink
Browse files

feat(comments): add support for CommentBox

  • Loading branch information
talha131 committed Feb 5, 2020
1 parent 20cb4ae commit c56e61eb60a84d4d65ca2e55e068b6f0f3a87ee1
@@ -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
```
@@ -190,3 +190,4 @@
}
DISQUS_FILTER = True
UTTERANCES_FILTER = True
COMMENTBOX_FILTER = True
@@ -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)"
@@ -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 = '' %}
@@ -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 %}
@@ -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>

0 comments on commit c56e61e

Please sign in to comment.
You can’t perform that action at this time.