From 6d4fbfecfb5d06b5450808067ef9dacc26457b46 Mon Sep 17 00:00:00 2001 From: Rico <805163443@qq.com> Date: Thu, 16 Jul 2020 18:21:21 +0800 Subject: [PATCH] perf: align icons and text vertical (#33) * improve: improved rating algorithm wip * Fixed typos, punctuation [...] Corrected many instances of "Github" to "GitHub", fixed the punctuation on some sections, fixed the ~lack of~ uppercase chars in others, tweaked the grammar a bit, and added the Vercel guide to a spoiler-ish section so it's only visible if you click to expand. <3 * fix: github rate limiter with multiple PATs * perf: vertically align text left * refactor: refactored retryer logic & handled invalid tokens * chore: remove redundant codes `axios` is Promise based, there is no need to wrap it into a Promise constructor again * fix: query param booleans * design: fixed rank alignment * chore: rebase from master * fix: fixed repo card breaking in absence of primaryLanguage * fix: fixed stars count #39 & fixed progressbar percentage * perf: replace emoji icons with GitHub SVG icons * chore: added funding link * refactor: refacted icons to another file * test: added test for icons Co-authored-by: anuraghazra Co-authored-by: Micael Jarniac Co-authored-by: JounQin --- src/getStyles.js | 3 --- src/icons.js | 11 ++++++++ src/renderRepoCard.js | 7 ++--- src/renderStatsCard.js | 50 ++++++++++++++++++++++++----------- tests/renderStatsCard.test.js | 29 +++++++++++++++++++- 5 files changed, 78 insertions(+), 22 deletions(-) create mode 100644 src/icons.js diff --git a/src/getStyles.js b/src/getStyles.js index 198344fae5fb8..07d90fd55b2af 100644 --- a/src/getStyles.js +++ b/src/getStyles.js @@ -64,9 +64,6 @@ const getStyles = ({ } .bold { font-weight: 700 } - .star-icon { - font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; - } .icon { fill: ${iconColor}; display: ${!!show_icons ? "block" : "none"}; diff --git a/src/icons.js b/src/icons.js new file mode 100644 index 0000000000000..7b7e5075c0f18 --- /dev/null +++ b/src/icons.js @@ -0,0 +1,11 @@ +const icons = { + star: ``, + commits: ``, + prs: ``, + issues: ``, + icon: ``, + contribs: ``, + fork: ``, +}; + +module.exports = icons; diff --git a/src/renderRepoCard.js b/src/renderRepoCard.js index 9b127b353f891..7fd30f56a53ad 100644 --- a/src/renderRepoCard.js +++ b/src/renderRepoCard.js @@ -1,4 +1,5 @@ const { kFormatter, encodeHTML, fallbackColor } = require("../src/utils"); +const icons = require("./icons"); const renderRepoCard = (repo, options = {}) => { const { name, description, primaryLanguage, stargazers, forkCount } = repo; @@ -32,7 +33,7 @@ const renderRepoCard = (repo, options = {}) => { - + ${icons.contribs} ${name} @@ -45,14 +46,14 @@ const renderRepoCard = (repo, options = {}) => { - + ${icons.star} ${totalStars} - + ${icons.fork} ${totalForks} diff --git a/src/renderStatsCard.js b/src/renderStatsCard.js index 75259de894631..14d063c1ede97 100644 --- a/src/renderStatsCard.js +++ b/src/renderStatsCard.js @@ -1,21 +1,36 @@ const { kFormatter, fallbackColor } = require("../src/utils"); const getStyles = require("./getStyles"); +const icons = require("./icons"); -const createTextNode = ({ icon, label, value, id, index, lineHeight }) => { - const classname = icon === "★" && "star-icon"; +const createTextNode = ({ + icon, + label, + value, + id, + index, + lineHeight, + showIcons, +}) => { const kValue = kFormatter(value); const staggerDelay = (index + 3) * 150; // manually calculating lineHeight based on index instead of using // to fix firefox layout bug const lheight = lineHeight * (index + 1); + const translateY = lheight - lineHeight / 2; + const labelOffset = showIcons ? `x="25"` : ""; + const iconSvg = showIcons + ? ` + + ${icon} + + ` + : ""; return ` - - ${icon} - - ${label}: - - ${kValue} - + + ${iconSvg} + ${label}: + ${kValue} + `; }; @@ -50,31 +65,31 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { const STATS = { stars: { - icon: "★", + icon: icons.star, label: "Total Stars", value: totalStars, id: "stars", }, commits: { - icon: "🕗", + icon: icons.commits, label: "Total Commits", value: totalCommits, id: "commits", }, prs: { - icon: "🔀", + icon: icons.prs, label: "Total PRs", value: totalPRs, id: "prs", }, issues: { - icon: "ⓘ", + icon: icons.issues, label: "Total Issues", value: totalIssues, id: "issues", }, contribs: { - icon: "📕", + icon: icons.contribs, label: "Contributed to", value: contributedTo, id: "contribs", @@ -85,7 +100,12 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { .filter((key) => !hide.includes(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 }) + createTextNode({ + ...STATS[key], + index, + lineHeight: lheight, + showIcons: show_icons, + }) ); // Calculate the card height depending on how many items there are diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js index 6375f4bdc0a1e..a82dc28fee776 100644 --- a/tests/renderStatsCard.test.js +++ b/tests/renderStatsCard.test.js @@ -2,7 +2,11 @@ require("@testing-library/jest-dom"); const cssToObject = require("css-to-object"); const renderStatsCard = require("../src/renderStatsCard"); -const { getByTestId, queryByTestId } = require("@testing-library/dom"); +const { + getByTestId, + queryByTestId, + queryAllByTestId, +} = require("@testing-library/dom"); describe("Test renderStatsCard", () => { const stats = { @@ -107,4 +111,27 @@ describe("Test renderStatsCard", () => { "#252525" ); }); + + it("should render icons correctly", () => { + document.body.innerHTML = renderStatsCard(stats, { + show_icons: "true", + }); + + expect(queryAllByTestId(document.body, "icon")[0]).toBeDefined(); + expect(queryByTestId(document.body, "stars")).toBeDefined(); + expect( + queryByTestId(document.body, "stars").previousElementSibling // the label + ).toHaveAttribute("x", "25"); + }); + + it("should not have icons if show_icons is false", () => { + document.body.innerHTML = renderStatsCard(stats, { show_icons: false }); + + console.log(queryAllByTestId(document.body, "icon")); + expect(queryAllByTestId(document.body, "icon")[0]).not.toBeDefined(); + expect(queryByTestId(document.body, "stars")).toBeDefined(); + expect( + queryByTestId(document.body, "stars").previousElementSibling // the label + ).not.toHaveAttribute("x"); + }); });