Contributing

Contributing Guide

Thank you for your interest in contributing to GitHub Profile Card! We welcome contributions from everyone.

Getting Started

Prerequisites

• Node.js v18+
• pnpm (or npm)
• Git
• Basic knowledge of TypeScript/JavaScript

Fork and Clone

# Fork the repository on GitHub

# Clone your fork
git clone https://github.com/YOUR_USERNAME/github-profile-card.git
cd github-profile-card

# Add upstream remote
git remote add upstream https://github.com/nayandas69/github-profile-card.git

Set Up Development Environment

pnpm install
pnpm dev

Making Changes

Branch Naming

Create a branch with a descriptive name:

git checkout -b feature/add-new-theme
git checkout -b fix/theme-colors
git checkout -b docs/update-readme

Code Style

• Follow existing code patterns
• Use TypeScript for type safety
• Format code with Prettier
• Use meaningful variable names

Testing

Run tests to ensure your changes work:

pnpm test

Generate coverage report:

pnpm test:coverage

Commit Messages

Write clear, descriptive commit messages:

git commit -m "Add new pastel themes (peach, mint, lavender)"
git commit -m "Fix theme color contrast issue"
git commit -m "Update documentation for API reference"

Adding New Themes

Step 1: Define Theme Colors

Edit src/utils/themes.ts:

export interface ThemesCollection {
  // ... existing themes
  custom: {
    mytheme: {
      bg: 'ffffff',      // Background hex color
      title: '000000',   // Title text hex color
      text: '333333',    // Body text hex color
      icon: '0969da',    // Icon hex color
      border: 'e0e0e0',  // Border hex color
    }
  }
}

Step 2: Test the Theme

pnpm dev
# Navigate to http://localhost:3000/card/nayandas69?theme=mytheme

Step 3: Update Tests

Edit __tests__/themes-and-icons.test.ts to include your new theme.

Step 4: Update Documentation

Add your theme to:

• README.md - Theme catalogue
• Wiki Home page
• This guide if it's a special category

Step 5: Submit PR

Submitting Changes

Push Your Branch

git push origin feature/add-new-theme

Create Pull Request

1. Go to GitHub repository
2. Click "Compare & pull request"
3. Provide clear description of changes
4. Link related issues

PR Guidelines

• Keep PRs focused on a single feature/fix
• Include tests for new functionality
• Update documentation if needed
• Follow the existing code style
• Ensure all tests pass

PR Description Template

## Description
Brief description of what this PR does.

## Changes
- Change 1
- Change 2
- Change 3

## Testing
How to test these changes.

## Screenshots (if applicable)
Add screenshots for UI changes.

## Checklist
- [ ] Tests pass
- [ ] Documentation updated
- [ ] Code follows style guide

Types of Contributions

Bug Reports

Report issues on GitHub Issues:

• Describe the bug clearly
• Include steps to reproduce
• Add screenshots if possible
• Specify your environment (OS, browser, etc.)

Feature Requests

Suggest new themes or features:

• Describe the feature
• Explain why it would be useful
• Provide examples if possible

Documentation

Help improve our documentation:

• Fix typos or unclear sections
• Add examples
• Improve code comments
• Translate documentation

Theme Contributions

Add new themes:

• Follow the color scheme guidelines
• Ensure good contrast and readability
• Test on multiple devices
• Include color palette documentation

Code Review Process

1. Maintainer reviews your PR
2. Request changes if needed
3. Address feedback
4. Once approved, PR is merged

Development Workflow

# Update your local main
git fetch upstream
git rebase upstream/main

# Create feature branch
git checkout -b feature/your-feature

# Make changes and commit
git add .
git commit -m "Descriptive message"

# Push to your fork
git push origin feature/your-feature

# Create PR on GitHub

Troubleshooting

Tests Failing

pnpm test -- --no-coverage

Build Issues

rm -rf node_modules pnpm-lock.yaml
pnpm install
pnpm build

Merge Conflicts

git fetch upstream
git rebase upstream/main
# Resolve conflicts
git add .
git rebase --continue
git push -f origin your-branch

Community

• Join discussions in GitHub Issues
• Follow code of conduct
• Be respectful and helpful
• Give credit to contributors

License

By contributing, you agree that your contributions will be licensed under the same license as the project.

Recognition

Contributors will be recognized in:

• Contributors list in README
• GitHub contributors page
• Project documentation

Questions?

Feel free to open an issue for any questions or reach out to the maintainers.

---

Thank you for contributing to GitHub Profile Card!