feat: display username in repo card (optional) (#78) (9e4d8324) · Commits · 郑智淋 / github-readme-stats

api/pin.js

+4 −2

Original line number	Diff line number	Diff line
		require("dotenv").config();
		const { renderError } = require("../src/utils");
		const { renderError, parseBoolean } = require("../src/utils");
		const fetchRepo = require("../src/fetchRepo");
		const renderRepoCard = require("../src/renderRepoCard");

		@@ -11,6 +11,7 @@ module.exports = async (req, res) => {
		icon_color,
		text_color,
		bg_color,
		show_owner,
		} = req.query;

		let repoData;
		@@ -31,6 +32,7 @@ module.exports = async (req, res) => {
		icon_color,
		text_color,
		bg_color,
		show_owner: parseBoolean(show_owner),
		})
		);
		};

+5 −0

Original line number	Diff line number	Diff line
		@@ -80,6 +80,7 @@ Customization Options:
		\| text_color \| hex color \| #333 \| #333 \|
		\| icon_color \| hex color \| #4c71f2 \| #586069 \|
		\| bg_color \| hex color \| rgba(255, 255, 255, 0) \| rgba(255, 255, 255, 0) \|
		\| show_owner \| boolean \| not applicable \| false \|

		- You can also customize the cards to be compatible with dark mode

		@@ -129,6 +130,10 @@ Endpoint: `api/pin?username=anuraghazra&repo=github-readme-stats`

		[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats)](https://github.com/anuraghazra/github-readme-stats)

		Use [show_owner](#customization) variable to include the repo's owner username

		[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&show_owner=true)](https://github.com/anuraghazra/github-readme-stats)

		### Quick Tip (Align The Repo Cards)

		You usually won't be able to layout the images side by side. To do that you can use this approach:

+1 −0

Original line number	Diff line number	Diff line
		@@ -7,6 +7,7 @@ const fetcher = (variables, token) => {
		query: `
		fragment RepoInfo on Repository {
		name
		nameWithOwner
		stargazers {
		totalCount
		}

+11 −3

Original line number	Diff line number	Diff line
		@@ -2,9 +2,17 @@ const { kFormatter, encodeHTML, fallbackColor } = require("../src/utils");
		const icons = require("./icons");

		const renderRepoCard = (repo, options = {}) => {
		const { name, description, primaryLanguage, stargazers, forkCount } = repo;
		const { title_color, icon_color, text_color, bg_color } = options;
		const {
		name,
		nameWithOwner,
		description,
		primaryLanguage,
		stargazers,
		forkCount,
		} = repo;
		const { title_color, icon_color, text_color, bg_color, show_owner } = options;

		const header = show_owner ? nameWithOwner : name;
		const langName = primaryLanguage ? primaryLanguage.name : "Unspecified";
		const langColor = primaryLanguage ? primaryLanguage.color : "#333";

		@@ -36,7 +44,7 @@ const renderRepoCard = (repo, options = {}) => {
		${icons.contribs}
		</svg>

		<text x="50" y="38" class="header">${name}</text>
		<text x="50" y="38" class="header">${header}</text>
		<text class="description" x="25" y="70">${encodeHTML(desc)}</text>

		<g transform="translate(30, 100)">

+2 −0

Original line number	Diff line number	Diff line
		@@ -7,6 +7,7 @@ const { renderError } = require("../src/utils");

		const data_repo = {
		repository: {
		username: "anuraghazra",
		name: "convoychat",
		stargazers: { totalCount: 38000 },
		description: "Help us take over the world! React + TS + GraphQL Chat App",
		@@ -61,6 +62,7 @@ describe("Test /api/pin", () => {
		icon_color: "fff",
		text_color: "fff",
		bg_color: "fff",
		full_name: "1",
		},
		};
		const res = {