@stats-organization/github-readme-stats-core 2.1.5 → 2.2.0

package/src/api/wakatime.js

@@ -1,5 +1,5 @@
 import { renderWakatimeCard } from "../cards/wakatime.js";
-import { findInvalidColor } from "../common/color.js";
+import { findInvalidColorParam, pickColorParams } from "../common/color.js";
 import {
   MissingParamError,
   retrieveSecondaryMessage,
@@ -12,14 +12,9 @@ import { isLocaleAvailable } from "../translations.js";
 // @ts-ignore
 export default async ({
   username,
-  title_color,
-  icon_color,
   hide_border,
   card_width,
   line_height,
-  text_color,
-  bg_color,
-  theme,
   hide_title,
   hide_progress,
   custom_title,
@@ -29,17 +24,13 @@ export default async ({
   hide,
   api_domain,
   border_radius,
-  border_color,
   display_format,
   disable_animations,
+  ...remainingParams
 }) => {
-  const invalidColorInput = findInvalidColor({
-    title_color,
-    icon_color,
-    text_color,
-    bg_color,
-    border_color,
-  });
+  const colorParams = pickColorParams(remainingParams);
+
+  const invalidColorInput = findInvalidColorParam(colorParams);
   if (invalidColorInput) {
     return {
       status: "error - permanent",
@@ -56,13 +47,7 @@ export default async ({
       content: renderError({
         message: "Something went wrong",
         secondaryMessage: "Language not found",
-        renderOptions: {
-          title_color,
-          text_color,
-          bg_color,
-          border_color,
-          theme,
-        },
+        renderOptions: colorParams,
       }),
     };
   }
@@ -74,13 +59,7 @@ export default async ({
       content: renderError({
         message: "Something went wrong",
         secondaryMessage: "Username contains unsafe characters",
-        renderOptions: {
-          title_color,
-          text_color,
-          bg_color,
-          border_color,
-          theme,
-        },
+        renderOptions: colorParams,
       }),
     };
   }
@@ -91,20 +70,15 @@ export default async ({
     return {
       status: "success",
       content: renderWakatimeCard(stats, {
+        ...colorParams,
         custom_title,
         hide_title: parseBoolean(hide_title),
         hide_border: parseBoolean(hide_border),
         card_width: parseInt(card_width, 10),
         hide: parseArray(hide),
         line_height,
-        title_color,
-        icon_color,
-        text_color,
-        bg_color,
-        theme,
         hide_progress,
         border_radius,
-        border_color,
         locale: locale ? locale.toLowerCase() : null,
         layout,
         langs_count,
@@ -120,11 +94,7 @@ export default async ({
           message: err.message,
           secondaryMessage: retrieveSecondaryMessage(err),
           renderOptions: {
-            title_color,
-            text_color,
-            bg_color,
-            border_color,
-            theme,
+            ...colorParams,
             show_repo_link: !(err instanceof MissingParamError),
           },
         }),
@@ -134,13 +104,7 @@ export default async ({
       status: "error - temporary",
       content: renderError({
         message: "An unknown error occurred",
-        renderOptions: {
-          title_color,
-          text_color,
-          bg_color,
-          border_color,
-          theme,
-        },
+        renderOptions: colorParams,
       }),
     };
   }

package/src/cards/common-options.ts

@@ -0,0 +1,13 @@
+import type { ThemeName } from "../themes/index.js";
+
+export interface CommonOptions {
+  title_color: string;
+  icon_color: string;
+  text_color: string;
+  bg_color: string;
+  theme: ThemeName;
+  border_radius: number;
+  border_color: string;
+  locale: string;
+  hide_border: boolean;
+}

package/src/cards/{gist.js → gist.ts}

@@ -1,9 +1,9 @@
 import { default as Card } from "../common/Card.js";
-import { getCardColors } from "../common/color.js";
+import { getLightDarkColors } from "../common/color.js";
 import { kFormatter, wrapTextMultiline } from "../common/fmt.js";
 import { encodeHTML } from "../common/html.js";
 import { icons } from "../common/icons.js";
-import languageColors from "../common/languageColors.json" with { type: "json" };
+import { getLanguageColor } from "../common/languageColors.js";
 import { parseEmojis } from "../common/ops.js";
 import {
   countWrappedLines,
@@ -14,6 +14,9 @@ import {
   wrappedTextNode,
   wrappedTextStyles,
 } from "../common/render.js";
+import type { GistData } from "../fetchers/types.js";
+
+import type { CommonOptions } from "./common-options.js";
 
 const ICON_SIZE = 16;
 const CARD_DEFAULT_WIDTH = 400;
@@ -24,48 +27,39 @@ const DESCRIPTION_FONT_SIZE = 13;
 const DESCRIPTION_LINE_HEIGHT_PX = 16;
 const DESCRIPTION_MAX_LINES = 10;
 
-/**
- * @typedef {import('./types').GistCardOptions} GistCardOptions Gist card options.
- * @typedef {import('../fetchers/types').GistData} GistData Gist data.
- */
+interface GistCardOptions extends CommonOptions {
+  show_owner: boolean;
+  browser_rendering: boolean;
+}
 
 /**
  * Render gist card.
  *
- * @param {GistData} gistData Gist data.
- * @param {Partial<GistCardOptions>} options Gist card options.
- * @returns {string} Gist card.
+ * @param gistData Gist data.
+ * @param options Gist card options.
+ * @returns Gist card.
  */
-const renderGistCard = (gistData, options = {}) => {
+const renderGistCard = (
+  gistData: GistData,
+  options: Partial<GistCardOptions> = {},
+): string => {
   const { name, nameWithOwner, description, language, starsCount, forksCount } =
     gistData;
   const {
-    title_color,
-    icon_color,
-    text_color,
-    bg_color,
     theme = "default_repocard",
     border_radius,
-    border_color,
     show_owner = false,
     browser_rendering = false,
     hide_border = false,
   } = options;
 
-  // returns theme based colors with proper overrides and defaults
-  const { titleColor, textColor, iconColor, bgColor, borderColor } =
-    getCardColors({
-      title_color,
-      icon_color,
-      text_color,
-      bg_color,
-      border_color,
-      theme,
-    });
+  const { lightColors, darkColors } = getLightDarkColors({ ...options, theme });
+  const { textColor, iconColor } = lightColors;
 
   const desc = parseEmojis(description || "No description provided");
 
-  let descriptionLines, descriptionSvg;
+  let descriptionLines: number;
+  let descriptionSvg: string;
   if (browser_rendering) {
     // The browser performs the actual text wrapping inside the foreignObject;
     // we only estimate the line count server-side so the SVG can reserve enough
@@ -128,8 +122,7 @@ const renderGistCard = (gistData, options = {}) => {
   );
 
   const languageName = language || "Unspecified";
-  // @ts-ignore
-  const languageColor = languageColors[languageName] || "#858585";
+  const languageColor = getLanguageColor(languageName);
 
   const svgLanguage = createLanguageNode(languageName, languageColor);
 
@@ -154,23 +147,30 @@ const renderGistCard = (gistData, options = {}) => {
     width: CARD_DEFAULT_WIDTH,
     height,
     border_radius,
-    colors: {
-      titleColor,
-      textColor,
-      iconColor,
-      bgColor,
-      borderColor,
-    },
+    colors: { light: lightColors, dark: darkColors },
   });
 
-  card.setCSS(`
+  card.setCSS({
+    light: `
     .description {
       font: 400 ${DESCRIPTION_FONT_SIZE}px 'Segoe UI', Ubuntu, Sans-Serif;fill: ${textColor};
       ${browser_rendering ? wrappedTextStyles(textColor) : ""}
     }
     .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
     .icon { fill: ${iconColor} }
-  `);
+  `,
+    dark: darkColors
+      ? `
+      .description {
+        fill: ${darkColors.textColor};
+        ${browser_rendering ? wrappedTextStyles(darkColors.textColor) : ""}
+      }
+      .gray { fill: ${darkColors.textColor} }
+      .icon { fill: ${darkColors.iconColor} }
+    `
+      : null,
+  });
+
   card.setHideBorder(hide_border);
 
   return card.render(`

package/src/cards/{repo.js → repo.ts}

@@ -1,6 +1,6 @@
 import { Card } from "../common/Card.js";
 import { I18n } from "../common/I18n.js";
-import { getCardColors, isPrefixedHexColor } from "../common/color.js";
+import { getLightDarkColors } from "../common/color.js";
 import { kFormatter, wrapTextMultiline } from "../common/fmt.js";
 import { encodeHTML } from "../common/html.js";
 import { icons } from "../common/icons.js";
@@ -8,15 +8,17 @@ import { buildSearchFilter, clampValue, parseEmojis } from "../common/ops.js";
 import {
   countWrappedLines,
   createLanguageNode,
+  createTextNode,
   flexLayout,
   iconWithLabel,
   measureText,
   wrappedTextNode,
   wrappedTextStyles,
 } from "../common/render.js";
+import type { RepositoryData } from "../fetchers/types.js";
 import { repoCardLocales } from "../translations.js";
 
-import { createTextNode } from "./stats.js";
+import type { CommonOptions } from "./common-options.js";
 
 const ICON_SIZE = 16;
 const CARD_DEFAULT_WIDTH = 400;
@@ -25,30 +27,48 @@ const DESCRIPTION_FONT_SIZE = 13;
 const DESCRIPTION_LINE_HEIGHT_PX = 16;
 const DESCRIPTION_MAX_LINES = 3;
 
+interface RepoCardOptions extends CommonOptions {
+  show_owner: boolean;
+  browser_rendering: boolean;
+  description_lines_count: number;
+  card_width_input: number;
+  show: Array<string>;
+  show_icons: boolean;
+  number_format: string;
+  text_bold: boolean;
+  line_height: number | string;
+  username: string;
+}
+
+interface RepoStatItem {
+  icon: string;
+  label: string;
+  value: number | undefined;
+  id: string;
+  link: string;
+  unitSymbol?: string;
+}
+
 /**
  * Retrieves the repository description and wraps it to fit the card width.
  *
- * @param {string} label The repository description.
- * @param {string} textColor The color of the text.
- * @returns {string} Wrapped repo description SVG object.
+ * @param label The repository description.
+ * @param xOffset Horizontal offset of the badge.
+ * @returns Wrapped repo description SVG object.
  */
-const getBadgeSVG = (label, textColor, xOffset = 0) => {
-  if (!isPrefixedHexColor(textColor)) {
-    throw new Error(`Invalid text color: "${textColor}"`);
-  }
+const getBadgeSVG = (label: string, xOffset = 0): string => {
   if (!Number.isFinite(xOffset)) {
     throw new Error(`Invalid xOffset: "${xOffset}"`);
   }
 
   return `
     <g data-testid="badge" class="badge" transform="translate(${320 + xOffset}, -18)">
-      <rect stroke="${textColor}" stroke-width="1" width="70" height="20" x="-12" y="-14" ry="10" rx="10"></rect>
+      <rect stroke-width="1" width="70" height="20" x="-12" y="-14" ry="10" rx="10"></rect>
       <text
         x="23" y="-5"
         alignment-baseline="central"
         dominant-baseline="central"
         text-anchor="middle"
-        fill="${textColor}"
       >
         ${encodeHTML(label)}
       </text>
@@ -56,19 +76,17 @@ const getBadgeSVG = (label, textColor, xOffset = 0) => {
   `;
 };
 
-/**
- * @typedef {import("../fetchers/types").RepositoryData} RepositoryData Repository data.
- * @typedef {import("./types").RepoCardOptions} RepoCardOptions Repo card options.
- */
-
 /**
  * Renders repository card details.
  *
- * @param {RepositoryData} repo Repository data.
- * @param {Partial<RepoCardOptions>} options Card options.
- * @returns {string} Repository card SVG object.
+ * @param repo Repository data.
+ * @param options Card options.
+ * @returns Repository card SVG object.
  */
-const renderRepoCard = (repo, options = {}) => {
+const renderRepoCard = (
+  repo: RepositoryData,
+  options: Partial<RepoCardOptions> = {},
+): string => {
   const {
     name,
     nameWithOwner,
@@ -76,7 +94,7 @@ const renderRepoCard = (repo, options = {}) => {
     primaryLanguage,
     isArchived,
     isTemplate,
-    starCount,
+    stargazerCount,
     forkCount,
     totalPRsAuthored,
     totalPRsCommented,
@@ -86,10 +104,6 @@ const renderRepoCard = (repo, options = {}) => {
   } = repo;
   const {
     hide_border = false,
-    title_color,
-    icon_color,
-    text_color,
-    bg_color,
     card_width_input,
     show_owner = false,
     browser_rendering = false,
@@ -101,7 +115,6 @@ const renderRepoCard = (repo, options = {}) => {
     username,
     theme = "default_repocard",
     border_radius,
-    border_color,
     locale,
     description_lines_count,
   } = options;
@@ -118,11 +131,11 @@ const renderRepoCard = (repo, options = {}) => {
     translations: repoCardLocales,
   });
 
-  let repoFilter = encodeURIComponent(buildSearchFilter([nameWithOwner], []));
-  const encodedUsername = encodeURIComponent(username);
-  const STATS = {};
+  const repoFilter = encodeURIComponent(buildSearchFilter([nameWithOwner], []));
+  const encodedUsername = encodeURIComponent(username ?? "");
+  const STATS: Record<string, RepoStatItem> = {};
   if (show.includes("prs_authored")) {
-    STATS.prs_authored = {
+    STATS["prs_authored"] = {
       icon: icons.prs,
       label: i18n.t("repocard.prs-authored"),
       value: totalPRsAuthored,
@@ -131,7 +144,7 @@ const renderRepoCard = (repo, options = {}) => {
     };
   }
   if (show.includes("prs_commented")) {
-    STATS.prs_commented = {
+    STATS["prs_commented"] = {
       icon: icons.comments,
       label: i18n.t("repocard.prs-commented"),
       value: totalPRsCommented,
@@ -140,7 +153,7 @@ const renderRepoCard = (repo, options = {}) => {
     };
   }
   if (show.includes("prs_reviewed")) {
-    STATS.prs_reviewed = {
+    STATS["prs_reviewed"] = {
       icon: icons.reviews,
       label: i18n.t("repocard.prs-reviewed"),
       value: totalPRsReviewed,
@@ -149,7 +162,7 @@ const renderRepoCard = (repo, options = {}) => {
     };
   }
   if (show.includes("issues_authored")) {
-    STATS.issues_authored = {
+    STATS["issues_authored"] = {
       icon: icons.issues,
       label: i18n.t("repocard.issues-authored"),
       value: totalIssuesAuthored,
@@ -158,7 +171,7 @@ const renderRepoCard = (repo, options = {}) => {
     };
   }
   if (show.includes("issues_commented")) {
-    STATS.issues_commented = {
+    STATS["issues_commented"] = {
       icon: icons.discussions_started,
       label: i18n.t("repocard.issues-commented"),
       value: totalIssuesCommented,
@@ -167,20 +180,20 @@ const renderRepoCard = (repo, options = {}) => {
     };
   }
 
-  const statItems = Object.keys(STATS).map((key, index) =>
+  const statItems = Object.values(STATS).map((stat, index) =>
     // create the text nodes, and pass index so that we can calculate the line spacing
     createTextNode({
-      icon: STATS[key].icon,
-      label: STATS[key].label,
-      value: STATS[key].value,
-      id: STATS[key].id,
-      unitSymbol: STATS[key].unitSymbol,
+      icon: stat.icon,
+      label: stat.label,
+      value: stat.value ?? 0,
+      id: stat.id,
+      unitSymbol: stat.unitSymbol,
       index,
       showIcons: show_icons,
       shiftValuePos: 14.01,
       bold: text_bold,
       numberFormat: number_format,
-      link: STATS[key].link,
+      link: stat.link,
       labelXOffset: 23,
     }),
   );
@@ -193,7 +206,8 @@ const renderRepoCard = (repo, options = {}) => {
   const desc = parseEmojis(description || "No description provided");
   const descriptionBoxWidth = card_width - 2 * X_OFFSET;
 
-  let descriptionLinesCount, descriptionSvg;
+  let descriptionLinesCount: number;
+  let descriptionSvg: string;
   if (browser_rendering) {
     // The browser performs the actual text wrapping inside the foreignObject;
     // we only estimate the line count server-side so the SVG can reserve enough
@@ -249,21 +263,13 @@ const renderRepoCard = (repo, options = {}) => {
     descriptionLinesCount * lineHeight +
     extraHeight;
 
-  // returns theme based colors with proper overrides and defaults
-  const colors = getCardColors({
-    title_color,
-    icon_color,
-    text_color,
-    bg_color,
-    border_color,
-    theme,
-  });
+  const { lightColors, darkColors } = getLightDarkColors({ ...options, theme });
 
   const svgLanguage = primaryLanguage
     ? createLanguageNode(langName, langColor)
     : "";
 
-  const totalStars = kFormatter(starCount);
+  const totalStars = kFormatter(stargazerCount);
   const totalForks = kFormatter(forkCount);
   const svgStars = iconWithLabel(
     icons.star,
@@ -288,7 +294,7 @@ const renderRepoCard = (repo, options = {}) => {
     gap: 25,
   }).join("");
 
-  let extraRows = [];
+  const extraRows: Array<string> = [];
   for (let i = 0; i < statItems.length; i += 2) {
     extraRows.push(
       flexLayout({
@@ -314,22 +320,24 @@ const renderRepoCard = (repo, options = {}) => {
     width: card_width,
     height,
     border_radius,
-    colors,
+    colors: { light: lightColors, dark: darkColors },
   });
 
   card.disableAnimations();
   card.setHideBorder(hide_border);
   card.setHideTitle(false);
-  card.setCSS(`
+  card.setCSS({
+    light: `
     .description {
-      font: 400 ${DESCRIPTION_FONT_SIZE}px 'Segoe UI', Ubuntu, Sans-Serif;fill: ${colors.textColor};
-      ${browser_rendering ? wrappedTextStyles(colors.textColor) : ""}
+      font: 400 ${DESCRIPTION_FONT_SIZE}px 'Segoe UI', Ubuntu, Sans-Serif;fill: ${lightColors.textColor};
+      ${browser_rendering ? wrappedTextStyles(lightColors.textColor) : ""}
     }
-    .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${colors.textColor} }
+    .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${lightColors.textColor} }
     .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }
-    .badge rect { opacity: 0.2 }
+    .badge rect { opacity: 0.2; stroke: ${lightColors.textColor} }
+    .badge text { fill: ${lightColors.textColor} }
 
-    .stat { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${colors.textColor} }
+    .stat { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${lightColors.textColor} }
     .stagger {
       opacity: 0;
       animation: fadeInAnimation 0.3s ease-in-out forwards;
@@ -337,25 +345,35 @@ const renderRepoCard = (repo, options = {}) => {
     .not_bold { font-weight: 400 }
     .bold { font-weight: 700 }
     .icon {
-      fill: ${colors.iconColor};
+      fill: ${lightColors.iconColor};
       display: block;
     }
-  `);
+  `,
+    dark: darkColors
+      ? `
+      .description {
+        fill: ${darkColors.textColor};
+        ${browser_rendering ? wrappedTextStyles(darkColors.textColor) : ""}
+      }
+      .gray { fill: ${darkColors.textColor} }
+      .badge rect { stroke: ${darkColors.textColor} }
+      .badge text { fill: ${darkColors.textColor} }
+      .stat { fill: ${darkColors.textColor} }
+      .icon { fill: ${darkColors.iconColor}; }
+    `
+      : null,
+  });
 
   return card.render(`
     ${
       isTemplate
-        ? // @ts-ignore
-          getBadgeSVG(
+        ? getBadgeSVG(
             i18n.t("repocard.template"),
-            colors.textColor,
             card_width - CARD_DEFAULT_WIDTH,
           )
         : isArchived
-          ? // @ts-ignore
-            getBadgeSVG(
+          ? getBadgeSVG(
               i18n.t("repocard.archived"),
-              colors.textColor,
               card_width - CARD_DEFAULT_WIDTH,
             )
           : ""