Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/chipwolf/badgesort
- Owner: ChipWolf
- Created: 2022-07-28T18:03:39.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-28T11:54:15.000Z (8 months ago)
- Last Synced: 2024-05-29T03:20:22.827Z (8 months ago)
- Topics: 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
- Language: Python
- Homepage:
- Size: 9.28 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
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:_
---
### 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:_