feat: receives text, title and icon colors from URL (59b8bded) · Commits · 郑智淋 / github-readme-stats

api/index.js

+13 −1

Original line number	Diff line number	Diff line
		@@ -4,7 +4,16 @@ const fetchStats = require("../src/fetchStats");
		const renderStatsCard = require("../src/renderStatsCard");

		module.exports = async (req, res) => {
		const { username, hide, hide_border, show_icons, line_height } = req.query;
		const {
		username,
		hide,
		hide_border,
		show_icons,
		line_height,
		title_color,
		icon_color,
		text_color,
		} = req.query;
		let stats;

		res.setHeader("Content-Type", "image/svg+xml");
		@@ -20,6 +29,9 @@ module.exports = async (req, res) => {
		show_icons,
		hide_border,
		line_height,
		title_color,
		icon_color,
		text_color,
		})
		);
		};

src/renderStatsCard.js

+14 −4

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

		const createTextNode = ({ icon, label, value, lineHeight, id }) => {
		const classname = icon === "★" && "star-icon";
		const kValue = kFormatter(value);
		return `
		<tspan x="25" dy="${lineHeight}" class="stat bold">
		<tspan data-testid="icon" class="icon ${classname}" fill="#4C71F2">${icon}</tspan> ${label}:</tspan>
		<tspan data-testid="icon" class="icon ${classname}">${icon}</tspan> ${label}:</tspan>
		<tspan data-testid="${id}" x="155" dy="0" class="stat">${kValue}</tspan>
		`;
		};
		@@ -24,10 +24,19 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
		show_icons = false,
		hide_border = false,
		line_height = 25,
		title_color,
		icon_color,
		text_color,
		} = options;

		const lheight = parseInt(line_height);

		const titleColor =
		(isValidHexColor(title_color) && `#${title_color}`) \|\| "#2f80ed";
		const iconColor =
		(isValidHexColor(icon_color) && `#${icon_color}`) \|\| "#4c71f2";
		const textColor = (isValidHexColor(text_color) && `#${text_color}`) \|\| "#333";

		const STAT_MAP = {
		stars: createTextNode({
		icon: "★",
		@@ -76,11 +85,12 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
		return `
		<svg width="495" height="${height}" viewBox="0 0 495 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
		<style>
		.header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2F80ED }
		.stat { font: 600 14px 'Segoe UI', Ubuntu, Sans-Serif; fill: #333 }
		.header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${titleColor}; }
		.stat { font: 600 14px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor}; }
		.star-icon { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; }
		.bold { font-weight: 700 }
		.icon {
		fill: ${iconColor};
		display: ${!!show_icons ? "block" : "none"};
		}
		</style>

src/utils.js

+7 −1

Original line number	Diff line number	Diff line
		@@ -25,4 +25,10 @@ function kFormatter(num) {
		: Math.sign(num) * Math.abs(num);
		}

		module.exports = { renderError, kFormatter, encodeHTML };
		function isValidHexColor(hexColor) {
		return new RegExp(
		/^([A-Fa-f0-9]{8}\|[A-Fa-f0-9]{6}\|[A-Fa-f0-9]{3}\|[A-Fa-f0-9]{4})$/
		).test(hexColor);
		}

		module.exports = { renderError, kFormatter, encodeHTML, isValidHexColor };

Admin message