Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit879937c

Browse files
feat(RankIcon): add rank_icon option (anuraghazra#2628)
* feat(theme): add github_dark_dimmed theme* feat(theme): change github_dark_dimmed icon color* contrast ratio adjustmentcontrast ratio adjustment on github_dark_dimmed theme* feat(theme): readme preview* feat(theme): github themes next to each other* github themes next to each other* feat(RankIcon): add rank icon option* feat(RankIcon): extract rankIcon to icons file* feat(RankIcon): update readme* feat(RankIcon): test coverage* Update readme.mdCo-authored-by: Rick Staa <rick.staa@outlook.com>---------Co-authored-by: Rick Staa <rick.staa@outlook.com>
1 parent4d1d83d commit879937c

File tree

6 files changed

+59
-15
lines changed

6 files changed

+59
-15
lines changed

‎api/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export default async (req, res) => {
3737
border_radius,
3838
number_format,
3939
border_color,
40+
rank_icon,
4041
}=req.query;
4142
res.setHeader("Content-Type","image/svg+xml");
4243

@@ -92,6 +93,7 @@ export default async (req, res) => {
9293
number_format,
9394
locale:locale ?locale.toLowerCase() :null,
9495
disable_animations:parseBoolean(disable_animations),
96+
rank_icon,
9597
}),
9698
);
9799
}catch(err){

‎readme.md

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -216,10 +216,10 @@ You can use [GitHub's theme context](https://github.blog/changelog/2021-11-24-sp
216216
#####Use GitHub's new media feature
217217

218218
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`<picture>` element in combination with the`prefers-color-scheme` media feature.
219-
219+
220220
```html
221221
<picture>
222-
<source
222+
<source
223223
srcset="https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark"
224224
media="(prefers-color-scheme: dark)"
225225
/>
@@ -235,7 +235,7 @@ You can use [GitHub's new media feature](https://github.blog/changelog/2022-05-1
235235
<summary>:eyes: Show example</summary>
236236

237237
<picture>
238-
<source
238+
<source
239239
srcset="https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark"
240240
media="(prefers-color-scheme: dark)"
241241
/>
@@ -260,7 +260,7 @@ You can customize the appearance of your `Stats Card` or `Repo Card` however you
260260
-`border_color` - Card's border color_(hex color)_. Default:`e4e2e2` (Does not apply when`hide_border` is enabled).
261261
-`bg_color` - Card's background color_(hex color)_**or** a gradient in the form of_angle,start,end_. Default:`fffefe`
262262
-`hide_border` - Hides the card's border_(boolean)_. Default:`false`
263-
-`theme` - name of the theme, choose from[all available themes](./themes/README.md). Default:`default` theme.
263+
-`theme` - name of the theme, choose from[all available themes](./themes/README.md). Default:`default` theme.
264264
-`cache_seconds` - set the cache header manually_(min: 14400, max: 86400)_. Default:`14400 seconds (4 hours)`.
265265
-`locale` - set the language in the card_(e.g. cn, de, es, etc.)_. Default:`en`.
266266
-`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
280280
-`hide_title` -_(boolean)_. Default:`false`.
281281
-`card_width` - Set the card's width manually_(number)_. Default:`500px (approx.)`.
282282
-`hide_rank` -_(boolean)_ hides the rank and automatically resizes the card width. Default:`false`.
283+
-`rank_icon` - Shows alternative rank icon (i.e.`github` or`default`). Default:`default`.
283284
-`show_icons` -_(boolean)_. Default:`false`.
284285
-`include_all_commits` - Count total commits instead of just the current year commits_(boolean)_. Default:`false`.
285286
-`count_private` - Count private commits_(boolean)_. Default:`false`.
@@ -459,6 +460,10 @@ Change the `?username=` value to your [Wakatime](https://wakatime.com) username.
459460

460461
![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=issues&show_icons=true)
461462

463+
- Shows Github logo instead rank level
464+
465+
![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&rank_icon=github)
466+
462467
- Customize Border Color
463468

464469
![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&border_color=2e4058)

‎src/cards/stats-card.js

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
//@ts-check
22
import{Card}from"../common/Card.js";
33
import{I18n}from"../common/I18n.js";
4-
import{icons}from"../common/icons.js";
4+
import{icons,rankIcon}from"../common/icons.js";
55
import{
66
clampValue,
77
flexLayout,
@@ -108,6 +108,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
108108
number_format="short",
109109
locale,
110110
disable_animations=false,
111+
rank_icon="default",
111112
}=options;
112113

113114
constlheight=parseInt(String(line_height),10);
@@ -294,15 +295,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
294295
<circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
295296
<circle class="rank-circle" cx="-10" cy="8" r="40" />
296297
<g class="rank-text">
297-
<text
298-
x="-5"
299-
y="3"
300-
alignment-baseline="central"
301-
dominant-baseline="central"
302-
text-anchor="middle"
303-
>
304-
${rank.level}
305-
</text>
298+
${rankIcon(rank_icon,rank?.level)}
306299
</g>
307300
</g>`;
308301

‎src/cards/types.d.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
typeThemeNames=keyoftypeofimport("../../themes/index.js");
2+
typeRankIcon="default"|"github";
23

34
exporttypeCommonOptions={
45
title_color:string;
@@ -23,6 +24,9 @@ export type StatCardOptions = CommonOptions & {
2324
custom_title:string;
2425
disable_animations:boolean;
2526
number_format:string;
27+
ring_color:string;
28+
text_bold:boolean;
29+
rank_icon:RankIcon;
2630
};
2731

2832
exporttypeRepoCardOptions=CommonOptions&{

‎src/common/icons.js

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,28 @@ const icons = {
88
fork:`<path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path>`,
99
};
1010

11-
export{icons};
11+
/**
12+
* Get rank icon
13+
*
14+
*@returns {string} - The SVG code of the rank icon
15+
*/
16+
constrankIcon=(rankIcon,rankLevel)=>{
17+
switch(rankIcon){
18+
case"github":
19+
return`
20+
<svg x="-38" y="-30" height="66" width="66" aria-hidden="true" viewBox="0 0 16 16" version="1.1" data-view-component="true" data-testid="github-rank-icon">
21+
<path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
22+
</svg>
23+
`;
24+
case"default":
25+
default:
26+
return`
27+
<text x="-5" y="3" alignment-baseline="central" dominant-baseline="central" text-anchor="middle" data-testid="level-rank-icon">
28+
${rankLevel}
29+
</text>
30+
`;
31+
}
32+
};
33+
34+
export{icons,rankIcon};
1235
exportdefaulticons;

‎tests/renderStatsCard.test.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -366,4 +366,21 @@ describe("Test renderStatsCard", () => {
366366
document.body.innerHTML=renderStatsCard(stats,{number_format:"long"});
367367
expect(getByTestId(document.body,"commits").textContent).toBe("1999");
368368
});
369+
370+
it("should render default rank icon with level A+",()=>{
371+
document.body.innerHTML=renderStatsCard(stats,{
372+
rank_icon:"default",
373+
});
374+
expect(queryByTestId(document.body,"level-rank-icon")).toBeDefined();
375+
expect(
376+
queryByTestId(document.body,"level-rank-icon").textContent.trim(),
377+
).toBe("A+");
378+
});
379+
380+
it("should render github rank icon",()=>{
381+
document.body.innerHTML=renderStatsCard(stats,{
382+
rank_icon:"github",
383+
});
384+
expect(queryByTestId(document.body,"github-rank-icon")).toBeDefined();
385+
});
369386
});

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp