mirror/github-readme-stats
2
0
Fork 0
mirror of https://github.com/anuraghazra/github-readme-stats.git synced 2024-12-21 06:11:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: firefox layout breaking (#45)

Browse Source 
* fix: firefox layout breaking

* refactor: refactored code and added comments

* chore: remove useragent dep
This commit is contained in:
Anurag Hazra 2020-07-13 23:47:04 +05:30 committed by GitHub
parent 29d3ea63f8
commit 014f710e12
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/renderStatsCard.js
View File

@ -1,12 +1,18 @@
const { kFormatter, isValidHexColor } = require("../src/utils"); 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 classname = icon === "★" && "star-icon";
const kValue = kFormatter(value); const kValue = kFormatter(value);
// manually calculating lineHeight based on index instead of using <tspan dy="" />
// to fix firefox layout bug
return ` return `
<tspan x="25" dy="${lineHeight}" class="stat bold"> <text x="25" y="${lineHeight * (index + 1)}">
<tspan data-testid="icon" class="icon ${classname}">${icon}</tspan> ${label}:</tspan> <tspan dx="0" data-testid="icon" class="icon ${classname}">${icon}</tspan>
<tspan data-testid="${id}" x="155" dy="0" class="stat">${kValue}</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 textColor = (isValidHexColor(text_color) && `#${text_color}`) || "#333";
const bgColor = (isValidHexColor(bg_color) && `#${bg_color}`) || "#FFFEFE"; const bgColor = (isValidHexColor(bg_color) && `#${bg_color}`) || "#FFFEFE";
const STAT_MAP = { const STATS = {
stars: createTextNode({ stars: {
icon: "★", icon: "★",
label: "Total Stars", label: "Total Stars",
value: totalStars, value: totalStars,
lineHeight: lheight,
id: "stars", id: "stars",
}), },
commits: createTextNode({ commits: {
icon: "🕗", icon: "🕗",
label: "Total Commits", label: "Total Commits",
value: totalCommits, value: totalCommits,
lineHeight: lheight,
id: "commits", id: "commits",
}), },
prs: createTextNode({ prs: {
icon: "🔀", icon: "🔀",
label: "Total PRs", label: "Total PRs",
value: totalPRs, value: totalPRs,
lineHeight: lheight,
id: "prs", id: "prs",
}), },
issues: createTextNode({ issues: {
icon: "ⓘ", icon: "ⓘ",
label: "Total Issues", label: "Total Issues",
value: totalIssues, value: totalIssues,
lineHeight: lheight,
id: "issues", id: "issues",
}), },
contribs: createTextNode({ contribs: {
icon: "📕", icon: "📕",
label: "Contributed to", label: "Contributed to",
value: contributedTo, value: contributedTo,
lineHeight: lheight,
id: "contribs", id: "contribs",
}), },
}; };
const statItems = Object.keys(STAT_MAP) const statItems = Object.keys(STATS)
.filter((key) => !hide.includes(key)) .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 // Calculate the card height depending on how many items there are
// but if rank circle is visible clamp the minimum height to `150` // but if rank circle is visible clamp the minimum height to `150`
@ -152,9 +156,10 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
${rankCircle} ${rankCircle}
<text x="25" y="35" class="header">${name}'s GitHub Stats</text> <text x="25" y="35" class="header">${name}'s GitHub Stats</text>
<text y="45">
<svg x="0" y="45">
${statItems.toString().replace(/\,/gm, "")} ${statItems.toString().replace(/\,/gm, "")}
</text> </svg>
</svg> </svg>
`; `;
}; };