Add applause button support

[azzamsa]

https://applause-button.com/

[talha131]

I tried it a week or two ago. Then it wasn't working reliably. I was thinking of using the Google Analytics event tracker to implement this feature.

Related to #522

[azzamsa]

@talha131 don't you want to open the issue there ?

I've something like 66 visitors a day (in some occasion). It's very rare to find a visitor that leave a comments, and it's easier for them to just do clap/kudos.

[talha131]

Actually I didn't test it thoroughly or tried to reproduce the issue again. It could be a temporary issue or one my browser addons could be interfering with it. That's why I didn't open the issue there.

[azzamsa]

Do you have any suggestion where to add it :)

This is what I've tried.

modified templates/article.html

@@ -142,7 +143,8 @@
             {{ freelists(article) }}
         </div>
         </section>
-</div>
+        <applause-button style="width: 58px; height: 58px;"/>
+    </div>
 </article>
 {% endblock content %}

modified templates/base.html

<link rel="stylesheet" type="text/css" href="{{ SITEURL }}/theme/css/custom.css" media="screen">
+        <link rel="stylesheet" type="text/css" href="https://unpkg.com/applause-button/dist/applause-button.css" media="screen">
         {% endif %}
         {% endblock head_links %}
         {% include '_includes/favicon_links.html' %}
@@ -110,6 +111,7 @@
         {% endif %}
         <script src="//code.jquery.com/jquery.min.js"></script>
         <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
+        <script src="//unpkg.com/applause-button/dist/applause-button.js"></script>
         <script>
             function validateForm(query)
             {

But the result looks so bad, I need to modify the css and learn where to put <applause-button style="width: 58px; height: 58px;"/> this line.

I checked that the green color comes from inherit

[talha131]

This should do

elegant/templates/article.html

Line 75 in 8e63305

[azzamsa]

Would you like to give me a hint on what's going wrong?

I've tried to produce the MWE, and it's doing great.

But, in my blog:

is it because the css variable name clashes?

[talha131]

My guess is that the CSS file for the applause button has not been added correctly. Try to see if `applause-button.css` is available in the production or not.

…

[azzamsa]

No, it's in my local.

I use CDN:

modified   templates/base.html
@@ -42,6 +42,8 @@
         <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/theme/css/elegant.css" media="screen">
         <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/theme/css/admonition.css" media="screen">
         <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/theme/css/custom.css" media="screen">
+        <!-- <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/theme/css/applause-button.css"> -->
+        <link rel="stylesheet" href="https://unpkg.com/applause-button@3.3.0/dist/applause-button.css" />
         {% endif %}
         {% endblock head_links %}
         {% include '_includes/favicon_links.html' %}
@@ -110,6 +112,8 @@
         {% endif %}
         <script src="//code.jquery.com/jquery.min.js"></script>
         <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
+        <!-- <script src="//unpkg.com/applause-button/dist/applause-button.js"></script> -->
+        <script src="https://unpkg.com/applause-button@3.3.0/dist/applause-button.js"></script>
         <script>
             function validateForm(query)
             {

Am I missing something?

[talha131]

Seems fine. No idea what's going on here.

Perhaps, share the live version of the final output. That may help me zero in on the problem.

[azzamsa]

I'm afraid I can't do that, as I don't have something like 'staging' version of it.

I don't want my reader surprised by that clunky clap button while we're investigating it :(

I will dig more locally.

[talha131]

If you open a PR here, then netlify will automatically create a demo of it.

You can read about this feature here.

https://elegant.oncrashreboot.com/how-to-contribute#previewing-changes

But of course, for this, you will have to work on adding the button to the elegant directly, instead of adding it to your site only.

[azzamsa]

Wow, it work great in netlify preview:

also work great in localhost:

I don't have any idea why it didn't work in my local blog :)

If elegant want to support it. We need:

1. to adjust the location
2. is the claps button will always be in the bottom or following user scroll (like medium blog)

[talha131]

to adjust the location

Yeah, that needs tweak. I will fix it once you resolve the issues I have pointed out in your PR.

the claps button will always be in the bottom or following user scroll (like medium blog)

should be bottom. "Following user scroll" is distracting.

[talha131]

🎉 This issue has been resolved in version 5.1.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