Generate and Sort Branded Shields.io Badges by Color
This is a Python 3 command-line tool and GitHub Action automating the generation and color sorting of badges from Shields.io that contain brand logos from Simple Icons.
Many awesome GitHub profiles 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.
Shields.io URLs for these badges are normally handcrafted or copypasta, following this rough format:
https://img.shields.io/badge/<URL_ENCODED_BRAND_NAME>-<BRAND_HEX_COLOR>.svg?style=<BADGE_STYLE>&logoColor=<TEXT_HEX_COLOR>&logo=<SIMPLE_ICONS_SLUG>
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:
Then, if the user is inclined, they may spend additional time ordering the badges by color to make their profile more visually appealing:
This is a time consuming process if performed manually; it is difficult to maintain, hard to keep consistent, and makes future adjustments offputting.
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.
Note Thanks to this article by Alan Zucconi, the visually appealing color sort is achived using a Hilbert walk.
- 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
$ python -m badgesort.icons -s osu github americanexpress nodered opensea
- uses: docker://ghcr.io/chipwolf/badgesort:latest
with:
id: foobar
format: html
output: README.md
random: 5
sort: false
style: flat-square
$ python -m badgesort.icons -i foobar -c false -r 5 -f html -b flat-square
- 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
$ 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