1. Components
New 
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.
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
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
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/--.svg
So, let's say we want to build a
- 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:
https://img.shields.io/badge/utopian.io-%2420.9k-386cfe.png
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:
https://img.shields.io/badge/utopian.io-plastic-386cfe.png?style=plastic
https://img.shields.io/badge/utopian.io-flat-386cfe.png?style=flat
https://img.shields.io/badge/utopian.io-flat--square-386cfe.png?style=flat-square
https://img.shields.io/badge/utopian.io-for--the--badge-386cfe.png?style=for-the-badge
https://img.shields.io/badge/utopian.io-social-386cfe.png?style=social
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:
https://img.shields.io/badge/dynamic/json.png?label=BALANCE&uri=https://api.steemjs.com/getAccounts?names[]=hernandev&query=$.0.balance&colorB=5b5a2
Posted on Utopian.io - Rewarding Open Source Contributors