Shields.io: Quality metadata badges for open source projects(shields.io)

109 pointsby BerislavLopac7 lat temu10 comments

Shields.io: Quality metadata badges for open source projects

https://shields.io/

3 comments

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.

tikkabhuna7 lat temu

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.

andr37 lat temu

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

tikkabhuna7 lat temu

Thanks andr3. That captures my thoughts perfectly. :-)

Its great to see such an open company. My boss and I frequently check Gitlab issues and look forward to release on the 22nd. :thumbsup:

rwj7 lat temu

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

bquinlan7 lat temu

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.

olivierlacan7 lat temu

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 :-)

cuu5087 lat temu

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.

bquinlan7 lat temu

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.

simonw7 lat temu

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