https://github.com/johndev19/contribution-graph
This project provides a service to generate and display GitHub-style contribution graphs for any GitHub user. It's perfect for adding a visual representation of your GitHub activity to your profile README or any other markdown file.
https://github.com/johndev19/contribution-graph
contribution-graph github javascript next-js
Last synced: 5 months ago
JSON representation
This project provides a service to generate and display GitHub-style contribution graphs for any GitHub user. It's perfect for adding a visual representation of your GitHub activity to your profile README or any other markdown file.
- Host: GitHub
- URL: https://github.com/johndev19/contribution-graph
- Owner: JohnDev19
- License: mit
- Created: 2024-07-21T22:24:32.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-22T10:49:37.000Z (almost 2 years ago)
- Last Synced: 2025-04-07T12:15:32.491Z (about 1 year ago)
- Topics: contribution-graph, github, javascript, next-js
- Language: JavaScript
- Homepage:
- Size: 86.9 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# GitHub Contribution Graph Generator
This project provides a service to generate and display GitHub-style contribution graphs for any GitHub user. It's perfect for adding a visual representation of your GitHub activity to your profile README or any other markdown file.
## Features
- Generate contribution graphs similar to those on GitHub profiles
- Customizable for any GitHub username
- Responsive SVG output that scales well on different devices
- Includes month and day labels for better context
- Displays a color legend for contribution intensity
## Usage
To use this in your GitHub README or any markdown file, simply add the following line:
```markdown
```
Replace `YourGitHubUsername` with the GitHub username for which you want to generate the graph.
### Usage
1. **Customizing Size**
You can adjust the size of the graph by using HTML in your markdown:
```html
```
2. **Linking to Profile**
Make the graph clickable and link to the GitHub profile:
```markdown
[](https://github.com/YourGitHubUsername)
```
3. **Refreshing the Graph**
To ensure your graph is up-to-date, add a query parameter that changes:
```markdown
```
Increment the `v` value when you want to refresh the image.
## API
The API endpoint is:
```
https://contribution-graph-ohi6.onrender.com/api/graph
```
Query Parameters:
- `username`: The GitHub username (required)
## Local Development
1. Clone the repository
2. Install dependencies with `npm install`
3. Create a `.env.local` file and add your GitHub token:
```
GITHUB_TOKEN=your_personal_access_token
```
4. Run the development server with `npm run dev`
5. Open [http://localhost:3000](http://localhost:3000) in your browser
## Deployment
This project is designed to be easily deployed on platforms like Render or Vercel. Make sure to set the `GITHUB_TOKEN` environment variable in your deployment settings.
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Acknowledgments
- Inspired by the GitHub contribution graph
- Built with Next.js and React