@stats-forge/github-stats-forge-core 0.0.2 → 0.2.0

package/src/cards/gist.ts

@@ -1,33 +1,39 @@
-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_ICON, CARD_WIDTH, FONT_SIZE, font } from '../common/brand.ts';
+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 { 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 { gistCardLocales } 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;
+const CARD_DEFAULT_WIDTH = CARD_WIDTH.standard;
 const X_OFFSET = 25;
 const HEADER_MAX_LENGTH = 35;
 const DESCRIPTION_BOX_WIDTH = CARD_DEFAULT_WIDTH - 2 * X_OFFSET;
-const DESCRIPTION_FONT_SIZE = 13;
+const DESCRIPTION_FONT_SIZE = FONT_SIZE.meta;
 const DESCRIPTION_LINE_HEIGHT_PX = 16;
 const DESCRIPTION_MAX_LINES = 10;
 
 interface GistCardOptions extends CommonCardOptions {
+  locale: string;
   show_owner: boolean;
   browser_rendering: boolean;
 }
@@ -35,13 +41,12 @@ 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 => {
   const { name, nameWithOwner, description, language, starsCount, forksCount } = gistData;
   const {
+    locale,
     theme = 'default_repocard',
     border_radius,
     show_owner = false,
@@ -51,10 +56,12 @@ const renderGistCard = (gistData: GistData, options: CardOptions<GistCardOptions
 
   const { lightColors, darkColors } = getLightDarkColors({ ...options, theme });
 
-  const desc = parseEmojis(description || 'No description provided');
+  const i18n = new I18n({ locale, translations: gistCardLocales });
+
+  const desc = parseEmojis(description || i18n.t('gistcard.no-description'));
 
   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 +93,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;
@@ -102,7 +108,7 @@ const renderGistCard = (gistData: GistData, options: CardOptions<GistCardOptions
   const svgStars = iconWithLabel(icons.star, totalStars, 'starsCount', ICON_SIZE);
   const svgForks = iconWithLabel(icons.fork, totalForks, 'forksCount', ICON_SIZE);
 
-  const languageName = language || 'Unspecified';
+  const languageName = language || i18n.t('gistcard.unspecified-language');
   const languageColor = getLanguageColor(languageName);
 
   const svgLanguage = createLanguageNode(languageName, languageColor);
@@ -115,14 +121,14 @@ const renderGistCard = (gistData: GistData, options: CardOptions<GistCardOptions
       ICON_SIZE + measureText(`${totalForks}`, 12),
     ],
     gap: 25,
-  }).join('');
+  });
 
   const header = show_owner ? nameWithOwner : name;
 
   const card = new Card({
     defaultTitle:
       header.length > HEADER_MAX_LENGTH ? `${header.slice(0, HEADER_MAX_LENGTH)}...` : header,
-    titlePrefixIcon: icons.gist,
+    titlePrefixIcon: CARD_ICON.gist,
     width: CARD_DEFAULT_WIDTH,
     height,
     border_radius,
@@ -130,22 +136,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: font('regular', 'meta'),
+        fill: textColor,
+        ...(browser_rendering ? wrappedTextStyles(textColor) : {}),
+      }),
+      rule('.gray', { font: font('regular', 'small'), 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);
@@ -154,16 +161,15 @@ const renderGistCard = (gistData: GistData, options: CardOptions<GistCardOptions
   // shows has to be repeated here.
   card.setAccessibilityLabel({
     title: card.title,
-    desc: `${desc}. Language: ${languageName}, Stars: ${totalStars}, Forks: ${totalForks}`,
+    desc: `${desc}. ${i18n.t('gistcard.language')}: ${languageName}, ${i18n.t(
+      'gistcard.stars',
+    )}: ${totalStars}, ${i18n.t('gistcard.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,14 @@
-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_ICON, CARD_WIDTH, FONT_SIZE, FONT_WEIGHT, font } from '../common/brand.ts';
+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 {
+  NUMBER_FORMATS,
   countWrappedLines,
+  wrapTextMultiline,
   createLanguageNode,
   createTextNode,
   flexLayout,
@@ -14,19 +16,31 @@ 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;
+const CARD_DEFAULT_WIDTH = CARD_WIDTH.standard;
 const X_OFFSET = 25;
-const DESCRIPTION_FONT_SIZE = 13;
+const DESCRIPTION_FONT_SIZE = FONT_SIZE.meta;
 const DESCRIPTION_LINE_HEIGHT_PX = 16;
 const DESCRIPTION_MAX_LINES = 3;
 
+/** Stats the card draws only when `show` names them. */
+const REPO_SHOW_STATS = [
+  'prs_authored',
+  'prs_commented',
+  'prs_reviewed',
+  'issues_authored',
+  'issues_commented',
+] as const;
+type RepoShowStat = (typeof REPO_SHOW_STATS)[number];
+
 interface RepoCardOptions extends CommonCardOptions {
   locale: string;
   show_owner: boolean;
@@ -42,7 +56,7 @@ interface RepoCardOptions extends CommonCardOptions {
 }
 
 interface RepoStatItem {
-  icon: string;
+  icon: Child;
   label: string;
   value: number | undefined;
   id: string;
@@ -53,41 +67,37 @@ 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 = (
-  repo: RepositoryData,
-  options: CardOptions<RepoCardOptions> = {},
-): string => {
+const renderCard = (repo: RepositoryData, options: CardOptions<RepoCardOptions> = {}): string => {
   const {
     name,
     nameWithOwner,
@@ -121,7 +131,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
@@ -132,10 +142,13 @@ const renderRepoCard = (
     translations: repoCardLocales,
   });
 
+  // Typed against the exported list, so a stat drawn here cannot be missing from it.
+  const shows = (stat: RepoShowStat): boolean => show.includes(stat);
+
   const repoFilter = encodeURIComponent(buildSearchFilter([nameWithOwner], []));
   const encodedUsername = encodeURIComponent(username ?? '');
   const STATS: Record<string, RepoStatItem> = {};
-  if (show.includes('prs_authored')) {
+  if (shows('prs_authored')) {
     STATS['prs_authored'] = {
       icon: icons.prs,
       label: i18n.t('repocard.prs-authored'),
@@ -144,7 +157,7 @@ const renderRepoCard = (
       link: `https://github.com/search?q=${repoFilter}author%3A${encodedUsername}&amp;type=pullrequests`,
     };
   }
-  if (show.includes('prs_commented')) {
+  if (shows('prs_commented')) {
     STATS['prs_commented'] = {
       icon: icons.comments,
       label: i18n.t('repocard.prs-commented'),
@@ -153,7 +166,7 @@ const renderRepoCard = (
       link: `https://github.com/search?q=${repoFilter}commenter%3A${encodedUsername}+-author%3A${encodedUsername}&amp;type=pullrequests`,
     };
   }
-  if (show.includes('prs_reviewed')) {
+  if (shows('prs_reviewed')) {
     STATS['prs_reviewed'] = {
       icon: icons.reviews,
       label: i18n.t('repocard.prs-reviewed'),
@@ -162,7 +175,7 @@ const renderRepoCard = (
       link: `https://github.com/search?q=${repoFilter}reviewed-by%3A${encodedUsername}+-author%3A${encodedUsername}&amp;type=pullrequests`,
     };
   }
-  if (show.includes('issues_authored')) {
+  if (shows('issues_authored')) {
     STATS['issues_authored'] = {
       icon: icons.issues,
       label: i18n.t('repocard.issues-authored'),
@@ -171,7 +184,7 @@ const renderRepoCard = (
       link: `https://github.com/search?q=${repoFilter}author%3A${encodedUsername}&amp;type=issues`,
     };
   }
-  if (show.includes('issues_commented')) {
+  if (shows('issues_commented')) {
     STATS['issues_commented'] = {
       icon: icons.discussions_started,
       label: i18n.t('repocard.issues-commented'),
@@ -199,16 +212,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 desc = parseEmojis(description || 'No description provided');
+  const langName = primaryLanguage?.name || i18n.t('repocard.unspecified-language');
+  const langColor = primaryLanguage?.color || '#333';
+  const desc = parseEmojis(description || i18n.t('repocard.no-description'));
   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 +253,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,31 +282,31 @@ 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,
-    titlePrefixIcon: icons.contribs,
+    titlePrefixIcon: CARD_ICON.repo,
     width: card_width,
     height,
     border_radius,
@@ -306,39 +317,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: font('regular', 'meta'),
+        fill: textColor,
+        ...(browser_rendering ? wrappedTextStyles(textColor) : {}),
+      }),
+      rule('.gray', { font: font('regular', 'small'), fill: textColor }),
+      rule('.badge', { font: font('semibold', 'micro') }),
+      rule('.badge rect', { opacity: 0.2, stroke: textColor }),
+      rule('.badge text', { fill: textColor }),
+      rule('.stat', { font: font('regular', 'small'), fill: textColor }),
+      rule('.stagger', {
+        opacity: 0,
+        animation: 'fadeInAnimation 0.3s ease-in-out forwards',
+      }),
+      rule('.not_bold', { 'font-weight': FONT_WEIGHT.regular }),
+      rule('.bold', { 'font-weight': FONT_WEIGHT.semibold }),
+      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 +363,28 @@ 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,
+  ]);
 };
 
+/**
+ * The card, and the values each of its options accepts, keyed by the option's own name.
+ * They ride on the renderer so a list cannot be found without what draws it;
+ * the api handler forwards them onto its own export, which is what a UI reads.
+ */
+const renderRepoCard = Object.assign(renderCard, {
+  OPTIONS: {
+    show: REPO_SHOW_STATS,
+    number_format: NUMBER_FORMATS,
+  },
+});
+
 export { renderRepoCard };