Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add applause button support #532

Closed
azzamsa opened this issue Nov 22, 2019 · 14 comments
Closed

Add applause button support #532

azzamsa opened this issue Nov 22, 2019 · 14 comments
Assignees
Milestone

Comments

@azzamsa
Copy link
Contributor

@azzamsa azzamsa commented Nov 22, 2019

@talha131

This comment has been minimized.

Copy link
Member

@talha131 talha131 commented Nov 23, 2019

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

@talha131 talha131 added this to the Roadmap milestone Nov 23, 2019
@azzamsa

This comment has been minimized.

Copy link
Contributor Author

@azzamsa azzamsa commented Dec 2, 2019

@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

This comment has been minimized.

Copy link
Member

@talha131 talha131 commented Dec 2, 2019

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

This comment has been minimized.

Copy link
Contributor Author

@azzamsa azzamsa commented Dec 2, 2019

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.

image

I checked that the green color comes from inherit

@talha131

This comment has been minimized.

Copy link
Member

@talha131 talha131 commented Dec 2, 2019

This should do

@azzamsa

This comment has been minimized.

Copy link
Contributor Author

@azzamsa azzamsa commented Dec 2, 2019

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.

image

But, in my blog:

image

is it because the css variable name clashes?

@talha131

This comment has been minimized.

Copy link
Member

@talha131 talha131 commented Dec 2, 2019

@azzamsa

This comment has been minimized.

Copy link
Contributor Author

@azzamsa azzamsa commented Dec 2, 2019

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

This comment has been minimized.

Copy link
Member

@talha131 talha131 commented Dec 2, 2019

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

This comment has been minimized.

Copy link
Contributor Author

@azzamsa azzamsa commented Dec 2, 2019

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

This comment has been minimized.

Copy link
Member

@talha131 talha131 commented Dec 2, 2019

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 added a commit to azzamsa/elegant that referenced this issue Dec 3, 2019
@azzamsa azzamsa mentioned this issue Dec 3, 2019
2 of 5 tasks complete
@azzamsa

This comment has been minimized.

Copy link
Contributor Author

@azzamsa azzamsa commented Dec 3, 2019

Wow, it work great in netlify preview:

image

also work great in localhost:

image

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 talha131 self-assigned this Dec 3, 2019
@talha131 talha131 modified the milestones: Roadmap, 2019 - Q4 Dec 3, 2019
@talha131

This comment has been minimized.

Copy link
Member

@talha131 talha131 commented Dec 3, 2019

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 talha131 modified the milestones: 2019 - Q4, Roadmap Dec 4, 2019
azzamsa added a commit to azzamsa/elegant that referenced this issue Dec 5, 2019
@talha131 talha131 closed this in e4872fd Dec 5, 2019
talha131 pushed a commit that referenced this issue Dec 5, 2019
# [5.1.0](V5.0.1...V5.1.0) (2019-12-05)

### Bug Fixes

* **applause:** applause_button tag does not auto close ([d37e691](d37e691))
* **typography:** make headings align to the left instead of justify ([101285e](101285e))

### Features

* **applause:** add option to set applause_button_id ([8eda9a4](8eda9a4))
* **applause:** add support for applause button ([e4872fd](e4872fd)), closes [#532](#532)
* **applause:** simplify filter option ([9f8b60f](9f8b60f))
@talha131

This comment has been minimized.

Copy link
Member

@talha131 talha131 commented Dec 5, 2019

🎉 This issue has been resolved in version 5.1.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

@talha131 talha131 added the released label Dec 5, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
2 participants
You can’t perform that action at this time.