dev

api/gist.js

@@ -1,5 +1,10 @@
 import { blacklist } from "../src/common/blacklist.js";
-import { clampValue, CONSTANTS, renderError } from "../src/common/utils.js";
+import {
+  clampValue,
+  CONSTANTS,
+  renderError,
+  parseBoolean,
+} from "../src/common/utils.js";
 import { isLocaleAvailable } from "../src/translations.js";
 import { renderGistCard } from "../src/cards/gist-card.js";
 import { fetchGist } from "../src/fetchers/gist-fetcher.js";
@@ -17,6 +22,7 @@ export default async (req, res) => {
     locale,
     border_radius,
     border_color,
+    show_owner,
   } = req.query;
 
   res.setHeader("Content-Type", "image/svg+xml");
@@ -71,6 +77,7 @@ export default async (req, res) => {
         border_radius,
         border_color,
         locale: locale ? locale.toLowerCase() : null,
+        show_owner: parseBoolean(show_owner),
       }),
     );
   } catch (err) {

readme.md

@@ -333,6 +333,8 @@ You can provide multiple comma-separated values in the bg\_color option to rende
 
 #### Gist Card Exclusive Options
 
+*   `show_owner` - Shows the gist's owner name *(boolean)*. Default: `false`.
+
 #### Language Card Exclusive Options
 
 *   `hide` - Hides the languages specified from the card *(Comma-separated values)*. Default: `[] (blank array)`.

src/cards/gist-card.js

@@ -25,6 +25,7 @@ const languageColors = require("../common/languageColors.json"); // now works
 
 const ICON_SIZE = 16;
 const CARD_DEFAULT_WIDTH = 400;
+const HEADER_MAX_LENGTH = 35;
 
 /**
  * Creates a node to display the primary programming language of the gist.
@@ -77,11 +78,12 @@ const iconWithLabel = (icon, label, testid) => {
  * Render gist card.
  *
  * @param {GistData} gistData Gist data.
- * @param {GistCardOptions} options Gist card options.
+ * @param {Partial<GistCardOptions>} options Gist card options.
  * @returns {string} Gist card.
  */
-const renderGistCard = (gistData, options) => {
-  const { name, description, language, starsCount, forksCount } = gistData;
+const renderGistCard = (gistData, options = {}) => {
+  const { name, nameWithOwner, description, language, starsCount, forksCount } =
+    gistData;
   const {
     title_color,
     icon_color,
@@ -90,6 +92,7 @@ const renderGistCard = (gistData, options) => {
     theme,
     border_radius,
     border_color,
+    show_owner = false,
   } = options;
 
   // returns theme based colors with proper overrides and defaults
@@ -136,8 +139,13 @@ const renderGistCard = (gistData, options) => {
     gap: 25,
   }).join("");
 
+  const header = show_owner ? nameWithOwner : name;
+
   const card = new Card({
-    defaultTitle: name.length > 35 ? `${name.slice(0, 35)}...` : name,
+    defaultTitle:
+      header.length > HEADER_MAX_LENGTH
+        ? `${header.slice(0, HEADER_MAX_LENGTH)}...`
+        : header,
     titlePrefixIcon: icons.gist,
     width: CARD_DEFAULT_WIDTH,
     height,
@@ -155,8 +163,6 @@ const renderGistCard = (gistData, options) => {
     .description { font: 400 13px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
     .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
     .icon { fill: ${iconColor} }
-    .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }
-    .badge rect { opacity: 0.2 }
   `);
 
   return card.render(`
@@ -170,5 +176,5 @@ const renderGistCard = (gistData, options) => {
   `);
 };
 
-export { renderGistCard };
+export { renderGistCard, HEADER_MAX_LENGTH };
 export default renderGistCard;

src/cards/types.d.ts

@@ -59,6 +59,5 @@ type WakaTimeOptions = CommonOptions & {
 };
 
 export type GistCardOptions = CommonOptions & {
-  username: string;
-  id: string;
+  show_owner: boolean;
 };

src/fetchers/gist-fetcher.js

@@ -29,6 +29,9 @@ const fetchGist = async (username, id) => {
 
   return {
     name: response.files[Object.keys(response.files)[0]].filename,
+    nameWithOwner: `${username}/${
+      response.files[Object.keys(response.files)[0]].filename
+    }`,
     description: response.description,
     language: response.files[Object.keys(response.files)[0]].language,
     starsCount,

src/fetchers/types.d.ts

@@ -1,5 +1,6 @@
 export type GistData = {
   name: string;
+  nameWithOwner: string;
   description: string;
   language: string | null;
   starsCount: number;

tests/renderGistCard.test.js

@@ -0,0 +1,79 @@
+import { renderGistCard } from "../src/cards/gist-card";
+import { describe, expect, it } from "@jest/globals";
+import { queryByTestId } from "@testing-library/dom";
+import "@testing-library/jest-dom";
+
+/**
+ * @type {import("../src/fetchers/gist-fetcher").GistData}
+ */
+const data = {
+  name: "test",
+  nameWithOwner: "anuraghazra/test",
+  description: "Small test repository with different Python programs.",
+  language: "Python",
+  starsCount: 163,
+  forksCount: 19,
+};
+
+describe("test renderGistCard", () => {
+  it("should render correctly", () => {
+    document.body.innerHTML = renderGistCard(data);
+
+    const [header] = document.getElementsByClassName("header");
+
+    expect(header).toHaveTextContent("test");
+    expect(header).not.toHaveTextContent("anuraghazra");
+    expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
+      "Small test repository with different Python programs.",
+    );
+    expect(queryByTestId(document.body, "starsCount")).toHaveTextContent("163");
+    expect(queryByTestId(document.body, "forksCount")).toHaveTextContent("19");
+    expect(queryByTestId(document.body, "lang-name")).toHaveTextContent(
+      "Python",
+    );
+    expect(queryByTestId(document.body, "lang-color")).toHaveAttribute(
+      "fill",
+      "#3572A5",
+    );
+  });
+
+  it("should display username in title if show_owner is true", () => {
+    document.body.innerHTML = renderGistCard(data, { show_owner: true });
+    const [header] = document.getElementsByClassName("header");
+    expect(header).toHaveTextContent("anuraghazra/test");
+  });
+
+  it("should trim header if name is too long", () => {
+    document.body.innerHTML = renderGistCard({
+      ...data,
+      name: "some-really-long-repo-name-for-test-purposes",
+    });
+    const [header] = document.getElementsByClassName("header");
+    expect(header).toHaveTextContent("some-really-long-repo-name-for-test...");
+  });
+
+  it("should trim description if description os too long", () => {
+    document.body.innerHTML = renderGistCard({
+      ...data,
+      description:
+        "The quick brown fox jumps over the lazy dog is an English-language pangram—a sentence that contains all of the letters of the English alphabet",
+    });
+    expect(
+      document.getElementsByClassName("description")[0].children[0].textContent,
+    ).toBe("The quick brown fox jumps over the lazy dog is an");
+
+    expect(
+      document.getElementsByClassName("description")[0].children[1].textContent,
+    ).toBe("English-language pangram—a sentence that contains all");
+  });
+
+  it("should not trim description if it is short", () => {
+    document.body.innerHTML = renderGistCard({
+      ...data,
+      description: "Small text should not trim",
+    });
+    expect(document.getElementsByClassName("description")[0]).toHaveTextContent(
+      "Small text should not trim",
+    );
+  });
+});