diff --git a/package-lock.json b/package-lock.json index e6689baf..a11ae14d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,6 +33,9 @@ "lodash.snakecase": "^4.1.1", "parse-diff": "^0.7.0", "prettier": "^2.1.2" + }, + "engines": { + "node": ">=18.0.0" } }, "node_modules/@actions/core": { diff --git a/readme.md b/readme.md index ca8a8063..4a1eef36 100644 --- a/readme.md +++ b/readme.md @@ -304,7 +304,7 @@ You can provide multiple comma-separated values in the bg\_color option to rende * `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`. +* `rank_icon` - Shows alternative rank icon (i.e. `github`, `progress` 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`. * `line_height` - Sets the line height between text *(number)*. Default: `25`. @@ -553,6 +553,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\&rank_icon=github) +* Shows rank progress instead of rank level + +![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra\&rank_icon=progress) + * 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 79b00761..c6694f24 100644 --- a/src/cards/stats-card.js +++ b/src/cards/stats-card.js @@ -328,7 +328,7 @@ const renderStatsCard = (stats = {}, options = {}) => { - ${rankIcon(rank_icon, rank?.level)} + ${rankIcon(rank_icon, rank?.level, progress)} `; diff --git a/src/cards/types.d.ts b/src/cards/types.d.ts index abd7d20f..53091b9b 100644 --- a/src/cards/types.d.ts +++ b/src/cards/types.d.ts @@ -1,5 +1,5 @@ type ThemeNames = keyof typeof import("../../themes/index.js"); -type RankIcon = "default" | "github"; +type RankIcon = "default" | "github" | "progress"; export type CommonOptions = { title_color: string; diff --git a/src/common/icons.js b/src/common/icons.js index 4368375b..fd743ff1 100644 --- a/src/common/icons.js +++ b/src/common/icons.js @@ -14,9 +14,12 @@ const icons = { /** * Get rank icon * + * @param {string} rankIcon - The rank icon type. + * @param {number} rankLevel - The rank level. + * @param {number} progress - The rank progress. * @returns {string} - The SVG code of the rank icon */ -const rankIcon = (rankIcon, rankLevel) => { +const rankIcon = (rankIcon, rankLevel, progress) => { switch (rankIcon) { case "github": return ` @@ -24,6 +27,12 @@ const rankIcon = (rankIcon, rankLevel) => { `; + case "progress": + return ` + + ${progress.toFixed(1)}% + + `; case "default": default: return ` diff --git a/src/getStyles.js b/src/getStyles.js index 7e611392..088f7232 100644 --- a/src/getStyles.js +++ b/src/getStyles.js @@ -98,6 +98,9 @@ const getStyles = ({ font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor}; animation: scaleInAnimation 0.3s ease-in-out forwards; } + .rank-progress-text { + font-size: 16px; + } .not_bold { font-weight: 400 } .bold { font-weight: 700 } diff --git a/tests/__snapshots__/renderWakatimeCard.test.js.snap b/tests/__snapshots__/renderWakatimeCard.test.js.snap index 055c0f66..1ad81d23 100644 --- a/tests/__snapshots__/renderWakatimeCard.test.js.snap +++ b/tests/__snapshots__/renderWakatimeCard.test.js.snap @@ -42,6 +42,9 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1 font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58; animation: scaleInAnimation 0.3s ease-in-out forwards; } + .rank-progress-text { + font-size: 16px; + } .not_bold { font-weight: 400 } .bold { font-weight: 700 } @@ -222,6 +225,9 @@ exports[`Test Render Wakatime Card should render correctly with compact layout w font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58; animation: scaleInAnimation 0.3s ease-in-out forwards; } + .rank-progress-text { + font-size: 16px; + } .not_bold { font-weight: 400 } .bold { font-weight: 700 } diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js index a2fd5b60..05d74527 100644 --- a/tests/renderStatsCard.test.js +++ b/tests/renderStatsCard.test.js @@ -20,7 +20,7 @@ const stats = { totalDiscussionsStarted: 10, totalDiscussionsAnswered: 50, contributedTo: 500, - rank: { level: "A+", score: 40 }, + rank: { level: "A+", percentile: 40 }, }; describe("Test renderStatsCard", () => { @@ -417,4 +417,14 @@ describe("Test renderStatsCard", () => { }); expect(queryByTestId(document.body, "github-rank-icon")).toBeDefined(); }); + + it("should show the progress", () => { + document.body.innerHTML = renderStatsCard(stats, { + rank_icon: "progress", + }); + expect(queryByTestId(document.body, "rank-progress-text")).toBeDefined(); + expect( + queryByTestId(document.body, "progress-rank-icon").textContent.trim(), + ).toBe((100 - stats.rank.percentile).toFixed(1) + "%"); + }); });