feat: added hide_title option (#88) (2709d5b4) · Commits · 郑智淋 / github-readme-stats

api/index.js

+2 −0

Original line number	Diff line number	Diff line
		@@ -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,

readme.md

+14 −16

Original line number	Diff line number	Diff line
		@@ -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!
		</details>


		## :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,7 +188,7 @@ However, if you are using this project and happy with it or just want to encoura

		Thanks! :heart:

		--------
		---

		Contributions are welcomed! <3

src/renderStatsCard.js

+37 −20

Original line number	Diff line number	Diff line
		@@ -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
		? ""
		: `<text x="25" y="35" class="header">${name}'s GitHub Stats</text>`;

		const border = hide_border
		? ""
		: `
		<rect
		data-testid="card-border"
		x="0.5"
		@@ -147,17 +169,9 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
		</text>
		</g>`;

		// 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 `
		<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}
		</style>

		${hide_border ? "" : border}
		${border}
		${title}

		<g data-testid="card-body-content" transform="translate(0, ${
		hide_title ? -30 : 0
		})">
		${rankCircle}

		<text x="25" y="35" class="header">${name}'s GitHub Stats</text>

		<svg x="0" y="45">
		${statItems.toString().replace(/\,/gm, "")}
		</svg>
		</g>
		</svg>
		`;
		};

tests/renderStatsCard.test.js

+31 −1

Original line number	Diff line number	Diff line
		@@ -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();

Admin message