From 9e4d83247e418758a038e66693e03ad830d10cdb Mon Sep 17 00:00:00 2001 From: omrilotan <516342+omrilotan@users.noreply.github.com> Date: Thu, 16 Jul 2020 15:33:33 +0300 Subject: [PATCH] feat: display username in repo card (optional) (#78) * Display username in repo card (optional) * fix: show_owner boolean flag & used nameWithOwner from gql api --- api/pin.js | 6 ++++-- readme.md | 5 +++++ src/fetchRepo.js | 1 + src/renderRepoCard.js | 14 +++++++++++--- tests/pin.test.js | 2 ++ tests/renderRepoCard.test.js | 17 ++++++++++++++--- 6 files changed, 37 insertions(+), 8 deletions(-) diff --git a/api/pin.js b/api/pin.js index 8659c50..b79472f 100644 --- a/api/pin.js +++ b/api/pin.js @@ -1,5 +1,5 @@ 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,10 +11,11 @@ module.exports = async (req, res) => { icon_color, text_color, bg_color, + show_owner, } = req.query; let repoData; - + res.setHeader("Cache-Control", "public, max-age=1800"); res.setHeader("Content-Type", "image/svg+xml"); @@ -31,6 +32,7 @@ module.exports = async (req, res) => { icon_color, text_color, bg_color, + show_owner: parseBoolean(show_owner), }) ); }; diff --git a/readme.md b/readme.md index 6c482d2..0ae03d2 100644 --- a/readme.md +++ b/readme.md @@ -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: diff --git a/src/fetchRepo.js b/src/fetchRepo.js index 710061e..d53b29d 100644 --- a/src/fetchRepo.js +++ b/src/fetchRepo.js @@ -7,6 +7,7 @@ const fetcher = (variables, token) => { query: ` fragment RepoInfo on Repository { name + nameWithOwner stargazers { totalCount } diff --git a/src/renderRepoCard.js b/src/renderRepoCard.js index 7fd30f5..383d357 100644 --- a/src/renderRepoCard.js +++ b/src/renderRepoCard.js @@ -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} - ${name} + ${header} ${encodeHTML(desc)} diff --git a/tests/pin.test.js b/tests/pin.test.js index 924cc27..3f61135 100644 --- a/tests/pin.test.js +++ b/tests/pin.test.js @@ -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 = { diff --git a/tests/renderRepoCard.test.js b/tests/renderRepoCard.test.js index 4b6f8e3..5fa84ef 100644 --- a/tests/renderRepoCard.test.js +++ b/tests/renderRepoCard.test.js @@ -6,6 +6,7 @@ const { queryByTestId } = require("@testing-library/dom"); const data_repo = { repository: { + nameWithOwner: "anuraghazra/convoychat", name: "convoychat", stargazers: { totalCount: 38000 }, description: "Help us take over the world! React + TS + GraphQL Chat App", @@ -22,9 +23,10 @@ describe("Test renderRepoCard", () => { it("should render correctly", () => { document.body.innerHTML = renderRepoCard(data_repo.repository); - expect(document.getElementsByClassName("header")[0]).toHaveTextContent( - "convoychat" - ); + const [header] = document.getElementsByClassName("header"); + + expect(header).toHaveTextContent("convoychat"); + expect(header).not.toHaveTextContent("anuraghazra"); expect(document.getElementsByClassName("description")[0]).toHaveTextContent( "Help us take over the world! React + TS + GraphQL Chat .." ); @@ -39,6 +41,15 @@ describe("Test renderRepoCard", () => { ); }); + it("should display username in title (full repo name)", () => { + document.body.innerHTML = renderRepoCard(data_repo.repository, { + show_owner: true, + }); + expect(document.getElementsByClassName("header")[0]).toHaveTextContent( + "anuraghazra/convoychat" + ); + }); + it("should trim description", () => { document.body.innerHTML = renderRepoCard({ ...data_repo.repository,