fix: firefox layout breaking (#45) (014f710e) · Commits · 郑智淋 / github-readme-stats

src/renderStatsCard.js

+29 −24

Original line number	Diff line number	Diff line
		const { kFormatter, isValidHexColor } = require("../src/utils");

		const createTextNode = ({ icon, label, value, lineHeight, id }) => {
		const createTextNode = ({ icon, label, value, id, index, lineHeight }) => {
		const classname = icon === "★" && "star-icon";
		const kValue = kFormatter(value);
		// manually calculating lineHeight based on index instead of using <tspan dy="" />
		// to fix firefox layout bug
		return `
		<tspan x="25" dy="${lineHeight}" class="stat bold">
		<tspan data-testid="icon" class="icon ${classname}">${icon}</tspan> ${label}:</tspan>
		<tspan data-testid="${id}" x="155" dy="0" class="stat">${kValue}</tspan>
		<text x="25" y="${lineHeight * (index + 1)}">
		<tspan dx="0" data-testid="icon" class="icon ${classname}">${icon}</tspan>
		<tspan dx="0" class="stat bold">
		${label}:
		</tspan>
		<tspan x="160" data-testid="${id}" class="stat">${kValue}</tspan>
		</text>
		`;
		};

		@@ -41,47 +47,45 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
		const textColor = (isValidHexColor(text_color) && `#${text_color}`) \|\| "#333";
		const bgColor = (isValidHexColor(bg_color) && `#${bg_color}`) \|\| "#FFFEFE";

		const STAT_MAP = {
		stars: createTextNode({
		const STATS = {
		stars: {
		icon: "★",
		label: "Total Stars",
		value: totalStars,
		lineHeight: lheight,
		id: "stars",
		}),
		commits: createTextNode({
		},
		commits: {
		icon: "🕗",
		label: "Total Commits",
		value: totalCommits,
		lineHeight: lheight,
		id: "commits",
		}),
		prs: createTextNode({
		},
		prs: {
		icon: "🔀",
		label: "Total PRs",
		value: totalPRs,
		lineHeight: lheight,
		id: "prs",
		}),
		issues: createTextNode({
		},
		issues: {
		icon: "ⓘ",
		label: "Total Issues",
		value: totalIssues,
		lineHeight: lheight,
		id: "issues",
		}),
		contribs: createTextNode({
		},
		contribs: {
		icon: "📕",
		label: "Contributed to",
		value: contributedTo,
		lineHeight: lheight,
		id: "contribs",
		}),
		},
		};

		const statItems = Object.keys(STAT_MAP)
		const statItems = Object.keys(STATS)
		.filter((key) => !hide.includes(key))
		.map((key) => STAT_MAP[key]);
		.map((key, index) =>
		// create the text nodes, and pass index so that we can calculate the line spacing
		createTextNode({ ...STATS[key], index, lineHeight: lheight })
		);

		// Calculate the card height depending on how many items there are
		// but if rank circle is visible clamp the minimum height to `150`
		@@ -152,9 +156,10 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
		${rankCircle}

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

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

Admin message