From 0f2e07e6ea0126be6db6c082c3313a84ac445f08 Mon Sep 17 00:00:00 2001 From: airwaks <114548361+airwakz@users.noreply.github.com> Date: Sat, 14 Oct 2023 18:37:33 +0530 Subject: [PATCH 01/21] Update repo-card.js --- src/cards/repo-card.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/cards/repo-card.js b/src/cards/repo-card.js index 09b5841880a97..5312d105b2baf 100644 --- a/src/cards/repo-card.js +++ b/src/cards/repo-card.js @@ -49,9 +49,11 @@ const getBadgeSVG = (label, textColor) => ` * * @param {RepositoryData} repo Repository data. * @param {Partial} options Card options. + * @param {number} card_width The width of the card. + * @param {number} card_height The height of the card. * @returns {string} Repository card SVG object. */ -const renderRepoCard = (repo, options = {}) => { +const renderRepoCard = (repo, options = {}, card_width, card_height) => { const { name, nameWithOwner, @@ -87,8 +89,7 @@ const renderRepoCard = (repo, options = {}) => { .map((line) => `${encodeHTML(line)}`) .join(""); - const height = - (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight; + const height = card_height || (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight; const i18n = new I18n({ locale, @@ -115,13 +116,13 @@ const renderRepoCard = (repo, options = {}) => { icons.star, totalStars, "stargazers", - ICON_SIZE, + ICON_SIZE ); const svgForks = iconWithLabel( icons.fork, totalForks, "forkcount", - ICON_SIZE, + ICON_SIZE ); const starAndForkCount = flexLayout({ @@ -134,10 +135,13 @@ const renderRepoCard = (repo, options = {}) => { gap: 25, }).join(""); + // Calculate the card width and height based on the provided arguments or defaults + const width = card_width || 400; + const card = new Card({ defaultTitle: header.length > 35 ? `${header.slice(0, 35)}...` : header, titlePrefixIcon: icons.contribs, - width: 400, + width, height, border_radius, colors, From 39c75af118940a287357c62717614b0bf43480e4 Mon Sep 17 00:00:00 2001 From: airwaks <114548361+airwakz@users.noreply.github.com> Date: Sun, 15 Oct 2023 15:00:19 +0530 Subject: [PATCH 02/21] Update repo-card.js --- src/cards/repo-card.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cards/repo-card.js b/src/cards/repo-card.js index 5312d105b2baf..75997e5843376 100644 --- a/src/cards/repo-card.js +++ b/src/cards/repo-card.js @@ -53,7 +53,7 @@ const getBadgeSVG = (label, textColor) => ` * @param {number} card_height The height of the card. * @returns {string} Repository card SVG object. */ -const renderRepoCard = (repo, options = {}, card_width, card_height) => { +const renderRepoCard = (repo, options = {card_width, card_height}) => { const { name, nameWithOwner, From 6348f24045af83ddc45e4f3abcd6db2b0ace99a5 Mon Sep 17 00:00:00 2001 From: airwaks <114548361+airwakz@users.noreply.github.com> Date: Sun, 15 Oct 2023 15:22:09 +0530 Subject: [PATCH 03/21] Update top-langs.js --- api/top-langs.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/api/top-langs.js b/api/top-langs.js index d9bf6b09da01a..8c4c6314a493b 100644 --- a/api/top-langs.js +++ b/api/top-langs.js @@ -16,7 +16,8 @@ export default async (req, res) => { hide, hide_title, hide_border, - card_width, + card_width, // Add card_width and card_height here + card_height, // Add card_height here title_color, text_color, bg_color, @@ -84,6 +85,7 @@ export default async (req, res) => { hide_title: parseBoolean(hide_title), hide_border: parseBoolean(hide_border), card_width: parseInt(card_width, 10), + card_height: parseInt(card_height, 10), hide: parseArray(hide), title_color, text_color, @@ -104,7 +106,7 @@ export default async (req, res) => { `max-age=${CONSTANTS.ERROR_CACHE_SECONDS / 2}, s-maxage=${ CONSTANTS.ERROR_CACHE_SECONDS }, stale-while-revalidate=${CONSTANTS.ONE_DAY}`, - ); // Use lower cache period for errors. + ); // Use a lower cache period for errors. return res.send(renderError(err.message, err.secondaryMessage)); } }; From 3241da6ab7920f937b4898fa0d8419972be4f60e Mon Sep 17 00:00:00 2001 From: airwaks <114548361+airwakz@users.noreply.github.com> Date: Sun, 15 Oct 2023 15:26:38 +0530 Subject: [PATCH 04/21] Update top-languages-card.js --- src/cards/top-languages-card.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js index 9593f98b5ca1c..99c51e8cf765a 100644 --- a/src/cards/top-languages-card.js +++ b/src/cards/top-languages-card.js @@ -734,6 +734,8 @@ const renderTopLanguages = (topLangs, options = {}) => { layout, custom_title, locale, + card_width = DEFAULT_CARD_WIDTH, + card_height = calculateNormalLayoutHeight(topLangs.length), langs_count = getDefaultLanguagesCountByLayout({ layout, hide_progress }), border_radius, border_color, @@ -804,8 +806,8 @@ const renderTopLanguages = (topLangs, options = {}) => { const card = new Card({ customTitle: custom_title, defaultTitle: i18n.t("langcard.title"), - width, - height, + width: card_width, + height: card_height, border_radius, colors, }); From 3afdb19ba9a0f346d73f40047669835174cf179f Mon Sep 17 00:00:00 2001 From: airwaks <114548361+airwakz@users.noreply.github.com> Date: Sun, 15 Oct 2023 15:29:31 +0530 Subject: [PATCH 05/21] Update repo-card.js --- src/cards/repo-card.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cards/repo-card.js b/src/cards/repo-card.js index 75997e5843376..3500d3175501b 100644 --- a/src/cards/repo-card.js +++ b/src/cards/repo-card.js @@ -53,7 +53,7 @@ const getBadgeSVG = (label, textColor) => ` * @param {number} card_height The height of the card. * @returns {string} Repository card SVG object. */ -const renderRepoCard = (repo, options = {card_width, card_height}) => { +const renderRepoCard = (repo, options = {},card_width,card_height) => { const { name, nameWithOwner, From 4bc71ad273f3e2d2bdbad65dddf174d47f3a38a9 Mon Sep 17 00:00:00 2001 From: airwaks <114548361+airwakz@users.noreply.github.com> Date: Sun, 15 Oct 2023 16:10:17 +0530 Subject: [PATCH 06/21] Update repo-card.js --- src/cards/repo-card.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/cards/repo-card.js b/src/cards/repo-card.js index 3500d3175501b..4236b3d548d57 100644 --- a/src/cards/repo-card.js +++ b/src/cards/repo-card.js @@ -53,7 +53,7 @@ const getBadgeSVG = (label, textColor) => ` * @param {number} card_height The height of the card. * @returns {string} Repository card SVG object. */ -const renderRepoCard = (repo, options = {},card_width,card_height) => { +const renderRepoCard = (repo, options = {card_width,card_height}) => { const { name, nameWithOwner, @@ -75,6 +75,8 @@ const renderRepoCard = (repo, options = {},card_width,card_height) => { border_radius, border_color, locale, + card_width, + card_height, } = options; const lineHeight = 10; From bf70a72007ad0b5ca8c8c8b00343b93e524d0d08 Mon Sep 17 00:00:00 2001 From: airwaks <114548361+airwakz@users.noreply.github.com> Date: Sun, 15 Oct 2023 18:37:25 +0530 Subject: [PATCH 07/21] Update top-langs.js --- api/top-langs.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/api/top-langs.js b/api/top-langs.js index 8c4c6314a493b..c0ef0ec410e26 100644 --- a/api/top-langs.js +++ b/api/top-langs.js @@ -16,8 +16,7 @@ export default async (req, res) => { hide, hide_title, hide_border, - card_width, // Add card_width and card_height here - card_height, // Add card_height here + card_width, title_color, text_color, bg_color, From bc645c03a98efec634c306a406dd3c141cd89912 Mon Sep 17 00:00:00 2001 From: airwaks <114548361+airwakz@users.noreply.github.com> Date: Sun, 15 Oct 2023 18:39:58 +0530 Subject: [PATCH 08/21] Update pin.js --- api/pin.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/api/pin.js b/api/pin.js index 21ecf966b3ff4..2c4a5e6796f94 100644 --- a/api/pin.js +++ b/api/pin.js @@ -24,6 +24,7 @@ export default async (req, res) => { locale, border_radius, border_color, + card_width, // Add the card-width option } = req.query; res.setHeader("Content-Type", "image/svg+xml"); @@ -80,6 +81,7 @@ export default async (req, res) => { border_color, show_owner: parseBoolean(show_owner), locale: locale ? locale.toLowerCase() : null, + card_width: parseInt(card_width) || undefined, // Use the specified card width }), ); } catch (err) { From 1c0928b37324c3d9ed6e8aabd7a3b6502c42fbc8 Mon Sep 17 00:00:00 2001 From: airwaks <114548361+airwakz@users.noreply.github.com> Date: Sun, 15 Oct 2023 18:44:29 +0530 Subject: [PATCH 09/21] Update top-languages-card.js --- src/cards/top-languages-card.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js index 99c51e8cf765a..4007008b38f8b 100644 --- a/src/cards/top-languages-card.js +++ b/src/cards/top-languages-card.js @@ -12,7 +12,7 @@ import { } from "../common/utils.js"; import { langCardLocales } from "../translations.js"; -const DEFAULT_CARD_WIDTH = 300; + const MIN_CARD_WIDTH = 280; const DEFAULT_LANG_COLOR = "#858585"; const CARD_PADDING = 25; From ab5419b236143b56f5b49ad0176cc3b9d78db219 Mon Sep 17 00:00:00 2001 From: airwaks <114548361+airwakz@users.noreply.github.com> Date: Mon, 16 Oct 2023 09:13:32 +0530 Subject: [PATCH 10/21] Update src/cards/repo-card.js Co-authored-by: Rick Staa --- src/cards/repo-card.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cards/repo-card.js b/src/cards/repo-card.js index 4236b3d548d57..cc7205f1b8c2a 100644 --- a/src/cards/repo-card.js +++ b/src/cards/repo-card.js @@ -53,7 +53,7 @@ const getBadgeSVG = (label, textColor) => ` * @param {number} card_height The height of the card. * @returns {string} Repository card SVG object. */ -const renderRepoCard = (repo, options = {card_width,card_height}) => { +const renderRepoCard = (repo, options = {}) => { const { name, nameWithOwner, From 0de9a7084383130e252cc2d551fbae07d389fa5a Mon Sep 17 00:00:00 2001 From: airwaks <114548361+airwakz@users.noreply.github.com> Date: Mon, 16 Oct 2023 10:20:11 +0530 Subject: [PATCH 11/21] Update stats-card.js --- src/cards/stats-card.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/cards/stats-card.js b/src/cards/stats-card.js index dad81bbd21e4f..0dc3fefa708fc 100644 --- a/src/cards/stats-card.js +++ b/src/cards/stats-card.js @@ -13,6 +13,7 @@ import { import { getStyles } from "../getStyles.js"; import { statCardLocales } from "../translations.js"; +const width = card_width || 400; const CARD_MIN_WIDTH = 287; const CARD_DEFAULT_WIDTH = 287; const RANK_CARD_MIN_WIDTH = 420; From 81a24f56ca44d5eb84824c56488dc852a5da61fb Mon Sep 17 00:00:00 2001 From: airwaks <114548361+airwakz@users.noreply.github.com> Date: Mon, 16 Oct 2023 10:20:52 +0530 Subject: [PATCH 12/21] Update stats-card.js --- src/cards/stats-card.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/cards/stats-card.js b/src/cards/stats-card.js index 0dc3fefa708fc..dad81bbd21e4f 100644 --- a/src/cards/stats-card.js +++ b/src/cards/stats-card.js @@ -13,7 +13,6 @@ import { import { getStyles } from "../getStyles.js"; import { statCardLocales } from "../translations.js"; -const width = card_width || 400; const CARD_MIN_WIDTH = 287; const CARD_DEFAULT_WIDTH = 287; const RANK_CARD_MIN_WIDTH = 420; From 829e1abfc4ded7fec0dd0e76c13af9bf1388774a Mon Sep 17 00:00:00 2001 From: airwaks <114548361+airwakz@users.noreply.github.com> Date: Mon, 16 Oct 2023 10:22:25 +0530 Subject: [PATCH 13/21] Update repo-card.js changes as per review --- src/cards/repo-card.js | 33 ++++++++++++++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/src/cards/repo-card.js b/src/cards/repo-card.js index cc7205f1b8c2a..ced4388584af0 100644 --- a/src/cards/repo-card.js +++ b/src/cards/repo-card.js @@ -137,8 +137,39 @@ const renderRepoCard = (repo, options = {}) => { gap: 25, }).join(""); - // Calculate the card width and height based on the provided arguments or defaults + // Calculate the card width and height based on the provided arguments or defaults; + const width = card_width || 400; + const CARD_MIN_WIDTH = 287; + const CARD_DEFAULT_WIDTH = 287; + const RANK_CARD_MIN_WIDTH = 420; + const RANK_CARD_DEFAULT_WIDTH = 450; + const RANK_ONLY_CARD_MIN_WIDTH = 290; + const RANK_ONLY_CARD_DEFAULT_WIDTH = 290; + const minCardWidth = + (hide_rank + ? clampValue( + 50 /* padding */ + calculateTextWidth() * 2, + CARD_MIN_WIDTH, + Infinity, + ) + : statItems.length + ? RANK_CARD_MIN_WIDTH + : RANK_ONLY_CARD_MIN_WIDTH) + iconWidth; + const defaultCardWidth = + (hide_rank + ? CARD_DEFAULT_WIDTH + : statItems.length + ? RANK_CARD_DEFAULT_WIDTH + : RANK_ONLY_CARD_DEFAULT_WIDTH) + iconWidth; + let width = card_width + ? isNaN(card_width) + ? defaultCardWidth + : card_width + : defaultCardWidth; + if (width < minCardWidth) { + width = minCardWidth; + } const card = new Card({ defaultTitle: header.length > 35 ? `${header.slice(0, 35)}...` : header, From 5467847ebeb13e28dfb0deb436ad059d1b268716 Mon Sep 17 00:00:00 2001 From: airwaks <114548361+airwakz@users.noreply.github.com> Date: Mon, 16 Oct 2023 10:24:06 +0530 Subject: [PATCH 14/21] Update top-langs.js as per reviw suggested --- api/top-langs.js | 1 - 1 file changed, 1 deletion(-) diff --git a/api/top-langs.js b/api/top-langs.js index c0ef0ec410e26..90fb94f1cae00 100644 --- a/api/top-langs.js +++ b/api/top-langs.js @@ -84,7 +84,6 @@ export default async (req, res) => { hide_title: parseBoolean(hide_title), hide_border: parseBoolean(hide_border), card_width: parseInt(card_width, 10), - card_height: parseInt(card_height, 10), hide: parseArray(hide), title_color, text_color, From 7cd57f2d13316f368ce1664e3f124833254643fe Mon Sep 17 00:00:00 2001 From: rickstaa Date: Mon, 16 Oct 2023 10:17:32 +0200 Subject: [PATCH 15/21] fix: restore 'top-languages-card' Restores the original 'top-languages-card' code since it is not part of \#2900. --- src/cards/top-languages-card.js | 90 ++++++++++++++++----------------- 1 file changed, 43 insertions(+), 47 deletions(-) diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js index 4007008b38f8b..13f48ca1e5e17 100644 --- a/src/cards/top-languages-card.js +++ b/src/cards/top-languages-card.js @@ -12,7 +12,7 @@ import { } from "../common/utils.js"; import { langCardLocales } from "../translations.js"; - +const DEFAULT_CARD_WIDTH = 300; const MIN_CARD_WIDTH = 280; const DEFAULT_LANG_COLOR = "#858585"; const CARD_PADDING = 25; @@ -218,14 +218,14 @@ const createProgressTextNode = ({ width, color, name, progress, index }) => { ${name} ${progress}% ${createProgressNode({ - x: 0, - y: 25, - color, - width: progressWidth, - progress, - progressBarBackgroundColor: "#ddd", - delay: staggerDelay + 300, - })} + x: 0, + y: 25, + color, + width: progressWidth, + progress, + progressBarBackgroundColor: "#ddd", + delay: staggerDelay + 300, + })} `; }; @@ -382,22 +382,21 @@ const renderCompactLayout = (langs, width, totalLanguageSize, hideProgress) => { .join(""); return ` - ${ - !hideProgress - ? ` - - - - ${compactProgressBar} - ` - : "" - } + ${hideProgress + ? "" + : ` + + + + ${compactProgressBar} + ` + } ${createLanguageTextNode({ - langs, - totalSize: totalLanguageSize, - hideProgress, - })} + langs, + totalSize: totalLanguageSize, + hideProgress, + })} `; }; @@ -431,7 +430,7 @@ const renderDonutVerticalLayout = (langs, totalLanguageSize) => { circles.push(` - { ${createLanguageTextNode({ - langs, - totalSize: totalLanguageSize, - hideProgress: false, - })} + langs, + totalSize: totalLanguageSize, + hideProgress: false, + })} @@ -557,10 +556,10 @@ const renderPieLayout = (langs, totalLanguageSize) => { ${createLanguageTextNode({ - langs, - totalSize: totalLanguageSize, - hideProgress: false, - })} + langs, + totalSize: totalLanguageSize, + hideProgress: false, + })} @@ -629,11 +628,11 @@ const renderDonutLayout = (langs, width, totalLanguageSize) => { langs.length === 1 ? `` : langPaths - .map((section, index) => { - const staggerDelay = (index + 3) * 100; - const delay = staggerDelay + 300; + .map((section, index) => { + const staggerDelay = (index + 3) * 100; + const delay = staggerDelay + 300; - const output = ` + const output = ` { `; - return output; - }) - .join(""); + return output; + }) + .join(""); const donut = `${donutPaths}`; @@ -681,8 +680,7 @@ const renderDonutLayout = (langs, width, totalLanguageSize) => { */ const noLanguagesDataNode = ({ color, text, layout }) => { return ` - ${text} `; }; @@ -734,8 +732,6 @@ const renderTopLanguages = (topLangs, options = {}) => { layout, custom_title, locale, - card_width = DEFAULT_CARD_WIDTH, - card_height = calculateNormalLayoutHeight(topLangs.length), langs_count = getDefaultLanguagesCountByLayout({ layout, hide_progress }), border_radius, border_color, @@ -757,8 +753,8 @@ const renderTopLanguages = (topLangs, options = {}) => { ? isNaN(card_width) ? DEFAULT_CARD_WIDTH : card_width < MIN_CARD_WIDTH - ? MIN_CARD_WIDTH - : card_width + ? MIN_CARD_WIDTH + : card_width : DEFAULT_CARD_WIDTH; let height = calculateNormalLayoutHeight(langs.length); @@ -806,8 +802,8 @@ const renderTopLanguages = (topLangs, options = {}) => { const card = new Card({ customTitle: custom_title, defaultTitle: i18n.t("langcard.title"), - width: card_width, - height: card_height, + width, + height, border_radius, colors, }); From 49b72b83a5ef2ae993ea7663819cc0228ca96cb3 Mon Sep 17 00:00:00 2001 From: rickstaa Date: Mon, 16 Oct 2023 10:57:50 +0200 Subject: [PATCH 16/21] fix: fix bugs and add tests --- api/pin.js | 4 +- src/cards/repo-card.js | 57 +++++++-------------------- src/cards/stats-card.js | 2 +- src/cards/top-languages-card.js | 3 +- src/cards/types.d.ts | 1 + tests/pin.test.js | 1 + tests/renderRepoCard.test.js | 58 +++++++++++++++++++++++++++- tests/renderStatsCard.test.js | 16 ++++++-- tests/renderTopLanguagesCard.test.js | 6 ++- 9 files changed, 97 insertions(+), 51 deletions(-) diff --git a/api/pin.js b/api/pin.js index 2c4a5e6796f94..4002e6c6ca5ce 100644 --- a/api/pin.js +++ b/api/pin.js @@ -24,7 +24,7 @@ export default async (req, res) => { locale, border_radius, border_color, - card_width, // Add the card-width option + card_width, } = req.query; res.setHeader("Content-Type", "image/svg+xml"); @@ -81,7 +81,7 @@ export default async (req, res) => { border_color, show_owner: parseBoolean(show_owner), locale: locale ? locale.toLowerCase() : null, - card_width: parseInt(card_width) || undefined, // Use the specified card width + card_width: parseInt(card_width, 10), }), ); } catch (err) { diff --git a/src/cards/repo-card.js b/src/cards/repo-card.js index ced4388584af0..1cab42341f457 100644 --- a/src/cards/repo-card.js +++ b/src/cards/repo-card.js @@ -15,6 +15,8 @@ import { } from "../common/utils.js"; import { repoCardLocales } from "../translations.js"; +const DEFAULT_CARD_WIDTH = 300; +const MIN_CARD_WIDTH = 400; const ICON_SIZE = 16; /** @@ -49,8 +51,6 @@ const getBadgeSVG = (label, textColor) => ` * * @param {RepositoryData} repo Repository data. * @param {Partial} options Card options. - * @param {number} card_width The width of the card. - * @param {number} card_height The height of the card. * @returns {string} Repository card SVG object. */ const renderRepoCard = (repo, options = {}) => { @@ -76,7 +76,6 @@ const renderRepoCard = (repo, options = {}) => { border_color, locale, card_width, - card_height, } = options; const lineHeight = 10; @@ -91,13 +90,21 @@ const renderRepoCard = (repo, options = {}) => { .map((line) => `${encodeHTML(line)}`) .join(""); - const height = card_height || (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight; - const i18n = new I18n({ locale, translations: repoCardLocales, }); + let width = card_width + ? isNaN(card_width) + ? DEFAULT_CARD_WIDTH + : card_width < MIN_CARD_WIDTH + ? MIN_CARD_WIDTH + : card_width + : DEFAULT_CARD_WIDTH; + const height = + (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight; + // returns theme based colors with proper overrides and defaults const colors = getCardColors({ title_color, @@ -118,13 +125,13 @@ const renderRepoCard = (repo, options = {}) => { icons.star, totalStars, "stargazers", - ICON_SIZE + ICON_SIZE, ); const svgForks = iconWithLabel( icons.fork, totalForks, "forkcount", - ICON_SIZE + ICON_SIZE, ); const starAndForkCount = flexLayout({ @@ -137,40 +144,6 @@ const renderRepoCard = (repo, options = {}) => { gap: 25, }).join(""); - // Calculate the card width and height based on the provided arguments or defaults; - - const width = card_width || 400; - const CARD_MIN_WIDTH = 287; - const CARD_DEFAULT_WIDTH = 287; - const RANK_CARD_MIN_WIDTH = 420; - const RANK_CARD_DEFAULT_WIDTH = 450; - const RANK_ONLY_CARD_MIN_WIDTH = 290; - const RANK_ONLY_CARD_DEFAULT_WIDTH = 290; - const minCardWidth = - (hide_rank - ? clampValue( - 50 /* padding */ + calculateTextWidth() * 2, - CARD_MIN_WIDTH, - Infinity, - ) - : statItems.length - ? RANK_CARD_MIN_WIDTH - : RANK_ONLY_CARD_MIN_WIDTH) + iconWidth; - const defaultCardWidth = - (hide_rank - ? CARD_DEFAULT_WIDTH - : statItems.length - ? RANK_CARD_DEFAULT_WIDTH - : RANK_ONLY_CARD_DEFAULT_WIDTH) + iconWidth; - let width = card_width - ? isNaN(card_width) - ? defaultCardWidth - : card_width - : defaultCardWidth; - if (width < minCardWidth) { - width = minCardWidth; - } - const card = new Card({ defaultTitle: header.length > 35 ? `${header.slice(0, 35)}...` : header, titlePrefixIcon: icons.contribs, @@ -212,5 +185,5 @@ const renderRepoCard = (repo, options = {}) => { `); }; -export { renderRepoCard }; +export { renderRepoCard, DEFAULT_CARD_WIDTH, MIN_CARD_WIDTH }; export default renderRepoCard; diff --git a/src/cards/stats-card.js b/src/cards/stats-card.js index 5f57205602016..a84baaee15ef7 100644 --- a/src/cards/stats-card.js +++ b/src/cards/stats-card.js @@ -541,5 +541,5 @@ const renderStatsCard = (stats, options = {}) => { `); }; -export { renderStatsCard }; +export { renderStatsCard, RANK_CARD_DEFAULT_WIDTH, RANK_CARD_MIN_WIDTH }; export default renderStatsCard; diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js index 758bd34baff5d..a3fa5c79356d4 100644 --- a/src/cards/top-languages-card.js +++ b/src/cards/top-languages-card.js @@ -431,7 +431,7 @@ const renderDonutVerticalLayout = (langs, totalLanguageSize) => { circles.push(` - { text_color: "fff", bg_color: "fff", full_name: "1", + card_width: 100, }, }; const res = { diff --git a/tests/renderRepoCard.test.js b/tests/renderRepoCard.test.js index 61c9bc6da9ac5..e04c3d4d47c20 100644 --- a/tests/renderRepoCard.test.js +++ b/tests/renderRepoCard.test.js @@ -1,7 +1,11 @@ import { queryByTestId } from "@testing-library/dom"; import "@testing-library/jest-dom"; import { cssToObject } from "@uppercod/css-to-object"; -import { renderRepoCard } from "../src/cards/repo-card.js"; +import { + renderRepoCard, + DEFAULT_CARD_WIDTH, + MIN_CARD_WIDTH, +} from "../src/cards/repo-card.js"; import { expect, it, describe } from "@jest/globals"; import { themes } from "../themes/index.js"; @@ -338,4 +342,56 @@ describe("Test renderRepoCard", () => { "No description provided", ); }); + + it("should render with custom width set", () => { + document.body.innerHTML = renderRepoCard({ + ...data_repo.repository, + description: undefined, + isArchived: true, + }); + + expect(document.querySelector("svg")).toHaveAttribute( + "width", + DEFAULT_CARD_WIDTH.toString(), + ); + + document.body.innerHTML = renderRepoCard( + { + ...data_repo.repository, + description: undefined, + isArchived: true, + }, + { card_width: 400 }, + ); + expect(document.querySelector("svg")).toHaveAttribute("width", "400"); + }); + + it("should render with min width", () => { + document.body.innerHTML = renderRepoCard( + { + ...data_repo.repository, + description: undefined, + isArchived: true, + }, + { card_width: 190 }, + ); + + expect(document.querySelector("svg")).toHaveAttribute( + "width", + MIN_CARD_WIDTH.toString(), + ); + + document.body.innerHTML = renderRepoCard( + { + ...data_repo.repository, + description: undefined, + isArchived: true, + }, + { card_width: 100 }, + ); + expect(document.querySelector("svg")).toHaveAttribute( + "width", + MIN_CARD_WIDTH.toString(), + ); + }); }); diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js index abbf2100306d7..2c89a1542fccf 100644 --- a/tests/renderStatsCard.test.js +++ b/tests/renderStatsCard.test.js @@ -4,7 +4,11 @@ import { queryByTestId, } from "@testing-library/dom"; import { cssToObject } from "@uppercod/css-to-object"; -import { renderStatsCard } from "../src/cards/stats-card.js"; +import { + renderStatsCard, + RANK_CARD_DEFAULT_WIDTH, + RANK_CARD_MIN_WIDTH, +} from "../src/cards/stats-card.js"; import { expect, it, describe } from "@jest/globals"; import { CustomError } from "../src/common/utils.js"; @@ -131,7 +135,10 @@ describe("Test renderStatsCard", () => { it("should render with custom width set", () => { document.body.innerHTML = renderStatsCard(stats); - expect(document.querySelector("svg")).toHaveAttribute("width", "450"); + expect(document.querySelector("svg")).toHaveAttribute( + "width", + RANK_CARD_DEFAULT_WIDTH.toString(), + ); document.body.innerHTML = renderStatsCard(stats, { card_width: 500 }); expect(document.querySelector("svg")).toHaveAttribute("width", "500"); @@ -139,7 +146,10 @@ describe("Test renderStatsCard", () => { it("should render with custom width set and limit minimum width", () => { document.body.innerHTML = renderStatsCard(stats, { card_width: 1 }); - expect(document.querySelector("svg")).toHaveAttribute("width", "420"); + expect(document.querySelector("svg")).toHaveAttribute( + "width", + RANK_CARD_MIN_WIDTH.toString(), + ); // Test default minimum card width without rank circle. document.body.innerHTML = renderStatsCard(stats, { diff --git a/tests/renderTopLanguagesCard.test.js b/tests/renderTopLanguagesCard.test.js index 6b7ef62aa30dd..da152c22d1dce 100644 --- a/tests/renderTopLanguagesCard.test.js +++ b/tests/renderTopLanguagesCard.test.js @@ -15,6 +15,7 @@ import { donutCenterTranslation, trimTopLanguages, renderTopLanguages, + DEFAULT_CARD_WIDTH, MIN_CARD_WIDTH, getDefaultLanguagesCountByLayout, } from "../src/cards/top-languages-card.js"; @@ -428,7 +429,10 @@ describe("Test renderTopLanguages", () => { it("should render with custom width set", () => { document.body.innerHTML = renderTopLanguages(langs, {}); - expect(document.querySelector("svg")).toHaveAttribute("width", "300"); + expect(document.querySelector("svg")).toHaveAttribute( + "width", + DEFAULT_CARD_WIDTH.toString(), + ); document.body.innerHTML = renderTopLanguages(langs, { card_width: 400 }); expect(document.querySelector("svg")).toHaveAttribute("width", "400"); From 49aef2ecbc7e5cedd8cc32328da937e82478c412 Mon Sep 17 00:00:00 2001 From: airwaks <114548361+airwakz@users.noreply.github.com> Date: Mon, 16 Oct 2023 16:27:13 +0530 Subject: [PATCH 17/21] Update readme.md --- readme.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/readme.md b/readme.md index ff826b3f6e863..dfe8dcaa4526c 100644 --- a/readme.md +++ b/readme.md @@ -366,7 +366,8 @@ If we don't support your language, please consider contributing! * `hide` - Hides the [specified items](#hiding-individual-stats) from stats *(Comma-separated values)*. Default: `[] (blank array)`. * `hide_title` - *(boolean)*. Default: `false`. -* `card_width` - Sets the card's width manually *(number)*. Default: `500px (approx.)`. +* `card_width` - Sets the card's width manually *(number)*. Default: `287px (approx.)`. +* `card_min_width` - Sets the minimum card's width *(number)*. Default: `287px (approx.)`. * `hide_rank` - *(boolean)* hides the rank and automatically resizes the card width. Default: `false`. * `rank_icon` - Shows alternative rank icon (i.e. `github`, `percentile` or `default`). Default: `default`. * `show_icons` - *(boolean)*. Default: `false`. @@ -397,6 +398,7 @@ If we don't support your language, please consider contributing! * `hide_title` - *(boolean)*. Default: `false`. * `layout` - Switches between five available layouts `normal` & `compact` & `donut` & `donut-vertical` & `pie`. Default: `normal`. * `card_width` - Sets the card's width manually *(number)*. Default `300`. +* `card_min_width` - Sets the card's minimum width *(number)*.Default `280`. * `langs_count` - Shows more languages on the card, between 1-20 *(number)*. Default: `5` for `normal` and `donut`, `6` for other layouts. * `exclude_repo` - Excludes specified repositories *(Comma-separated values)*. Default: `[] (blank array)`. * `custom_title` - Sets a custom title for the card *(string)*. Default `Most Used Languages`. From fa2a74df84c217e27007118578397f269ecb91b3 Mon Sep 17 00:00:00 2001 From: airwaks <114548361+airwakz@users.noreply.github.com> Date: Mon, 16 Oct 2023 16:28:35 +0530 Subject: [PATCH 18/21] Update readme.md --- readme.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/readme.md b/readme.md index dfe8dcaa4526c..970295bdb06b5 100644 --- a/readme.md +++ b/readme.md @@ -366,8 +366,8 @@ If we don't support your language, please consider contributing! * `hide` - Hides the [specified items](#hiding-individual-stats) from stats *(Comma-separated values)*. Default: `[] (blank array)`. * `hide_title` - *(boolean)*. Default: `false`. -* `card_width` - Sets the card's width manually *(number)*. Default: `287px (approx.)`. -* `card_min_width` - Sets the minimum card's width *(number)*. Default: `287px (approx.)`. +* `card_width` - Sets the card's width manually *(number)*. Default: `287px`. +* `card_min_width` - Sets the minimum card's width *(number)*. Default: `287px`. * `hide_rank` - *(boolean)* hides the rank and automatically resizes the card width. Default: `false`. * `rank_icon` - Shows alternative rank icon (i.e. `github`, `percentile` or `default`). Default: `default`. * `show_icons` - *(boolean)*. Default: `false`. @@ -397,8 +397,8 @@ If we don't support your language, please consider contributing! * `hide` - Hides the languages specified from the card *(Comma-separated values)*. Default: `[] (blank array)`. * `hide_title` - *(boolean)*. Default: `false`. * `layout` - Switches between five available layouts `normal` & `compact` & `donut` & `donut-vertical` & `pie`. Default: `normal`. -* `card_width` - Sets the card's width manually *(number)*. Default `300`. -* `card_min_width` - Sets the card's minimum width *(number)*.Default `280`. +* `card_width` - Sets the card's width manually *(number)*. Default `300px`. +* `card_min_width` - Sets the card's minimum width *(number)*.Default `280px`. * `langs_count` - Shows more languages on the card, between 1-20 *(number)*. Default: `5` for `normal` and `donut`, `6` for other layouts. * `exclude_repo` - Excludes specified repositories *(Comma-separated values)*. Default: `[] (blank array)`. * `custom_title` - Sets a custom title for the card *(string)*. Default `Most Used Languages`. From d6816a3c76b25f5b4c41262b48bba80505f1e958 Mon Sep 17 00:00:00 2001 From: airwaks <114548361+airwakz@users.noreply.github.com> Date: Tue, 17 Oct 2023 19:45:31 +0530 Subject: [PATCH 19/21] Update readme.md --- readme.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/readme.md b/readme.md index 970295bdb06b5..7f9d93a763570 100644 --- a/readme.md +++ b/readme.md @@ -387,6 +387,24 @@ If we don't support your language, please consider contributing! #### Repo Card Exclusive Options * `show_owner` - Shows the repo's owner name *(boolean)*. Default: `false`. +* `icon_size` - Sets the icon size manually *(number)*. Default: `16px`. +* `getBadgeSVG` - Retrieves the repository description and wraps it to fit the card width. +* `renderRepoCard` * Renders repository card details (i.e. `name`,`nameWithOwner`,`description`,`primaryLanguage`,`isArchived`,`isTemplate`,`starCount`). Default: `default`. +* `lineheight` - Sets line height manually *(number)*.Default:16. +* `header` - Shows header with `showOwner` and `namewithOwner` . +* `langName` - Stores the name of the primary programming language used in the repository. +* `langColor` - Stores the color associated with the primary programming language used in the repository. +* `desc` - Stores the description of the GitHub repository. Emojis are parsed within this description. +* `multiLineDescription` - Stores the description text broken into multiple lines to fit within the card's layout. +* `descriptionLines` - Represents the number of lines in the description. +* `descriptionSvg.Number` - Contains SVG text for rendering the repository description on the card. +* `height` - Represents the height of the GitHub repository card. It is calculated based on the number of lines in the description. +* `i18n` - Provides internationalization support and translations for the card. +* `colors` - Contains theme-based colors used for rendering the card, including title color, icon color, text color, background color, and border color. +* `svgLanguage` - Contains SVG representation of the primary programming language label. +* `totalStars` - Stores the total number of stars (GitHub repository stargazers) in a human-readable format. +* `totalForks` - Stores the total number of forks (GitHub repository forks) in a human-readable format. +* `starAndForkCount` - Contains SVG representation of stars and forks count along with the primary language label. #### Gist Card Exclusive Options From 91ba93ecf3ce53f4c61dbded2a987ddcf9b9ab64 Mon Sep 17 00:00:00 2001 From: airwaks <114548361+airwakz@users.noreply.github.com> Date: Wed, 18 Oct 2023 10:57:18 +0530 Subject: [PATCH 20/21] Update repo-card.js --- src/cards/repo-card.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/cards/repo-card.js b/src/cards/repo-card.js index 1cab42341f457..a24cc0a36155e 100644 --- a/src/cards/repo-card.js +++ b/src/cards/repo-card.js @@ -2,6 +2,7 @@ import { Card } from "../common/Card.js"; import { I18n } from "../common/I18n.js"; import { icons } from "../common/icons.js"; + import { encodeHTML, flexLayout, @@ -18,6 +19,7 @@ import { repoCardLocales } from "../translations.js"; const DEFAULT_CARD_WIDTH = 300; const MIN_CARD_WIDTH = 400; const ICON_SIZE = 16; +const card_height = undefined ; /** * Retrieves the repository description and wraps it to fit the card width. @@ -76,6 +78,7 @@ const renderRepoCard = (repo, options = {}) => { border_color, locale, card_width, + card_height, } = options; const lineHeight = 10; @@ -104,6 +107,9 @@ const renderRepoCard = (repo, options = {}) => { : DEFAULT_CARD_WIDTH; const height = (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight; + const height = card_height ?? ( + (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight +); // returns theme based colors with proper overrides and defaults const colors = getCardColors({ From 4147062858605a6f57f76e454d30b3ad87c7b968 Mon Sep 17 00:00:00 2001 From: airwaks <114548361+airwakz@users.noreply.github.com> Date: Wed, 18 Oct 2023 21:52:45 +0530 Subject: [PATCH 21/21] Update readme.md