refactor: Improved gradient (#350) (af1929a3) · Commits · 郑智淋 / github-readme-stats

readme.md

+12 −0

Original line number	Diff line number	Diff line
		@@ -131,6 +131,14 @@ You can customize the appearance of your `Stats Card` or `Repo Card` however you
		- `theme` - name of the theme, choose from [all available themes](./themes/README.md)
		- `cache_seconds` - set the cache header manually _(min: 1800, max: 86400)_

		##### Gradient in bg_color

		You can provide multiple comma saperated values in bg_color option to render a gradient, the format of the gradient is :-

		```
		&bg_color=DEG,COLOR1,COLRO2,COLOR3...COLOR10
		```

		> Note on cache: Repo cards have default cache of 30mins (1800 seconds) if the fork count & star count is less than 1k otherwise it's 2hours (7200). Also note that cache is clamped to minimum of 30min and maximum of 24hours

		#### Stats Card Exclusive Options:
		@@ -250,6 +258,10 @@ Choose from any of the [default themes](#themes)

		![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical)

		- Gradient

		![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&bg_color=30,e96443,904e95&title_color=fff&text_color=fff)

		- Customizing stats card

		![Anurag's github stats](https://github-readme-stats.vercel.app/api/?username=anuraghazra&show_icons=true&title_color=fff&icon_color=79ff97&text_color=9f9f9f&bg_color=151515)

+27 −7

Original line number	Diff line number	Diff line
		@@ -85,6 +85,27 @@ class Card {
		`;
		}

		renderGradient() {
		if (typeof this.colors.bgColor !== "object") return;

		const gradients = this.colors.bgColor.slice(1);
		return typeof this.colors.bgColor === "object"
		? `
		<defs>
		<linearGradient
		id="gradient"
		gradientTransform="rotate(${this.colors.bgColor[0]})"
		>
		${gradients.map((grad, index) => {
		let offset = (index * 100) / (gradients.length - 1);
		return `<stop offset="${offset}%" stop-color="#${grad}" />`;
		})}
		</linearGradient>
		</defs>
		`
		: "";
		}

		render(body) {
		return `
		<svg
		@@ -109,12 +130,7 @@ class Card {
		}
		</style>

		${typeof this.colors.bgColor == 'object' ? `<defs>
		<linearGradient id="gradient" gradientTransform="rotate(${this.colors.bgColor[0]})">
		<stop offset="0%" stop-color="#${this.colors.bgColor[1]}" />
		<stop offset="100%" stop-color="#${this.colors.bgColor[2]}" />
		</linearGradient>
		</defs>` : ""}
		${this.renderGradient()}

		<rect
		data-testid="card-bg"
		@@ -124,7 +140,11 @@ class Card {
		height="99%"
		stroke="#E4E2E2"
		width="${this.width - 1}"
		fill="${typeof this.colors.bgColor == 'object' ? "url(#gradient)" : this.colors.bgColor}"
		fill="${
		typeof this.colors.bgColor === "object"
		? "url(#gradient)"
		: this.colors.bgColor
		}"
		stroke-opacity="${this.hideBorder ? 0 : 1}"
		/>

+15 −1

Original line number	Diff line number	Diff line
		@@ -60,8 +60,22 @@ function clampValue(number, min, max) {
		return Math.max(min, Math.min(number, max));
		}

		function isValidGradient(colors) {
		return isValidHexColor(colors[1]) && isValidHexColor(colors[2]);
		}

		function fallbackColor(color, fallbackColor) {
		return (isValidHexColor(color) && `#${color}`) \|\| (color.includes(',') && isValidHexColor(color.split(',')[1]) && isValidHexColor(color.split(',')[2]) && color.split(',')) \|\| fallbackColor;
		let colors = color.split(",");
		let gradient = null;

		if (colors.length > 1 && isValidGradient(colors)) {
		gradient = colors;
		}

		return (
		(gradient ? gradient : isValidHexColor(color) && `#${color}`) \|\|
		fallbackColor
		);
		}

		function request(data, headers) {

+12 −10

Original line number	Diff line number	Diff line
		@@ -138,9 +138,10 @@ describe("Card", () => {
		title_color: "f00",
		icon_color: "0f0",
		text_color: "00f",
		bg_color: "90,fff,000",
		bg_color: "90,fff,000,f00",
		theme: "default",
		});

		const card = new Card({
		height: 200,
		colors: {
		@@ -155,17 +156,18 @@ describe("Card", () => {
		"fill",
		"url(#gradient)"
		);
		expect(document.querySelector('defs linearGradient')).toHaveAttribute(
		expect(document.querySelector("defs linearGradient")).toHaveAttribute(
		"gradientTransform",
		"rotate(90)"
		);
		expect(document.querySelector('defs linearGradient stop:nth-child(1)')).toHaveAttribute(
		"stop-color",
		"#fff"
		);
		expect(document.querySelector('defs linearGradient stop:nth-child(2)')).toHaveAttribute(
		"stop-color",
		"#000"
		);
		expect(
		document.querySelector("defs linearGradient stop:nth-child(1)")
		).toHaveAttribute("stop-color", "#fff");
		expect(
		document.querySelector("defs linearGradient stop:nth-child(2)")
		).toHaveAttribute("stop-color", "#000");
		expect(
		document.querySelector("defs linearGradient stop:nth-child(3)")
		).toHaveAttribute("stop-color", "#f00");
		});
		});