Skip to main content

🏷️ 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