diff --git a/api/index.js b/api/index.js index e89c746..29ff87f 100644 --- a/api/index.js +++ b/api/index.js @@ -37,6 +37,7 @@ export default async (req, res) => { border_radius, number_format, border_color, + rank_icon, } = req.query; res.setHeader("Content-Type", "image/svg+xml"); @@ -92,6 +93,7 @@ export default async (req, res) => { number_format, locale: locale ? locale.toLowerCase() : null, disable_animations: parseBoolean(disable_animations), + rank_icon, }), ); } catch (err) { diff --git a/readme.md b/readme.md index 91a1cfa..fe04a88 100644 --- a/readme.md +++ b/readme.md @@ -216,10 +216,10 @@ You can use [GitHub's theme context](https://github.blog/changelog/2021-11-24-sp ##### Use GitHub's new media feature You can use [GitHub's new media feature](https://github.blog/changelog/2022-05-19-specify-theme-context-for-images-in-markdown-beta/) in HTML to specify whether to display images for light or dark themes. This is done using the HTML `` element in combination with the `prefers-color-scheme` media feature. - + ```html - @@ -235,7 +235,7 @@ You can use [GitHub's new media feature](https://github.blog/changelog/2022-05-1 :eyes: Show example - @@ -260,7 +260,7 @@ You can customize the appearance of your `Stats Card` or `Repo Card` however you - `border_color` - Card's border color _(hex color)_. Default: `e4e2e2` (Does not apply when `hide_border` is enabled). - `bg_color` - Card's background color _(hex color)_ **or** a gradient in the form of _angle,start,end_. Default: `fffefe` - `hide_border` - Hides the card's border _(boolean)_. Default: `false` -- `theme` - name of the theme, choose from [all available themes](./themes/README.md). Default: `default` theme. +- `theme` - name of the theme, choose from [all available themes](./themes/README.md). Default: `default` theme. - `cache_seconds` - set the cache header manually _(min: 14400, max: 86400)_. Default: `14400 seconds (4 hours)`. - `locale` - set the language in the card _(e.g. cn, de, es, etc.)_. Default: `en`. - `border_radius` - Corner rounding on the card. Default: `4.5`. @@ -280,6 +280,7 @@ You can provide multiple comma-separated values in the bg_color option to render - `hide_title` - _(boolean)_. Default: `false`. - `card_width` - Set the card's width manually _(number)_. Default: `500px (approx.)`. - `hide_rank` - _(boolean)_ hides the rank and automatically resizes the card width. Default: `false`. +- `rank_icon` - Shows alternative rank icon (i.e. `github` or `default`). Default: `default`. - `show_icons` - _(boolean)_. Default: `false`. - `include_all_commits` - Count total commits instead of just the current year commits _(boolean)_. Default: `false`. - `count_private` - Count private commits _(boolean)_. Default: `false`. @@ -459,6 +460,10 @@ Change the `?username=` value to your [Wakatime](https://wakatime.com) username. ![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=issues&show_icons=true) +- Shows Github logo instead rank level + +![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&rank_icon=github) + - Customize Border Color ![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&border_color=2e4058) diff --git a/src/cards/stats-card.js b/src/cards/stats-card.js index c60ea51..cdb468d 100644 --- a/src/cards/stats-card.js +++ b/src/cards/stats-card.js @@ -1,7 +1,7 @@ // @ts-check import { Card } from "../common/Card.js"; import { I18n } from "../common/I18n.js"; -import { icons } from "../common/icons.js"; +import { icons, rankIcon } from "../common/icons.js"; import { clampValue, flexLayout, @@ -108,6 +108,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { number_format = "short", locale, disable_animations = false, + rank_icon = "default", } = options; const lheight = parseInt(String(line_height), 10); @@ -294,15 +295,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { - - ${rank.level} - + ${rankIcon(rank_icon, rank?.level)} `; diff --git a/src/cards/types.d.ts b/src/cards/types.d.ts index a3abc23..02a41b5 100644 --- a/src/cards/types.d.ts +++ b/src/cards/types.d.ts @@ -1,4 +1,5 @@ type ThemeNames = keyof typeof import("../../themes/index.js"); +type RankIcon = "default" | "github"; export type CommonOptions = { title_color: string; @@ -23,6 +24,9 @@ export type StatCardOptions = CommonOptions & { custom_title: string; disable_animations: boolean; number_format: string; + ring_color: string; + text_bold: boolean; + rank_icon: RankIcon; }; export type RepoCardOptions = CommonOptions & { diff --git a/src/common/icons.js b/src/common/icons.js index 5282a93..948ca0b 100644 --- a/src/common/icons.js +++ b/src/common/icons.js @@ -8,5 +8,28 @@ const icons = { fork: ``, }; -export { icons }; +/** + * Get rank icon + * + * @returns {string} - The SVG code of the rank icon + */ +const rankIcon = (rankIcon, rankLevel) => { + switch (rankIcon) { + case "github": + return ` + + `; + case "default": + default: + return ` + + ${rankLevel} + + `; + } +}; + +export { icons, rankIcon }; export default icons; diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js index 110121a..25c5feb 100644 --- a/tests/renderStatsCard.test.js +++ b/tests/renderStatsCard.test.js @@ -366,4 +366,21 @@ describe("Test renderStatsCard", () => { document.body.innerHTML = renderStatsCard(stats, { number_format: "long" }); expect(getByTestId(document.body, "commits").textContent).toBe("1999"); }); + + it("should render default rank icon with level A+", () => { + document.body.innerHTML = renderStatsCard(stats, { + rank_icon: "default", + }); + expect(queryByTestId(document.body, "level-rank-icon")).toBeDefined(); + expect( + queryByTestId(document.body, "level-rank-icon").textContent.trim(), + ).toBe("A+"); + }); + + it("should render github rank icon", () => { + document.body.innerHTML = renderStatsCard(stats, { + rank_icon: "github", + }); + expect(queryByTestId(document.body, "github-rank-icon")).toBeDefined(); + }); });