Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/chipwolf/badgesort

Automate the rendering of your shields.io logo badges and sort them in a visually pleasant way for your profile using Hilbert color sorting
https://github.com/chipwolf/badgesort

action actions badge badge-generator badges color color-ordering color-scheme color-schemes color-sorter color-sorting colors github-action github-actions github-profile palette-sorting profile profile-readme python3 shieldsio

Last synced: 20 days ago
JSON representation

Automate the rendering of your shields.io logo badges and sort them in a visually pleasant way for your profile using Hilbert color sorting

Awesome Lists containing this project

README

        

[![BadgeSort](https://img.shields.io/badge/BadgeSort-000000.svg?style=for-the-badge&logo=githubsponsors)](https://github.com/ChipWolf/BadgeSort)

# Generate and Sort Branded [Shields.io](https://shields.io) Badges by Color

**This is a Python 3 command-line tool and [GitHub Action](https://github.com/features/actions) automating the generation and color sorting of badges from [Shields.io](https://shields.io) that contain brand logos from [Simple Icons](https://simpleicons.org/).**

## Background:

Many [awesome GitHub profiles](https://github.com/abhisheknaiidu/awesome-github-profile-readme) contain a series of these badges to clearly indicate which tools, services, or other brands the user is affiliated with. These badge collections usually adopt the brand's color, icon, and name.

## The problem:

[Shields.io](https://shields.io) URLs for these badges are normally handcrafted or copypasta, following this rough format:

`https://img.shields.io/badge/-.svg?style=&logoColor=&logo=`

Normally, the user must repeat the process of manually rendering this URL for each badge they wish to display. This is what the result of this work might look like:

![Unsorted Badges](./.github/unsorted.png)

Then, if the user is inclined, they may spend additional time ordering the badges by color to make their profile more visually appealing:

![Sorted Badges](./.github/sorted.png)

This is a time consuming process if performed manually; it is difficult to maintain, hard to keep consistent, and makes future adjustments offputting.

## The solution:

This project automates the process of rendering out the badges into Markdown or HTML from a simple list of slugs.

The badges can be sorted by color _[as default]_ or left in the order specified.

![1D Hilbert sorted colors](./.github/hilbert.png)

> **Note**
> _Thanks to [this article](https://www.alanzucconi.com/2015/09/30/colour-sorting/) by **Alan Zucconi**, the visually appealing color sort is achived using a Hilbert walk._

## Examples:

### Generate five specific badges ordered by color:

#### _GitHub Action:_

```yaml
- uses: docker://ghcr.io/chipwolf/badgesort:latest
with:
format: markdown # default
id: default # default
output: README.md
slugs: |
osu
github
americanexpress
nodered
opensea
sort: hilbert # default
style: for-the-badge # default
```

#### _CLI:_

```bash
$ python -m badgesort.icons -s osu github americanexpress nodered opensea
```

#### _Output:_

[![BadgeSort](https://img.shields.io/badge/BadgeSort-000000.svg?style=for-the-badge&logo=githubsponsors)](https://github.com/ChipWolf/BadgeSort)
![GitHub](https://img.shields.io/badge/GitHub-181717.svg?style=for-the-badge&logo=github&logoColor=white)
![Node-RED](https://img.shields.io/badge/Node--RED-8F0000.svg?style=for-the-badge&logo=nodered&logoColor=white)
![osu!](https://img.shields.io/badge/osu%21-FF66AA.svg?style=for-the-badge&logo=osu&logoColor=white)
![OpenSea](https://img.shields.io/badge/OpenSea-2081E2.svg?style=for-the-badge&logo=opensea&logoColor=white)
![American Express](https://img.shields.io/badge/American%20Express-2E77BC.svg?style=for-the-badge&logo=americanexpress&logoColor=white)

---

### Generate five random badges:

#### _GitHub Action:_

```yaml
- uses: docker://ghcr.io/chipwolf/badgesort:latest
with:
id: foobar
format: html
output: README.md
random: 5
sort: false
style: flat-square
```

#### _CLI:_

```bash
$ python -m badgesort.icons -i foobar -c false -r 5 -f html -b flat-square
```

#### _Output:_


Slackware
Dgraph
Airbnb
Dynamics 365
Kuma
BadgeSort

---

### Generate badges from a list of slugs, sorting using an inverted step algorithm:

#### _GitHub Action:_

```yaml
- uses: docker://ghcr.io/chipwolf/badgesort:latest
with:
args: |
--hue-rotate 240
id: example
format: html
output: README.md
sort: step_invert
style: flat
slugs: |
angular,apollographql,brave,d3dotjs,docker
git,githubactions,googlecloud,graphql,heroku
html5,insomnia,mongodb,nestjs,nodedotjs
npm,prettier,react,reactivex,redux
rollupdotjs,sass,styledcomponents,typescript,webpack
```

#### _CLI:_

```bash
$ python -m badgesort.icons -i example -c step_invert -o README.md -f html -b flat-square --hue-rotate 240 -s \
angular,apollographql,brave,d3dotjs,docker, \
git,githubactions,googlecloud,graphql,heroku, \
html5,insomnia,mongodb,nestjs,nodedotjs, \
npm,prettier,react,reactivex,redux, \
rollupdotjs,sass,styledcomponents,typescript,webpack
```

#### _Output:_


D3.js
Prettier
Node.js
MongoDB
Webpack
React
TypeScript
GitHub Actions
Google Cloud
Docker
Redux
Apollo GraphQL
Insomnia
Heroku
GraphQL
ReactiveX
Sass
styled-components
Brave
Git
rollup.js
HTML5
npm
NestJS
Angular
BadgeSort