Add `card_width` variable to the repository card #3368 #3359

airwakz · 2023-10-14T13:09:13Z

I added the card_width and card_height parameters to the renderRepoCard function, allowing users to specify the card's width and height when calling the function. If these arguments are not provided, it falls back to default values.
Issue Number#2900

vercel · 2023-10-14T13:09:17Z

@airwakz is attempting to deploy a commit to the github readme stats Team on Vercel.

A member of the Team first needs to authorize it.

airwakz · 2023-10-14T13:37:08Z

@rickstaa here is thep pr please review it

airwakz · 2023-10-14T15:07:07Z

@

airwakz · 2023-10-14T20:55:17Z

@qwerty541 check this please

airwakz · 2023-10-14T21:45:36Z

@rickstaa check it out

src/cards/repo-card.js

rickstaa · 2023-10-15T08:56:39Z

src/cards/repo-card.js

@@ -87,8 +89,7 @@ const renderRepoCard = (repo, options = {}) => {
    .map((line) => `<tspan dy="1.2em" x="25">${encodeHTML(line)}</tspan>`)
    .join("");

-  const height =
-    (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;
+  const height = card_height || (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight;


Let's add a minimum card height to prevent the card height from being too small to display the card's content.

what height should i take

`/**

Renders repository card details.

@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 = {}, card_width, card_height) => {
// ... (existing code)

// Calculate a minimum card height to ensure content is visible
const minimumHeight = 150; // You can adjust this value as needed

// Calculate the final card height
const finalHeight = Math.max(
minimumHeight, // Ensure it doesn't go below the minimum height
(descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight
);

// ... (rest of the function)

const card = new Card({
defaultTitle: header.length > 35 ? ${header.slice(0, 35)}... : header,
titlePrefixIcon: icons.contribs,
width: card_width, // Use the calculated card width
height: card_height || finalHeight, // Use the provided card height or the calculated one
border_radius,
colors,
});

// ... (rest of the function)

return card.render(`
${
isTemplate
? // @ts-ignore
getBadgeSVG(i18n.t("repocard.template"), colors.textColor)
: isArchived
? // @ts-ignore
getBadgeSVG(i18n.t("repocard.archived"), colors.textColor)
: ""
}

<text class="description" x="25" y="-5"> ${descriptionSvg} </text> <g transform="translate(30, ${finalHeight - 75})"> ${starAndForkCount} </g>

); };

what height should i take

Judging from a repository with only a 1 line description, this height should be 118.8. You can check this out by going to https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats and checking out the height of the card using chromes developer tools.

`/**

Renders repository card details.

@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 = {}, card_width, card_height) => {
// ... (existing code)

// Calculate a minimum card height to ensure content is visible const minimumHeight = 150; // You can adjust this value as needed

// Calculate the final card height const finalHeight = Math.max( minimumHeight, // Ensure it doesn't go below the minimum height (descriptionLines > 1 ? 120 : 110) + descriptionLines * lineHeight );

// ... (rest of the function)

const card = new Card({ defaultTitle: header.length > 35 ? ${header.slice(0, 35)}... : header, titlePrefixIcon: icons.contribs, width: card_width, // Use the calculated card width height: card_height || finalHeight, // Use the provided card height or the calculated one border_radius, colors, });

// ... (rest of the function)

return card.render(` ${ isTemplate ? // @ts-ignore getBadgeSVG(i18n.t("repocard.template"), colors.textColor) : isArchived ? // @ts-ignore getBadgeSVG(i18n.t("repocard.archived"), colors.textColor) : "" }

<text class="description" x="25" y="-5"> ${descriptionSvg} </text> <g transform="translate(30, ${finalHeight - 75})"> ${starAndForkCount} </g>

); };

Please apply changes to the pull request. It is hard for me to review pasted code 😅.

You should apply the conditions for your minimum height here.

rickstaa · 2023-10-15T10:16:01Z

@airwakz Although I like your enthusiasm for implementing this feature request. Let's take a step back and clarify what was asked in #2900 😅. In this issue, the problem was that @razonyang wanted the ability to set the card width and height of the pin card. For this to be implemented:

First pull request: First, the card_width argument that is already present for the stats and language cards needs to be implemented for the pin card. You can use the code of the stats and language card to see how you can do this.
Second pull request: a new card_height argument must be added. This code will be similar to that of the card_width pull request.

