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

@@ -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),
     })
   );
 };

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:

src/fetchRepo.js

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

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}
       </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)">

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 = {

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,