badges / badges/shields

Website does not produce expected static badge outputs

Open
#9,852 7 comments 4 reactions 0 assignees View on GitHub
question
Dominant language
JavaScript
Stars
27.2k
Forks
5.6k
Avg merge
1d 8h
Merged PRs (30d)
46

Description

### Are you experiencing an issue with...

shields.io

### 🐞 Description

If I go to the website and ask it to generate a static badge, I get a 404 not found badge instead unless I add a hyphen to the badge name.

![image](https://github.com/badges/shields/assets/73482956/f3381cc8-90e5-4d23-b5a2-fe022132a3a5)

Additionally, the example states the following is valid:

> Label, message and color separated by a dash -. For example:
> ![Static Badge](https://img.shields.io/badge/any_text-you_like-blue) - https://img.shields.io/badge/any_text-you_like-blue

But if I enter `any_text-you_like` for the badge content, and `blue` for the color, it generates the following:

```
![Static Badge](https://img.shields.io/badge/any_text-you_like?color=blue)
```

which does not render as expected: ![Static Badge](https://img.shields.io/badge/any_text-you_like?color=blue), despite the docs saying badgeContents consists of a label and optional message.

### 💡 Possible Solution

Add a hyphen.

This should be clearly validated or if possible, fixed internally where possible. The docs should prevent me from making invalid badges but ideally it would be better if it just fixed it with the intention of making a single-colour badge instead. While the docs state that hyphen separators are acceptable, it is not clear that they are mandatory to stop things breaking.

Contributor guide

Open the contributing guide

Research direction

Start at the shields.io website's static badge generator and reproduce the documented `any_text-you_like-blue` example and the generated `any_text-you_like?color=blue` URL. Trace how badge content and color are assembled, then verify that the generator either produces a valid single-colour badge or clearly validates the required separator.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
40/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.