For this, you don't need to touch the code of the language and stats cards. Although another feature request is open for these cards, I assigned @anmolchhabra21 to this (see #3159). If you have any questions, feel free to comment below 😄.

rickstaa · 2023-10-15T11:07:05Z

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


@airwakz can you remove these changes? These changes are not related to the pinned card. You should add your changes to https://github.com/anuraghazra/github-readme-stats/blob/master/api/pin.js.

src/cards/repo-card.js

rickstaa · 2023-10-15T14:20:54Z

src/cards/repo-card.js

@@ -134,10 +137,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;


We also need to apply a minimum card width. Similar to is done in the langs and stats cards.

src/cards/top-languages-card.js

rickstaa · 2023-10-15T14:21:41Z

api/top-langs.js

@@ -84,6 +84,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),


Let's not do this in this pull request but do it later in another pull request.

airwakz · 2023-10-15T16:43:42Z

i will make changes tomorrow as I have a college tomorrow .

Co-authored-by: Rick Staa <[email protected]>

rickstaa

@airwakz I reviewed your pull request and found bugs in your code. As a result, I decided to remove the card_height variable for now. I also added the required tests. Please take a look at the changes I made.

You can open a new pull request in which you add the correct code to specify the card height for the repo card. While doing so, please make sure you add the proper tests and test your code locally according to the contribution guide. We can then merge this pull request for adding the card_width variable.

rickstaa

@airwakz can you please add the right documentation to the README? See https://github.com/anuraghazra/github-readme-stats?tab=readme-ov-file#stats-card-exclusive-options for an example.

rickstaa · 2023-10-16T09:36:18Z

This pull request will solve #3368.

airwakz · 2023-10-16T09:44:54Z

i will add a documentation now

airwakz · 2023-10-17T04:44:45Z

@rickstaa i think i made the changes and the proper dicumentation in code is alerdy provided by you

rickstaa · 2023-10-17T08:50:31Z

@rickstaa i think i made the changes and the proper dicumentation in code is alerdy provided by you

