render preview image url in card, when imageUrl is provided

[bikrantjajware]

Fixes #3144

Updates to Card

• add Social Preview image of repo to the Card header

Screenshot

[vercel[bot]]

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

A member of the Team first needs to authorize it.

[bikrantjajware]

Hello @rickstaa , thanks for the suggestions. Addressed the comments and added tests + update documentations. Let me know if i should cover any more test scenarios :)

[rickstaa]

Hello @rickstaa , thanks for the suggestions. Addressed the comments and added tests + update documentations. Let me know if i should cover any more test scenarios :)

Thanks for addressing my points. I think your pull request is good to be merged. I, however, noticed that it doesn't seem to work on the deployed instance 🤔.

[bikrantjajware]

Looks like github hides the image behind some proxy (https://github.com/orgs/community/discussions/30326), and probably the proxy service (camo) is unable to read the repo image (maybe timed out error). I'll look into possible solutions Maybe change in the way we render image in svg

[bikrantjajware]

Hello @rickstaa , i'm converting the repo_image to a base64 string data and using that to render the header image. Tested with deployed vercel url probably should work now.

[rickstaa]

Thanks a bunch for incorporating the requested tweaks and squashing that bug! The changes look stellar.

](https://github.com/anuraghazra/github-readme-stats)

[![GitHub Readme Card](https://github-readme-stats-wlrp4x0wa-rickstaa.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&show_image=true)](https://github.com/anuraghazra/github-readme-stats)

And the cleanup on the second snippet is on point.

[![GitHub Readme Card](https://github-readme-stats-wlrp4x0wa-rickstaa.vercel.app/api/pin/?username=rickstaa&repo=tmux-notify&show_image=true)](https://github.com/anuraghazra/github-readme-stats)

With that docstring in place, your code gets a solid thumbs up. The only puzzle piece left is nailing down the styling for repositories rocking custom social images (see the example below). I've tossed the topic over to @qwerty541 for a second opinion 👍🏻.

[![GitHub Readme Card](https://github-readme-stats-wlrp4x0wa-rickstaa.vercel.app/api/pin/?username=rickstaa&repo=github-emoji-picker&show_image=true)](https://github.com/anuraghazra/github-readme-stats)

[bikrantjajware]

Thanks @rickstaa :) , for custom images we can set social images in repo > settings > social preview and upload an image

[rickstaa]

Thanks @rickstaa :) , for custom images we can set social images in repo > settings > social preview and upload an image

Hello @bikrantjajware, thank you for your prompt response. I apologize for any confusion in my previous message. While I am familiar with setting a custom image (as demonstrated in example three), my current query pertains to the card styling when users opt for such custom images. Specifically, I've observed a lack of padding at the top. Could you kindly provide clarification on this matter? Your insights would be greatly appreciated. Thank you.

[bikrantjajware]

Hello @rickstaa , do you mean something like this with padding-top, it looks a bit standing out

or do you mean like filling the entire card width

[rickstaa]

Hello @rickstaa , do you mean something like this with padding-top, it looks a bit standing out

or do you mean like filling the entire card width

I meant the first option since the second option would be undoable, given that users can define any social image they like 😅. Let's see which formatting @qwerty541 prefers 👍🏻.

[bikrantjajware]

oh i see, probably customizing with url params ? for 2nd option we can set preserveAspectRatio to none on image tag, though it stretches to fill entire width :)

[rickstaa]

oh, i see, probably customizing with url params ? for 2nd option we can set preserveAspectRatio to none on image tag, though it stretches to fill entire width :)

@bikrantjajware, thanks for the fast response. We don't need to add a URL parameter for the top padding. We simply have to decide on what styling we want to apply. The options we now discussed are:

• Use top padding.
• Se preserveAspectRatio to none.

Let's wait and see what the other collaborators think about this 👍🏻. Also, please bear in mind that since we are a small team, PRs are merged in the main branch based on the community's interest (see https://github.com/anuraghazra/github-readme-stats/issues/1935). After that, we typically merge popular pull requests when more than 2 collaborators approve them. It could, therefore, take some time until your PR shows up on the main branch 😅.