Shields.io: Quality metadata badges for open source projects

by BerislavLopac • 7 years ago

109 10 7 years ago

dashwav• 7 years ago

One of the features that I really like about Gitlab after moving some of my personal projects over to it is how there is a dedicated section under the title to display your badges, without having to put them into the README.

I think that a very important feature of a good README is that the most important information is at the top of the README. Badges going in at the top of the README as images dilutes that somewhat imo, especially since most of the badges are about the repo and not necessarily about the project itself.

Also Shields.io is a fantastic service, and was super helpful to me while I was setting up some badges recently - very well done UX that really switches the challenge from setting up the badges to attempting not to include too many of them due to how easy it is.

tikkabhuna2• 7 years ago

Didn't realise Gitlab supported that. We've been putting some badges in our READMEs. Typically those from the Gitlab CI page.

What does annoy me is the classic Gitlab "MVP" approach. Under Gitlab CI -> General Pipelines is some badge code I can copy. There's no mention that I can add them to the badge section of the project, nor is there anything in General -> Badges section to say "Add Pipeline status". I have to copy the link/img URLs myself.

andr3• 7 years ago

That's a great point, @tikkabhuna!

It seems like fixing that problem you describe could be a good way to improve the discoverability of the mentioned Badges area.

I've taken the liberty of documenting this in an issue [1] and putting forward a proposal. Would something like what I wrote there solve this problem for you?

If you have any more feedback to add, feel free to drop a comment.

I work as a Frontend Engineering Manager at GitLab and will raise the visibility of this issue to the right folks to get this on their radar.

Thanks for mentioning this.

[1] https://gitlab.com/gitlab-org/gitlab/issues/35771

rwj• 7 years ago

It's silly, but when I was moving some projects to SourceHut, this was one of the first things I noticed was missing.

bquinlan2• 7 years ago

I created an equivalent project for people who wanted to create the same style of badges from Python (or from the command line): https://github.com/google/pybadges

Python example:

  from pybadges import badge
  s = badge(left_text='coverage',
            right_text='23%', 
           right_color='red')
  # s is a string that contains the badge data as an svg image.
  print(s[:40]) # => <svg height="20" width="191.0" xmlns="ht

Command line example:

  python -m pybadges \
    --left-text="coverage" \
    --right-text="23%" \
    --right-color="red"

But there are lots more formatting options documented on the project page.

cuu508• 7 years ago

I went more minimalistic and added SVG badge support in the form of a Django template and a couple small python functions.

The template: https://raw.githubusercontent.com/healthchecks/healthchecks/...

And the function for rendering the template: https://github.com/healthchecks/healthchecks/blob/master/hc/...

One funky thing there is the measurement of text width. The width of the badge depends of the width of the text you put into it. I simply measured the width of each individual alphabet letter, and use that to calculate the width of a string. It's not super accurate, but works fine in practice. It was a fun weekend project.

bquinlan2• 7 years ago

Nice! My approach is very similar except that I have width mappings for non-ASCII characters. Also, since DejaVu Sans (the font that shield.io, pybadges and healthchecks use) is heavily kerned, I have a table of kerning widths.

You can also opt to use precise text width measurements (important for Arabic, Chinese, etc.) but then you have to have the font file available on your system.

olivierlacan• 7 years ago

Hey, Shields creator here. One of the most important features of Shields since the very beginning was to offer a conventional usable and user-centered style to fight the vendor badge arms race between all the developer SaaS companies that were sprouting up around 2012/2013. See: https://olivierlacan.com/posts/an-open-source-rage-diamond/

Please consider contributing to Shields if you want to improve Python ecosystem support. We already support PyPI, Pipenv/GitHub, and a host of others. I'll gladly admit the interface for discovering badge types could use some improvement but the Shields community and maintainers have been working on that for a while.

We spent a lot of time designing, refining, adding support for hundreds of services and package managers, and offering a ridiculously simple to use API for everyone's metadata badge needs. So check out img.shields.io and see for yourself how you can already (lightly) customize badge styles to suit your taste.

https://img.shields.io/badge/contribute-please-red?style=fla...

Thanks :-)

simonw• 7 years ago

The thing I find most interesting about this project is that it shows how a well co-ordinated open source effort can solve the problem of trying to keep integrations against hundreds of different APIs working.

I would have thought that running a project integrating against this many different APIs would be a completely insane idea - but it works great when 300+ people help you out! https://github.com/badges/shields/graphs/contributors

Shields.io: Quality metadata badges for open source projects

Related Stories