Repo and Top Langs card gradient (anuraghazra#218) (bd0ef4af) · Commits · 郑智淋 / github-readme-stats

src/renderRepoCard.js

+12 −5

Original line number	Diff line number	Diff line
		@@ -44,7 +44,7 @@ const renderRepoCard = (repo, options = {}) => {
		const multiLineDescription = wrapTextMultiline(desc);
		const descriptionLines = multiLineDescription.length;
		const lineHeight = 10;

		const isGradient = !(bg_color == undefined \|\| bg_color.length == 6 \|\| bg_color.length == 3)
		const height =
		(descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;

		@@ -56,7 +56,7 @@ const renderRepoCard = (repo, options = {}) => {
		bg_color,
		theme,
		});

		const gradientBgColor = isGradient ? bg_color.split(',') : undefined;
		const totalStars = kFormatter(stargazers.totalCount);
		const totalForks = kFormatter(forkCount);

		@@ -74,7 +74,14 @@ const renderRepoCard = (repo, options = {}) => {
		</text>
		</g>
		`;

		const gradient = isGradient ? `
		<defs>
		<linearGradient id="gradient" gradientTransform="rotate(${gradientBgColor[0]})">
		<stop offset="0%" stop-color="#${gradientBgColor[1]}" />
		<stop offset="100%" stop-color="#${gradientBgColor[2]}" />
		</linearGradient>
		</defs>`
		: undefined
		const svgLanguage = primaryLanguage
		? `
		<g data-testid="primary-lang" transform="translate(30, 0)">
		@@ -112,8 +119,8 @@ const renderRepoCard = (repo, options = {}) => {
		.badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }
		.badge rect { opacity: 0.2 }
		</style>

		<rect data-testid="card-bg" x="0.5" y="0.5" width="399" height="99%" rx="4.5" fill="${bgColor}" stroke="#E4E2E2"/>
		${isGradient ? gradient : ""}
		<rect data-testid="card-bg" x="0.5" y="0.5" width="399" height="99%" rx="4.5" fill="${isGradient ? "url('#gradient')" : bgColor}" stroke="#E4E2E2"/>
		<svg class="icon" x="25" y="25" viewBox="0 0 16 16" version="1.1" width="16" height="16">
		${icons.contribs}
		</svg>

src/renderTopLanguages.js

+12 −4

Original line number	Diff line number	Diff line
		@@ -93,7 +93,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
		const totalLanguageSize = langs.reduce((acc, curr) => {
		return acc + curr.size;
		}, 0);

		const isGradient = !(bg_color == undefined \|\| bg_color.length == 6 \|\| bg_color.length == 3)
		// returns theme based colors with proper overrides and defaults
		const { titleColor, textColor, bgColor } = getCardColors({
		title_color,
		@@ -101,7 +101,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
		bg_color,
		theme,
		});

		const gradientBgColor = isGradient ? bg_color.split(',') : undefined;
		let width = isNaN(card_width) ? 300 : card_width;
		let height = 45 + (langs.length + 1) * 40;

		@@ -173,14 +173,22 @@ const renderTopLanguages = (topLangs, options = {}) => {
		if (hide_title) {
		height -= 30;
		}

		const gradient = isGradient ? `
		<defs>
		<linearGradient id="gradient" gradientTransform="rotate(${gradientBgColor[0]})">
		<stop offset="0%" stop-color="#${gradientBgColor[1]}" />
		<stop offset="100%" stop-color="#${gradientBgColor[2]}" />
		</linearGradient>
		</defs>`
		: undefined
		return `
		<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
		<style>
		.header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${titleColor} }
		.lang-name { font: 400 11px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
		</style>
		<rect data-testid="card-bg" x="0.5" y="0.5" width="99.7%" height="99%" rx="4.5" fill="${bgColor}" stroke="#E4E2E2"/>
		${isGradient ? gradient : ""}
		<rect data-testid="card-bg" x="0.5" y="0.5" width="99.7%" height="99%" rx="4.5" fill="${isGradient ? "url('#gradient')" : bgColor}" stroke="#E4E2E2"/>

		${
		hide_title

Admin message