{"id":23631036,"url":"https://github.com/chipwolf/badgesort","last_synced_at":"2025-09-09T16:43:39.579Z","repository":{"id":50403230,"uuid":"518947464","full_name":"ChipWolf/BadgeSort","owner":"ChipWolf","description":"Automate the rendering of your shields.io logo badges and sort them in a visually pleasant way for your profile using Hilbert color sorting","archived":false,"fork":false,"pushed_at":"2024-05-28T11:54:15.000Z","size":9731,"stargazers_count":1,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-29T03:20:22.827Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ChipWolf.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-28T18:03:39.000Z","updated_at":"2024-06-02T03:28:24.461Z","dependencies_parsed_at":"2023-11-24T19:29:56.238Z","dependency_job_id":"92386423-0c24-4337-b81f-3bcef3395365","html_url":"https://github.com/ChipWolf/BadgeSort","commit_stats":null,"previous_names":["chipwolf/badgesort"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChipWolf%2FBadgeSort","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChipWolf%2FBadgeSort/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChipWolf%2FBadgeSort/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChipWolf%2FBadgeSort/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChipWolf","download_url":"https://codeload.github.com/ChipWolf/BadgeSort/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239551312,"owners_count":19657771,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-12-28T02:48:22.506Z","updated_at":"2025-09-09T16:43:39.536Z","avatar_url":"https://github.com/ChipWolf.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![BadgeSort](https://img.shields.io/badge/BadgeSort-000000.svg?style=for-the-badge\u0026logo=githubsponsors)](https://github.com/ChipWolf/BadgeSort)\n\n# Generate and Sort Branded [Shields.io](https://shields.io) Badges by Color\n\n**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/).**\n\n## Background:\n\nMany [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.\n\n## The problem:\n\n[Shields.io](https://shields.io) URLs for these badges are normally handcrafted or copypasta, following this rough format:\n\n`https://img.shields.io/badge/\u003cURL_ENCODED_BRAND_NAME\u003e-\u003cBRAND_HEX_COLOR\u003e.svg?style=\u003cBADGE_STYLE\u003e\u0026logoColor=\u003cTEXT_HEX_COLOR\u003e\u0026logo=\u003cSIMPLE_ICONS_SLUG\u003e`\n\nNormally, 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:\n\n![Unsorted Badges](./.github/unsorted.png)\n\nThen, if the user is inclined, they may spend additional time ordering the badges by color to make their profile more visually appealing:\n\n![Sorted Badges](./.github/sorted.png)\n\nThis is a time consuming process if performed manually; it is difficult to maintain, hard to keep consistent, and makes future adjustments offputting.\n\n## The solution:\n\nThis project automates the process of rendering out the badges into Markdown or HTML from a simple list of slugs.\n\nThe badges can be sorted by color _[as default]_ or left in the order specified.\n\n![1D Hilbert sorted colors](./.github/hilbert.png)\n\n\u003e **Note**\n\u003e _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._\n\n## Examples:\n\n### Generate five specific badges ordered by color:\n\n#### _GitHub Action:_\n\n```yaml\n      - uses: docker://ghcr.io/chipwolf/badgesort:latest\n        with:\n          format: markdown # default\n          id: default # default\n          output: README.md\n          slugs: |\n            osu\n            github\n            americanexpress\n            nodered\n            opensea\n          sort: hilbert # default\n          style: for-the-badge # default\n```\n\n#### _CLI:_\n\n```bash\n$ python -m badgesort.icons -s osu github americanexpress nodered opensea\n```\n\n#### _Output:_\n\n\u003c!-- start chipwolf/badgesort default --\u003e\n[![BadgeSort](https://img.shields.io/badge/BadgeSort-000000.svg?style=for-the-badge\u0026logo=githubsponsors)](https://github.com/ChipWolf/BadgeSort)\n![GitHub](https://img.shields.io/badge/GitHub-181717.svg?style=for-the-badge\u0026logo=github\u0026logoColor=white)\n![Node-RED](https://img.shields.io/badge/Node--RED-8F0000.svg?style=for-the-badge\u0026logo=nodered\u0026logoColor=white)\n![osu!](https://img.shields.io/badge/osu%21-FF66AA.svg?style=for-the-badge\u0026logo=osu\u0026logoColor=white)\n![OpenSea](https://img.shields.io/badge/OpenSea-2081E2.svg?style=for-the-badge\u0026logo=opensea\u0026logoColor=white)\n![American Express](https://img.shields.io/badge/American%20Express-2E77BC.svg?style=for-the-badge\u0026logo=americanexpress\u0026logoColor=white)\n\u003c!-- end chipwolf/badgesort default --\u003e\n\n---\n\n### Generate five random badges:\n\n#### _GitHub Action:_\n\n```yaml\n      - uses: docker://ghcr.io/chipwolf/badgesort:latest\n        with:\n          id: foobar\n          format: html\n          output: README.md\n          random: 5\n          sort: false\n          style: flat-square\n```\n\n#### _CLI:_\n\n```bash\n$ python -m badgesort.icons -i foobar -c false -r 5 -f html -b flat-square\n```\n\n#### _Output:_\n\n\u003c!-- start chipwolf/badgesort foobar --\u003e\n\u003cp\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"Apollo GraphQL\" src=\"https://img.shields.io/badge/Apollo%20GraphQL-311C87.svg?style=flat-square\u0026logo=apollographql\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"PostgreSQL\" src=\"https://img.shields.io/badge/PostgreSQL-4169E1.svg?style=flat-square\u0026logo=postgresql\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"Red Hat Open Shift\" src=\"https://img.shields.io/badge/Red%20Hat%20Open%20Shift-EE0000.svg?style=flat-square\u0026logo=redhatopenshift\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"byte\" src=\"https://img.shields.io/badge/byte-551DEF.svg?style=flat-square\u0026logo=byte\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"Monzo\" src=\"https://img.shields.io/badge/Monzo-14233C.svg?style=flat-square\u0026logo=monzo\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/ChipWolf/BadgeSort\"\u003e\u003cimg alt=\"BadgeSort\" src=\"https://img.shields.io/badge/BadgeSort-000000.svg?style=flat-square\u0026logo=githubsponsors\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003c!-- end chipwolf/badgesort foobar --\u003e\n\n---\n\n### Generate badges from a list of slugs, sorting using an inverted step algorithm:\n\n#### _GitHub Action:_\n\n```yaml\n      - uses: docker://ghcr.io/chipwolf/badgesort:latest\n        with:\n          args: |\n            --hue-rotate 240\n          id: example\n          format: html\n          output: README.md\n          sort: step_invert\n          style: flat\n          slugs: |\n            angular,apollographql,brave,d3dotjs,docker\n            git,githubactions,googlecloud,graphql,heroku\n            html5,insomnia,mongodb,nestjs,nodedotjs\n            npm,prettier,react,reactivex,redux\n            rollupdotjs,sass,styledcomponents,typescript,webpack\n```\n\n#### _CLI:_\n\n```bash\n$ python -m badgesort.icons -i example -c step_invert -o README.md -f html -b flat-square --hue-rotate 240 -s \\\n    angular,apollographql,brave,d3dotjs,docker, \\\n    git,githubactions,googlecloud,graphql,heroku, \\\n    html5,insomnia,mongodb,nestjs,nodedotjs, \\\n    npm,prettier,react,reactivex,redux, \\\n    rollupdotjs,sass,styledcomponents,typescript,webpack\n```\n\n#### _Output:_\n\n\u003c!-- start chipwolf/badgesort example --\u003e\n\u003cp\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"D3.js\" src=\"https://img.shields.io/badge/D3.js-F9A03C.svg?style=flat\u0026logo=d3dotjs\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"Prettier\" src=\"https://img.shields.io/badge/Prettier-F7B93E.svg?style=flat\u0026logo=prettier\u0026logoColor=black\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"Node.js\" src=\"https://img.shields.io/badge/Node.js-339933.svg?style=flat\u0026logo=nodedotjs\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"MongoDB\" src=\"https://img.shields.io/badge/MongoDB-47A248.svg?style=flat\u0026logo=mongodb\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"Webpack\" src=\"https://img.shields.io/badge/Webpack-8DD6F9.svg?style=flat\u0026logo=webpack\u0026logoColor=black\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"React\" src=\"https://img.shields.io/badge/React-61DAFB.svg?style=flat\u0026logo=react\u0026logoColor=black\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"TypeScript\" src=\"https://img.shields.io/badge/TypeScript-3178C6.svg?style=flat\u0026logo=typescript\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"GitHub Actions\" src=\"https://img.shields.io/badge/GitHub%20Actions-2088FF.svg?style=flat\u0026logo=githubactions\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"Google Cloud\" src=\"https://img.shields.io/badge/Google%20Cloud-4285F4.svg?style=flat\u0026logo=googlecloud\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"Docker\" src=\"https://img.shields.io/badge/Docker-2496ED.svg?style=flat\u0026logo=docker\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"Redux\" src=\"https://img.shields.io/badge/Redux-764ABC.svg?style=flat\u0026logo=redux\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"Apollo GraphQL\" src=\"https://img.shields.io/badge/Apollo%20GraphQL-311C87.svg?style=flat\u0026logo=apollographql\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"Insomnia\" src=\"https://img.shields.io/badge/Insomnia-4000BF.svg?style=flat\u0026logo=insomnia\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"Heroku\" src=\"https://img.shields.io/badge/Heroku-430098.svg?style=flat\u0026logo=heroku\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"GraphQL\" src=\"https://img.shields.io/badge/GraphQL-E10098.svg?style=flat\u0026logo=graphql\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"ReactiveX\" src=\"https://img.shields.io/badge/ReactiveX-B7178C.svg?style=flat\u0026logo=reactivex\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"Sass\" src=\"https://img.shields.io/badge/Sass-CC6699.svg?style=flat\u0026logo=sass\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"styled-components\" src=\"https://img.shields.io/badge/styled--components-DB7093.svg?style=flat\u0026logo=styledcomponents\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"Brave\" src=\"https://img.shields.io/badge/Brave-FB542B.svg?style=flat\u0026logo=brave\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"Git\" src=\"https://img.shields.io/badge/Git-F05032.svg?style=flat\u0026logo=git\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"rollup.js\" src=\"https://img.shields.io/badge/rollup.js-EC4A3F.svg?style=flat\u0026logo=rollupdotjs\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"HTML5\" src=\"https://img.shields.io/badge/HTML5-E34F26.svg?style=flat\u0026logo=html5\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"npm\" src=\"https://img.shields.io/badge/npm-CB3837.svg?style=flat\u0026logo=npm\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"NestJS\" src=\"https://img.shields.io/badge/NestJS-E0234E.svg?style=flat\u0026logo=nestjs\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"#\"\u003e\u003cimg alt=\"Angular\" src=\"https://img.shields.io/badge/Angular-DD0031.svg?style=flat\u0026logo=angular\u0026logoColor=white\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/ChipWolf/BadgeSort\"\u003e\u003cimg alt=\"BadgeSort\" src=\"https://img.shields.io/badge/BadgeSort-000000.svg?style=flat\u0026logo=githubsponsors\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003c!-- end chipwolf/badgesort example --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchipwolf%2Fbadgesort","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchipwolf%2Fbadgesort","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchipwolf%2Fbadgesort/lists"}