Home

Awesome

<div align="center">

Badge Generator <br> :shield: :badger: :mage:

Magically generate Markdown badges for your docs

GH Pages Deploy GitHub tag License

CodeQL Known Vulnerabilities

Made with Node Package - Yarn Package - Vue Package - Typescript

WebsiteSample badgesDocumentation

</div>

Overview

A convenience tool that makes it easy to generate custom Markdown for badges to put on your documentation or website.

Choose a page, enter your details, and click Submit to generate some Markdown code for you to copy and paste.

External tools are used to actually render badges - mostly using shields.io.

Preview

<div align="center"> <a href="https://michaelcurrin.github.io/badge-generator/"> <img src="/docs/_media/sample.png" alt="Sample screenshot" title="Go to website" width="600" > </a> </div>

Open the web app

Start creating badges for your docs.

<div align="center">

Site

</div>

Sample badges

Examples of a few badges generated with the app and rendered here on a markdown doc

Note that most of the badges at the top of this README.md file were also generated using this app.

Social badges

Link to your project. From another project - even paste these in an online forum or your blog.

<div align="center">

MichaelCurrin - badge-generator stars - badge-generator forks - badge-generator

</div>

Repo metadata

Add to the top of your README.md file. These are about your specific repo. Some are dynamic and some are hardcoded (like license below).

<div align="center">

GitHub tag License issues - badge-generator

</div>

Generic

Put whatever text value you want in this static (fixed) badge. You can change the color, logo and destination link. Use the badge for your repo, website or documentation.

<div align="center">

Foo - Bar Maintained - yes Contributions - welcome

</div>

Packages

You might want to list a dependency of your repo with the value actually in use, instead of a static badge.

Here we have Vue listed as a dependency of this Badge Generator repo and the version number changes to reflect what is in the package.json file.

<div align="center">

package - vue

</div>

Dynamic data

Similar to above but more flexible.

Create a badge that references any value within a public data file (currently only JSON files are supported by Badge Generator). The badge stays up to date with whatever value is in the target file.

In the example below, we lookup the version of VS Code IDE needed by a VS Code extension. The query is $.engines.vscode and that is done against this target package.json file on GitHub.

<div align="center">

auto-commit-msg

</div>

Catalogue

Pre-made badges around languages and tools. Just copy and paste them - no form input needed. You might put a static value there for what version you support without making it dynamic.

If you can't find a badge you're looking for there, use the Generic badge option to make your own.

<div align="center">

OS - Linux Made with Bash Made with Python

</div>

Documentation

User guide for using the app and how setup and run the app yourself

<div align="center">

view - Documentation

</div>

License

Released under MIT by @MichaelCurrin.