System-End/github-readme-stats
1
0
Fork 0
mirror of https://github.com/System-End/github-readme-stats.git synced 2026-04-19 19:55:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: move duplicated code for rendering repo/gist cards into utils (#3214)

Browse source
This commit is contained in:
Alexandr Garbuzov 2023-09-11 23:08:22 +03:00 • committed by GitHub
parent def5c9c997
commit 09b7ad6a58
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 75 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
src/cards/gist-card.js
View file

@ -8,6 +8,8 @@ import {
kFormatter,
measureText,
flexLayout,
iconWithLabel,
createLanguageNode,
} from "../common/utils.js";
import Card from "../common/Card.js";
import { icons } from "../common/icons.js";
@ -27,48 +29,6 @@ const ICON_SIZE = 16;
const CARD_DEFAULT_WIDTH = 400;
const HEADER_MAX_LENGTH = 35;
/**
* Creates a node to display the primary programming language of the gist.
*
* @param {string} langName Language name.
* @param {string} langColor Language color.
* @returns {string} Language display SVG object.
*/
const createLanguageNode = (langName, langColor) => {
return `
<g data-testid="primary-lang">
<circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="${langColor}" />
<text data-testid="lang-name" class="gray" x="15">${langName}</text>
</g>
`;
};
/**
* Creates an icon with label to display gist stats like forks, stars, etc.
*
* @param {string} icon The icon to display.
* @param {number|string} label The label to display.
* @param {string} testid The testid to assign to the label.
* @returns {string} Icon with label SVG object.
*/
const iconWithLabel = (icon, label, testid) => {
if (typeof label === "number" && label <= 0) return "";
const iconSvg = `
<svg
class="icon"
y="-12"
viewBox="0 0 16 16"
version="1.1"
width="${ICON_SIZE}"
height="${ICON_SIZE}"
>
${icon}
</svg>
`;
const text = `<text data-testid="${testid}" class="gray">${label}</text>`;
return flexLayout({ items: [iconSvg, text], gap: 20 }).join("");
};
/**
* @typedef {import('./types').GistCardOptions} GistCardOptions Gist card options.
* @typedef {import('../fetchers/types').GistData} GistData Gist data.
@ -122,8 +82,18 @@ const renderGistCard = (gistData, options = {}) => {
const totalStars = kFormatter(starsCount);
const totalForks = kFormatter(forksCount);
const svgStars = iconWithLabel(icons.star, totalStars, "starsCount");
const svgForks = iconWithLabel(icons.fork, totalForks, "forksCount");
const svgStars = iconWithLabel(
icons.star,
totalStars,
"starsCount",
ICON_SIZE,
);
const svgForks = iconWithLabel(
icons.fork,
totalForks,
"forksCount",
ICON_SIZE,
);
const languageName = language || "Unspecified";
const languageColor = languageColors[languageName] || "#858585";

62
src/cards/repo-card.js
View file

@ -10,9 +10,13 @@ import {
measureText,
parseEmojis,
wrapTextMultiline,
iconWithLabel,
createLanguageNode,
} from "../common/utils.js";
import { repoCardLocales } from "../translations.js";
const ICON_SIZE = 16;
/**
* Retrieves the repository description and wraps it to fit the card width.
*
@ -35,50 +39,6 @@ const getBadgeSVG = (label, textColor) => `
</g>
`;
/**
* Creates a node to display the primary programming language of the repository.
*
* @param {string} langName Language name.
* @param {string} langColor Language color.
* @returns {string} Language display SVG object.
*/
const createLanguageNode = (langName, langColor) => {
return `
<g data-testid="primary-lang">
<circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="${langColor}" />
<text data-testid="lang-name" class="gray" x="15">${langName}</text>
</g>
`;
};
const ICON_SIZE = 16;
/**
* Creates an icon with label to display repository stats like forks, stars, etc.
*
* @param {string} icon The icon to display.
* @param {number|string} label The label to display.
* @param {string} testid The testid to assign to the label.
* @returns {string} Icon with label SVG object.
*/
const iconWithLabel = (icon, label, testid) => {
if (typeof label === "number" && label <= 0) return "";
const iconSvg = `
<svg
class="icon"
y="-12"
viewBox="0 0 16 16"
version="1.1"
width="${ICON_SIZE}"
height="${ICON_SIZE}"
>
${icon}
</svg>
`;
const text = `<text data-testid="${testid}" class="gray">${label}</text>`;
return flexLayout({ items: [iconSvg, text], gap: 20 }).join("");
};
/**
* @typedef {import("../fetchers/types").RepositoryData} RepositoryData Repository data.
* @typedef {import("./types").RepoCardOptions} RepoCardOptions Repo card options.
@ -151,8 +111,18 @@ const renderRepoCard = (repo, options = {}) => {
const totalStars = kFormatter(starCount);
const totalForks = kFormatter(forkCount);
const svgStars = iconWithLabel(icons.star, totalStars, "stargazers");
const svgForks = iconWithLabel(icons.fork, totalForks, "forkcount");
const svgStars = iconWithLabel(
icons.star,
totalStars,
"stargazers",
ICON_SIZE,
);
const svgForks = iconWithLabel(
icons.fork,
totalForks,
"forkcount",
ICON_SIZE,
);
const starAndForkCount = flexLayout({
items: [svgLanguage, svgStars, svgForks],

45
src/common/utils.js
View file

@ -34,6 +34,49 @@ const renderError = (message, secondaryMessage = "") => {
`;
};
/**
* Creates a node to display the primary programming language of the repository/gist.
*
* @param {string} langName Language name.
* @param {string} langColor Language color.
* @returns {string} Language display SVG object.
*/
const createLanguageNode = (langName, langColor) => {
return `
<g data-testid="primary-lang">
<circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="${langColor}" />
<text data-testid="lang-name" class="gray" x="15">${langName}</text>
</g>
`;
};
/**
* Creates an icon with label to display repository/gist stats like forks, stars, etc.
*
* @param {string} icon The icon to display.
* @param {number|string} label The label to display.
* @param {string} testid The testid to assign to the label.
* @param {number} iconSize The size of the icon.
* @returns {string} Icon with label SVG object.
*/
const iconWithLabel = (icon, label, testid, iconSize) => {
if (typeof label === "number" && label <= 0) return "";
const iconSvg = `
<svg
class="icon"
y="-12"
viewBox="0 0 16 16"
version="1.1"
width="${iconSize}"
height="${iconSize}"
>
${icon}
</svg>
`;
const text = `<text data-testid="${testid}" class="gray">${label}</text>`;
return flexLayout({ items: [iconSvg, text], gap: 20 }).join("");
};
/**
* Encode string as HTML.
*
@ -481,6 +524,8 @@ const dateDiff = (d1, d2) => {
export {
ERROR_CARD_LENGTH,
renderError,
createLanguageNode,
iconWithLabel,
encodeHTML,
kFormatter,
isValidHexColor,