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

package/src/cards/top-languages.js

@@ -1,9 +1,12 @@
-// @ts-check
-
 import { Card } from "../common/Card.js";
 import { I18n } from "../common/I18n.js";
-import { fallbackColor, getCardColors } from "../common/color.js";
+import {
+  fallbackColor,
+  getCardColors,
+  isPrefixedHexColor,
+} from "../common/color.js";
 import { formatBytes } from "../common/fmt.js";
+import { encodeHTML } from "../common/html.js";
 import { chunkArray, clampValue, lowercaseTrim } from "../common/ops.js";
 import {
   createProgressNode,
@@ -246,8 +249,8 @@ const createProgressTextNode = ({
 
   return `
     <g class="stagger" style="animation-delay: ${staggerDelay}ms">
-      <text data-testid="lang-name" x="2" y="15" class="lang-name">${name}</text>
-      ${hideValues ? "" : `<text x="${progressTextX}" y="34" class="lang-name">${displayValue}</text>`}
+      <text data-testid="lang-name" x="2" y="15" class="lang-name">${encodeHTML(name)}</text>
+      ${hideValues ? "" : `<text x="${progressTextX}" y="34" class="lang-name">${encodeHTML(displayValue)}</text>`}
       ${createProgressNode({
         x: 0,
         y: 25,
@@ -287,11 +290,15 @@ const createCompactLangNode = ({
   const staggerDelay = (index + 3) * 150;
   const color = lang.color || "#858585";
 
+  if (!isPrefixedHexColor(color)) {
+    throw new Error(`Invalid language color: "${color}"`);
+  }
+
   return `
     <g class="stagger" style="animation-delay: ${staggerDelay}ms">
       <circle cx="5" cy="6" r="5" fill="${color}" />
       <text data-testid="lang-name" x="15" y="10" class='lang-name'>
-        ${lang.name} ${hideProgress || hideValues ? "" : displayValue}
+        ${encodeHTML(lang.name)} ${hideProgress || hideValues ? "" : encodeHTML(displayValue)}
       </text>
     </g>
   `;
@@ -441,6 +448,11 @@ const renderCompactLayout = (
   let progressOffset = 0;
   const compactProgressBar = langs
     .map((lang) => {
+      const langColor = lang.color || DEFAULT_LANG_COLOR;
+      if (!isPrefixedHexColor(langColor)) {
+        throw new Error(`Invalid language color: "${langColor}"`);
+      }
+
       const percentage = parseFloat(
         ((lang.size / totalLanguageSize) * offsetWidth).toFixed(2),
       );
@@ -455,7 +467,7 @@ const renderCompactLayout = (
           y="0"
           width="${progress}"
           height="8"
-          fill="${lang.color || "#858585"}"
+          fill="${langColor}"
         />
       `;
       progressOffset += percentage;
@@ -516,18 +528,23 @@ const renderDonutVerticalLayout = (
 
   // Generate each donut vertical chart part
   for (const lang of langs) {
+    const langColor = lang.color || DEFAULT_LANG_COLOR;
+    if (!isPrefixedHexColor(langColor)) {
+      throw new Error(`Invalid language color: "${langColor}"`);
+    }
+
     const percentage = (lang.size / totalLanguageSize) * 100;
     const circleLength = totalCircleLength * (percentage / 100);
     const delay = startDelayCoefficient * 100;
 
     circles.push(`
       <g class="stagger" style="animation-delay: ${delay}ms">
-        <circle 
+        <circle
           cx="150"
           cy="100"
           r="${radius}"
           fill="transparent"
-          stroke="${lang.color}"
+          stroke="${langColor}"
           stroke-width="25"
           stroke-dasharray="${totalCircleLength}"
           stroke-dashoffset="${indent}"
@@ -591,6 +608,11 @@ const renderPieLayout = (langs, totalLanguageSize, statsFormat, hideValues) => {
 
   // Generate each pie chart part
   for (const lang of langs) {
+    const langColor = lang.color || DEFAULT_LANG_COLOR;
+    if (!isPrefixedHexColor(langColor)) {
+      throw new Error(`Invalid language color: "${langColor}"`);
+    }
+
     if (langs.length === 1) {
       paths.push(`
         <circle
@@ -598,7 +620,7 @@ const renderPieLayout = (langs, totalLanguageSize, statsFormat, hideValues) => {
           cy="${centerY}"
           r="${radius}"
           stroke="none"
-          fill="${lang.color}"
+          fill="${langColor}"
           data-testid="lang-pie"
           size="100"
         />
@@ -631,7 +653,7 @@ const renderPieLayout = (langs, totalLanguageSize, statsFormat, hideValues) => {
           data-testid="lang-pie"
           size="${percentage}"
           d="M ${centerX} ${centerY} L ${startPoint.x} ${startPoint.y} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endPoint.x} ${endPoint.y} Z"
-          fill="${lang.color}"
+          fill="${langColor}"
         />
       </g>
     `);
@@ -718,12 +740,22 @@ const renderDonutLayout = (
   statsFormat,
   hideValues,
 ) => {
+  if (!Number.isFinite(width)) {
+    throw new Error(`Invalid width: "${width}"`);
+  }
+
   const centerX = width / 3;
   const centerY = width / 3;
   const radius = centerX - 60;
   const strokeWidth = 12;
 
-  const colors = langs.map((lang) => lang.color);
+  const colors = langs.map((lang) => {
+    const langColor = lang.color || DEFAULT_LANG_COLOR;
+    if (!isPrefixedHexColor(langColor)) {
+      throw new Error(`Invalid language color: "${langColor}"`);
+    }
+    return langColor;
+  });
   const langsPercents = langs.map((lang) =>
     parseFloat(((lang.size / totalLanguageSize) * 100).toFixed(2)),
   );
@@ -785,10 +817,14 @@ const renderDonutLayout = (
  * @returns {string} No languages data SVG node string.
  */
 const noLanguagesDataNode = ({ color, text, layout }) => {
+  if (!isPrefixedHexColor(color)) {
+    throw new Error(`Invalid text color: "${color}"`);
+  }
+
   return `
     <text x="${
       layout === "pie" || layout === "donut-vertical" ? CARD_PADDING : 0
-    }" y="11" class="stat bold" fill="${color}">${text}</text>
+    }" y="11" class="stat bold" fill="${color}">${encodeHTML(text)}</text>
   `;
 };
 

package/src/cards/wakatime.js

@@ -1,8 +1,7 @@
-// @ts-check
-
 import { Card } from "../common/Card.js";
 import { I18n } from "../common/I18n.js";
-import { getCardColors } from "../common/color.js";
+import { getCardColors, isPrefixedHexColor } from "../common/color.js";
+import { encodeHTML } from "../common/html.js";
 import languageColors from "../common/languageColors.json" with { type: "json" };
 import { clampValue, lowercaseTrim } from "../common/ops.js";
 import { createProgressNode, flexLayout } from "../common/render.js";
@@ -26,8 +25,12 @@ const TOTAL_TEXT_WIDTH = 275;
  * @returns {string} No coding activity SVG node string.
  */
 const noCodingActivityNode = ({ color, text }) => {
+  if (!isPrefixedHexColor(color)) {
+    throw new Error(`Invalid text color: "${color}"`);
+  }
+
   return `
-    <text x="25" y="11" class="stat bold" fill="${color}">${text}</text>
+    <text x="25" y="11" class="stat bold" fill="${color}">${encodeHTML(text)}</text>
   `;
 };
 
@@ -60,6 +63,13 @@ const formatLanguageValue = ({ display_format, lang }) => {
  * @returns {string} The compact layout language SVG node.
  */
 const createCompactLangNode = ({ lang, x, y, display_format }) => {
+  if (!Number.isFinite(x)) {
+    throw new Error(`Invalid x: "${x}"`);
+  }
+  if (!Number.isFinite(y)) {
+    throw new Error(`Invalid y: "${y}"`);
+  }
+
   // @ts-ignore
   const color = languageColors[lang.name] || "#858585";
   const value = formatLanguageValue({ display_format, lang });
@@ -68,7 +78,7 @@ const createCompactLangNode = ({ lang, x, y, display_format }) => {
     <g transform="translate(${x}, ${y})">
       <circle cx="5" cy="6" r="5" fill="${color}" />
       <text data-testid="lang-name" x="15" y="10" class='lang-name'>
-        ${lang.name} - ${value}
+        ${encodeHTML(lang.name)} - ${encodeHTML(value)}
       </text>
     </g>
   `;
@@ -127,6 +137,13 @@ const createTextNode = ({
   progressBarBackgroundColor,
   progressBarWidth,
 }) => {
+  if (!Number.isFinite(index)) {
+    throw new Error(`Invalid index: "${index}"`);
+  }
+  if (!Number.isFinite(progressBarWidth)) {
+    throw new Error(`Invalid progressBarWidth: "${progressBarWidth}"`);
+  }
+
   const staggerDelay = (index + 3) * 150;
   const cardProgress = hideProgress
     ? null
@@ -144,12 +161,12 @@ const createTextNode = ({
 
   return `
     <g class="stagger" style="animation-delay: ${staggerDelay}ms" transform="translate(25, 0)">
-      <text class="stat bold" y="12.5" data-testid="${id}">${label}:</text>
+      <text class="stat bold" y="12.5" data-testid="${encodeHTML(id)}">${encodeHTML(label)}:</text>
       <text
         class="stat"
         x="${hideProgress ? HIDDEN_PROGRESSBAR_PADDING : PROGRESSBAR_PADDING + progressBarWidth}"
         y="12.5"
-      >${value}</text>
+      >${encodeHTML(value)}</text>
       ${cardProgress}
     </g>
   `;
@@ -181,11 +198,15 @@ const recalculatePercentages = (languages) => {
  * @param {string} colors.textColor The text color.
  * @returns {string} Card CSS styles.
  */
-const getStyles = ({
+const getStyles = function ({
   // eslint-disable-next-line no-unused-vars
   titleColor,
   textColor,
-}) => {
+}) {
+  if (!isPrefixedHexColor(textColor)) {
+    throw new Error(`Invalid text color: "${textColor}"`);
+  }
+
   return `
     .stat {
       font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor};
@@ -379,7 +400,9 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
               progressBarColor: titleColor,
               // @ts-ignore
               progressBarBackgroundColor:
-                textColor === titleColor ? bgColor : textColor,
+                textColor === titleColor
+                  ? "#fff0" // transparent
+                  : textColor,
               hideProgress: hide_progress,
               progressBarWidth: normalizedWidth - TOTAL_TEXT_WIDTH,
             });

package/src/common/Card.ts

@@ -0,0 +1,338 @@
+import { isPrefixedHexColor, isValidGradient } from "./color.js";
+import { encodeHTML } from "./html.js";
+import { flexLayout } from "./render.js";
+
+interface CardColors {
+  /** Card title color. */
+  titleColor?: string;
+  /** Card text color. */
+  textColor?: string;
+  /** Card icon color. */
+  iconColor?: string;
+  /** Card background color. */
+  bgColor?: string | Array<string>;
+  /** Card border color. */
+  borderColor?: string;
+}
+
+class Card {
+  width: number;
+  height: number;
+  hideBorder: boolean;
+  hideTitle: boolean;
+  border_radius: number;
+  colors: CardColors;
+  title: string;
+  css: string;
+  paddingX: number;
+  paddingY: number;
+  titlePrefixIcon: string | undefined;
+  animations: boolean;
+  a11yTitle: string;
+  a11yDesc: string;
+
+  /**
+   * Creates a new card instance.
+   *
+   * The caller must ensure that the passed `titlePrefixIcon` is properly sanitized!
+   *
+   * @param props Card arguments.
+   * @param props.width Card width.
+   * @param props.height Card height.
+   * @param props.border_radius Card border radius.
+   * @param props.colors Card colors arguments.
+   * @param props.customTitle Card custom title.
+   * @param props.defaultTitle Card default title.
+   * @param props.titlePrefixIcon Sanitized card title prefix icon.
+   */
+  constructor({
+    width = 100,
+    height = 100,
+    border_radius = 4.5,
+    colors = {},
+    customTitle,
+    defaultTitle = "",
+    titlePrefixIcon,
+  }: {
+    width?: number;
+    height?: number;
+    border_radius?: number;
+    colors?: CardColors;
+    customTitle?: string;
+    defaultTitle?: string;
+    titlePrefixIcon?: string;
+  }) {
+    this.width = width;
+    this.height = height;
+
+    this.hideBorder = false;
+    this.hideTitle = false;
+
+    this.border_radius = parseFloat(String(border_radius));
+
+    // returns theme based colors with proper overrides and defaults
+    this.colors = colors;
+    this.title = customTitle === undefined ? defaultTitle : customTitle;
+
+    this.css = "";
+
+    this.paddingX = 25;
+    this.paddingY = 35;
+    this.titlePrefixIcon = titlePrefixIcon;
+    this.animations = true;
+    this.a11yTitle = "";
+    this.a11yDesc = "";
+  }
+
+  disableAnimations(): void {
+    this.animations = false;
+  }
+
+  /**
+   * @param props The props object.
+   * @param props.title Accessibility title.
+   * @param props.desc Accessibility description.
+   */
+  setAccessibilityLabel({
+    title,
+    desc,
+  }: {
+    title: string;
+    desc: string;
+  }): void {
+    this.a11yTitle = title;
+    this.a11yDesc = desc;
+  }
+
+  /**
+   * The caller must ensure that the passed `css` string is properly sanitized!
+   *
+   * @param value The sanitized CSS to add to the card.
+   */
+  setCSS(value: string): void {
+    this.css = value;
+  }
+
+  /**
+   * @param value Whether to hide the border or not.
+   */
+  setHideBorder(value: boolean): void {
+    this.hideBorder = value;
+  }
+
+  /**
+   * @param value Whether to hide the title or not.
+   */
+  setHideTitle(value: boolean): void {
+    if (value && !this.hideTitle) {
+      this.height -= 30;
+    }
+    if (!value && this.hideTitle) {
+      this.height += 30;
+    }
+    this.hideTitle = value;
+  }
+
+  /**
+   * @param text The title to set.
+   */
+  setTitle(text: string): void {
+    this.title = text;
+  }
+
+  /**
+   * @returns The rendered card title.
+   */
+  renderTitle(): string {
+    const titleText = `
+      <text
+        x="0"
+        y="0"
+        class="header"
+        data-testid="header"
+      >${encodeHTML(this.title)}</text>
+    `;
+
+    const prefixIcon = `
+      <svg
+        class="icon"
+        x="0"
+        y="-13"
+        viewBox="0 0 16 16"
+        version="1.1"
+        width="16"
+        height="16"
+      >
+        ${String(this.titlePrefixIcon)}
+      </svg>
+    `;
+    return `
+      <g
+        data-testid="card-title"
+        transform="translate(${this.paddingX}, ${this.paddingY})"
+      >
+        ${flexLayout({
+          items: [this.titlePrefixIcon ? prefixIcon : "", titleText],
+          gap: 25,
+        }).join("")}
+      </g>
+    `;
+  }
+
+  /**
+   * @returns The rendered card gradient.
+   */
+  renderGradient(): string {
+    if (typeof this.colors.bgColor !== "object") {
+      return "";
+    }
+    if (!isValidGradient(this.colors.bgColor)) {
+      throw new Error(`Invalid gradient: ${this.colors.bgColor.join(",")}`);
+    }
+
+    const gradients = this.colors.bgColor.slice(1);
+    return `
+        <defs>
+          <linearGradient
+            id="gradient"
+            gradientTransform="rotate(${String(this.colors.bgColor[0])})"
+            gradientUnits="userSpaceOnUse"
+          >
+            ${gradients
+              .map((grad, index) => {
+                const offset = (index * 100) / (gradients.length - 1);
+                return `<stop offset="${offset}%" stop-color="#${grad}" />`;
+              })
+              .join(",")}
+          </linearGradient>
+        </defs>
+        `;
+  }
+
+  /**
+   * Retrieves css animations for a card.
+   *
+   * @returns Animation css.
+   */
+  getAnimations = (): string => {
+    return `
+      /* Animations */
+      @keyframes scaleInAnimation {
+        from {
+          transform: translate(-5px, 5px) scale(0);
+        }
+        to {
+          transform: translate(-5px, 5px) scale(1);
+        }
+      }
+      @keyframes fadeInAnimation {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+    `;
+  };
+
+  /**
+   * The caller must ensure that the passed `body` string is properly sanitized!
+   *
+   * @param body The sanitized inner body of the card.
+   * @returns The rendered card.
+   */
+  render(body: string): string {
+    if (!Number.isFinite(this.border_radius)) {
+      throw new Error(`Invalid border radius: "${this.border_radius}"`);
+    }
+    if (
+      this.colors.titleColor !== undefined &&
+      !isPrefixedHexColor(this.colors.titleColor)
+    ) {
+      throw new Error(`Invalid title color: "${this.colors.titleColor}"`);
+    }
+    if (
+      this.colors.borderColor !== undefined &&
+      !isPrefixedHexColor(this.colors.borderColor)
+    ) {
+      throw new Error(`Invalid border color: "${this.colors.borderColor}"`);
+    }
+    if (
+      this.colors.bgColor !== undefined &&
+      !(typeof this.colors.bgColor === "object"
+        ? isValidGradient(this.colors.bgColor)
+        : isPrefixedHexColor(this.colors.bgColor))
+    ) {
+      throw new Error(
+        `Invalid background color: ${String(this.colors.bgColor)}`,
+      );
+    }
+
+    return `
+      <svg
+        width="${this.width}"
+        height="${this.height}"
+        viewBox="0 0 ${this.width} ${this.height}"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        aria-labelledby="descId"
+      >
+        <title id="titleId">${encodeHTML(this.a11yTitle)}</title>
+        <desc id="descId">${encodeHTML(this.a11yDesc)}</desc>
+        <style>
+          .header {
+            font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
+            fill: ${String(this.colors.titleColor)};
+            animation: fadeInAnimation 0.8s ease-in-out forwards;
+          }
+          @supports(-moz-appearance: auto) {
+            /* Selector detects Firefox */
+            .header { font-size: 15.5px; }
+          }
+          ${this.css}
+
+          ${this.getAnimations()}
+          ${
+            this.animations
+              ? ""
+              : `* { animation-duration: 0s !important; animation-delay: 0s !important; }`
+          }
+        </style>
+
+        ${this.renderGradient()}
+
+        <rect
+          data-testid="card-bg"
+          x="0.5"
+          y="0.5"
+          rx="${this.border_radius}"
+          height="99%"
+          stroke="${String(this.colors.borderColor)}"
+          width="${this.width - 1}"
+          fill="${
+            typeof this.colors.bgColor === "object"
+              ? "url(#gradient)"
+              : String(this.colors.bgColor)
+          }"
+          stroke-opacity="${this.hideBorder ? 0 : 1}"
+        />
+
+        ${this.hideTitle ? "" : this.renderTitle()}
+
+        <g
+          data-testid="main-card-body"
+          transform="translate(0, ${
+            this.hideTitle ? this.paddingX : this.paddingY + 20
+          })"
+        >
+          ${body}
+        </g>
+      </svg>
+    `;
+  }
+}
+
+export { Card };
+export default Card;

package/src/common/I18n.ts

@@ -0,0 +1,49 @@
+const FALLBACK_LOCALE = "en";
+
+/**
+ * I18n translation class.
+ */
+class I18n<Translations extends Record<string, Record<string, string>>> {
+  locale: string;
+  translations: Translations;
+
+  /**
+   * @param props Constructor arguments.
+   * @param props.locale Locale.
+   * @param props.translations Translations.
+   */
+  constructor({
+    locale,
+    translations,
+  }: {
+    locale?: string;
+    translations: Translations;
+  }) {
+    this.locale = locale || FALLBACK_LOCALE;
+    this.translations = translations;
+  }
+
+  /**
+   * Get translation.
+   *
+   * @param str String to translate.
+   * @returns Translated string.
+   */
+  t(str: keyof Translations & string): string {
+    const translation = this.translations[str];
+    if (!translation) {
+      throw new Error(`${str} Translation string not found`);
+    }
+
+    const localized = translation[this.locale];
+    if (!localized) {
+      throw new Error(
+        `'${str}' translation not found for locale '${this.locale}'`,
+      );
+    }
+
+    return localized;
+  }
+}
+
+export { I18n };