https://github.com/iyehah/leetcode-status
Show your dynamically generated LeetCode stats on your GitHub profile or your website
https://github.com/iyehah/leetcode-status
card github graph leetcode status
Last synced: 1 day ago
JSON representation
Show your dynamically generated LeetCode stats on your GitHub profile or your website
- Host: GitHub
- URL: https://github.com/iyehah/leetcode-status
- Owner: iyehah
- License: mit
- Created: 2024-09-03T17:57:38.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-06-08T17:18:46.000Z (25 days ago)
- Last Synced: 2025-06-08T18:26:03.973Z (25 days ago)
- Topics: card, github, graph, leetcode, status
- Language: TypeScript
- Homepage: https://leetcode-status.vercel.app
- Size: 365 KB
- Stars: 4
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# LeetCode Status
A Next.js application to display your LeetCode statistics as SVG cards or graphs, perfect for GitHub profiles or personal websites.
## How to Use
Add your LeetCode stats to your GitHub profile or site by using the following URL in your README, replacing `username` with your LeetCode username (e.g., `iyehah`):
```md
```
Or use an `![]()
` tag:
```md
```
## Available Themes
Choose from the following themes:
| Name | Card Preview | Graph Preview | Pie Preview |
|------|--------------|---------------|-------------|
| *light (Default)* | 
| 
| 
|
| *dark* | 
| 
| 
|
| *transparent* | 
| 
| 
|
| *neon* | 
| 
| 
|
| *pastel* | 
| 
| 
|
| *gradient* | |
## Customization
Customize the appearance using URL parameters.
### Common Options
| Argument | Description | Value Type |
|----------|-------------|------------|
| `border` | Show or hide the border | boolean (default: `true`) |
| `hide_title` | Show or hide the title | boolean (default: `false`) |
| `custom_title` | Set a custom title text | string |
| `logo` | Show or hide the LeetCode logo | boolean (default: `true`) |
| `logo_color` | Set logo color (`default`, `theme`, or hex like `%2300FF00`) | string (default: `default`) |
| `animation` | Enable or disable animation | boolean (default: `true`) |
| `animation_duration` | Set animation duration | homing string (default: `2s`) |
| `theme` | Set theme (`light`, `dark`, `transparent`, `neon`, `pastel`, `gradient`) | string (default: `light`) |
| `bar_color` | Custom color for progress bars (hex like `%23FF0000`) | string |
| `text_color` | Custom color for text (hex like `%230000FF`) | string |
| `show_stats` | Show additional stats (ranking, acceptance rate) | boolean (default: `false`) |
| `font` | Change font | boolean (default: `Robote`) |
### Card-Specific Options
| Argument | Description | Value Type |
|----------|-------------|------------|
| `gradient_start` | Gradient start color (hex like `%236366F1`) | string (default: `#6366F1` for gradient theme) |
| `gradient_end` | Gradient end color (hex like `%23A855F7`) | string (default: `#A855F7` for gradient theme) |
### Graph-Specific Options
| Argument | Description | Value Type |
|----------|-------------|------------|
| `bars_width` | Width of bars in the graph | number (20-100, default: `50`) |
### Pie-Specific Options
| Argument | Description | Value Type |
| ------------- | ------------------------------ | ------------------------- |
| `easyColor` | Color for Easy section (hex) | `%23FF0000` (e.g., red) |
| `mediumColor` | Color for Medium section (hex) | `%2300FF00` (e.g., green) |
| `hardColor` | Color for Hard section (hex) | `%230000FF` (e.g., blue) |
| `showLabels` | Show or hide percentage labels | boolean (default: `true`) |
| `showLegend` | Show or hide the legend | boolean (default: `true`) |
| `pieRadius` | Radius of the pie chart | number (default: `100`) |
| `font` | Font family used for text | string (e.g., `Arial`) |
### Examples
Card with gradient theme and custom gradient colors:
```md
```
Graph with neon theme and wider bars:
```md
```
Pie with transparent theme without Labels :
```md
```
> **Notes**:
> - Use `%20` for spaces in `custom_title` (e.g., `Iyehah%20Hacen`).
> - Use `%23` for `#` in hex colors (e.g., `%2300712D` for dark green).
> - The `show_stats` option requires the LeetCode API to provide `ranking` and `acceptanceRate`.
## Setup
1. **Install Dependencies**:
```bash
npm install
```
For `canvas`:
- Install MSYS2 and GTK2:
```bash
pacman -S mingw-w64-x86_64-gtk2
```
Add `C:\msys64\mingw64\bin` to `PATH`.
- Set GTK paths:
```bash
set PKG_CONFIG_PATH=C:\msys64\mingw64\lib\pkgconfig
set CAIRO_CFLAGS=-IC:\msys64\mingw64\include\cairo
set CAIRO_LIBS=-LC:\msys64\mingw64\lib -lcairo
npm install canvas --build-from-source
```
2. **Run Locally**:
```bash
npm run dev
```
3. **Deploy**:
Deploy to Vercel or another platform supporting Next.js.
## Contributing
Contributions are welcome! Please open an issue or pull request at [github.com/iyehah/leetcode-status](https://github.com/iyehah/leetcode-status).
## License
MIT