Skip to content

Latest commit

 

History

History
121 lines (91 loc) · 2.8 KB

CONTRIBUTING.md

File metadata and controls

121 lines (91 loc) · 2.8 KB

Contributing to GitHub Stats

Thank you for your interest in contributing to GitHub Stats! 🎉

How to Contribute

Reporting Bugs

If you find a bug, please create an issue with:

  • A clear title and description
  • Steps to reproduce the issue
  • Expected behavior
  • Actual behavior
  • Screenshots (if applicable)

Suggesting Features

We welcome feature suggestions! Please create an issue with:

  • A clear title and description
  • Use case and benefits
  • Example implementation (if you have ideas)

Pull Requests

  1. Fork the repository
  2. Create a new branch (git checkout -b feature/your-feature)
  3. Make your changes
  4. Ensure code follows the existing style
  5. Test your changes
  6. Commit with clear messages (git commit -m 'Add: feature description')
  7. Push to your branch (git push origin feature/your-feature)
  8. Open a Pull Request

Adding New Themes

To add a new theme:

  1. Edit the appropriate file in src/utils/themes/:
    • base.ts - General-purpose themes (stats, languages)
    • graph.ts - Graph/heatmap optimized themes
    • badge.ts - Badge-specific themes
  2. Test the theme with ?theme=yourtheme
  3. Submit a PR with a screenshot

Adding or Updating Icons

To add a new icon or update an existing one in public/assets/icons/:

  1. Format Requirements:

    • SVG format only
    • Width and height: 48x48
    • Use consistent margins via viewBox (typically 8-12px)
    • Example: viewBox="-10 -10 44 44" for 10px margin

  2. Animation: Add the popup animation style:

    <style>
    @keyframes popup {
        0% {
            opacity: 0;
            transform: scale(0);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }
    #iconname-logo {
        animation: popup 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    }
</style>

  3. Structure:

    • Wrap paths in a <g> element with unique id: <g id="iconname-logo">
    • Use fill="currentColor" for main paths to support theming
    • Include optional <title> tag for accessibility

  4. File Naming:

    • Use lowercase with hyphens: icon-name.svg
    • Match the technology/framework name

  5. Testing:

    • Verify the icon displays correctly in the icons gallery
    • Test with different themes to ensure colors work properly

Development Setup

# Install dependencies
npm install

# Setup database
npm run db:push

# Run in development mode
npm run dev

# Build
npm run build

# Run production build
npm start

# Run in cluster mode (production)
npm run start:cluster

Code Style

  • Use TypeScript
  • Follow existing naming conventions
  • Add comments for complex logic
  • Keep functions focused and small

Questions?

Feel free to open an issue for any questions!

Thank you for contributing! 🙌