Skip to content

Commit 0e47d79

Browse files
hesreallyhimReally Him
hesreallyhim
and
Really Him
authored
Feat: New pin style with title and text hiding enabled (#8)
* feat: add ability to hide title and text for repo pin * feat: stats-only repo card styles * feat: tweaking styles * feat: tweaking styles * feat: add 'stats_only'q-param * docs: update README * chore: fix type warnings * feat: add all_stats param * chore: add cache_bust_nonce * nit --------- Co-authored-by: Really Him <hesereallyhim@proton.me>
1 parent c392d5a commit 0e47d79

7 files changed

Lines changed: 316 additions & 64 deletions

File tree

‎api/pin.js‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ export default async (req, res) => {
1515
username,
1616
repo,
1717
hide_border,
18+
hide_title,
19+
hide_text,
20+
stats_only,
21+
all_stats,
1822
title_color,
1923
icon_color,
2024
text_color,
@@ -97,9 +101,19 @@ export default async (req, res) => {
97101
`max-age=${cacheSeconds}, s-maxage=${cacheSeconds}`,
98102
);
99103

104+
const statsOnly = parseBoolean(stats_only) === true;
105+
const allStats = parseBoolean(all_stats) === true;
106+
107+
const finalShowIssues = allStats ? true : parseBoolean(show_issues);
108+
const finalShowPrs = allStats ? true : parseBoolean(show_prs);
109+
const finalShowAge = allStats ? true : parseBoolean(show_age);
110+
100111
return res.send(
101112
renderRepoCard(repoData, {
102113
hide_border: parseBoolean(hide_border),
114+
hide_title: statsOnly ? true : parseBoolean(hide_title),
115+
hide_text: statsOnly ? true : parseBoolean(hide_text),
116+
stats_only: statsOnly,
103117
title_color,
104118
icon_color,
105119
text_color,
@@ -110,9 +124,9 @@ export default async (req, res) => {
110124
show_owner: parseBoolean(show_owner),
111125
locale: locale ? locale.toLowerCase() : null,
112126
description_lines_count,
113-
show_issues: parseBoolean(show_issues),
114-
show_prs: parseBoolean(show_prs),
115-
show_age: parseBoolean(show_age),
127+
show_issues: finalShowIssues,
128+
show_prs: finalShowPrs,
129+
show_age: finalShowAge,
116130
age_metric: age_metric || "first",
117131
}),
118132
);

‎readme.md‎

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -167,8 +167,8 @@ You can look at a preview for [all available themes](themes/README.md) or checko
167167

168168
#### Responsive Card Theme
169169

170-
[![Anurag's GitHub stats-Dark](https://github-readme-stats-plus-theta.vercel.app/api?username=anuraghazra\&show_icons=true\&theme=dark#gh-dark-mode-only)](https://github.com/anuraghazra/github-readme-stats#responsive-card-theme#gh-dark-mode-only)
171-
[![Anurag's GitHub stats-Light](https://github-readme-stats-plus-theta.vercel.app/api?username=anuraghazra\&show_icons=true\&theme=default#gh-light-mode-only)](https://github.com/anuraghazra/github-readme-stats#responsive-card-theme#gh-light-mode-only)
170+
[![Anurag's GitHub stats-Dark](https://github-readme-stats-plus-theta.vercel.app/api?username=anuraghazra&show_icons=true&theme=dark#gh-dark-mode-only)](https://github.com/anuraghazra/github-readme-stats#responsive-card-theme#gh-dark-mode-only)
171+
[![Anurag's GitHub stats-Light](https://github-readme-stats-plus-theta.vercel.app/api?username=anuraghazra&show_icons=true&theme=default#gh-light-mode-only)](https://github.com/anuraghazra/github-readme-stats#responsive-card-theme#gh-light-mode-only)
172172

173173
Since GitHub will re-upload the cards and serve them from their [CDN](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/about-anonymized-urls), we can not infer the browser/GitHub theme on the server side. There are, however, four methods you can use to create dynamics themes on the client side.
174174

@@ -183,7 +183,7 @@ We have included a `transparent` theme that has a transparent background. This t
183183
<details>
184184
<summary>:eyes: Show example</summary>
185185

186-
![Anurag's GitHub stats](https://github-readme-stats-plus-theta.vercel.app/api?username=anuraghazra\&show_icons=true\&theme=transparent)
186+
![Anurag's GitHub stats](https://github-readme-stats-plus-theta.vercel.app/api?username=anuraghazra&show_icons=true&theme=transparent)
187187

188188
</details>
189189

@@ -198,7 +198,7 @@ You can use the `bg_color` parameter to make any of [the available themes](theme
198198
<details>
199199
<summary>:eyes: Show example</summary>
200200

201-
![Anurag's GitHub stats](https://github-readme-stats-plus-theta.vercel.app/api?username=anuraghazra\&show_icons=true\&bg_color=00000000)
201+
![Anurag's GitHub stats](https://github-readme-stats-plus-theta.vercel.app/api?username=anuraghazra&show_icons=true&bg_color=00000000)
202202

203203
</details>
204204

@@ -402,6 +402,10 @@ You can customize the appearance and behavior of the pinned repository card usin
402402
| Name | Description | Type | Default value |
403403
| --- | --- | --- | --- |
404404
| `show_owner` | Shows the repo's owner name. | boolean | `false` |
405+
| `hide_title` | Hides the card title. | boolean | `false` |
406+
| `hide_text` | Hides the repository description row. | boolean | `false` |
407+
| `stats_only` | Shortcut for hiding both title and description; takes precedence over `hide_title`/`hide_text`. | boolean | `false` |
408+
| `all_stats` | Shows open issues, pull requests, and age badges (overrides the individual `show_*` flags). | boolean | `false` |
405409
| `description_lines_count` | Manually set the number of lines for the description. Specified value will be clamped between 1 and 3. If this parameter is not specified, the number of lines will be automatically adjusted according to the actual length of the description. | number | `null` |
406410
| `show_issues` | Shows the count of open issues. | boolean | `false` |
407411
| `show_prs` | Shows the count of open pull requests. | boolean | `false` |
@@ -410,19 +414,31 @@ You can customize the appearance and behavior of the pinned repository card usin
410414

411415
### Demo
412416

413-
![Readme Card](https://github-readme-stats-plus-theta.vercel.app/api/pin/?username=anuraghazra\&repo=github-readme-stats)
417+
![Readme Card](https://github-readme-stats-plus-theta.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&bust_cache_nonce=12345)
414418

415419
Use `show_owner` query option to include the repo's owner username
416420

417-
![Readme Card](https://github-readme-stats-plus-theta.vercel.app/api/pin/?username=anuraghazra\&repo=github-readme-stats\&show_owner=true)
421+
![Readme Card](https://github-readme-stats-plus-theta.vercel.app/api/pin/?username=anuraghazra\&repo=github-readme-stats\&show_owner=true&bust_cache_nonce=12345)
418422

419423
Show open issues/PRs and repo age (by last push):
420424

421-
![Readme Card](https://github-readme-stats-plus-theta.vercel.app/api/pin/?username=anuraghazra\&repo=github-readme-stats\&show_issues=true\&show_prs=true\&show_age=true)
425+
![Readme Card](https://github-readme-stats-plus-theta.vercel.app/api/pin/?username=anuraghazra\&repo=github-readme-stats\&show_issues=true\&show_prs=true\&show_age=true&bust_cache_nonce=12345)
422426

423427
Show repo age by first commit date instead of last push:
424428

425-
![Readme Card](https://github-readme-stats-plus-theta.vercel.app/api/pin/?username=anuraghazra\&repo=github-readme-stats\&show_age=true\&age_metric=first)
429+
![Readme Card](https://github-readme-stats-plus-theta.vercel.app/api/pin/?username=anuraghazra\&repo=github-readme-stats\&show_age=true\&age_metric=first&bust_cache_nonce=12345)
430+
431+
Hide the description while keeping the title:
432+
433+
![Readme Card](https://github-readme-stats-plus-theta.vercel.app/api/pin/?username=anuraghazra\&repo=github-readme-stats\&hide_text=true&bust_cache_nonce=12345)
434+
435+
Render just the stats row (title + description hidden) with `stats_only`:
436+
437+
![Readme Card](https://github-readme-stats-plus-theta.vercel.app/api/pin/?username=anuraghazra\&repo=github-readme-stats\&stats_only=true&bust_cache_nonce=12345)
438+
439+
Enable issues, PRs, and age badges all at once with `all_stats`:
440+
441+
![Readme Card](https://github-readme-stats-plus-theta.vercel.app/api/pin/?username=anuraghazra\&repo=github-readme-stats\&all_stats=true&bust_cache_nonce=12345)
426442

427443
# GitHub Gist Pins
428444

@@ -703,7 +719,7 @@ Choose from any of the [default themes](#themes)
703719

704720
* Customizing repo card
705721

706-
![Customized Card](https://github-readme-stats-plus-theta.vercel.app/api/pin?username=anuraghazra\&repo=github-readme-stats\&title_color=fff\&icon_color=f9f9f9\&text_color=9f9f9f\&bg_color=151515\&show_issues=1\&show_prs=1\&show_age=1\&age_metric=first\&v=2)
722+
![Customized Card](https://github-readme-stats-plus-theta.vercel.app/api/pin?username=anuraghazra&repo=github-readme-stats&title_color=fff&icon_color=f9f9f9&text_color=9f9f9f&bg_color=151515&show_issues=1&show_prs=1&show_age=1&age_metric=first&cache_bust_nonce=12345)
707723

708724
* Gist card
709725

@@ -754,21 +770,21 @@ By default, GitHub does not lay out the cards side by side. To do that, you can
754770

755771
```html
756772
<a href="https://github.com/anuraghazra/github-readme-stats">
757-
<img align="center" src="https://github-readme-stats-plus-theta.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&show_issues=1&show_prs=1&show_age=1&age_metric=first&v=2" />
773+
<img align="center" src="https://github-readme-stats-plus-theta.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&show_issues=1&show_prs=1&show_age=1&age_metric=first" />
758774
</a>
759775
<a href="https://github.com/anuraghazra/convoychat">
760-
<img align="center" src="https://github-readme-stats-plus-theta.vercel.app/api/pin/?username=anuraghazra&repo=convoychat&show_issues=1&show_prs=1&show_age=1&age_metric=first&v=2" />
776+
<img align="center" src="https://github-readme-stats-plus-theta.vercel.app/api/pin/?username=anuraghazra&repo=convoychat&show_issues=1&show_prs=1&show_age=1&age_metric=first" />
761777
</a>
762778
```
763779

764780
<details>
765781
<summary>:eyes: Show example</summary>
766782

767783
<a href="https://github.com/anuraghazra/github-readme-stats">
768-
<img align="center" src="https://github-readme-stats-plus-theta.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&show_issues=1&show_prs=1&show_age=1&age_metric=first&v=2" />
784+
<img align="center" src="https://github-readme-stats-plus-theta.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&show_issues=1&show_prs=1&show_age=1&age_metric=first" />
769785
</a>
770786
<a href="https://github.com/anuraghazra/convoychat">
771-
<img align="center" src="https://github-readme-stats-plus-theta.vercel.app/api/pin/?username=anuraghazra&repo=convoychat&show_issues=1&show_prs=1&show_age=1&age_metric=first&v=2" />
787+
<img align="center" src="https://github-readme-stats-plus-theta.vercel.app/api/pin/?username=anuraghazra&repo=convoychat&show_issues=1&show_prs=1&show_age=1&age_metric=first" />
772788
</a>
773789

774790
</details>

‎src/cards/repo.js‎

Lines changed: 59 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,9 @@ const renderRepoCard = (repo, options = {}) => {
6767
} = repo;
6868
const {
6969
hide_border = false,
70+
hide_title = false,
71+
hide_text = false,
72+
stats_only = false,
7073
title_color,
7174
icon_color,
7275
text_color,
@@ -87,27 +90,46 @@ const renderRepoCard = (repo, options = {}) => {
8790
const header = show_owner ? nameWithOwner : name;
8891
const langName = (primaryLanguage && primaryLanguage.name) || "Unspecified";
8992
const langColor = (primaryLanguage && primaryLanguage.color) || "#333";
90-
const descriptionMaxLines = description_lines_count
91-
? clampValue(description_lines_count, 1, DESCRIPTION_MAX_LINES)
92-
: DESCRIPTION_MAX_LINES;
93+
let descriptionLinesCount = 0;
94+
let descriptionSvg = "";
95+
const shouldHideTitle = stats_only || hide_title;
96+
const shouldHideText = stats_only || hide_text;
9397

94-
const desc = parseEmojis(description || "No description provided");
95-
const multiLineDescription = wrapTextMultiline(
96-
desc,
97-
DESCRIPTION_LINE_WIDTH,
98-
descriptionMaxLines,
99-
);
100-
const descriptionLinesCount = description_lines_count
101-
? clampValue(description_lines_count, 1, DESCRIPTION_MAX_LINES)
102-
: multiLineDescription.length;
98+
if (!shouldHideText) {
99+
const descriptionMaxLines = description_lines_count
100+
? clampValue(description_lines_count, 1, DESCRIPTION_MAX_LINES)
101+
: DESCRIPTION_MAX_LINES;
102+
103+
const descText = parseEmojis(description || "No description provided");
104+
const multiLineDescription = wrapTextMultiline(
105+
descText,
106+
DESCRIPTION_LINE_WIDTH,
107+
descriptionMaxLines,
108+
);
103109

104-
const descriptionSvg = multiLineDescription
105-
.map((line) => `<tspan dy="1.2em" x="25">${encodeHTML(line)}</tspan>`)
106-
.join("");
110+
descriptionLinesCount = description_lines_count
111+
? descriptionMaxLines
112+
: multiLineDescription.length;
107113

114+
descriptionSvg = multiLineDescription
115+
.map((line) => `<tspan dy="1.2em" x="25">${encodeHTML(line)}</tspan>`)
116+
.join("");
117+
}
118+
119+
const hasDescription = !shouldHideText && descriptionLinesCount > 0;
120+
const descriptionHeight = hasDescription
121+
? descriptionLinesCount * lineHeight
122+
: 0;
108123
let height =
109-
(descriptionLinesCount > 1 ? 120 : 110) +
110-
descriptionLinesCount * lineHeight;
124+
(hasDescription && descriptionLinesCount > 1 ? 120 : 110) +
125+
descriptionHeight;
126+
127+
const compactStatsOnlyLayout = shouldHideText && shouldHideTitle;
128+
if (compactStatsOnlyLayout) {
129+
const compactPadding = 12;
130+
const compactRowHeight = ICON_SIZE + 8;
131+
height = compactPadding * 2 + compactRowHeight;
132+
}
111133

112134
const i18n = new I18n({
113135
locale,
@@ -233,18 +255,27 @@ const renderRepoCard = (repo, options = {}) => {
233255
gap: 16,
234256
}).join("");
235257

258+
const cardHeight = shouldHideTitle
259+
? compactStatsOnlyLayout
260+
? height + 30
261+
: height
262+
: height;
263+
236264
const card = new Card({
237265
defaultTitle: header.length > 35 ? `${header.slice(0, 35)}...` : header,
238266
titlePrefixIcon: icons.contribs,
239267
width: 400,
240-
height,
268+
height: cardHeight,
241269
border_radius,
242270
colors,
243271
});
244272

245273
card.disableAnimations();
246274
card.setHideBorder(hide_border);
247-
card.setHideTitle(false);
275+
card.setHideTitle(shouldHideTitle);
276+
if (compactStatsOnlyLayout) {
277+
card.paddingX = 25;
278+
}
248279
card.setCSS(`
249280
.description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${colors.textColor} }
250281
.gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${colors.textColor} }
@@ -262,11 +293,19 @@ const renderRepoCard = (repo, options = {}) => {
262293
: ""
263294
}
264295
296+
${
297+
hasDescription
298+
? `
265299
<text class="description" x="25" y="-5">
266300
${descriptionSvg}
267301
</text>
302+
`
303+
: ""
304+
}
268305
269-
<g transform="translate(30, ${height - 75})">
306+
<g transform="translate(${compactStatsOnlyLayout ? 20 : 30}, ${
307+
hasDescription ? height - 75 : compactStatsOnlyLayout ? 2.5 : 0
308+
})">
270309
${starAndForkCount}
271310
</g>
272311
`);

‎src/cards/types.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@ export type StatCardOptions = CommonOptions & {
3333
export type RepoCardOptions = CommonOptions & {
3434
show_owner: boolean;
3535
description_lines_count: number;
36+
hide_title: boolean;
37+
hide_text: boolean;
38+
stats_only?: boolean;
3639
show_issues?: boolean;
3740
show_prs?: boolean;
3841
show_age?: boolean;

0 commit comments

Comments
 (0)