Skip to main content
SubZeroDev

Professional uncertainty since 2026.

Wellโ€ฆ Why not?


๐Ÿท๏ธ Badges System

Generate dynamic badges for GitHub repositories with customizable categories, template variables, and multiple badge providers. Perfect for project showcases and documentation.

๐Ÿ”„ Live Badges for This Repository

Dynamic badges generated for the Docusaurus Template repository:

Build & Release

CIReleaseTestsDocsDemoUptimeWikiChangelog

Quality & Security

CoverageSecurityLintAuditSnykSonarQube

Community

DiscussionsContributorsStarsForksLicense

๐Ÿ“‚ Badge Categories

๐ŸŒŸ Complete Badge Collection

All available badges for comprehensive project documentation:

Build & Release

CIReleaseTestsDocsDemoUptimeWikiChangelog

Quality & Security

CoverageSecurityLintAuditSnykSonarQube

Community

DiscussionsContributorsStarsForksLicense

๐Ÿ’ก Badge Groups

Badges are organized into logical groups for better presentation and maintenance:

  • ๐Ÿ—๏ธ Build & Release: Build status, releases, and deployment badges
  • โœ… Code Quality: Code quality metrics and analysis badges
  • ๐Ÿ“ˆ Repository Activity: Activity and engagement metrics
  • โญ Repository Stats: Stars, forks, and popularity metrics
  • ๐Ÿ“š Documentation: Documentation and support badges
  • ๐ŸŒ Social & Community: Social media and community badges

โš™๏ธ Configuration

Basic Usage

import Badges from '@site/src/components/Badges';

// Default badges (uses badges.yml configuration)
<Badges />

// Custom repository
<Badges user="facebook" repository="react" />

// Specific badge groups only
<Badges groups={['build', 'quality']} />

Badge Configuration (badges.yml)

# Template variables
templateVariables:
  user: "The-Running-Dev"
  repository: "Docusaurus-Template"
  branch: "main"

# Badge groups and definitions
badgeGroups:
  build:
    - name: "Build Status"
      url: "https://github.com/{user}/{repository}/actions"
      image: "https://github.com/{user}/{repository}/workflows/CI/badge.svg"
  
  quality:
    - name: "Code Quality"
      url: "https://sonarcloud.io/project/{user}_{repository}"
      image: "https://sonarcloud.io/api/badges/measure?project={user}_{repository}&metric=alert_status"
  
  # ... more badge groups

๐ŸŒ Supported Badge Providers

๐Ÿ—๏ธ CI/CD & Build

  • โœ… GitHub Actions
  • โœ… Travis CI
  • โœ… CircleCI
  • โœ… Azure DevOps
  • โœ… Jenkins
  • โœ… GitLab CI

๐Ÿ“Š Quality & Analytics

  • โœ… Codecov
  • โœ… SonarCloud
  • โœ… Code Climate
  • โœ… Codacy
  • โœ… Snyk Security
  • โœ… LGTM

๐Ÿ“ฆ Package Managers

  • โœ… NPM
  • โœ… PyPI
  • โœ… NuGet
  • โœ… Maven Central
  • โœ… Docker Hub
  • โœ… Homebrew

๐Ÿ“ˆ Social & Stats

  • โœ… GitHub Stats (Stars, Forks)
  • โœ… Download Counters
  • โœ… Social Media Links
  • โœ… Community Badges
  • โœ… Contribution Stats
  • โœ… Issue/PR Counters

โšก System Features

๐Ÿ”ง Template System

  • โœ… Variable Substitution: {user}, {repository}, {branch}
  • โœ… Dynamic URLs: Auto-generated badge links
  • โœ… Environment Support: Different badges per environment
  • โœ… Custom Variables: Define your own template variables

๐ŸŽจ Display Options

  • โœ… Group Filtering: Show specific badge categories
  • โœ… Responsive Layout: Adapts to screen size
  • โœ… Theme Integration: Matches site theme
  • โœ… Custom Styling: Override badge appearance

๐Ÿ’ก Common Use Cases

๐Ÿ“ฑ Project Pages

  • Repository showcases
  • Project documentation
  • Portfolio websites
  • Landing pages

๐Ÿ“š Documentation

  • API documentation
  • User guides
  • Technical specs
  • Status pages

๐ŸŽฏ Marketing

  • Open source promotion
  • Community building
  • Trust indicators
  • Quality signals

๐Ÿ”— Related Resources

Learn more about the badge system and project showcase features