Giter VIP home page Giter VIP logo

leetcode-stats-card's Introduction

LeetCode Stats Card

CodeFactor

Show your dynamically generated LeetCode stats on your GitHub profile or your website!

LeetCode and LeetCode CN are both supported.

Playground: Try It Now

LeetCode Stats

Features

  • πŸ“ˆ Clean and simple LeetCode stats, for both us and cn sites
  • 🎨 Multiple themes and 1,300+ fonts - Theme, Font
  • πŸͺ„ Fully customizable using CSS - Custom Stylesheets
  • ⚑️ Fast and global edge network - Cloudflare Workers
  • 🚫 No tracking, controlable cache - Cache
  • πŸ€ Open source - MIT License
  • βš™οΈ Extended-cards: activity, contest, heatmap

It also has a NPM package and a highly extensible system, so you can easily customize it to your needs.

Want to contribute? Feel free to open a pull request!

Self-hosting

You can also self-host this service using the jacoblincool/leetcode-stats-card Docker image.

To build the image by yourself, use pnpm build:image script.

See docker-compose.yml for an example.

Usage

Simply copy the code below, paste it into your README.md, and change the path to your leetcode username (case-insensitive).

![Leetcode Stats](https://leetcard.jacoblin.cool/JacobLinCool)

Congratulation! You are now showing your LeetCode stats on your profile!

Want a hyperlink? Try this:

[![Leetcode Stats](https://leetcard.jacoblin.cool/JacobLinCool)](https://leetcode.com/JacobLinCool)

Endpoint

The endpoint of this tool is:

https://leetcard.jacoblin.cool/

The legacy one: https://leetcode.card.workers.dev/

Options

There are many options, you can configure them by passing a query string to the endpoint.

site (default: us)

Data source, can be us or cn.

![](https://leetcard.jacoblin.cool/leetcode?site=cn)

theme (default: light,dark)

Card theme, see Theme for more information.

Use a comma to separate the light and dark theme.

![](https://leetcard.jacoblin.cool/jacoblincool?theme=unicorn)
![](https://leetcard.jacoblin.cool/jacoblincool?theme=light,unicorn)

font (default: Baloo_2)

Card font, you can use almost all fonts on Google Fonts.

It is case-insensitive, and you can use font=dancing_script or font=Dancing%20Script to get the same result.

![](https://leetcard.jacoblin.cool/jacoblincool?font=Dancing_Script)

width and height (default: 500 and 200)

Change the card size, it will not resize the content.

But it will be helpful if you want to use custom css.

![](https://leetcard.jacoblin.cool/jacoblincool?width=500&height=500)

border and radius (default: 1 and 4)

Change the card border and radius.

![](https://leetcard.jacoblin.cool/jacoblincool?border=0&radius=20)

animation (default: true)

Enable or disable the animation.

![](https://leetcard.jacoblin.cool/jacoblincool?animation=false)

hide (default: "")

Hide elements on the card, it is a comma-separated list of element ids.

![](https://leetcard.jacoblin.cool/jacoblincool?hide=ranking,total-solved-text,easy-solved-count,medium-solved-count,hard-solved-count)

ext (default: "")

Extension, it is a comma-separated list of extension names.

NOTICE: You can only use one of extended-card extensions (activity, contest, heatmap) at a time now, maybe they can be used together in the future.

Animation, font, theme, and external stylesheet are all implemented by extensions and enabled by default.

Want to contribute a nyan-cat extension? PR is welcome!

![](https://leetcard.jacoblin.cool/jacoblincool?ext=activity)

![](https://leetcard.jacoblin.cool/lapor?ext=contest)

![](https://leetcard.jacoblin.cool/lapor?ext=heatmap)

cache (default: 60)

Cache time in seconds.

Note: it will not be a good idea to set it to a long time because GitHub will fetch and cache the card.

![](https://leetcard.jacoblin.cool/jacoblincool?cache=0)

You can make DELETE request to /:site/:username to delete the cache.

sheets (default: "")

External stylesheet, it is a comma-separated list of urls.

You can upload your custom CSS to gist and use the url.

![](https://leetcard.jacoblin.cool/jacoblincool?sheets=url1,url2)

They will be injected in the order you specified.

Legacy Options

Still work, but deprecated.

Key Description Default Value
border_radius Same as radius 4
show_rank Display/Hide Rank: Boolean true
extension Same as ext ""

Themes

Now we have 6 themes. If you have any great idea, please feel free to open a PR!

Light

![Leetcode Stats](https://leetcard.jacoblin.cool/JacobLinCool?theme=light)

Leetcode Stats

Dark

![Leetcode Stats](https://leetcard.jacoblin.cool/JacobLinCool?theme=dark)

Leetcode Stats

Nord

![Leetcode Stats](https://leetcard.jacoblin.cool/JacobLinCool?theme=nord)

Leetcode Stats

Forest

![Leetcode Stats](https://leetcard.jacoblin.cool/JacobLinCool?theme=forest)

Leetcode Stats

WTF

![Leetcode Stats](https://leetcard.jacoblin.cool/JacobLinCool?theme=wtf)

Leetcode Stats

Unicorn

![Leetcode Stats](https://leetcard.jacoblin.cool/JacobLinCool?theme=unicorn)

Leetcode Stats

Fonts

You can now use almost all fonts on Google Fonts.

Some examples:

Milonga

![Leetcode Stats](https://leetcard.jacoblin.cool/JacobLinCool?font=milonga)

Leetcode Stats

Patrick Hand

![Leetcode Stats](https://leetcard.jacoblin.cool/JacobLinCool?font=patrick_hand)

Leetcode Stats

Ruthie

![Leetcode Stats](https://leetcard.jacoblin.cool/JacobLinCool?font=ruthie)

Leetcode Stats

Extensions

Extension, it is a comma-separated list of extension names.

NOTICE: You can only use one of extended-card extensions (activity, contest, heatmap) at a time now, maybe they can be used together in the future.

Animation, font, theme, and external stylesheet are all implemented by extensions and enabled by default.

Want to contribute a nyan-cat extension? PR is welcome!

activity

Show your recent submissions.

![Leetcode Stats](https://leetcard.jacoblin.cool/JacobLinCool?ext=activity)

Leetcode Stats

contest

Show your contest rating history.

![Leetcode Stats](https://leetcard.jacoblin.cool/lapor?ext=contest)

Leetcode Stats

heatmap

Show heatmap in the past 52 weeks.

![Leetcode Stats](https://leetcard.jacoblin.cool/lapor?ext=heatmap)

Leetcode Stats

leetcode-stats-card's People

Contributors

anurag01a avatar inzamam-ul avatar jacoblincool avatar kevin-roman avatar lnogueir avatar panchajanya1999 avatar renovate-bot avatar renovate[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

leetcode-stats-card's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

  • chore(deps): update dependency @eslint/js to v9
  • chore(deps): update dependency eslint to v9
  • fix(deps): update dependency itty-router to v5
  • πŸ” Create all rate-limited PRs at once πŸ”

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

docker-compose
docker-compose.yml
dockerfile
Dockerfile
github-actions
.github/workflows/pr_check.yml
  • actions/checkout v4
  • pnpm/action-setup v3
.github/workflows/publish.yml
  • actions/checkout v4
  • pnpm/action-setup v3
  • cloudflare/wrangler-action v3
npm
package.json
  • itty-router 4.0.27
  • leetcode-query 1.1.0
  • nano-font 0.3.1
  • @cloudflare/workers-types ^4.20240222.0
  • @eslint/js ^8.57.0
  • @types/node ^20.11.24
  • @typescript-eslint/eslint-plugin ^7.1.0
  • @typescript-eslint/parser ^7.1.0
  • @vitest/coverage-v8 ^1.3.1
  • esbuild ^0.20.1
  • eslint ^8.57.0
  • eslint-config-prettier ^9.1.0
  • husky ^9.0.11
  • lint-staged ^15.2.2
  • prettier ^3.2.5
  • prettier-plugin-organize-imports ^3.2.4
  • selflare ^1.0.0
  • tsup 8.0.2
  • typescript ^5.3.3
  • typescript-eslint ^7.1.0
  • vitest ^1.3.1
  • wrangler ^3.30.1
  • pnpm 8.15.4

  • Check this box to trigger a request for Renovate to run again on this repository

Allow rank to be an optional parameter

Thanks for the project. SVG looks real good.

I was wondering if you could make the "rank" data optional. I personally think it makes my stats look bad since it displays +100000. Should be pretty easy to add.

Thanks

site=cn flag no longer working

I used a https://leetcode.card.workers.dev/MY-LEETCODE-USERNAME?site=cn&theme=default&font=baloo&extension=null
but recently it's not working

Add profile badge

Based on a number of problems solved or contest rating Leetcode provides various badges like Knight, Guardian,
100 Days etc. Offer the option to show the current badge in the profile. This badge can be added right after the username like this
issue

A Better Animation System

Now the animation system (the animation extension) is heavily based on hard coded animation-delay.

I think maybe it can be more flexible (for example, animating multiple visible extensions) if we use the css counter as the delay value.

Extension title is too dark and card size is too small.

Hi,

I believe the recent updates to the repo caused some issues with the extension=activity, in particular when the theme is set to dark.

As you can see in the image below, the title is too dark, I think it would be better if it was a bit brighter.
Also, the last row in the activity is getting chopped off.
image

I will try making a pull request to fix those issues. However, I can't work on it till the weekend probably, but if you fix them before, that'd be great!

Thanks for the project!
Lucas

Responsiveness of Stats

Hi there,
On custom container size (width & height) the main content (number of questions and question type bars) is not responding.
The main content remains in the same size.
Wouldn't it be better if it fully occupies the the custom sized container and shows responsiveness on changing parameters of the size.

Request: Heatmap

Please add a feature to generate just the heatmap without leetcode stats.
It should look something like the below image

image

Custom Theme

Hi there,
I was thinking to create a PR for a new theme which matches the github default dark theme, then I realize that it would be much better if custom theme option would be there.
Like in url itself as a params user passes back-ground color, text-color, and content color similar to the custom font. Then selecting a theme will be more flexible.

Broken fonts

Hi,

I'm trying to use the font UnifrakturCook for my page, yet the font defaults to Times New Roman as if it were invalid font. The preview is broken both on https://leetcard.jacoblin.cool/ and on GitHub. No combination of themes fixes this. I do not know if other fonts are not working.

LeetCode Stats

Thanks.

Center the stats box

I'm trying to do basic centering of the stat box but when I try to use <p align="center"> or div tag the box disappears and only the link is seen on my github readme
Screenshot (105)

Not Responsive

image

Problems solved (and their difficulties) and rank is not adjusted according to width of card

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.