Skip to content

CONTRIBUTING.md

Latest commit

 

History

History
291 lines (214 loc) · 8.15 KB

CONTRIBUTING.md

File metadata and controls

291 lines (214 loc) · 8.15 KB

🤝 Contributing to GitHub README Generator

Thank you for your interest in contributing to GitHub README Generator! This document provides guidelines and information for contributors.

🆕 New UI/UX Features

  • The project now includes advanced UI components such as the Animated Typing SVG section, animated buttons, tooltips (e.g., for font selection), and improved color picker.
  • When contributing, please ensure new UI/UX features are well-documented and tested.
  • Use Tailwind CSS and follow the established design patterns for consistency.

📋 Table of Contents

📜 Code of Conduct

This project and everyone participating in it is governed by our Code of Conduct. By participating, you are expected to uphold this code.

Our Standards

  • Be respectful and inclusive of all contributors
  • Be collaborative and open to different viewpoints
  • Be constructive in feedback and discussions
  • Be professional in all interactions

🎯 How Can I Contribute?

🐛 Reporting Bugs

Before creating bug reports, please check the issue list as you might find out that you don't need to create one. When you are creating a bug report, please include as many details as possible:

  • Use a clear and descriptive title
  • Describe the exact steps to reproduce the problem
  • Provide specific examples to demonstrate the steps
  • Describe the behavior you observed after following the steps
  • Explain which behavior you expected to see instead and why
  • Include screenshots if applicable
  • Include your browser and OS information

💡 Suggesting Enhancements

If you have a suggestion for a new feature or enhancement:

  • Use a clear and descriptive title
  • Provide a step-by-step description of the suggested enhancement
  • Provide specific examples to demonstrate the steps
  • Describe the current behavior and explain which behavior you expected to see instead
  • Include mockups or screenshots if applicable

🔧 Pull Requests

We love pull requests! Here's a quick guide:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Make your changes
  4. Test your changes thoroughly
  5. Document new UI/UX features and update README if needed
  6. Commit your changes (git commit -m 'Add some amazing feature')
  7. Push to the branch (git push origin feature/amazing-feature)
  8. Open a Pull Request

🚀 Getting Started

Prerequisites

  • Node.js (version 16 or higher)
  • npm or yarn package manager
  • Git

Development Setup

  1. Fork the repository

    # Clone your fork
git clone https://github.com/YOUR_USERNAME/github-readme-generator.git
cd github-readme-generator

  2. Install dependencies

    npm install

  3. Start the development server

    npm run dev

  4. Open your browser and navigate to http://localhost:5173

🛠️ Development Guidelines

Project Structure

github-readme-generator/
├── src/
│   ├── components/          # React components
│   ├── assets/             # Static assets
│   ├── App.jsx             # Main app component
│   └── main.jsx            # Entry point
├── public/                 # Public assets
├── package.json            # Dependencies and scripts
└── README.md               # Project documentation

Code Style Guidelines

JavaScript/JSX

  • Use ES6+ features when possible
  • Use functional components with hooks
  • Use meaningful variable and function names
  • Add comments for complex logic
  • Follow consistent indentation (2 spaces)

CSS/Styling

  • Use Tailwind CSS for styling
  • Follow mobile-first responsive design
  • Use semantic class names
  • Keep styles modular and reusable
  • For tooltips and custom UI, use inline styles or Tailwind as appropriate

Git Commit Messages

  • Use conventional commit format: 
    type(scope): description

feat: add new feature
fix: bug fix
docs: documentation changes
style: formatting changes
refactor: code refactoring
test: adding tests
chore: maintenance tasks

Example Commit Messages

feat(components): add animated typing SVG section
feat(ui): add tooltip for font selection
fix(typing-svg): fix copy markdown animation

🧪 Testing

Running Tests

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with coverage
npm run test:coverage

Testing Guidelines

  • Write tests for new features
  • Write tests for bug fixes
  • Ensure good test coverage
  • Use descriptive test names
  • Test edge cases and error scenarios

📝 Pull Request Process

Before Submitting

  1. Ensure your code follows the project's style guidelines
  2. Test your changes thoroughly
  3. Update documentation if needed
  4. Add tests for new features
  5. Check that all tests pass

Pull Request Template

When creating a pull request, please use this template:

## Description
Brief description of the changes made.

## Type of Change
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] Documentation update

## Testing
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my feature works
- [ ] New and existing unit tests pass locally with my changes

🐛 Bug Reports

Creating a Bug Report

Use the bug report template when creating issues:

## Bug Description
A clear and concise description of what the bug is.

## Steps to Reproduce
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

## Expected Behavior
A clear and concise description of what you expected to happen.

## Actual Behavior
A clear and concise description of what actually happened.

## Screenshots
If applicable, add screenshots to help explain your problem.

## Environment
- OS: [e.g. Windows 10, macOS, Ubuntu]
- Browser: [e.g. Chrome, Firefox, Safari]
- Version: [e.g. 22]

## Additional Context
Add any other context about the problem here.

💡 Feature Requests

Creating a Feature Request

Use the feature request template:

## Problem Statement
A clear and concise description of what the problem is.

## Proposed Solution
A clear and concise description of what you want to happen.

## Alternative Solutions
A clear and concise description of any alternative solutions you've considered.

## Additional Context
Add any other context or screenshots about the feature request here.

❓ Questions or Problems?

If you have questions or run into problems:

  1. Check the documentation first
  2. Search existing issues for similar problems
  3. Create a new issue with the question/problem template
  4. Join our community discussions

🎉 Recognition

Contributors will be recognized in several ways:

  • Contributors list in the README
  • GitHub contributors page
  • Release notes for significant contributions
  • Special thanks in project documentation

📞 Contact

🙏 Thank You!

Thank you for contributing to GitHub README Generator! Your contributions help make this project better for everyone.

Happy coding! 🚀