@stats-forge/github-stats-forge-core 0.0.1 → 0.1.0

package/src/api/wakatime.ts

@@ -1,12 +1,12 @@
 import * as z from 'zod/mini';
 
-import { DISPLAY_FORMATS, WAKATIME_LAYOUTS, renderWakatimeCard } from '../cards/wakatime.js';
-import type { CardConfig } from '../common/config.js';
-import { fetchWakatimeStats } from '../fetchers/wakatime.js';
+import { DISPLAY_FORMATS, WAKATIME_LAYOUTS, renderWakatimeCard } from '../cards/wakatime.ts';
+import type { CardConfig } from '../common/config.ts';
+import { fetchWakatimeStats } from '../fetchers/wakatime.ts';
 
-import type { ApiResult } from './api-result.js';
-import { errorResult } from './api-result.js';
-import type { ApiQuery } from './params.js';
+import type { ApiResult } from './api-result.ts';
+import { errorResult } from './api-result.ts';
+import type { ApiQuery } from './params.ts';
 import {
   booleanParam,
   enumParam,
@@ -18,7 +18,7 @@ import {
   parseParams,
   rawParam,
   safeParam,
-} from './params.js';
+} from './params.ts';
 
 /** What the wakatime endpoint accepts, on top of the shared color params. */
 const wakatimeQuery = z.object({
@@ -47,32 +47,15 @@ type WakatimeApiQuery = ApiQuery<typeof wakatimeQuery>;
  *
  * WakaTime needs no GitHub token, so the config is read only for the transport it carries.
  *
- * @param query Raw query params, plus any of the shared color params.
- * @param query.username WakaTime username.
- * @param query.hide_border Whether to hide the card border.
- * @param query.card_width Card width.
- * @param query.line_height Line height between the languages.
- * @param query.hide_title Whether to hide the card title.
- * @param query.hide_progress Whether to hide the progress bars.
- * @param query.custom_title Card title.
- * @param query.locale Language the card is rendered in.
- * @param query.layout How the languages are laid out.
- * @param query.langs_count Number of languages to show.
- * @param query.hide Comma-separated languages to hide.
- * @param query.api_domain WakaTime instance the stats are read from.
- * @param query.border_radius Card border radius.
- * @param query.display_format Whether values are shown as time or percentages.
- * @param query.disable_animations Whether to disable the card animations.
- * @param config Deployment config supplying the transport.
  * @returns The rendered card, or a rendered error.
  */
 const renderWakatime = async (query: WakatimeApiQuery, config: CardConfig): Promise<ApiResult> => {
   let colors;
   try {
     colors = parseColorParams(query);
-  } catch (err) {
+  } catch (error) {
     // A rejected color cannot be used to draw its own error card.
-    return errorResult(err);
+    return errorResult(error);
   }
 
   try {
@@ -115,8 +98,8 @@ const renderWakatime = async (query: WakatimeApiQuery, config: CardConfig): Prom
         disable_animations,
       }),
     };
-  } catch (err) {
-    return errorResult(err, colors);
+  } catch (error) {
+    return errorResult(error, colors);
   }
 };
 

package/src/calculateRank.ts

