Skip to main content

🔗 GitHub Links

Dynamic GitHub repository links with customizable categories, display modes, and automatic integration. Perfect for project navigation and community engagement.

🔄 Live GitHub Links

Dynamic links for the Docusaurus Template repository:

GitHubReleasesContainer Registry

🎨 Display Modes

📋 Dropdown Menu Mode

Compact dropdown menu ideal for navigation bars and space-constrained areas:

GitHubReleasesContainer Registry

Features:

  • ✅ Space Efficient: Minimal navbar footprint
  • ✅ Organized Categories: Links grouped by function
  • ✅ Icon Integration: FontAwesome icons for visual clarity
  • ✅ Responsive: Adapts to mobile screens

📂 Available Link Categories

📁 Repository Links

Direct links to repository sections and features

Included Links:

  • 🔗 Repository
  • 🔗 Issues
  • 🔗 Pull Requests
  • 🔗 Discussions
  • 🔗 Actions
  • 🔗 Projects

💻 Code & Development

Links for developers and contributors

Included Links:

  • 🔗 Source Code
  • 🔗 Releases
  • 🔗 Tags
  • 🔗 Branches
  • 🔗 Commits
  • 🔗 Contributors

👥 Community & Docs

Community engagement and documentation

Included Links:

  • 🔗 Wiki
  • 🔗 Documentation
  • 🔗 Community Guidelines
  • 🔗 Code of Conduct
  • 🔗 Contributing

📊 Analytics & Insights

Repository statistics and insights

Included Links:

  • 🔗 Insights
  • 🔗 Network
  • 🔗 Forks
  • 🔗 Stars
  • 🔗 Watchers
  • 🔗 Traffic

⚙️ Configuration

Basic Usage

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

// Default links (uses gitHubLinks.yml configuration)
<GitHubLinks />

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

// Inline mode
<GitHubLinks displayMode="inline" />

// Specific link categories
<GitHubLinks categories={['repository', 'code']} />

GitHub Links Configuration (gitHubLinks.yml)

# Repository information
user: "The-Running-Dev"
repository: "Docusaurus-Template"
branch: "main"

# Display settings
displayMode: "dropdown"
showIcons: true
showDescriptions: false

# Link categories and definitions
links:
  repository:
    - name: "Repository"
      url: "https://github.com/{user}/{repository}"
      icon: "fab fa-github"
      description: "Main repository page"
    
    - name: "Issues"
      url: "https://github.com/{user}/{repository}/issues"
      icon: "fas fa-bug"
      description: "Report bugs and request features"
  
  # ... more link categories

⚡ Integration Features

🔧 Automatic Integration

  • ✅ Navbar Item: Available in site navigation
  • ✅ Template Variables: {user}, {repository}, {branch} substitution
  • ✅ Environment Aware: Different links per environment
  • ✅ Schema Validation: Configuration validated with Zod

🎨 Customization Options

  • ✅ Icon Support: FontAwesome icons for all links
  • ✅ Theme Integration: Matches site theme colors
  • ✅ Responsive Design: Mobile-friendly layouts
  • ✅ Accessibility: Screen reader and keyboard friendly

💡 Common Use Cases

📱 Project Navigation

  • Repository navigation
  • Quick access to issues
  • Pull request management
  • Release tracking

👥 Community Engagement

  • Contribution guidelines
  • Community discussions
  • Issue reporting
  • Feature requests

📚 Documentation Sites

  • Source code access
  • Example repositories
  • Documentation updates
  • Version tracking

🚀 Advanced Features

🔧 Template System

  • ✅ Variable Substitution: Dynamic URL generation
  • ✅ Environment Support: Dev/staging/production variations
  • ✅ Custom Variables: Define additional template variables
  • ✅ Conditional Links: Show/hide based on conditions

🎯 Smart Features

  • ✅ External Link Detection: Automatic external link indicators
  • ✅ Link Validation: Check link availability
  • ✅ Analytics Integration: Track link usage
  • ✅ Caching Support: Performance optimized

🔗 Related Resources

Learn more about GitHub integration and link management:

📖 GitHub Links Docs⚙️ Configuration Guide