feat: added hide_title option (#88)

This commit is contained in:
Anurag Hazra 2020-07-17 23:01:16 +05:30 committed by GitHub
parent 96f89ad2b7
commit 2709d5b434
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 84 additions and 37 deletions

View File

@ -7,6 +7,7 @@ module.exports = async (req, res) => {
const { const {
username, username,
hide, hide,
hide_title,
hide_border, hide_border,
hide_rank, hide_rank,
show_icons, show_icons,
@ -31,6 +32,7 @@ module.exports = async (req, res) => {
renderStatsCard(stats, { renderStatsCard(stats, {
hide: JSON.parse(hide || "[]"), hide: JSON.parse(hide || "[]"),
show_icons: parseBoolean(show_icons), show_icons: parseBoolean(show_icons),
hide_title: parseBoolean(hide_title),
hide_border: parseBoolean(hide_border), hide_border: parseBoolean(hide_border),
hide_rank: parseBoolean(hide_rank), hide_rank: parseBoolean(hide_rank),
line_height, line_height,

View File

@ -63,25 +63,24 @@ To enable icons, you can pass `show_icons=true` in the query param, like so:
![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true) ![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true)
``` ```
Other options:
- `&hide_border=true` hide the border box if you don't like it :D
- `&line_height=30` control the line-height between text
- `&hide_rank=true` hides the ranking
### Customization ### Customization
You can customize the appearance of your `Stats Card` or `Repo Card` however you want with URL params. You can customize the appearance of your `Stats Card` or `Repo Card` however you want with URL params.
Customization Options: Customization Options:
| Option | type | Stats Card (default) | Repo Card (default) | | Option | type | description | Stats Card (default) | Repo Card (default) |
| ----------- | --------- | ---------------------- | ---------------------- | | ----------- | --------- | ------------------------------------ | ---------------------- | ---------------------- |
| title_color | hex color | 2F80ED | 2F80ED | | title_color | hex color | title color | #2f80ed | #2f80ed |
| text_color | hex color | 333 | 333 | | text_color | hex color | body color | #333 | #333 |
| icon_color | hex color | 4C71F2 | 586069 | | icon_color | hex color | icon color | #4c71f2 | #586069 |
| bg_color | hex color | FFFEFE | FFFEFE | | bg_color | hex color | card bg color | rgba(255, 255, 255, 0) | rgba(255, 255, 255, 0) |
| show_owner | boolean | not applicable | false | | line_height | number | control the line-height between text | 30 | N/A |
| hide_rank | boolean | hides the ranking | false | N/A |
| hide_title | boolean | hides the stats title | false | N/A |
| hide_border | boolean | hides the stats card border | false | N/A |
| show_owner | boolean | shows owner name in repo card | N/A | false |
| show_icons | boolean | shows icons | false | N/A |
- You can also customize the cards to be compatible with dark mode - You can also customize the cards to be compatible with dark mode
@ -176,7 +175,6 @@ NOTE: Since [#58](https://github.com/anuraghazra/github-readme-stats/pull/58) we
1. Click deploy, and you're good to go. See your domains to use the API! 1. Click deploy, and you're good to go. See your domains to use the API!
</details> </details>
## :sparkling_heart: Support the project ## :sparkling_heart: Support the project
I open-source almost everything I can, and I try to reply to everyone needing help using these projects. Obviously, I open-source almost everything I can, and I try to reply to everyone needing help using these projects. Obviously,
@ -190,7 +188,7 @@ However, if you are using this project and happy with it or just want to encoura
Thanks! :heart: Thanks! :heart:
-------- ---
Contributions are welcomed! <3 Contributions are welcomed! <3

View File

@ -47,6 +47,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
const { const {
hide = [], hide = [],
show_icons = false, show_icons = false,
hide_title = false,
hide_border = false, hide_border = false,
hide_rank = false, hide_rank = false,
line_height = 25, line_height = 25,
@ -63,6 +64,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
const textColor = fallbackColor(text_color, "#333"); const textColor = fallbackColor(text_color, "#333");
const bgColor = fallbackColor(bg_color, "#FFFEFE"); const bgColor = fallbackColor(bg_color, "#FFFEFE");
// Meta data for creating text nodes with createTextNode function
const STATS = { const STATS = {
stars: { stars: {
icon: icons.star, icon: icons.star,
@ -96,6 +98,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
}, },
}; };
// filter out hidden stats defined by user & create the text nodes
const statItems = Object.keys(STATS) const statItems = Object.keys(STATS)
.filter((key) => !hide.includes(key)) .filter((key) => !hide.includes(key))
.map((key, index) => .map((key, index) =>
@ -110,12 +113,31 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
// Calculate the card height depending on how many items there are // Calculate the card height depending on how many items there are
// but if rank circle is visible clamp the minimum height to `150` // but if rank circle is visible clamp the minimum height to `150`
const height = Math.max( let height = Math.max(
45 + (statItems.length + 1) * lheight, 45 + (statItems.length + 1) * lheight,
hide_rank ? 0 : 150 hide_rank ? 0 : 150
); );
const border = ` // the better user's score the the rank will be closer to zero so
// subtracting 100 to get the progress in 100%
const progress = 100 - rank.score;
const styles = getStyles({
titleColor,
textColor,
iconColor,
show_icons,
progress,
});
// Conditionally rendered elements
const title = hide_title
? ""
: `<text x="25" y="35" class="header">${name}'s GitHub Stats</text>`;
const border = hide_border
? ""
: `
<rect <rect
data-testid="card-border" data-testid="card-border"
x="0.5" x="0.5"
@ -147,17 +169,9 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
</text> </text>
</g>`; </g>`;
// the better user's score the the rank will be closer to zero so if (hide_title) {
// subtracting 100 to get the progress in 100% height -= 30;
let progress = 100 - rank.score; }
const styles = getStyles({
titleColor,
textColor,
iconColor,
show_icons,
progress,
});
return ` return `
<svg width="495" height="${height}" viewBox="0 0 495 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="495" height="${height}" viewBox="0 0 495 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -165,15 +179,18 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
${styles} ${styles}
</style> </style>
${hide_border ? "" : border} ${border}
${title}
<g data-testid="card-body-content" transform="translate(0, ${
hide_title ? -30 : 0
})">
${rankCircle} ${rankCircle}
<text x="25" y="35" class="header">${name}'s GitHub Stats</text>
<svg x="0" y="45"> <svg x="0" y="45">
${statItems.toString().replace(/\,/gm, "")} ${statItems.toString().replace(/\,/gm, "")}
</svg> </svg>
</g>
</svg> </svg>
`; `;
}; };

View File

@ -112,9 +112,39 @@ describe("Test renderStatsCard", () => {
); );
}); });
it("should hide the title", () => {
document.body.innerHTML = renderStatsCard(stats, {
hide_title: true,
});
expect(document.getElementsByClassName("header")[0]).toBeUndefined();
expect(document.getElementsByTagName("svg")[0]).toHaveAttribute(
"height",
"165"
);
expect(queryByTestId(document.body, "card-body-content")).toHaveAttribute(
"transform",
"translate(0, -30)"
);
});
it("should not hide the title", () => {
document.body.innerHTML = renderStatsCard(stats, {});
expect(document.getElementsByClassName("header")[0]).toBeDefined();
expect(document.getElementsByTagName("svg")[0]).toHaveAttribute(
"height",
"195"
);
expect(queryByTestId(document.body, "card-body-content")).toHaveAttribute(
"transform",
"translate(0, 0)"
);
});
it("should render icons correctly", () => { it("should render icons correctly", () => {
document.body.innerHTML = renderStatsCard(stats, { document.body.innerHTML = renderStatsCard(stats, {
show_icons: "true", show_icons: true,
}); });
expect(queryAllByTestId(document.body, "icon")[0]).toBeDefined(); expect(queryAllByTestId(document.body, "icon")[0]).toBeDefined();