Giter Club home page Giter Club logo

shields's Introduction

build status service-test status coverage chat on Discord

This is home to Shields.io, a service for concise, consistent, and legible badges in SVG and raster format, which can easily be included in GitHub readmes or any other web page. The service supports dozens of continuous integration services, package registries, distributions, app stores, social networks, code coverage services, and code analysis services. Every month it serves over 870 million images and is used by some of the world's most popular open-source projects, VS Code, Vue.js and Bootstrap to name a few.

This repo hosts:

Examples

  • code coverage percentage: coverage
  • stable release version: version
  • package manager release: gem
  • status of third-party dependencies: dependencies
  • static code analysis grade: codacy
  • SemVer version observance: semver
  • amount of Liberapay donations per week: receives
  • Python package downloads: downloads
  • Chrome Web Store extension rating: rating
  • Uptime Robot percentage: uptime

Make your own badges! (Quick example: https://img.shields.io/badge/left-right-f39f37)

Quickstart

Browse a complete list of badges and locate a particular badge by using the search bar or by browsing the categories. Click on the badge to fill in required data elements for that badge type (like your username or repo) and optionally customize (label, colors etc.). And it's ready for use!

Use the button at the bottom to copy your badge url or snippet, which can then be added to places like your GitHub readme files or other web pages.

Contributing

Shields is a community project. We invite your participation through issues and pull requests! You can peruse the contributing guidelines.

When adding or changing a service please add tests.

This project has quite a backlog of suggestions! If you're new to the project, maybe you'd like to open a pull request to address one of them.

You can read a tutorial on how to add a badge.

GitHub issues by-label

If you intend on reporting or contributing a fix related to security vulnerabilities, please first refer to our security policy.

Development

  1. Install Node 20 or later. You can use the package manager of your choice. Tests need to pass in Node 20 and 21.
  2. Clone this repository.
  3. Run npm ci to install the dependencies.
  4. Run npm start to start the badge server and the frontend dev server.
  5. Open http://localhost:3000/ to view the frontend.

When server source files change, the badge server should automatically restart itself (using nodemon). When the frontend files change, the frontend dev server (docusaurus start) should also automatically reload. However the badge definitions are built only before the server first starts. To regenerate those, either run npm run prestart or manually restart the server.

To debug a badge from the command line, run npm run badge -- /npm/v/nock. It also works with full URLs like npm run badge -- https://img.shields.io/npm/v/nock.

Use npm run debug:server to start server in debug mode. This recipe shows how to debug Node.js application in VS Code.

Shields has experimental support for Gitpod, a pre-configured development environment that runs in your browser. To use Gitpod, click the button below and sign in with GitHub. Gitpod also offers a browser add-on, though it is not required. Please report any Gitpod bugs, questions, or suggestions in issue #2772.

Edit with Gitpod

Snapshot tests ensure we don't inadvertently make changes that affect the SVG or JSON output. When deliberately changing the output, run SNAPSHOT_DRY=1 npm run test:package to preview changes to the saved snapshots, and SNAPSHOT_UPDATE=1 npm run test:package to update them.

The server can be configured to use Sentry (configuration) and Prometheus (configuration).

Daily tests, including a full run of the service tests and overall code coverage, are run via badges/daily-tests.

Hosting your own server

There is documentation about hosting your own server.

Related projects

Awesome

Status badges are used widely across open-source and private software projects. Academics have studied the "signal" badges provide about software project quality. There are many existing libraries for rendering these badges, and alternatives to the hosted Shields badge service. awesome-badges is a curated collection of such resources. Contributions may be considered there. (The presence of a project in that collection should not be interpreted as an endorsement nor promotion from the Shields project)

History

b.adge.me was the original website for this service. Heroku back then had a thing which made it hard to use a toplevel domain with it, hence the odd domain. It used code developed in 2013 from a library called gh-badges, both developed by Thaddée Tyl. The project merged with shields.io by making it use the b.adge.me code and closed b.adge.me.

The original badge specification was developed in 2013 by Olivier Lacan. It was inspired by the Travis CI and similar badges (there were a lot fewer, back then). In 2014 Thaddée Tyl redesigned it with help from a Travis CI employee and convinced everyone to switch to it. The old design is what today is called the plastic style; the new one is the flat style.

You can read more about the project's inception, the motivation of the SVG badge specification, and the specification itself.

Project leaders

Maintainers:

Operations:

Alumni:

License

All assets and code are under the CC0 LICENSE and in the public domain unless specified otherwise.

The assets in logo/ are trademarks of their respective companies and are under their terms and license.

Community

Thanks to the people and companies who donate money, services or time to keep the project running. https://shields.io/community

shields's People

Contributors

calebcartwright avatar chris48s avatar daniel15 avatar dependabot-preview[bot] avatar dependabot[bot] avatar espadrine avatar g105b avatar github-actions[bot] avatar greenkeeper[bot] avatar jcxldn avatar jnullj avatar krak3n avatar mathiasbynens avatar niccokunzmann avatar olivierlacan avatar paulabarszcz avatar paulmelnikow avatar peterdavehello avatar platan avatar pr7prashant avatar pyvesb avatar raphink avatar redsparr0w avatar ritwickdey avatar sagiegurari avatar scop avatar sethfalco avatar sunny0826 avatar techtonik avatar tooomm avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

shields's Issues

Build system

Talking with @sferik it seems like as more badge versions are contributed to this project, either by being added or being modified it might become tedious to clean up the SVG source files from artifacts dumped by Adobe whenever Illustrator touches the files.

To prevent having to do cleanup manually it would be nice to use a simple Rake task to fetch all the required dependencies. We also want to be able to clean stuff up before someone contributes back to the project. And finally, eventually we'll want to be able to export everything properly to PNG whenever needed. That last one is still being talked about in #23 since we haven't come up with a satisfying solution, but let's be hopeful. 😸

Prerequisites

  • Homebrew

Features

  • install all necessary fonts & dependencies (svg libraries, etc)
  • clean up the AdobeCrap™ comments and weird inconsistent tabs & spaces
  • hopefully export everything to PNG in a consistent matter so we don't need Illustrator, ever. Ever. Additionally it would make it easier to output @2x badges down the line.

/cc @ackerdev

Code Climate badge tweaks

These look great and we'd like to use them. To do so, we need a few tweaks:

  • Change "GPA" text to "code climate" so it's a bit more descriptive. As pointed out, GPAs are a US-centric concept and even when GPA is understood it's not clear how that relates to the project (specifically, it's the code). So "code climate" is also a descriptor of the number included (in addition to the brand, of course).
  • We're going to round to one decimal place, so we need images from 0.0 - 4.0.
  • We also need a state for "unknown" (would be very very rare, but possible). Probably just a "?" instead of a number is fine, in grey.
  • The numbers should map to colors as follows:
    • 3.6 - 4.0 dark green
    • 2.6 - 3.5 light green
    • 1.6 - 2.5 yellow
    • 0.6 - 1.5 orange
    • 0.0 - 0.5 red

If you could help me out with those things, I'd really appreciate it, and can get started on rolling these out. We'd need PNGs as the final product (41, I think, for 0.0-4.0 + unknown state).

Awesome work on this!

-Bryan

Talk to / implement Bintray

Bintray as a new player could have the same badges as PyPI and other repos (# of downloads, latest version, etc).

The [REST API](https://bintray.com/docs/api/ makes this quite easy; the only special thing to take care of is keeping an eye on the rate limits, and cache data so that not every shield request leads to an API request.

sell Shields to Gittip

Over on #15 you'll see that Gittip has acquired Shields, as far as @olivierlacan and I are concerned. However, in the spirit of openness and transparency, I'm opening this ticket to give anyone a chance to raise objections to this deal. Sorry we rushed ahead without consulting the community properly. :-(

There's a parallel ticket at gratipay/gratipay.com#1307, and I've recorded my own reasoning behind Gittip's interest over there.

The plan is to proceed with the deal but leave this and gratipay/gratipay.com#1307 open for a few days to surface any objections.

errors in PNG should result in PNG

We should serve 500s as a PNG.

Traceback (most recent call last):

  File "aspen/website.py", line 76, in handle_safely
    response = self.handle(request)
  File "aspen/website.py", line 109, in handle
    response = request.resource.respond(request)
  File "aspen/resources/dynamic_resource.py", line 47, in respond
    exec self.pages[1] in context
  File "/app/www/%first/%second.png.spt", line 76, in <module>
    transformed = transform_and_cache(transform_key, first, second, color)
  File "/app/www/%first/%second.png.spt", line 28, in transform_and_cache
    first, second, color = transform(first, second, color)  # expensive HTTP
  File "shields_io/services.py", line 60, in gittip
    receiving = float(json.loads(fp.read())['receiving'])
  File "aspen/json_.py", line 95, in loads
    return _json.loads(*a, **kw)
  File "json/__init__.py", line 338, in loads
    return _default_decoder.decode(s)
  File "json/decoder.py", line 365, in decode
    obj, end = self.raw_decode(s, idx=_w(s, 0).end())
  File "json/decoder.py", line 383, in raw_decode
    raise ValueError("No JSON object could be decoded")
ValueError: No JSON object could be decoded

https://app.getsentry.com/shields/shields/group/7771652/

General purpose shields

Some ideas for general purpose badges:

  • sandbox
  • early development
  • in development
  • production
  • unstable
  • released
  • stable
  • abandoned (see stillmaintained ?)
  • looking for contributors
  • ...

sunset badgr.co

There can't be that many people using Badgr.co yet but I know there's a few. I'm going to start tweeting and linking here to hopefully let people know that Badgr.co is going away. I suppose we could leave some overlap with Shields.io once that's launched. Probably for how much traffic Badgr.co is getting a month of overlap would be fine (it's double the SSL cost $20/mo).

Refine creation process

AKA "Free as in Freedom" the shit out of the shield creation process.

To both remove the need for proprietary tools like Photoshop and Illustrator, and to automate the creation of new badges, we should do the following:

  • Create new, clean template SVG
    Remove illustrator noise, use semantic class names for easy node manipulation. Make note of gradients for automation in the generator script.
  • Create a generator script to parse and edit the SVGs, and spit them out as PNGs
    Nokogiri to parse SVG XML. Make it easy to define the required badges that will be generated. See https://github.com/olivierlacan/shields/issues/15#issuecomment-13878052 for a guide to convert the SVGs to PNGs using imagemagick
  • Create a rake script to install font & deps via homebrew

Finding a portable retina-compatible solution

Investigate options for embedding the font into the SVG so as to allow the SVG to be easily portable.
Possibilities include:

Convert OpenSans to an SVG font* and embed it into the SVG
Remove unnecessary characters; should only need unaccented alphanumerics, dash, and period. For static badges, would be possible to remove all glyphs that the badge does not use. Be wary of excessive filesize.

Convert OpenSans to an SVG font* and link externally
Best option, but may be a concern as Firefox restricts cross-domain font linking.

Convert to Outlines
If all else fails, static badges can be converted to outlines and it will work just fine. Leaves us with no solution for dynamic badges ala gemfury's gem version badge.

*Licensing should not be an issue, but double check to be safe that it does not conflict.
References:
http://nimbupani.com/about-fonts-in-svg.html
http://frabru.de/c.php/article/SVGFonts-usage

Reach out to vendors when shields.io is ready for primetime.

We have few languishing issues from vendors that either reached out, or that we discovered were trying to using the style we set forth but didn't quite succeed in doing so.

As soon as shields.io is live and kicking we should reach out to all these folks and urge them to update their shield implementations. 😃

Badges for Semaphore

Hello,

I'm working on Semaphore and would like to get it "shielded".

We uses badges for the following build statuses:

  • passing
  • pending
  • failing
  • unknown

Build badges from here:
Shields Badges

suite our color taste but we need a badge for the "unknown" status instead of the "error" status.

Could you create those badges for us or what is the standard workflow?

Semver

It would be nice to have a shield for Semver that could represent version numbers in a project.

VersionEye Badges

Hey. Would be great if we would have VersionEye dependency badges who are conform with the other ones. Our current badges are self made and dancing out of the row. They are little bit to big. We tried to produce conform badges, but they are a little bit unsharp if we size them down to 18px high.
I appreciate every kind of support / input.

button-up-to-date copy
button-up-to-date

Find a replacement for Calibri

  • First it's a Microsoft font, which makes it a no-no.
  • Second it behaves poorly with all-caps and numbers as you can see below:

configure CDN

I have an account at MaxCDN that I'm planning to use for this, if there are no objections.

Cocoapod Badges

Hello,

First of all, thank you for this project! It's amazing, simple and beautiful. I think you did a great job.

Based on it, I started a project for badges for Cocoapods (Objective-C package manager) and I've created badges for a pod (package) version and another for the platforms it supports (iOS, OSX). Don't worry, I gave you credits for the SVG used: http://fjcaetano.github.io/cocoapod-badges/

The guys from Cocoapods got super excited, and even created an API for me (since the first version was a little hack on their site :P) and they tweeted it to spread it to other developers. https://twitter.com/CocoaPods/status/342238471865372674

Now, if it's not asking much, I'd also like your help sharing it. Simply adding a link to my repo on your services list would be a great help!

Btw, I'm serving my badges dynamically, even though I'm serving them as svg and not png. I saw there's an issue on that matter, so why don't you take a look at my project?

Shields as a Service

Let's discuss what we will need for the possibility of offering Shields as a Service. What considerations do we need to make to ensure that it is feasible and robust?

Implement Jenkins "Open Tasks" counters

Originally posted by @jhermann on the old badgr.co issue tracker.

This would create a badge from a link like

Note that this introduces an URL schema to support "many of the same" type of services (e.g. "Any Jenkins hosted somewhere on the web").

Badge would look like “[TODO][hi# / norm# / lo#]” (2nd field color green/yellow/red, depending on the TODO counter classes being >0), from these API calls:

  • first, call «joburl»/tasks example
  • tack on api/json to the redirect Location you get (urljoin) example
  • decode JSON, render counters into image

If that works, things could be extended with …/build.png (build status), …/build_no.png (build #), and so on (there's a lot of data in the API).

PSD cleanup

I noticed while working on #20 that the PSD could use some improvements that might make it easier going forward to transition Shields into a service (which I'm interested in helping with, by the way).

It might be helpful to convert shadows, gradients and color overlays to all use "Normal" blending. This makes it easier for something like ImageMagick or even CSS to build badges from composite layers. And these badges are sufficiently simple where that's entirely possible.

Also, the gradient in the PSD extends well outside of the bounds of the badge mask. That's fine for exporting badges but it would be nice to have the point-to-point gradient more strictly defined, again for ease in composition with ImageMagick and/or CSS.

Gittip badges

I realize that a lot of discussion about Gittip badges as been included in #15. Really should be its own thing.

Here are the main messages relevant to this topic:

As a quick sidenote, I didn't catch it during the conversation but if you display $46/wk on the donations badge you risk people thinking it costs $46/wk to donate to this project. That's the first thing that jumped to my mind.

It is more informational the route of [donations | $46/wk ] but it's ambiguous.

I don't think it's inappropriate to use the Gittip badge as a piece of information regarding the fact that *the maintainers of this project would like you to contribute $1/wk to support it`.

Hence why ultimately, [ donate | $1/wk ] ends up making a lot more sense to me. For the unambiguity and the intention-revealing factor. Yes, it's a call to action. I can live with that.

/cc @whit537

figure out Markdown story for Retina badges

was: Push GitHub to support image width & height in Markdown

Just reading up on Multimarkdown I found this: https://github.com/fletcher/MultiMarkdown/wiki/MultiMarkdown-Syntax-Guide#anchor-and-image-attributes

Real bummer that there's nothing similar in either standard markdown or GFM. Could we push GitHub to support it so that people don't necessarily have to use HTML (in some places it's not possible, I'm sure) when they eventually want to use Retina badges? Maybe by making GFM support it ourselves?

david-dm.org

The folks at https://david-dm.org/ are using Shields-like badge that are just different enough to stand out (see dredd).

image

Would be nice to reach out to them when Shields.io is live.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.