Like I said in my previous commit, you added the documentation to the wrong section. The documentation should be added to the repo card section (i.e. https://github.com/anuraghazra/github-readme-stats?tab=readme-ov-file#repo-card-exclusive-options). If you could do that, it would be great.

airwakz · 2023-10-17T16:20:06Z

@rickstaa i make the changes in the documentation as requested by uh

rickstaa · 2023-10-18T16:18:10Z

@rickstaa i make the changes in the documentation as requested by uh

@airwakz, unfortunately, the documentation still needs to be corrected. You should only add the parameter you added card_width to the https://github.com/anuraghazra/github-readme-stats?tab=readme-ov-file#repo-card-exclusive-options section. Now you have added also the common parameters.

airwakz · 2023-10-18T17:19:24Z

I will change it now

qoomon · 2024-06-23T08:07:49Z

Any plans to merge this?

Update repo-card.js

0f2e07e

github-actions bot added the repo-card label Oct 14, 2023

airwakz changed the title ~~Update repo-card.js( Equal height for all pinned repositories)~~ Update repo-card.js( Equal height for all pinned repositories) Issue Number #2900 Oct 14, 2023

airwakz mentioned this pull request Oct 14, 2023

[Proposal] Equal height for all pinned repositories #2900

Closed

airwakz closed this Oct 14, 2023

airwakz reopened this Oct 14, 2023

rickstaa added the hacktoberfest-accepted label Oct 14, 2023

rickstaa requested changes Oct 15, 2023

View reviewed changes

airwakz added 2 commits October 15, 2023 15:00

Update repo-card.js

39c75af

Update top-langs.js

6348f24

github-actions bot added the lang-card Issues related to the language card. label Oct 15, 2023

airwakz added 2 commits October 15, 2023 15:26

Update top-languages-card.js

3241da6

Update repo-card.js

3afdb19

Update repo-card.js

4bc71ad

rickstaa reviewed Oct 15, 2023

View reviewed changes

airwakz added 3 commits October 15, 2023 18:37

Update top-langs.js

bf70a72

Update pin.js

bc645c0

Update top-languages-card.js

1c0928b

rickstaa reviewed Oct 15, 2023

View reviewed changes

src/cards/repo-card.js Outdated Show resolved Hide resolved

rickstaa reviewed Oct 15, 2023

View reviewed changes

src/cards/top-languages-card.js Outdated Show resolved Hide resolved

rickstaa reviewed Oct 15, 2023

View reviewed changes

Update src/cards/repo-card.js

ab5419b

Co-authored-by: Rick Staa <[email protected]>

rickstaa force-pushed the master branch from fa36dac to a732a27 Compare October 16, 2023 09:07

rickstaa approved these changes Oct 16, 2023

View reviewed changes

rickstaa force-pushed the master branch from a732a27 to c311a75 Compare October 16, 2023 09:13

rickstaa changed the title ~~Update repo-card.js( Equal height for all pinned repositories) Issue Number #2900~~ Add card_width variable to the repository card Oct 16, 2023

rickstaa requested a review from qwerty541 October 16, 2023 09:19

rickstaa requested changes Oct 16, 2023

View reviewed changes

fix: fix bugs and add tests

49b72b8

rickstaa force-pushed the master branch from c311a75 to 49b72b8 Compare October 16, 2023 09:33

rickstaa changed the title ~~Add card_width variable to the repository card~~ Add card_width variable to the repository card #3368 Oct 16, 2023

rickstaa linked an issue Oct 16, 2023 that may be closed by this pull request

Add pin card card_width argument #3368

Open

Update readme.md

49aef2e

github-actions bot added the documentation Improvements or additions to documentation. label Oct 16, 2023

Update readme.md

fa2a74d

rickstaa mentioned this pull request Oct 16, 2023

Add gist card card_width argument #3370

Open

rickstaa added repo-card Issues related to the pin/repo card. and removed repo-card labels Oct 16, 2023

Update readme.md

d6816a3

Update repo-card.js

91ba93e

rickstaa mentioned this pull request Oct 18, 2023

Fix card height Issue #3387

Closed

Update readme.md

4147062

rickstaa changed the title ~~Add card_width variable to the repository card #3368~~ Add card_width variable to the repository card #3368 Oct 30, 2023

rickstaa mentioned this pull request Oct 30, 2023

Add card_width argument to pin card #3406

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `card_width` variable to the repository card #3368 #3359

Add `card_width` variable to the repository card #3368 #3359

airwakz commented Oct 14, 2023

vercel bot commented Oct 14, 2023

airwakz commented Oct 14, 2023

airwakz commented Oct 14, 2023

airwakz commented Oct 14, 2023

airwakz commented Oct 14, 2023

rickstaa Oct 15, 2023

airwakz Oct 15, 2023

airwakz Oct 15, 2023

rickstaa Oct 15, 2023

rickstaa Oct 15, 2023

rickstaa Oct 15, 2023

rickstaa commented Oct 15, 2023

rickstaa Oct 15, 2023

rickstaa Oct 15, 2023

rickstaa Oct 15, 2023

airwakz commented Oct 15, 2023

rickstaa left a comment •

edited

Loading

rickstaa left a comment

rickstaa commented Oct 16, 2023

airwakz commented Oct 16, 2023

airwakz commented Oct 17, 2023

rickstaa commented Oct 17, 2023 •

edited

Loading

airwakz commented Oct 17, 2023

rickstaa commented Oct 18, 2023

airwakz commented Oct 18, 2023

qoomon commented Jun 23, 2024

Add card_width variable to the repository card #3368 #3359

Are you sure you want to change the base?

Add card_width variable to the repository card #3368 #3359

Conversation

airwakz commented Oct 14, 2023

vercel bot commented Oct 14, 2023

airwakz commented Oct 14, 2023

airwakz commented Oct 14, 2023

airwakz commented Oct 14, 2023

airwakz commented Oct 14, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rickstaa commented Oct 15, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

airwakz commented Oct 15, 2023

rickstaa left a comment • edited Loading

Choose a reason for hiding this comment

rickstaa left a comment

Choose a reason for hiding this comment

rickstaa commented Oct 16, 2023

airwakz commented Oct 16, 2023

airwakz commented Oct 17, 2023

rickstaa commented Oct 17, 2023 • edited Loading

airwakz commented Oct 17, 2023

rickstaa commented Oct 18, 2023

airwakz commented Oct 18, 2023

qoomon commented Jun 23, 2024

Add `card_width` variable to the repository card #3368 #3359

Add `card_width` variable to the repository card #3368 #3359

rickstaa left a comment •

edited

Loading

rickstaa commented Oct 17, 2023 •

edited

Loading