Discover aleen42/badges Open Source project by Aleen (@aleen42)

badges

To make badges more standard and acceptable.

Alternative: default, flat-square, dynamic-fore-color, dynamic-fore-color (flat_square).

A collection of badges designed for personal repositories, and I hope that all of these badges can be widely accepted and used in the document of any project so that they can become more and more standard. If you also have some new ideas about badges, just open an issue. Always remember that: More than a coder, more than a designer.

So, how to create such cute badges? It's very simple. As it's only registered on npm, you should install it by typing:

sudo npm install -g badges-cli

Then you can use this command-line tool for creating badges yourself:

Take the following command as an example, t means text content, and c means color. If you want to create a badge with SVG sources, you can specify with p to tell the tool where to find your sources. Finally, o is used to specify where to export the badge.

badge -t Alipay -c "#1CACEB" -p alipay.svg -o output.svg

One more thing, according to the suggestion during creating badges for Jest, this tool has been extended to support skins with s to specify, which value can be "light" or "dark" temporarily at this moment.

To uninstall the tool, you can just uninstall it by typing:

sudo npm uninstall -g badges-cli

As for how to create a badge and add it to the collection? There are some steps you may need to follow:

Fork the repository
Install badges-cli
Create a logo with SVG formatted (recommended) or other formats like PNG. (The logo should be wrapped into a square, in another word, the width should be equal to the height, or it would have been horizontally squished.)
Save the logo in the folder dist

Add data for your badge in the file script/data.js

const data = {
    // ...
    'React Router': {
        fileName: 'react-router.svg',
        color: '#D0021B',
        description: 'A badge used for projects using React Router'
    },
};

Run the script by typing npm run build
If successful, the readme file will be automatically updated
Finally, push all updates and create a pull request for your change
Done!!

Note that: so far haven't I thought out a perfect solution for calculating the width of text accurately yet, and it means that the text can not be aligned in some cases.

Note: if you like this project, feel free to buy me a swimming chance:

Coder

A badge used for projects which provide command-line interfaces
A badge used for projects using Terser for compressing JavaScript
A badge used for projects running on CodePen
A badge used for GitHub repositories
A badge used for hacking projects (Business Using is not allowed)
A badge for the IDEA editor
A badge used for projects built with Rome
A badge used for projects using Elasticsearch
A badge used for projects using Kibana
A badge used for projects using Logstash
A badge used for books publish by Gitbook
A badge used for books publish by Gitbook
A badge used for Chrome extensions
A badge used for projects using Gulp to build
A badge used for repositories which has used the framework, Angular
A badge used for projects using PostCSS
A badge used for Gitlab repositories
A badge used for projects using Mocha for unit tests
A badge used for bower packages
A badge used for projects that coded with Java
A badge used for TC39 committee
A badge used for proposals under stage 1 of TC39 committee
A badge used for proposals under stage 2 of TC39 committee
A badge used for proposals under stage 3 of TC39 committee
A badge used for proposals under stage 4 of TC39 committee
A badge used for projects built with Parcel
A badge used for projects using Grafana
A badge for the Sulime Text editor
A badge used for RSS subscribing
A badge used for projects using grunt to build
A badge use for projects using Tensorflow
A badge used for projects built with ESBuild
A badge used for projects that coded with JavaScript
A badge used for projects built with Node.js
A badge for the Atom editor
A badge used for projects using CSSNano for compacting CSS
A badge used for repositories which has used the framework, Vue
A badge used for books publish by Vuepress
A badge used for documents written on Apiary
A badge used for projects using TailwindCSS
A badge used for projects that coded with Golang
A badge used for repositories that using React
A badge used for projects deployed on Docker
A badge used for projects that coded with Kotlin
A badge for the Visual Studio Code IDE
A badge used for projects that coded with TypeScript
A badge used for projects that coded with Python
A badge used for projects running on JSFiddle
A badge used for projects built with Webpack
A badge used for projects using Vite
A badge used for projects using ESLint
A badge for the Eclipse editor
A badge used for repositories that using Preact
A badge used for projects using React Redux
A badge for the Visual Studio IDE
A badge used for projects using Jasmine for testing JavaScript
A badge for projects using QUnit for unit tests
A badge for projects using ReactiveX
A badge for projects using Modernizr
A badge used for projects using Jest for testing JavaScript.
A badge used for projects using Jest for testing JavaScript. (official accepted by facebook/jest#5348)
A badge used for projects that coded with Erlang
A badge used for projects using React Router
A badge used for npm packages
A badge used for projects built with Rollup