Skip to content

⭐ Dynamically generate stats SVG from your Github, LeetCode, Steam, and more in #Cyberpunk style :)

License

Notifications You must be signed in to change notification settings

gh0stintheshe11/Stats-SVG

Repository files navigation

Stats SVG

A highly customizable stats SVG generator

This project generates a visually appealing, highly customizable SVG image displaying GitHub user statistics. It's designed to be embedded in GitHub profiles or other web pages to showcase a user's GitHub activity and contributions.

Features

  • Fetches real-time GitHub user data using the GitHub GraphQL API
  • Generates a customizable SVG image with user stats, displaying various metrics including commits, language usage, and many more
  • Supports custom color schemes, configurations, and animated elements
  • For ranking and language usage calculation, this repo uses the same algorithm as arguably the most famous README card repo on GitHub, anuraghazra/github-readme-stats, to maintain consistency with the same standard.

Deployment

Since the GitHub API only allows 5k requests per hour, the api provided by this repo could possibly hit the rate limiter. You can host your own instance of this repo on Vercel to avoid the rate limiter.

Important

This project requires a GitHub Personal Access Token (PAT) to access private repositories. Refer to the Manual Deployment section below for how you can get the PAT.

Manual Deployment

1. Fork and Prepare the Repository

  1. Fork this repository to your GitHub account
  2. Create a Personal Access Token (PAT)
    • Set the token name (e.g., "stats-svg")
    • Select scopes: repo and user
    • Copy the generated token (you won't see it again so save it!)

2. Deploy to Vercel

  1. Visit Vercel
  2. Sign up/Log in with your GitHub account
  3. From your Vercel dashboard:
    • Click Add New...Project
    • Select the forked repository
    • Click Import

3. Configure Environment Variables

  1. In the project configuration screen:
    • Expand the Environment Variables section
    • Add a new variable:
      • Name: GITHUB_TOKEN
      • Value: Your GitHub PAT from step 1
  2. Click Deploy

4. Using Your Instance

  • Once deployed, Vercel will provide you with a domain (e.g., your-project.vercel.app)
  • You can use your instance by replacing the domain in the API URL:
    https://your-project.vercel.app/api/github-status?username=YOUR_GITHUB_USERNAME
    

Troubleshooting

  • For issues, check Vercel's deployment logs or open an issue in this repository

Customization

You can customize the appearance of the SVG by modifying the config.js file. This includes changing colors, dimensions, and other visual aspects of the generated image. If you want to modify the SVG code, you can do so in the /src/card/renderStats.js file.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request and open an issue.

License

This project is licensed under the MIT License - see the LICENSE file for details.


Enjoy showcasing your GitHub stats in cyberpunk style! 🚀

#Cyberpunk2077 #Cyberpunk:Edgerunners

GitHub Stats SVG

About

⭐ Dynamically generate stats SVG from your Github, LeetCode, Steam, and more in #Cyberpunk style :)

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published