
Shields.io: Quality metadata badges for open source projects - BerislavLopac
https://shields.io/
======
dashwav
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.

~~~
tikkabhuna
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
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](https://gitlab.com/gitlab-org/gitlab/issues/35771)

~~~
tikkabhuna
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:

------
bquinlan
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](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
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/...](https://raw.githubusercontent.com/healthchecks/healthchecks/master/templates/badge.svg)

And the function for rendering the template:
[https://github.com/healthchecks/healthchecks/blob/master/hc/...](https://github.com/healthchecks/healthchecks/blob/master/hc/lib/badges.py#L83)

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.

~~~
bquinlan
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.

------
simonw
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](https://github.com/badges/shields/graphs/contributors)

