GitHub Contributions Widget

📷 Show your dynamically generated GitHub contributions to your GitHub profile or your website!

Contents

• Usage
  • Optional Query Params
• FAQ
• Why
• Limitation
• Contributing
• Credit
• License

Usage

🎩 Easily showcase your GitHub contributions to your profile! Follow the steps below:

1. Copy the code snippet below and paste it into your README.md file.
2. Replace /oxwazz with your GitHub username (case-insensitive).

![GitHub Contributions Widget](https://github-contributions-widget.oxwazz.com/oxwazz)

Output

Congratulation! 🎉 You are now showing your GitHub contributions to your profile!

Optional Query Params

🧪 You can use additional params for customize your needs.

Description	Query Params	Default Value	Possible Value
filter by PR states	?states=	-	"MERGED" | "OPEN" | "CLOSED"
custom widget title	?title=	-	string
custom showing total contribution	?show-max=	3	number (min=1 max=10)
custom theme	?theme=	light	"light" | "dark"

and you can combine all the query params. 💪

FAQ

1. why is my widget not updating, causing my latest contributions not to be listed?

GitHub has image caching by default, this causing your latest contributions not reflect on this widget. to solve this issue you can manually update the image using query params like ?refresh-cache=1 or you can update ?refresh-cache= automatically using GitHub Action cronjob with probablykasper/readme-template-action, you can see the example in my repository.

2. can we use a widget theme based on the browser's light or dark mode?

Yes, GitHub markdown has support for light and dark mode images.

You can implement a widget that changes its theme depending on the browser's mode using the <picture> element.

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://github-contributions-widget.oxwazz.com/oxwazz?theme=dark">
  <source media="(prefers-color-scheme: light)" srcset="https://github-contributions-widget.oxwazz.com/oxwazz">
  <img alt="show widget theme based on browser light or dark mode." src="https://github-contributions-widget.oxwazz.com/oxwazz">
</picture>

Why

🖌️ We create this widget to effortlessly display your GitHub contributions on your profile, highlighting your coding activity and accomplishments to potential collaborators, employers, or your community. It provides a visually appealing way to showcase your commitment to open source and personal projects, enhancing your professional presence.

Limitation

📐 This code is deployed on a Cloudflare worker. As we are utilizing the free tier, there are certain limitations associated with it. Additionally, it interacts with the GitHub API, which also has usage limits in place.

Contributing

🎈 Thanks for your help improving the project! We are so happy to have you! We have a contributing guide to help you get involved in the project.

Credit

📌 GitHub Contributions Widget is currently being developed and maintained by Muhammad Rahmahalim.
This project is inspired by LeetCode-Stats-Card, but focuses on showcasing GitHub open-source contributions instead of LeetCode progress. Thank you!

License

MIT License © 2024 Muhammad Rahmahalim