grtp.co

Gratipay widgets + widget API

Getting Started

Quickstart:

$ git clone [email protected]:gratipay/grtp.co.git
$ cd grtp.co
$ make run

Then visit http://localhost:9537/test/

Documentation

JSDoc comments are used, but documentation generation is not setup yet. The code is documented, please dive in.

Configuration options:

• window.grtpAPI - Where to look for the grtp.co API
  • defaults to //grtp.co/v1/
• window.gratipayURI - Where to look for Gratipay
  • defaults to https://gratipay.com/

Examples

In the following examples, just switch out rummik with your Gratipay username.

Standard Widgets

<script data-gratipay-username="rummik"
  src="//grtp.co/v1.js" async></script>

<script data-gratipay-username="rummik"
  data-gratipay-widget="button"
  src="//grtp.co/v1.js" async></script>

<script data-gratipay-username="rummik"
  data-gratipay-widget="giving"
  src="//grtp.co/v1.js" async></script>

Custom Widgets

You can create your own widgets by adding data-gratipay-widget="custom" to your widget's HTML, and the following classes:

• Text
  • gratipay-receiving - dollar-sign prefixed value of receiving
  • gratipay-username - the user's username
  • gratipay-goal - dollar-sign prefixed value of goal
  • gratipay-giving - dollar-sign prefixed value of giving
  • gratipay-identity - I if number is singular, We if number is plural
• Links
  • gratipay-profile-link - sets the href attribute to the user's profile link
  • gratipay-link - sets the href attribute to https://gratipay.com/
• Misc styling
  • gratipay-goal-progress-bar - sets the element's width to a percentage value of the user's goal progress

<div data-gratipay-username="rummik" data-gratipay-widget="custom">
  I receive <a class="gratipay-profile-link">
    <span class="gratipay-receiving">$0.00</span> / wk
  </a>
  on <a class="gratipay-link">Gratipay</a>.
</div>
<script src="//grtp.co/v1.js"></script>

Other Widgets

Shields.io:

<img src="http://img.shields.io/gratipay/Gratipay.svg">

Deployment

Grtp.co is hosted on a Digital Ocean droplet. It runs nginx and the publishing root is /home/grtp.co/production.

To modify the nginx configuration, you need someone who already has access to add your key to /root/.ssh/authorized_keys. You'll find the config in /etc/nginx/sites-enabled/grtp.co. After you make changes, you can reload configuration in nginx like this:

# service nginx reload

To deploy, you need someone who already has access to add your key to /home/grtp.co/.ssh/authorized_keys. Then add the remote to your own local repo:

$ git remote add prod [email protected]:production

Then you can git push prod. There's a post-receive hook that updates the filesystem on the droplet and runs the grunt minify task.

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.

To help keep a consistent style, we also recommend using EditorConfig.

License

Released into the public domain (per CC0).