npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

badges-cli

v1.2.2

Published

A command line tool for generating badges automatically.

Downloads

31

Readme

badges

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 -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
  2. Install badges-cli
  3. 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.)
  4. Save the logo in the folder dist
  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 script by typing npm run build
  7. If successful, the readme file will be automatically updated
  8. Finally, push all updates and create a pull request for your change
  9. 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:

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
  • postcss A badge used for projects using PostCSS
  • gitlab A badge used for Gitlab repositories
  • mocha A badge used for projects using Mocha for unit tests
  • bower A badge used for bower packages
  • 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
  • parcel A badge used for projects built with Parcel
  • 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
  • node A badge used for projects built with Node.js
  • atom A badge for the Atom editor
  • 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
  • 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
  • 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
  • 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
  • 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

:fuelpump: How to contribute

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

:scroll: License

MIT © aleen42