diff --git a/api/index.js b/api/index.js index 6e25407..f9041b7 100644 --- a/api/index.js +++ b/api/index.js @@ -7,6 +7,7 @@ module.exports = async (req, res) => { const { username, hide, + hide_title, hide_border, hide_rank, show_icons, @@ -31,6 +32,7 @@ module.exports = async (req, res) => { renderStatsCard(stats, { hide: JSON.parse(hide || "[]"), show_icons: parseBoolean(show_icons), + hide_title: parseBoolean(hide_title), hide_border: parseBoolean(hide_border), hide_rank: parseBoolean(hide_rank), line_height, diff --git a/readme.md b/readme.md index bfa09e4..40ecf57 100644 --- a/readme.md +++ b/readme.md @@ -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) ``` -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 You can customize the appearance of your `Stats Card` or `Repo Card` however you want with URL params. Customization Options: -| Option | type | Stats Card (default) | Repo Card (default) | -| ----------- | --------- | ---------------------- | ---------------------- | -| title_color | hex color | 2F80ED | 2F80ED | -| text_color | hex color | 333 | 333 | -| icon_color | hex color | 4C71F2 | 586069 | -| bg_color | hex color | FFFEFE | FFFEFE | -| show_owner | boolean | not applicable | false | +| Option | type | description | Stats Card (default) | Repo Card (default) | +| ----------- | --------- | ------------------------------------ | ---------------------- | ---------------------- | +| title_color | hex color | title color | #2f80ed | #2f80ed | +| text_color | hex color | body color | #333 | #333 | +| icon_color | hex color | icon color | #4c71f2 | #586069 | +| bg_color | hex color | card bg color | rgba(255, 255, 255, 0) | rgba(255, 255, 255, 0) | +| 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 @@ -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! - ## :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, @@ -190,8 +188,8 @@ However, if you are using this project and happy with it or just want to encoura Thanks! :heart: --------- +--- Contributions are welcomed! <3 -Made with :heart: and JavaScript. +Made with :heart: and JavaScript. diff --git a/src/renderStatsCard.js b/src/renderStatsCard.js index 14d063c..b554cf2 100644 --- a/src/renderStatsCard.js +++ b/src/renderStatsCard.js @@ -47,6 +47,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { const { hide = [], show_icons = false, + hide_title = false, hide_border = false, hide_rank = false, line_height = 25, @@ -63,6 +64,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { const textColor = fallbackColor(text_color, "#333"); const bgColor = fallbackColor(bg_color, "#FFFEFE"); + // Meta data for creating text nodes with createTextNode function const STATS = { stars: { 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) .filter((key) => !hide.includes(key)) .map((key, index) => @@ -110,12 +113,31 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { // Calculate the card height depending on how many items there are // 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, 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 + ? "" + : `${name}'s GitHub Stats`; + + const border = hide_border + ? "" + : ` { `; - // the better user's score the the rank will be closer to zero so - // subtracting 100 to get the progress in 100% - let progress = 100 - rank.score; - - const styles = getStyles({ - titleColor, - textColor, - iconColor, - show_icons, - progress, - }); + if (hide_title) { + height -= 30; + } return ` @@ -165,15 +179,18 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { ${styles} - ${hide_border ? "" : border} + ${border} + ${title} - ${rankCircle} - - ${name}'s GitHub Stats + + ${rankCircle} - - ${statItems.toString().replace(/\,/gm, "")} - + + ${statItems.toString().replace(/\,/gm, "")} + + `; }; diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js index a82dc28..7dc76f4 100644 --- a/tests/renderStatsCard.test.js +++ b/tests/renderStatsCard.test.js @@ -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", () => { document.body.innerHTML = renderStatsCard(stats, { - show_icons: "true", + show_icons: true, }); expect(queryAllByTestId(document.body, "icon")[0]).toBeDefined();