refactor: added FlexLayout for flex layouts (253eb39b) · Commits · 郑智淋 / github-readme-stats

src/renderRepoCard.js

+35 −21

Original line number	Diff line number	Diff line
		const { kFormatter, encodeHTML, fallbackColor } = require("../src/utils");
		const {
		kFormatter,
		encodeHTML,
		fallbackColor,
		FlexLayout,
		} = require("../src/utils");
		const icons = require("./icons");

		const renderRepoCard = (repo, options = {}) => {
		@@ -42,6 +47,31 @@ const renderRepoCard = (repo, options = {}) => {
		`
		: "";

		const svgLanguage = `
		<g transform="translate(30, 100)">
		<circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="${langColor}" />
		<text data-testid="lang" class="gray" x="15">${langName}</text>
		</g>
		`;

		const svgStars =
		stargazers.totalCount > 0 &&
		`
		<svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
		${icons.star}
		</svg>
		<text data-testid="stargazers" class="gray" x="25">${totalStars}</text>
		`;

		const svgForks =
		totalForks > 0 &&
		`
		<svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
		${icons.fork}
		</svg>
		<text data-testid="forkcount" class="gray" x="25">${totalForks}</text>
		`;

		return `
		<svg version="1.1" width="400" height="${height}" viewBox="0 0 400 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
		<style>
		@@ -62,28 +92,12 @@ const renderRepoCard = (repo, options = {}) => {
		<text x="50" y="38" class="header">${header}</text>
		<text class="description" x="25" y="70">${encodeHTML(desc)}</text>

		<g transform="translate(30, 100)">
		<circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="${langColor}" />
		<text data-testid="lang" class="gray" x="15">${langName}</text>
		</g>
		${svgLanguage}

		${(stargazers.totalCount > 0) ? `
		<g transform="translate(${155 - shiftText}, 100)">
		<svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
		${icons.star}
		</svg>
		<text data-testid="stargazers" class="gray" x="25">${totalStars}</text>
		${FlexLayout({ items: [svgStars, svgForks], gap: 65 }).join("")}
		</g>
		` : ''}

		${(totalForks > 0) ? `
		<g transform="translate(${stargazers.totalCount === 0 ? 155 - shiftText : 220 - shiftText}, 100)">
		<svg class="icon" y="-12" viewBox="0 0 16 16" version="1.1" width="16" height="16">
		${icons.fork}
		</svg>
		<text data-testid="forkcount" class="gray" x="25">${totalForks}</text>
		</g>
		` : ''}
		</svg>
		`;
		};

src/renderStatsCard.js

+10 −18

Original line number	Diff line number	Diff line
		const { kFormatter, fallbackColor } = require("../src/utils");
		const { kFormatter, fallbackColor, FlexLayout } = require("../src/utils");
		const getStyles = require("./getStyles");
		const icons = require("./icons");

		const createTextNode = ({
		icon,
		label,
		value,
		id,
		index,
		lineHeight,
		showIcons,
		}) => {
		const createTextNode = ({ icon, label, value, id, index, showIcons }) => {
		const kValue = kFormatter(value);
		const staggerDelay = (index + 3) * 150;
		// manually calculating lineHeight based on index instead of using <tspan dy="" />
		// to fix firefox layout bug
		const lheight = lineHeight * (index + 1);
		const translateY = lheight - lineHeight / 2;

		const labelOffset = showIcons ? `x="25"` : "";
		const iconSvg = showIcons
		? `
		@@ -26,7 +15,7 @@ const createTextNode = ({
		`
		: "";
		return `
		<g class="stagger" style="animation-delay: ${staggerDelay}ms" transform="translate(25, ${translateY})">
		<g class="stagger" style="animation-delay: ${staggerDelay}ms" transform="translate(25, 0)">
		${iconSvg}
		<text class="stat bold" ${labelOffset} y="12.5">${label}:</text>
		<text class="stat" x="135" y="12.5" data-testid="${id}">${kValue}</text>
		@@ -106,7 +95,6 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
		createTextNode({
		...STATS[key],
		index,
		lineHeight: lheight,
		showIcons: show_icons,
		})
		);
		@@ -188,8 +176,12 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
		})">
		${rankCircle}

		<svg x="0" y="45">
		${statItems.toString().replace(/\,/gm, "")}
		<svg x="0" y="55">
		${FlexLayout({
		items: statItems,
		gap: lheight,
		direction: "column",
		}).join("")}
		</svg>
		</g>
		</svg>

src/utils.js

+22 −0

Original line number	Diff line number	Diff line
		@@ -56,6 +56,27 @@ function request(data, headers) {
		});
		}

		/**
		*
		* @param {String[]} items
		* @param {Number} gap
		* @param {string} direction
		*
		* @description
		* Auto layout utility, allows us to layout things
		* vertically or horizontally with proper gaping
		*/
		function FlexLayout({ items, gap, direction }) {
		// filter() for filtering out empty strings
		return items.filter(Boolean).map((item, i) => {
		let transform = `translate(${gap * i}, 0)`;
		if (direction === "column") {
		transform = `translate(0, ${gap * i})`;
		}
		return `<g transform="${transform}">${item}</g>`;
		});
		}

		module.exports = {
		renderError,
		kFormatter,
		@@ -64,4 +85,5 @@ module.exports = {
		request,
		parseBoolean,
		fallbackColor,
		FlexLayout,
		};

tests/renderRepoCard.test.js

+28 −0

Original line number	Diff line number	Diff line
		@@ -158,4 +158,32 @@ describe("Test renderRepoCard", () => {
		"Archived"
		);
		});

		it("should not render star count or fork count if either of the are zero", () => {
		document.body.innerHTML = renderRepoCard({
		...data_repo.repository,
		stargazers: { totalCount: 0 },
		});

		expect(queryByTestId(document.body, "stargazers")).toBeNull();
		expect(queryByTestId(document.body, "forkcount")).toBeDefined();

		document.body.innerHTML = renderRepoCard({
		...data_repo.repository,
		stargazers: { totalCount: 1 },
		forkCount: 0,
		});

		expect(queryByTestId(document.body, "stargazers")).toBeDefined();
		expect(queryByTestId(document.body, "forkcount")).toBeNull();

		document.body.innerHTML = renderRepoCard({
		...data_repo.repository,
		stargazers: { totalCount: 0 },
		forkCount: 0,
		});

		expect(queryByTestId(document.body, "stargazers")).toBeNull();
		expect(queryByTestId(document.body, "forkcount")).toBeNull();
		});
		});

tests/renderStatsCard.test.js

+0 −2

Original line number	Diff line number	Diff line
		@@ -70,7 +70,6 @@ describe("Test renderStatsCard", () => {
		document.body.innerHTML = renderStatsCard(stats);

		const styleTag = document.querySelector("style");
		console.log(styleTag.textContent);
		const stylesObject = cssToObject(styleTag.textContent);

		const headerClassStyles = stylesObject[".header"];
		@@ -157,7 +156,6 @@ describe("Test renderStatsCard", () => {
		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(

Admin message