Project total rewards API for Utopian Rewards Badges

1. Components

New @utopian-io API method.

2. Background.

There are several badges project maintainers use on open source projects, this one, for example, maintained by me:

It's a simple way to show important information about a project, in this case, unit-testing coverage, current stable version, and license.

Anyone, wanting to display customized badges, can easily do so, by using https://shields.io.

3. Proposal.

@utopian-io is an incredible project, which rewards people who contribute to the open source world.

In order to increase utopian popularity, having a single utopian API method capable or returning all rewards for a given open source project, made through utopian, would allow building badges, to be included on Github projects, advertising @utopian-io.

4. Mockups / Examples

Let's say, for example, the project on the previous example had this badge system on its readme:

5. Benefits

Having special, easily generated badges for @utopian-io would increase its visibility on external communities.

---

6. Update 1: Shields.io Tutorial.

Since the feedback on this suggestion has been amazing, I've decided to go the extra mile and provide in-depth instructors on shields.io usage, so building this suggestion would be easier.

6.1. Basic Usage.

There are 3 pieces of information, required to generate a badge using shields.io.

• Subject: a Simple label that goes on the left side of the badge.
• Value: Value that will be displayed on the colored / right side of the badge.
• Color: A color name or hex value (without the # symbol) that will be used to color the badge.

So, the general syntax for it is just this:

https://img.shields.io/badge/<SUBJECT>-<STATUS>-<COLOR>.svg

So, let's say we want to build a @utopian-io badge as on the cover of this post:

• Subject: utopian.io
• Status: $20.9k
• Color:: #386CFE

https://img.shields.io/badge/utopian.io-$20.9k-386cfe.svg

Would result in:

6.2. SVG vs SteemImages.com.

Problem 1: SteemImages.com is used to parse images on most Steem frontends, including utopian, so when rendering such badges on Steem posts, one must replace the .svg with .png in order to make it displayable though SteemImages.com, which only accepts png, jpg and gif formats.

Problem 2: For badges to work well through SteemImages.com, one generating badge links, must encode the URL without encoding the domain/host, the $ sign on the example translates to its URL correspondent %24 but the host keeps intact:

The full example which works with SteemImages.com:

6.3. Other formats and options.

Yes, just like on the cover, there are several possible styles which may be used by appending a ?style= option on the query string:

6.4. Direct JSON Query.

Yes, it's possible to just pass a JSON link and make a badge. How?

Imagine we want to parse my Steem balance from JSON and make it into a badge.

As we know well, SteemS HTTP API could provide such information:

https://api.steemjs.com/getAccounts?names[]=hernandev

The result for this HTTP call is an array of accounts, as we want just the first one, querying the JSON path would be $.0.balance (item of index zero from JSON response array, key balance):

So, we could make this into a badge, by doing:

---

Posted on Utopian.io - Rewarding Open Source Contributors

---