Kudos for your site and blogs
MIT License
This project started at a small, snowy afternoon project with the aim to experiment a little with Jasmine, Firebase, Grunt and Travis-CI integration.
The idea is to give people Kudo support for their site or blog. Originally Kudos have been introduced by the Svbtle blog engine.
You can see the script live on my own blog at http://juristr.com/blog.
Just clone the repo and execute
$ npm install
$ grunt
This should install the required packages and then compress the required files and copy them to the dist
directory.
Note, you need to have
grunt-cli
installed. Executenpm install -g grunt-cli
in case you don't have it already
Follow these steps to setup kudos for your site.
Step 1 - Firebase account This kudo script uses Firebase as the backend data store. As such, you first need to create a Firebase account and create a new database. You can obviously also reuse an existing one if you want so.
Step 2 - Configure Firebase
Open kudos.firebase.min.js
(or the non-minified kudos.firebase.js
) and change the firebaseUrl
to have it point to the one you just created in step 1.
...
// replace this url with yours!!
var firebase = new Firebase('https://<yourdb>.firebaseio.com/'),
firebaseKudos = firebase.child('kudos'),
...
...
Next, you need to configure your Firebase store's authentication and add proper security rules.
Activate anonymous authentication and configure the authorized domains (normally localhost for debugging and your site's domain name).
Finally you also need to register some security rules in the "Security & Rules" section of your Firebase backend. Simply copy&paste the following:
{
"rules": {
"kudos": {
"$url": {
".read": true,
".write": "data.child('likes').val().length === 0",
"likes": {
"$userid": {
".read": true,
".write": "auth.uid === $userid"
}
}
}
}
}
}
Step 3 - Include kudo scripts
Include the kudo scripts from the dist
directory
<!-- Kudos script -->
<script type='text/javascript' src='https://cdn.firebase.com/js/client/1.1.2/firebase.js'></script>
<script type="text/javascript" src="/dist/kudos.min.js"></script>
<script type="text/javascript" src="/dist/kudos.firebase.min.js"></script>
<link rel="stylesheet" href="/dist/kudos.min.css">
Note that you need to have jQuery as well.
Step 4 - Add HTML snippet As the last step include the following snippet
<figure class="kudo">
</figure>
in your DOM where you'd like to have the kudo element appear and initialize it by invoking
$('figure.kudo').kudoable({
dataStore: window.firebaseStorage
});
That's it. You should be ready to go.
Simply use GitHub's issues. PRs are welcome as well :)
Credits have to be given to Amit Upadhyay who provided the original Svbtle independent Kudo implementation by using Parse as the backend service.