@@ -1,7 +1,6 @@
 /**
  * Calculates the exponential cdf.
  *
- * @param x The value.
  * @returns The exponential cdf.
  */
 function exponential_cdf(x: number): number {
@@ -11,7 +10,6 @@ function exponential_cdf(x: number): number {
 /**
  * Calculates the log normal cdf.
  *
- * @param x The value.
  * @returns The log normal cdf.
  */
 function log_normal_cdf(x: number): number {
@@ -22,15 +20,6 @@ function log_normal_cdf(x: number): number {
 /**
  * Calculates the users rank.
  *
- * @param params Parameters on which the user's rank depends.
- * @param params.all_commits Whether `include_all_commits` was used.
- * @param params.commits Number of commits.
- * @param params.prs The number of pull requests.
- * @param params.issues The number of issues.
- * @param params.reviews The number of reviews.
- * @param params.repos Total number of repos (accepted for compatibility, unused in the calculation).
- * @param params.stars The number of stars.
- * @param params.followers The number of followers.
  * @returns The users rank.
  */
 function calculateRank({
@@ -51,18 +40,18 @@ function calculateRank({
   stars: number;
   followers: number;
 }): { level: string; percentile: number } {
-  const COMMITS_MEDIAN = all_commits ? 1000 : 250,
-    COMMITS_WEIGHT = 2;
-  const PRS_MEDIAN = 50,
-    PRS_WEIGHT = 3;
-  const ISSUES_MEDIAN = 25,
-    ISSUES_WEIGHT = 1;
-  const REVIEWS_MEDIAN = 2,
-    REVIEWS_WEIGHT = 1;
-  const STARS_MEDIAN = 50,
-    STARS_WEIGHT = 4;
-  const FOLLOWERS_MEDIAN = 10,
-    FOLLOWERS_WEIGHT = 1;
+  const COMMITS_MEDIAN = all_commits ? 1000 : 250;
+  const COMMITS_WEIGHT = 2;
+  const PRS_MEDIAN = 50;
+  const PRS_WEIGHT = 3;
+  const ISSUES_MEDIAN = 25;
+  const ISSUES_WEIGHT = 1;
+  const REVIEWS_MEDIAN = 2;
+  const REVIEWS_WEIGHT = 1;
+  const STARS_MEDIAN = 50;
+  const STARS_WEIGHT = 4;
+  const FOLLOWERS_MEDIAN = 10;
+  const FOLLOWERS_WEIGHT = 1;
 
   const TOTAL_WEIGHT =
     COMMITS_WEIGHT + PRS_WEIGHT + ISSUES_WEIGHT + REVIEWS_WEIGHT + STARS_WEIGHT + FOLLOWERS_WEIGHT;

package/src/cards/gist.ts

@@ -1,22 +1,24 @@
-import { default as Card } from '../common/Card.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 { getLanguageColor } from '../common/languageColors.js';
-import { parseEmojis } from '../common/ops.js';
+import { Card } from '../common/Card.ts';
+import { getLightDarkColors } from '../common/color.ts';
+import { kFormatter } from '../common/fmt.ts';
+import { icons } from '../common/icons.ts';
+import { getLanguageColor } from '../common/languageColors.ts';
+import { parseEmojis } from '../common/ops.ts';
 import {
   countWrappedLines,
+  wrapTextMultiline,
   createLanguageNode,
   flexLayout,
   iconWithLabel,
   measureText,
   wrappedTextNode,
   wrappedTextStyles,
-} from '../common/render.js';
-import type { GistData } from '../fetchers/types.js';
+} from '../common/render.ts';
+import type { GistData } from '../fetchers/types.ts';
+import type { Child } from '../markup/index.ts';
+import { el, rule } from '../markup/index.ts';
 
-import type { CardOptions, CommonCardOptions } from './options.js';
+import type { CardOptions, CommonCardOptions } from './options.ts';
 
 const ICON_SIZE = 16;
 const CARD_DEFAULT_WIDTH = 400;
@@ -35,8 +37,6 @@ interface GistCardOptions extends CommonCardOptions {
 /**
  * Render gist card.
  *
- * @param gistData Gist data.
- * @param options Gist card options.
  * @returns Gist card.
  */
 const renderGistCard = (gistData: GistData, options: CardOptions<GistCardOptions> = {}): string => {
@@ -54,7 +54,7 @@ const renderGistCard = (gistData: GistData, options: CardOptions<GistCardOptions
   const desc = parseEmojis(description || 'No description provided');
 
   let descriptionLines: number;
-  let descriptionSvg: string;
+  let descriptionSvg: Child;
   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
@@ -86,12 +86,11 @@ const renderGistCard = (gistData: GistData, options: CardOptions<GistCardOptions
       linesLimit,
     );
     descriptionLines = multiLineDescription.length;
-    descriptionSvg = multiLineDescription
-      .map((line) => `<tspan dy="1.2em" x="${X_OFFSET}">${encodeHTML(line)}</tspan>`)
-      .join('');
-    descriptionSvg = `<text class="description" x="${X_OFFSET}" y="-5">
-        ${descriptionSvg}
-    </text>`;
+    descriptionSvg = el(
+      'text',
+      { class: 'description', x: X_OFFSET, y: -5 },
+      multiLineDescription.map((line) => el('tspan', { dy: '1.2em', x: X_OFFSET }, line)),
+    );
   }
 
   const lineHeight = descriptionLines > 3 ? 12 : 10;
@@ -115,7 +114,7 @@ const renderGistCard = (gistData: GistData, options: CardOptions<GistCardOptions
       ICON_SIZE + measureText(`${totalForks}`, 12),
     ],
     gap: 25,
-  }).join('');
+  });
 
   const header = show_owner ? nameWithOwner : name;
 
@@ -130,22 +129,23 @@ const renderGistCard = (gistData: GistData, options: CardOptions<GistCardOptions
   });
 
   card.setCSS({
-    light: ({ textColor, iconColor }) => `
-    .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: ({ textColor, iconColor }) => `
-      .description {
-        fill: ${textColor};
-        ${browser_rendering ? wrappedTextStyles(textColor) : ''}
-      }
-      .gray { fill: ${textColor} }
-      .icon { fill: ${iconColor} }
-    `,
+    light: ({ textColor, iconColor }) => [
+      rule('.description', {
+        font: `400 ${DESCRIPTION_FONT_SIZE}px 'Segoe UI', Ubuntu, Sans-Serif`,
+        fill: textColor,
+        ...(browser_rendering ? wrappedTextStyles(textColor) : {}),
+      }),
+      rule('.gray', { font: "400 12px 'Segoe UI', Ubuntu, Sans-Serif", fill: textColor }),
+      rule('.icon', { fill: iconColor }),
+    ],
+    dark: ({ textColor, iconColor }) => [
+      rule('.description', {
+        fill: textColor,
+        ...(browser_rendering ? wrappedTextStyles(textColor) : {}),
+      }),
+      rule('.gray', { fill: textColor }),
+      rule('.icon', { fill: iconColor }),
+    ],
   });
 
   card.setHideBorder(hide_border);
@@ -157,13 +157,10 @@ const renderGistCard = (gistData: GistData, options: CardOptions<GistCardOptions
     desc: `${desc}. Language: ${languageName}, Stars: ${totalStars}, Forks: ${totalForks}`,
   });
 
-  return card.render(`
-    ${descriptionSvg}
-
-    <g transform="translate(30, ${height - 75})">
-        ${starAndForkCount}
-    </g>
-  `);
+  return card.render([
+    descriptionSvg,
+    el('g', { transform: `translate(30, ${height - 75})` }, starAndForkCount),
+  ]);
 };
 
 export { renderGistCard };

package/src/cards/options.ts

@@ -1,4 +1,4 @@
-import type { ColorParams } from '../common/color.js';
+import type { ColorParams } from '../common/color.ts';
 
 /**
  * Options every card accepts.

package/src/cards/repo.ts

@@ -1,12 +1,12 @@
-import { Card } from '../common/Card.js';
-import { getLightDarkColors } from '../common/color.js';
-import { kFormatter, wrapTextMultiline } from '../common/fmt.js';
-import { encodeHTML } from '../common/html.js';
-import { I18n } from '../common/I18n.js';
-import { icons } from '../common/icons.js';
-import { buildSearchFilter, clampValue, parseEmojis } from '../common/ops.js';
+import { Card } from '../common/Card.ts';
+import { getLightDarkColors } from '../common/color.ts';
+import { kFormatter } from '../common/fmt.ts';
+import { I18n } from '../common/I18n.ts';
+import { icons } from '../common/icons.ts';
+import { buildSearchFilter, clampValue, parseEmojis } from '../common/ops.ts';
 import {
   countWrappedLines,
+  wrapTextMultiline,
   createLanguageNode,
   createTextNode,
   flexLayout,
@@ -14,11 +14,13 @@ import {
   measureText,
   wrappedTextNode,
   wrappedTextStyles,
-} from '../common/render.js';
-import type { RepositoryData } from '../fetchers/types.js';
-import { repoCardLocales } from '../translations.js';
+} from '../common/render.ts';
+import type { RepositoryData } from '../fetchers/types.ts';
+import type { Child, MarkupElement } from '../markup/index.ts';
+import { el, rule } from '../markup/index.ts';
+import { repoCardLocales } from '../translations.ts';
 
-import type { CardOptions, CommonCardOptions } from './options.js';
+import type { CardOptions, CommonCardOptions } from './options.ts';
 
 const ICON_SIZE = 16;
 const CARD_DEFAULT_WIDTH = 400;
@@ -42,7 +44,7 @@ interface RepoCardOptions extends CommonCardOptions {
 }
 
 interface RepoStatItem {
-  icon: string;
+  icon: Child;
   label: string;
   value: number | undefined;
   id: string;
@@ -53,35 +55,34 @@ interface RepoStatItem {
 /**
  * Retrieves the repository description and wraps it to fit the card width.
  *
- * @param label The repository description.
- * @param xOffset Horizontal offset of the badge.
  * @returns Wrapped repo description SVG object.
  */
-const getBadgeSVG = (label: string, xOffset = 0): string => {
+const getBadgeSVG = (label: string, xOffset = 0): MarkupElement => {
   if (!Number.isFinite(xOffset)) {
-    throw new Error(`Invalid xOffset: "${xOffset}"`);
+    throw new TypeError(`Invalid xOffset: "${xOffset}"`);
   }
 
-  return `
-    <g data-testid="badge" class="badge" transform="translate(${320 + xOffset}, -18)">
-      <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"
-      >
-        ${encodeHTML(label)}
-      </text>
-    </g>
-  `;
+  return el(
+    'g',
+    { 'data-testid': 'badge', class: 'badge', transform: `translate(${320 + xOffset}, -18)` },
+    el('rect', { 'stroke-width': 1, width: 70, height: 20, x: -12, y: -14, ry: 10, rx: 10 }),
+    el(
+      'text',
+      {
+        x: 23,
+        y: -5,
+        'alignment-baseline': 'central',
+        'dominant-baseline': 'central',
+        'text-anchor': 'middle',
+      },
+      label,
+    ),
+  );
 };
 
 /**
  * Renders repository card details.
  *
- * @param repo Repository data.
- * @param options Card options.
  * @returns Repository card SVG object.
  */
 const renderRepoCard = (
@@ -121,7 +122,7 @@ const renderRepoCard = (
   } = options;
 
   const card_width =
-    card_width_input && !isNaN(card_width_input)
+    card_width_input && !Number.isNaN(card_width_input)
       ? card_width_input
       : show.length >= 2
         ? CARD_DEFAULT_WIDTH + 30
@@ -199,16 +200,16 @@ const renderRepoCard = (
     }),
   );
 
-  const extraLHeight = parseInt(String(line_height), 10);
+  const extraLHeight = Number.parseInt(String(line_height), 10);
   const lineHeight = 10;
   const header = show_owner ? nameWithOwner : name;
-  const langName = (primaryLanguage && primaryLanguage.name) || 'Unspecified';
-  const langColor = (primaryLanguage && primaryLanguage.color) || '#333';
+  const langName = primaryLanguage?.name || 'Unspecified';
+  const langColor = primaryLanguage?.color || '#333';
   const desc = parseEmojis(description || 'No description provided');
   const descriptionBoxWidth = card_width - 2 * X_OFFSET;
 
   let descriptionLinesCount: number;
-  let descriptionSvg: string;
+  let descriptionSvg: Child;
   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
@@ -240,23 +241,21 @@ const renderRepoCard = (
     descriptionLinesCount = description_lines_count
       ? clampValue(description_lines_count, 1, DESCRIPTION_MAX_LINES)
       : multiLineDescription.length;
-    descriptionSvg = multiLineDescription
-      .map((line) => `<tspan dy="1.2em" x="${X_OFFSET}">${encodeHTML(line)}</tspan>`)
-      .join('');
-    descriptionSvg = `<text class="description" x="${X_OFFSET}" y="-5"> 
-      ${descriptionSvg}
-    </text>`;
+    descriptionSvg = el(
+      'text',
+      { class: 'description', x: X_OFFSET, y: -5 },
+      multiLineDescription.map((line) => el('tspan', { dy: '1.2em', x: X_OFFSET }, line)),
+    );
   }
 
-  const extraHeight = Object.keys(STATS).length
-    ? -7 + (Math.ceil(statItems.length / 2) + 1) * extraLHeight
-    : 0;
+  const extraHeight =
+    Object.keys(STATS).length > 0 ? -7 + (Math.ceil(statItems.length / 2) + 1) * extraLHeight : 0;
   const height =
     (descriptionLinesCount > 1 ? 120 : 110) + descriptionLinesCount * lineHeight + extraHeight;
 
   const { lightColors, darkColors } = getLightDarkColors({ ...options, theme });
 
-  const svgLanguage = primaryLanguage ? createLanguageNode(langName, langColor) : '';
+  const svgLanguage = primaryLanguage ? createLanguageNode(langName, langColor) : undefined;
 
   const totalStars = kFormatter(stargazerCount);
   const totalForks = kFormatter(forkCount);
@@ -271,27 +270,27 @@ const renderRepoCard = (
       ICON_SIZE + measureText(`${totalForks}`, 12),
     ],
     gap: 25,
-  }).join('');
+  });
 
-  const extraRows: Array<string> = [];
+  const extraRows: Array<Child> = [];
   for (let i = 0; i < statItems.length; i += 2) {
     extraRows.push(
       flexLayout({
         items: statItems.slice(i, i + 2),
         gap: 210,
         direction: 'row',
-      }).join(''),
+      }),
     );
   }
-  const extraItems = `
-  <svg x="0" y="0"><g transform="translate(-3, ${height - 52 - extraHeight})">
-      ${flexLayout({
-        items: extraRows,
-        gap: extraLHeight,
-        direction: 'column',
-      }).join('')}
-    </g></svg>
-    `;
+  const extraItems = el(
+    'svg',
+    { x: 0, y: 0 },
+    el(
+      'g',
+      { transform: `translate(-3, ${height - 52 - extraHeight})` },
+      flexLayout({ items: extraRows, gap: extraLHeight, direction: 'column' }),
+    ),
+  );
 
   const card = new Card({
     defaultTitle: header.length > 35 ? `${header.slice(0, 35)}...` : header,
@@ -306,39 +305,36 @@ const renderRepoCard = (
   card.setHideBorder(hide_border);
   card.setHideTitle(false);
   card.setCSS({
-    light: ({ textColor, iconColor }) => `
-    .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} }
-    .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }
-    .badge rect { opacity: 0.2; stroke: ${textColor} }
-    .badge text { fill: ${textColor} }
-
-    .stat { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
-    .stagger {
-      opacity: 0;
-      animation: fadeInAnimation 0.3s ease-in-out forwards;
-    }
-    .not_bold { font-weight: 400 }
-    .bold { font-weight: 700 }
-    .icon {
-      fill: ${iconColor};
-      display: block;
-    }
-  `,
-    dark: ({ textColor, iconColor }) => `
-      .description {
-        fill: ${textColor};
-        ${browser_rendering ? wrappedTextStyles(textColor) : ''}
-      }
-      .gray { fill: ${textColor} }
-      .badge rect { stroke: ${textColor} }
-      .badge text { fill: ${textColor} }
-      .stat { fill: ${textColor} }
-      .icon { fill: ${iconColor}; }
-    `,
+    light: ({ textColor, iconColor }) => [
+      rule('.description', {
+        font: `400 ${DESCRIPTION_FONT_SIZE}px 'Segoe UI', Ubuntu, Sans-Serif`,
+        fill: textColor,
+        ...(browser_rendering ? wrappedTextStyles(textColor) : {}),
+      }),
+      rule('.gray', { font: "400 12px 'Segoe UI', Ubuntu, Sans-Serif", fill: textColor }),
+      rule('.badge', { font: "600 11px 'Segoe UI', Ubuntu, Sans-Serif" }),
+      rule('.badge rect', { opacity: 0.2, stroke: textColor }),
+      rule('.badge text', { fill: textColor }),
+      rule('.stat', { font: "400 12px 'Segoe UI', Ubuntu, Sans-Serif", fill: textColor }),
+      rule('.stagger', {
+        opacity: 0,
+        animation: 'fadeInAnimation 0.3s ease-in-out forwards',
+      }),
+      rule('.not_bold', { 'font-weight': 400 }),
+      rule('.bold', { 'font-weight': 700 }),
+      rule('.icon', { fill: iconColor, display: 'block' }),
+    ],
+    dark: ({ textColor, iconColor }) => [
+      rule('.description', {
+        fill: textColor,
+        ...(browser_rendering ? wrappedTextStyles(textColor) : {}),
+      }),
+      rule('.gray', { fill: textColor }),
+      rule('.badge rect', { stroke: textColor }),
+      rule('.badge text', { fill: textColor }),
+      rule('.stat', { fill: textColor }),
+      rule('.icon', { fill: iconColor }),
+    ],
   });
 
   const extraStatLabels = Object.values(STATS)
@@ -355,22 +351,16 @@ const renderRepoCard = (
     desc: [`${desc}.`, primaryLanguage ? langName : '', extraStatLabels].filter(Boolean).join(', '),
   });
 
-  return card.render(`
-    ${
-      isTemplate
-        ? getBadgeSVG(i18n.t('repocard.template'), card_width - CARD_DEFAULT_WIDTH)
-        : isArchived
-          ? getBadgeSVG(i18n.t('repocard.archived'), card_width - CARD_DEFAULT_WIDTH)
-          : ''
-    }
-
-    ${descriptionSvg}
-
-    <g transform="translate(30, ${height - 75 - extraHeight})">
-      ${starAndForkCount}
-    </g>
-    ${extraItems}
-  `);
+  return card.render([
+    isTemplate
+      ? getBadgeSVG(i18n.t('repocard.template'), card_width - CARD_DEFAULT_WIDTH)
+      : isArchived
+        ? getBadgeSVG(i18n.t('repocard.archived'), card_width - CARD_DEFAULT_WIDTH)
+        : undefined,
+    descriptionSvg,
+    el('g', { transform: `translate(30, ${height - 75 - extraHeight})` }, starAndForkCount),
+    extraItems,
+  ]);
 };
 
 export { renderRepoCard };