github-leetcode-stats

GitHub and LeetCode Stats Generator

This repository contains a tool that generates dynamically updated statistics
for your GitHub profile and LeetCode account.

last automatic update: Friday, 25 September at 06:25 CEST

---

About this project

The idea of this project was to write a script that could display statistics about projects on GitHub and statistics from Leetcode. The challenge was to present this information in the form of a graph in the README.md file. In reality, README.md supports embedding HTML code, but it can be quite cumbersome when trying to create a graph and insert it into the documentation file. Therefore, an alternative approach was chosen where the script would periodically retrieve the latest statistics using API requests and generate an SVG file, which can be displayed nicely in the README.md file.

---

Features:

• Generates a chart showing your GitHub contributions
• Generates a chart showing your GitHub language usage
• Generates a chart showing your LeetCode statistics
• Runs automatically every 6 hours through a GitHub Action
• Supports generated color

Code Structuring:

• Entry point in the file src/index.js.
• The file simple.env is used to run the script locally. It needs to be renamed to .env and requires the addition of a GitHub token from step 2 of “How to Use:”
• The file main.mustache.simple needs to be renamed to main.mustache.
• The file src/config.js contains a set of colors and parameter names for searching information on GitHub and LeetCode.
• The file utils/utils.js contains a set of utility functions.
• The files src/generators/*.js contain builders that assemble the code of SVG files.
• The files src/services/*.js use requests to the GitHub and LeetCode websites to retrieve up-to-date information.
• The files in src/templates/ serve as static components for constructing SVG files.

How to Use:

1. Fork this repository.

2. Generate a new Personal Access Token (classic) on GitHub and name it GH_TOKEN. Save the token for later use.

   2.1 We’re on the GitHub website, and at the top left, you see your avatar. Click and select Settings;
   2.2 In the right sidebar choose Developer Settings, click on it;
   2.3 Select “Personal access tokens,” and then “Tokens (classic).”;
   2.4 Click Generate new token
   
   2.5 Name this token as GH_TOKEN and choose settings:
   - repo (all)
   - workflow
   - write: packages
   - notifications
   - user: read:user
   
   
   2.6 Save this new created token in the memory or localy
   
   2.7 Finally you can see your token in the tokens list
   

3. Create a new secret named GH_TOKEN in your repository’s settings under “Secrets and Variables” with your GH_TOKEN value.

   3.1 Open page on your repo and choose Settings
   
   3.2 In opened page please see right sidebar and choose Secrets and Variables
   
   3.3 Create new secret
   
   3.4 Name this secret as GH_TOKEN and put you saved token ghp_HY… to the Secret… and click “Add Secret”
   

4. Edit the ./src/config.js file to include your GitHub and LeetCode usernames.

5. Delete my template mustache file main.mustache and rename main.mustache.simple to main.mustache.
   main.mustache.simple presents Date values and generated svg charts: bicycle, sledge, circles. You can edit this file as you see fit.

6. The actions will run automatically every 6 hours. You can see it in .github/workflows/mail.yml

! When you want to start this script locally, need to create a .env file in your forked repository and copy the contents from simple.env. Add the GH_TOKEN, that generated in step 2 to the .env file.

Dependencies:

• Node v16.14.2 (LTS)
• Javascript v. ES5
• Mustache Template System v.4.2.0.
• Promise based HTTP and GraphQL client axios v.0.27.2
• Zero-dependency module that loads environment variables from a .env file into process.env v.16.0.3
• Github Action Workflow Script YML

Future Plans:

• Adding more animated SVG and statistics
• Support more color palletes

Author

This project was created by meugenom

---