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

package/build/api/wakatime.js

@@ -1,8 +1,8 @@
 import * as z from 'zod/mini';
-import { DISPLAY_FORMATS, WAKATIME_LAYOUTS, renderWakatimeCard } from '../cards/wakatime.js';
+import { renderWakatimeCard } from '../cards/wakatime.js';
 import { fetchWakatimeStats } from '../fetchers/wakatime.js';
-import { errorResult } from './api-result.js';
-import { booleanParam, enumParam, listParam, localeParam, looseIntParam, numberParam, parseColorParams, parseParams, rawParam, safeParam, } from './params.js';
+import { cardHandler } from './handler.js';
+import { booleanParam, enumParam, listParam, localeParam, looseIntParam, numberParam, rawParam, safeParam, } from './params.js';
 /** What the wakatime endpoint accepts, on top of the shared color params. */
 const wakatimeQuery = z.object({
     username: safeParam,
@@ -13,12 +13,12 @@ const wakatimeQuery = z.object({
     hide_progress: booleanParam,
     custom_title: rawParam,
     locale: localeParam,
-    layout: enumParam(WAKATIME_LAYOUTS),
+    layout: enumParam(renderWakatimeCard.OPTIONS.layout),
     langs_count: looseIntParam,
     hide: listParam,
     api_domain: rawParam,
     border_radius: numberParam,
-    display_format: enumParam(DISPLAY_FORMATS),
+    display_format: enumParam(renderWakatimeCard.OPTIONS.display_format),
     disable_animations: booleanParam,
 });
 /**
@@ -26,66 +26,29 @@ const wakatimeQuery = z.object({
  *
  * 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, config) => {
-    let colors;
-    try {
-        colors = parseColorParams(query);
-    }
-    catch (err) {
-        // A rejected color cannot be used to draw its own error card.
-        return errorResult(err);
-    }
-    try {
-        const { username, hide_border, card_width, line_height, hide_title, hide_progress, custom_title, locale, layout, langs_count, hide, api_domain, border_radius, display_format, disable_animations, } = parseParams(wakatimeQuery, query);
-        const stats = await fetchWakatimeStats({ username, api_domain }, config);
-        return {
-            status: 'success',
-            content: renderWakatimeCard(stats, {
-                ...colors,
-                custom_title,
-                hide_title,
-                hide_border,
-                card_width,
-                hide,
-                line_height,
-                hide_progress,
-                border_radius,
-                locale,
-                layout,
-                langs_count,
-                display_format,
-                disable_animations,
-            }),
-        };
-    }
-    catch (err) {
-        return errorResult(err, colors);
-    }
-};
+const renderWakatime = cardHandler(wakatimeQuery, async ({ username, hide_border, card_width, line_height, hide_title, hide_progress, custom_title, locale, layout, langs_count, hide, api_domain, border_radius, display_format, disable_animations, }, colors, config) => {
+    const stats = await fetchWakatimeStats({ username, api_domain }, config);
+    return renderWakatimeCard(stats, {
+        ...colors,
+        custom_title,
+        hide_title,
+        hide_border,
+        card_width,
+        hide,
+        line_height,
+        hide_progress,
+        border_radius,
+        locale,
+        layout,
+        langs_count,
+        display_format,
+        disable_animations,
+    });
+});
 /**
- * The card, with the values its enum params accept.
- * A UI reads them off the function it calls, e.g. `wakatime.LAYOUTS`.
+ * The card, and the values each of its options accepts, keyed by the option's own name.
+ * A UI reads them off the function it calls: `wakatime.OPTIONS.layout`.
  */
-export const wakatime = Object.assign(renderWakatime, {
-    LAYOUTS: WAKATIME_LAYOUTS,
-    DISPLAY_FORMATS,
-});
+export const wakatime = Object.assign(renderWakatime, { OPTIONS: renderWakatimeCard.OPTIONS });

package/build/calculateRank.d.ts

@@ -1,15 +1,6 @@
 /**
  * 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.
  */
 declare function calculateRank({ all_commits, commits, prs, issues, reviews, stars, followers, }: {

package/build/calculateRank.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calculateRank.d.ts","sourceRoot":"","sources":["../src/calculateRank.ts"],"names":[],"mappings":"AAqBA;;;;;;;;;;;;;GAaG;AACH,iBAAS,aAAa,CAAC,EACrB,WAAW,EACX,OAAO,EACP,GAAG,EACH,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE;IACD,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,CAoCxC;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"calculateRank.d.ts","sourceRoot":"","sources":["../src/calculateRank.ts"],"names":[],"mappings":"AAmBA;;;;GAIG;AACH,iBAAS,aAAa,CAAC,EACrB,WAAW,EACX,OAAO,EACP,GAAG,EACH,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE;IACD,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;CACnB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,CAoCxC;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/build/calculateRank.js

@@ -1,7 +1,6 @@
 /**
  * Calculates the exponential cdf.
  *
- * @param x The value.
  * @returns The exponential cdf.
  */
 function exponential_cdf(x) {
@@ -10,7 +9,6 @@ function exponential_cdf(x) {
 /**
  * Calculates the log normal cdf.
  *
- * @param x The value.
  * @returns The log normal cdf.
  */
 function log_normal_cdf(x) {
@@ -20,24 +18,21 @@ function log_normal_cdf(x) {
 /**
  * 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({ all_commits, commits, prs, issues, reviews, stars, followers, }) {
-    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;
     const THRESHOLDS = [1, 12.5, 25, 37.5, 50, 62.5, 75, 87.5, 100];
     const LEVELS = ['S', 'A+', 'A', 'A-', 'B+', 'B', 'B-', 'C+', 'C'];

package/build/cards/contributed-to.d.ts

@@ -0,0 +1,19 @@
+import type { ContributedToData } from '../fetchers/types.ts';
+import type { CardOptions, CommonCardOptions } from './options.ts';
+declare const MIN_CARD_WIDTH = 340;
+interface ContributedToCardOptions extends CommonCardOptions {
+    locale: string;
+    hide_title: boolean;
+    card_width: number;
+    custom_title: string;
+    disable_animations: boolean;
+    hide_years: boolean;
+}
+/**
+ * Renders the repositories a user contributed to, ranked by contributions.
+ *
+ * @returns Contributed-to card SVG string.
+ */
+declare const renderContributedToCard: (data: ContributedToData, options?: CardOptions<ContributedToCardOptions>) => string;
+export { renderContributedToCard, MIN_CARD_WIDTH };
+//# sourceMappingURL=contributed-to.d.ts.map

package/build/cards/contributed-to.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contributed-to.d.ts","sourceRoot":"","sources":["../../src/cards/contributed-to.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAmB,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAK/E,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGnE,QAAA,MAAM,cAAc,MAAM,CAAC;AA8B3B,UAAU,wBAAyB,SAAQ,iBAAiB;IAC1D,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,UAAU,EAAE,OAAO,CAAC;CACrB;AAmKD;;;;GAIG;AACH,QAAA,MAAM,uBAAuB,SACrB,iBAAiB,YACd,WAAW,CAAC,wBAAwB,CAAC,KAC7C,MAkJF,CAAC;AAEF,OAAO,EAAE,uBAAuB,EAAE,cAAc,EAAE,CAAC"}

package/build/cards/contributed-to.js

@@ -0,0 +1,242 @@
+import { CARD_ICON, CARD_WIDTH, FONT_SIZE, firefoxFontSize, font } from '../common/brand.js';
+import { Card } from '../common/Card.js';
+import { getLightDarkColors } from '../common/color.js';
+import { formatYears } from '../common/date.js';
+import { kFormatter } from '../common/fmt.js';
+import { I18n } from '../common/I18n.js';
+import { clampValue } from '../common/ops.js';
+import { createProgressNode, measureText } from '../common/render.js';
+import { atRule, el, rule } from '../markup/index.js';
+import { contributedToCardLocales } from '../translations.js';
+const CARD_DEFAULT_WIDTH = CARD_WIDTH.wide;
+const MIN_CARD_WIDTH = 340;
+/** Padding the card keeps at its edges; matches `Card`'s own `paddingX`. */
+const CARD_PADDING = 25;
+const TITLE_FONT_SIZE = FONT_SIZE.title;
+/** What `Card`'s title layout reserves for the prefix icon, so the title text starts past it. */
+const TITLE_ICON_COLUMN = 25;
+const NAME_FONT_SIZE = FONT_SIZE.meta;
+/** Room kept at the right edge for the contribution count. */
+const COUNT_WIDTH = 46;
+const BAR_WIDTH = 130;
+const COLUMN_GAP = 12;
+/** Baseline of the first row, measured from the top of the card body. */
+const FIRST_ROW_Y = 10;
+const ROW_HEIGHT = 38;
+/** A row with no year marks under it needs only its own line. */
+const ROW_HEIGHT_NO_YEARS = 24;
+/** How far the year marks sit below their row's baseline. */
+const YEAR_STRIP_Y = 8;
+const YEAR_MARK_SIZE = 7;
+const YEAR_MARK_GAP = 3;
+/** Gap between the last row and the footer's own baseline. */
+const FOOTER_GAP = 12;
+/** Where `Card` puts the body while the title is shown; `setHideTitle` adjusts the height by the same 30. */
+const BODY_OFFSET_Y = 55;
+const BOTTOM_PADDING = 18;
+/**
+ * The title, naming the account unless that makes it too wide for the card.
+ *
+ * A login is up to 39 characters, which at the title's size overruns the default width
+ * by half again — so the plain wording is the fallback rather than a truncated login.
+ *
+ * @returns The default title, which `custom_title` still overrides.
+ */
+const defaultTitleFor = (i18n, contentWidth) => {
+    const named = i18n.t('contributedtocard.title');
+    return measureText(named, TITLE_FONT_SIZE) <= contentWidth
+        ? named
+        : i18n.t('contributedtocard.title-unnamed');
+};
+/**
+ * Shortens a name to fit its column, ending it with an ellipsis when it does not.
+ *
+ * @returns The name as it is drawn.
+ */
+const truncateName = (name, maxWidth) => {
+    if (measureText(name, NAME_FONT_SIZE) <= maxWidth) {
+        return name;
+    }
+    let trimmed = name;
+    while (trimmed.length > 1 && measureText(`${trimmed}…`, NAME_FONT_SIZE) > maxWidth) {
+        trimmed = trimmed.slice(0, -1);
+    }
+    return `${trimmed}…`;
+};
+/**
+ * The marks under a repository's name, one per contribution year of the account,
+ * filled for the years that repository got a contribution.
+ *
+ * The step shrinks to fit, so a long-lived account keeps the strip inside its column
+ * rather than running it under the bar.
+ *
+ * @returns The strip, positioned relative to its row's baseline.
+ */
+const createYearStrip = (repoYears, years, columnWidth) => {
+    const contributed = new Set(repoYears);
+    const step = Math.min(YEAR_MARK_SIZE + YEAR_MARK_GAP, Math.floor(columnWidth / years.length));
+    const size = Math.max(step - YEAR_MARK_GAP, 3);
+    return el('g', { 'data-testid': 'year-strip', transform: `translate(0, ${YEAR_STRIP_Y})` }, years.map((year, index) => el('rect', {
+        'data-testid': contributed.has(year) ? 'year-on' : 'year-off',
+        class: contributed.has(year) ? 'year-on' : 'year-off',
+        x: index * step,
+        y: 0,
+        width: size,
+        height: size,
+        rx: 1,
+        ry: 1,
+    })));
+};
+/**
+ * One repository: its name, a bar for its share of the top repository's contributions,
+ * and the count itself.
+ *
+ * @returns The row, positioned by its own transform.
+ */
+const createRepoRow = ({ repo, index, maxContributions, years, nameWidth, contentWidth, rowHeight, }) => el('g', {
+    class: 'stagger',
+    style: `animation-delay: ${450 + index * 150}ms`,
+    transform: `translate(0, ${FIRST_ROW_Y + index * rowHeight})`,
+}, el('text', { class: 'repo-name', 'data-testid': 'repo-name', x: 0, y: 0 }, truncateName(repo.nameWithOwner, nameWidth)), createProgressNode({
+    x: nameWidth + COLUMN_GAP,
+    y: -9,
+    width: BAR_WIDTH,
+    progress: (repo.contributions / maxContributions) * 100,
+    delay: 450 + index * 150,
+}), el('text', {
+    class: 'count',
+    'data-testid': 'repo-contributions',
+    x: contentWidth,
+    y: 0,
+    'text-anchor': 'end',
+}, kFormatter(repo.contributions)), years.length > 0 && createYearStrip(repo.years, years, nameWidth));
+/**
+ * The line under the rows: how much of the walk the card is showing, and over what years.
+ *
+ * Never dropped, because the card shows a slice of the repositories
+ * and a rank means nothing without the total it was taken from.
+ *
+ * @returns The footer text.
+ */
+const footerText = ({ i18n, shown, totalRepos, years, }) => {
+    const parts = [
+        i18n.t(shown < totalRepos ? 'contributedtocard.footer-top' : 'contributedtocard.footer-all'),
+    ];
+    const [firstYear] = years;
+    const lastYear = years.at(-1);
+    if (firstYear !== undefined && lastYear !== undefined) {
+        parts.push(formatYears(firstYear, lastYear));
+    }
+    return parts.join(' · ');
+};
+/**
+ * Renders the repositories a user contributed to, ranked by contributions.
+ *
+ * @returns Contributed-to card SVG string.
+ */
+const renderContributedToCard = (data, options = {}) => {
+    const { locale, hide_title = false, hide_border = false, card_width, custom_title, disable_animations = false, hide_years = false, border_radius, theme = 'default', } = options;
+    const { login, repos, totalRepos } = data;
+    const years = hide_years ? [] : data.years;
+    const width = card_width && !Number.isNaN(card_width)
+        ? clampValue(card_width, MIN_CARD_WIDTH, Number.MAX_SAFE_INTEGER)
+        : CARD_DEFAULT_WIDTH;
+    const contentWidth = width - 2 * CARD_PADDING;
+    const nameWidth = contentWidth - COUNT_WIDTH - BAR_WIDTH - 2 * COLUMN_GAP;
+    const rowHeight = years.length > 0 ? ROW_HEIGHT : ROW_HEIGHT_NO_YEARS;
+    // the count is a share of the busiest repository, so the first bar is always full
+    const maxContributions = Math.max(...repos.map((repo) => repo.contributions), 1);
+    const rows = repos.map((repo, index) => createRepoRow({
+        repo,
+        index,
+        maxContributions,
+        years,
+        nameWidth,
+        contentWidth,
+        rowHeight,
+    }));
+    const i18n = new I18n({
+        locale,
+        translations: contributedToCardLocales({ login, shown: repos.length, totalRepos }),
+    });
+    const footer = footerText({ i18n, shown: repos.length, totalRepos, years });
+    const footerY = FIRST_ROW_Y + Math.max(repos.length, 1) * rowHeight + FOOTER_GAP;
+    const height = BODY_OFFSET_Y + footerY + BOTTOM_PADDING;
+    const { lightColors, darkColors } = getLightDarkColors({ ...options, theme });
+    const card = new Card({
+        customTitle: custom_title,
+        defaultTitle: defaultTitleFor(i18n, contentWidth - TITLE_ICON_COLUMN),
+        titlePrefixIcon: CARD_ICON.contributedTo,
+        width,
+        height,
+        border_radius,
+        colors: { light: lightColors, dark: darkColors },
+    });
+    if (disable_animations) {
+        card.disableAnimations();
+    }
+    card.setHideBorder(hide_border);
+    card.setHideTitle(hide_title);
+    card.setCSS({
+        light: ({ textColor, titleColor, iconColor, progBarBgColor }) => [
+            atRule('@keyframes growWidthAnimation', rule('from', { width: 0 }), rule('to', { width: '100%' })),
+            rule('.repo-name', {
+                font: font('regular', 'meta'),
+                fill: textColor,
+            }),
+            rule('.count', {
+                font: font('semibold', 'meta'),
+                fill: textColor,
+                'font-variant-numeric': 'tabular-nums',
+            }),
+            rule('.footer', {
+                font: font('regular', 'micro'),
+                fill: textColor,
+                opacity: 0.7,
+            }),
+            firefoxFontSize(['.repo-name', '.count'], 'small'),
+            rule('.year-on', { fill: titleColor }),
+            // a year with no contribution reads off the text color, not `progBarBgColor`:
+            // on a dark theme that color is a light grey, and the empty marks came out looking filled
+            rule('.year-off', { fill: textColor, opacity: 0.25 }),
+            rule('.progress-background', { fill: progBarBgColor }),
+            rule('.lang-progress', {
+                fill: titleColor,
+                animation: 'growWidthAnimation 0.6s ease-in-out forwards',
+            }),
+            rule('.stagger', { opacity: 0, animation: 'fadeInAnimation 0.3s ease-in-out forwards' }),
+            rule('.icon', { fill: iconColor, display: 'block' }),
+        ],
+        dark: ({ textColor, titleColor, iconColor, progBarBgColor }) => [
+            rule('.repo-name', { fill: textColor }),
+            rule('.count', { fill: textColor }),
+            rule('.footer', { fill: textColor }),
+            rule('.year-on', { fill: titleColor }),
+            // a year with no contribution reads off the text color, not `progBarBgColor`:
+            // on a dark theme that color is a light grey, and the empty marks came out looking filled
+            rule('.year-off', { fill: textColor, opacity: 0.25 }),
+            rule('.progress-background', { fill: progBarBgColor }),
+            rule('.lang-progress', { fill: titleColor }),
+            rule('.icon', { fill: iconColor }),
+        ],
+    });
+    // `role="img"` hides the inner text from assistive tech, so everything the card
+    // shows has to be repeated here — the year marks included, since they carry
+    // information no other element on the card does.
+    card.setAccessibilityLabel({
+        title: card.title,
+        desc: [
+            ...repos.map((repo) => {
+                const inYears = hide_years
+                    ? ''
+                    : `, ${i18n.t('contributedtocard.years')}: ${repo.years.join(', ')}`;
+                return `${repo.nameWithOwner}: ${repo.contributions} ${i18n.t('contributedtocard.contributions')}${inYears}`;
+            }),
+            footer,
+        ].join('; '),
+    });
+    return card.render(el('g', { 'data-testid': 'contributed-to-body', transform: `translate(${CARD_PADDING}, 0)` }, repos.length === 0
+        ? el('text', { class: 'repo-name', 'data-testid': 'no-repos', x: 0, y: FIRST_ROW_Y }, i18n.t('contributedtocard.no-contributions'))
+        : rows, el('text', { class: 'footer', 'data-testid': 'footer', x: 0, y: footerY }, footer)));
+};
+export { renderContributedToCard, MIN_CARD_WIDTH };

package/build/cards/gist.d.ts

@@ -1,14 +1,13 @@
-import type { GistData } from '../fetchers/types.js';
-import type { CardOptions, CommonCardOptions } from './options.js';
+import type { GistData } from '../fetchers/types.ts';
+import type { CardOptions, CommonCardOptions } from './options.ts';
 interface GistCardOptions extends CommonCardOptions {
+    locale: string;
     show_owner: boolean;
     browser_rendering: boolean;
 }
 /**
  * Render gist card.
  *
- * @param gistData Gist data.
- * @param options Gist card options.
  * @returns Gist card.
  */
 declare const renderGistCard: (gistData: GistData, options?: CardOptions<GistCardOptions>) => string;

package/build/cards/gist.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gist.d.ts","sourceRoot":"","sources":["../../src/cards/gist.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAWnE,UAAU,eAAgB,SAAQ,iBAAiB;IACjD,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;GAMG;AACH,QAAA,MAAM,cAAc,GAAI,UAAU,QAAQ,EAAE,UAAS,WAAW,CAAC,eAAe,CAAM,KAAG,MA6HxF,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"gist.d.ts","sourceRoot":"","sources":["../../src/cards/gist.ts"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAKrD,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAWnE,UAAU,eAAgB,SAAQ,iBAAiB;IACjD,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAED;;;;GAIG;AACH,QAAA,MAAM,cAAc,aAAc,QAAQ,YAAW,WAAW,CAAC,eAAe,CAAC,KAAQ,MA+HxF,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/build/cards/gist.js

@@ -1,31 +1,33 @@
-import { default as Card } from '../common/Card.js';
+import { CARD_ICON, CARD_WIDTH, FONT_SIZE, font } from '../common/brand.js';
+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 { kFormatter } from '../common/fmt.js';
+import { I18n } from '../common/I18n.js';
 import { icons } from '../common/icons.js';
 import { getLanguageColor } from '../common/languageColors.js';
 import { parseEmojis } from '../common/ops.js';
-import { countWrappedLines, createLanguageNode, flexLayout, iconWithLabel, measureText, wrappedTextNode, wrappedTextStyles, } from '../common/render.js';
+import { countWrappedLines, wrapTextMultiline, createLanguageNode, flexLayout, iconWithLabel, measureText, wrappedTextNode, wrappedTextStyles, } from '../common/render.js';
+import { el, rule } from '../markup/index.js';
+import { gistCardLocales } from '../translations.js';
 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;
 /**
  * Render gist card.
  *
- * @param gistData Gist data.
- * @param options Gist card options.
  * @returns Gist card.
  */
 const renderGistCard = (gistData, options = {}) => {
     const { name, nameWithOwner, description, language, starsCount, forksCount } = gistData;
-    const { theme = 'default_repocard', border_radius, show_owner = false, browser_rendering = false, hide_border = false, } = options;
+    const { locale, theme = 'default_repocard', border_radius, show_owner = false, browser_rendering = false, hide_border = false, } = options;
     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;
     let descriptionSvg;
     if (browser_rendering) {
@@ -49,12 +51,7 @@ const renderGistCard = (gistData, options = {}) => {
         const linesLimit = 10;
         const multiLineDescription = wrapTextMultiline(desc, DESCRIPTION_BOX_WIDTH, DESCRIPTION_FONT_SIZE, 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;
     const height = (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;
@@ -62,7 +59,7 @@ const renderGistCard = (gistData, options = {}) => {
     const totalForks = kFormatter(forksCount);
     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);
     const starAndForkCount = flexLayout({
@@ -73,47 +70,45 @@ const renderGistCard = (gistData, options = {}) => {
             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,
         colors: { light: lightColors, dark: darkColors },
     });
     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);
     // `role="img"` hides the inner text from assistive tech, so everything the card
     // 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/build/cards/options.d.ts

@@ -1,4 +1,4 @@
-import type { ColorParams } from '../common/color.js';
+import type { ColorParams } from '../common/color.ts';
 /**
  * Options every card accepts.
  * Cards spread these into `getLightDarkColors`, hence {@link ColorParams}.

package/build/cards/repo.d.ts

@@ -1,5 +1,5 @@
-import type { RepositoryData } from '../fetchers/types.js';
-import type { CardOptions, CommonCardOptions } from './options.js';
+import type { RepositoryData } from '../fetchers/types.ts';
+import type { CardOptions, CommonCardOptions } from './options.ts';
 interface RepoCardOptions extends CommonCardOptions {
     locale: string;
     show_owner: boolean;
@@ -16,10 +16,19 @@ interface RepoCardOptions extends CommonCardOptions {
 /**
  * Renders repository card details.
  *
- * @param repo Repository data.
- * @param options Card options.
  * @returns Repository card SVG object.
  */
-declare const renderRepoCard: (repo: RepositoryData, options?: CardOptions<RepoCardOptions>) => string;
+declare const renderCard: (repo: RepositoryData, options?: CardOptions<RepoCardOptions>) => string;
+/**
+ * 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.
+ */
+declare const renderRepoCard: typeof renderCard & {
+    OPTIONS: {
+        show: readonly ["prs_authored", "prs_commented", "prs_reviewed", "issues_authored", "issues_commented"];
+        number_format: readonly ["short", "long"];
+    };
+};
 export { renderRepoCard };
 //# sourceMappingURL=repo.d.ts.map