Merge branch 'gradient-background-1' of https://github.com/nthnchu/github-readme-stats (940aa649) · Commits · 郑智淋 / github-readme-stats

readme.md

+1 −1

Original line number	Diff line number	Diff line
		@@ -125,7 +125,7 @@ You can customize the appearance of your `Stats Card` or `Repo Card` however you
		- `title_color` - Card's title color _(hex color)_
		- `text_color` - Body text color _(hex color)_
		- `icon_color` - Icons color if available _(hex color)_
		- `bg_color` - Card's background color _(hex color)_
		- `bg_color` - Card's background color _(hex color)_ or a gradient in the form of _angle,start,end_
		- `theme` - name of the theme, choose from [all available themes](./themes/README.md)
		- `cache_seconds` - set the cache header manually _(min: 1800, max: 86400)_

+8 −1

Original line number	Diff line number	Diff line
		@@ -109,6 +109,13 @@ 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>` : ""}

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

+1 −1

Original line number	Diff line number	Diff line
		@@ -61,7 +61,7 @@ function clampValue(number, min, max) {
		}

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

		function request(data, headers) {

+35 −0

Original line number	Diff line number	Diff line
		@@ -133,4 +133,39 @@ describe("Card", () => {
		"#fff"
		);
		});
		it("should render gradient backgrounds", () => {
		const { titleColor, textColor, iconColor, bgColor } = getCardColors({
		title_color: "f00",
		icon_color: "0f0",
		text_color: "00f",
		bg_color: "90,fff,000",
		theme: "default",
		});
		const card = new Card({
		height: 200,
		colors: {
		titleColor,
		textColor,
		iconColor,
		bgColor,
		},
		});
		document.body.innerHTML = card.render(``);
		expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
		"fill",
		"url(#gradient)"
		);
		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"
		);
		});
		});