Skip to content

Latest commit

 

History

History
271 lines (216 loc) · 25.2 KB

README_dfc.md

File metadata and controls

271 lines (216 loc) · 25.2 KB
Raw

badges

To make badges more standard and acceptable.




npm cli javascript html

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 --dynamic-fore-color -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:

  1. Fork the repository and checkout the main branch
  2. Install dependencies by running npm i
  3. Create a logo with SVG formatted (recommended) or other formats like PNG. (The logo should be wrapped into a square, in other words, the width should be equal to the height, or it would have been horizontally squished.)
  4. Save the logo in the folder icon
  5. 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'
    },
};
  6. Run the command npm run build to build to test and to prettify data.js
  7. If successful, the readme file will be automatically updated
  8. Finally, push the icon and modification of the data file and create a pull request for your change, the GitHub Action will build all for you, Done!!

Note that: so far haven't 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:

badges badges badges

Coder

  • cli A badge used for projects which provide command-line interfaces
  • terser A badge used for projects using Terser for compressing JavaScript
  • codepen A badge used for projects running on CodePen
  • github A badge used for GitHub repositories
  • hacker A badge used for hacking projects (Business Using is not allowed)
  • idea A badge for the IDEA editor
  • rome A badge used for projects built with Rome
  • elasticsearch A badge used for projects using Elasticsearch
  • kibana A badge used for projects using Kibana
  • logstash A badge used for projects using Logstash
  • gitbook A badge used for books publish by Gitbook
  • gitbook A badge used for books publish by Gitbook
  • chrome_extensions A badge used for Chrome extensions
  • gulp A badge used for projects using Gulp to build
  • angular A badge used for repositories which has used the framework, Angular
  • ember A badge used for projects which has used ember.js for templating
  • postcss A badge used for projects using PostCSS
  • svelte A badge used for repositories that using Svelte
  • gitlab A badge used for Gitlab repositories
  • html5 A badge used for projects using HTML 5
  • mocha A badge used for projects using Mocha for unit tests
  • bower A badge used for bower packages
  • squirrelly A badge used for projects which has used squirrelly for templating
  • java A badge used for projects that coded with Java
  • tc39 A badge used for TC39 committee
  • tc39 A badge used for proposals under stage 1 of TC39 committee
  • tc39 A badge used for proposals under stage 2 of TC39 committee
  • tc39 A badge used for proposals under stage 3 of TC39 committee
  • tc39 A badge used for proposals under stage 4 of TC39 committee
  • handlebars A badge used for projects which has used Handlebars for templating
  • parcel A badge used for projects built with Parcel
  • pugjs A badge used for projects which has used Pug for templating
  • grafana A badge used for projects using Grafana
  • sublime_text A badge for the Sulime Text editor
  • rss A badge used for RSS subscribing
  • grunt A badge used for projects using grunt to build
  • tensorflow A badge use for projects using Tensorflow
  • esbuild A badge used for projects built with ESBuild
  • javascript A badge used for projects that coded with JavaScript
  • ejs A badge used for projects which has used ejs (Embedded JavaScript templates) for templating
  • nunjucks A badge used for projects which has used Nunjucks for templating
  • node A badge used for projects built with Node.js
  • atom A badge for the Atom editor
  • mongodb A badge used for projects using Mongo DB
  • cssnano A badge used for projects using CSSNano for compacting CSS
  • vue A badge used for repositories which has used the framework, Vue
  • vuepress A badge used for books publish by Vuepress
  • apiary A badge used for documents written on Apiary
  • tailwindcss A badge used for projects using TailwindCSS
  • golang A badge used for projects that coded with Golang
  • react A badge used for repositories that using React
  • docker A badge used for projects deployed on Docker
  • kotlin A badge used for projects that coded with Kotlin
  • visual_studio_code A badge for the Visual Studio Code IDE
  • backbone A badge used for repositories that using backbonejs
  • css3 A badge used for projects using CSS 3
  • typescript A badge used for projects that coded with TypeScript
  • python A badge used for projects that coded with Python
  • jsfiddle A badge used for projects running on JSFiddle
  • lodash A badge used for projects which has used Lodash, a JavaScript utility
  • marko A badge used for projects which has used marko for templating
  • webpack A badge used for projects built with Webpack
  • vitejs A badge used for projects using Vite
  • eslint A badge used for projects using ESLint
  • eclipse A badge for the Eclipse editor
  • preact A badge used for repositories that using Preact
  • redux A badge used for projects using React Redux
  • webix A badge used for projects which has used Webix for UI integration
  • visual_studio A badge for the Visual Studio IDE
  • jasmine A badge used for projects using Jasmine for testing JavaScript
  • qunit A badge for projects using QUnit for unit tests
  • reactivex A badge for projects using ReactiveX
  • modernizr A badge for projects using Modernizr
  • jest A badge used for projects using Jest for testing JavaScript.
  • jest A badge used for projects using Jest for testing JavaScript. (official accepted by facebook/jest#5348)
  • erlang A badge used for projects that coded with Erlang
  • react-router A badge used for projects using React Router
  • jade A badge used for projects which has used Jade for templating
  • npm A badge used for npm packages
  • rollup A badge used for projects built with Rollup

Community

  • stackoverflow A badge used for references on Stack Overflow.
  • medium A badge used for articles shared on Medium.
  • superuser A badge used for references on Super User
  • stackexchange A badge used for references on Stack Exchange.
  • juejin_translation A badge used for any articles translated by gold-miner.
  • serverfault A badge used for references on Server Fault.

Communication

  • lunkr A badge used for sharing communication ways on Coremail Lunkr
  • wechat A badge used for sharing communication ways on WeChat
  • line A badge used for sharing communication ways on Line
  • whatsapp A badge used for sharing communication ways on WhatsApp
  • skype A badge used for sharing communication ways on Skype
  • telegram A badge used for sharing communication ways on Telegram
  • messenger A badge used for sharing communication ways on Messenger
  • discord A badge used for groups discussed on Discord
  • slack A badge used for groups discussed on Slack
  • gitter A badge used for groups discussed on Gitter

Multimedia

  • soundcloud A badge used for music shared on SoundCloud
  • spotify A badge used for music shared on Spotify

Inc

  • soundtooth A badge used for any project of Soundtooth Inc.
  • bitcoin A badge used for the Bitcoin Inc.
  • amazon A badge used for the Amazon Inc.
  • monsoon A badge used for the Monsoon Inc.
  • codrops A badge used for any project of Codrops Inc.
  • coremail A badge used for the Coremail Inc.
  • nasa A badge used for projects of NASA
  • xitu A badge used for any articles of Xitu Inc.
  • airbnb A badge used for the Airbnb Inc.

Social Media

  • youtube A badge used for Youtube.
  • google_plus A badge used for sharing communities on Google Plus.
  • reddit A badge used for articles shared on Reddit.
  • snapchat A badge used for Snapchat.
  • twitter A badge used for Twitter.
  • facebook A badge used for Facebook.
  • instagram A badge used for Instagram.
  • sina_weibo A badge used for sharing communities on Sina Weibo.
  • pinterest A badge used for sharing communities on Pinterest.

Sponsors

  • patreon A badge used for Patreon sponsors.
  • buymeacoffee A badge used for BuyMeACoffee sponsors.
  • issuehunt A badge used for IssueHunt sponsors.
  • alipay A badge used for Alipay sponsors.
  • paypal A badge used for Paypal sponsors.

Car

  • mercedes_benz A badge used for cars of Mercedes Benz
  • toyota A badge used for cars of Toyota
  • lamborghini A badge used for cars of Lamborghini
  • land_rover A badge used for cars of Land Rover
  • bmw A badge used for cars of BMW
  • audi A badge used for cars of Audi
  • marussia A badge used for cars of Marussia
  • maserati A badge used for cars of Maserati
  • koenigsegg A badge used for cars of Koenigsegg
  • bugatti A badge used for cars of Bugatti
  • porsche A badge used for cars of Porsche
  • mitsubishi A badge used for cars of Mitsubishi
  • ferrari A badge used for cars of Ferrari
  • tesla A badge used for cars of Tesla

Football Clubs

  • manchester_united A badge used for FC Manchester United
  • real_madrid A badge used for FC Real Madrid
  • liverpool A badge used for FC Liverpool
  • chelsea A badge used for FC Chelsea
  • barcelona A badge used for FC Barcelona
  • bayern_munchen A badge used for FC Bayern Munchen
  • arsenal A badge used for FC Arsenal
  • ac_milan A badge used for FC AC Milan

Game

  • ingress A badge used for the game Ingress published by Niantic Inc.
  • steam A badge used for any game supported on the platform Steam
  • osu A badge used for the game osu! published by ppy

Designer

  • flash A badge used for designing projects using Flash as a tool
  • illustrator A badge used for designing projects using Illustrator as a tool
  • zeplin A badge used for designing projects with Zeplin
  • dreamweaver A badge used for projects using Dreamweaver as a tool
  • photoshop A badge used for designing projects using Photoshop as a tool
  • behance A badge used for designing projects sharing on Behance
  • after_effects A badge used for designing projects using After Effect as a tool
  • premiere A badge used for designing projects using Premiere as a tool

⛽ How to contribute

Have an idea? Found a bug? See how to contribute.

📜 License

MIT © aleen42