Use profile picture as a rank icon

alex8obrien commented 1 year ago

Is your feature request related to a problem? Please describe.

I don't really want to show my rank on the stats page since its fairly low, but I think the GitHub icon could be improved by also allowing the use of the owners profile picture.

Describe the solution you'd like

As the icon keyword you could use profile and then use the GitHub api to return the users profile picure.
The same user account can be used as the given rank username for the vercel API.
My idea would also keep the ring around the edge of the icon and just place the icon inside the ring like the current github logo does

Describe alternatives you've considered

One alternative is allowing custom images but that would be more work than required for my request and would run into issues with pictures that dont conform to the circle used for the rank. So using the API is the simplier option especially since its already being used to retrieve stats for the rank.

Additional context

No response

yaten2302 commented 1 year ago

Hi @alex8obrien, this is a really good issue by allowing the users to put their profile picture, can we work on this issue together, if it's ok with you?

alex8obrien commented 1 year ago

Yeah I'd love to work together on this. Currently, the program uses SVGs as the rank icon but GitHub only provides PNGs for a users profile picture. One solution could be to convert the function to return a png instead, requiring the other options to first convert their SVGs.

rickstaa commented 1 year ago

SVGs

Hey @alex8obrien and @yaten2302, thanks for your feature request. Including pngs inside svgs is possible:

<svg>
  <image href="https://avatars.githubusercontent.com/u/17570430?v=4" x="0" y="0" width="100" height="100" />
</svg>

See https://www.w3.org/TR/SVG11/struct.html#ImageElement. Feel free to create a PR.

My only concern with this feature request is that it adds another endpoint that can fail(i.e. https://avatars.githubusercontent.com/u) and that, in theory, it could cause Vercels execution timeout to be reached if the github CDN is slow or the image is massive (see https://vercel.com/docs/limits/overview. However, I don't expect this to happen since the CDN is fast and the max profile picture size is 1 Mb (see https://docs.github.com/en/github-ae@latest/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/personalizing-your-profile).

@qwerty541 and @anuraghazra, what do you think of this feature?

yaten2302 commented 1 year ago

Hi, I was trying to add the "Avatar" in the GitHub Stats, but I'm not getting profile pic, instead I'm getting "NaN", can anyone please help me out with this

rickstaa commented 1 year ago

Hi, I was trying to add the "Avatar" in the GitHub Stats, but I'm not getting profile pic, instead I'm getting "NaN", can anyone please help me out with this

I'm a bit confused as to why the Avatar stat shows up. This feature request is about changing the rank letter (e.g. B+, C+ etc.) to the user's GitHub avatar. Similar to the rank_icon=github feature.

[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&rank_icon=github)](https://github.com/anuraghazra/github-readme-stats)

I did not have time yet to review https://github.com/anuraghazra/github-readme-stats/pull/3145/files.

yaten2302 commented 1 year ago

Actually, my main aim is to replace the rank letter with the user's GitHub profile pic(or GitHub Avatar), but, before doing that, I was trying to get the user's GitHub avatar(as shown), but it is showing "NaN".

yaten2302 commented 1 year ago

I've made some changes in the code, should I create a PR, so that you can review it, and guide that where am I going wrong?

rickstaa commented 1 year ago

I've made some changes in the code, should I create a PR, so that you can review it, and guide that where am I going wrong?

Ah, I see. I think @alex8obrien already made a PR for this. You can find it PR at https://github.com/anuraghazra/github-readme-stats/pull/3145/files.

yaten2302 commented 1 year ago

I've made some changes in the code, should I create a PR, so that you can review it, and guide that where am I going wrong?

Ah, I see. I think @alex8obrien already made a PR for this. You can find it PR at https://github.com/anuraghazra/github-readme-stats/pull/3145/files.

Yes, I've understood the PR, but I'm confused that if we want to add something in the "readme stats"

Like here, just for trial, I've added test and I've set the value as user.name, but I'm getting NaN.

qwerty541 commented 1 year ago

I've made some changes in the code, should I create a PR, so that you can review it, and guide that where am I going wrong?

Ah, I see. I think @alex8obrien already made a PR for this. You can find it PR at https://github.com/anuraghazra/github-readme-stats/pull/3145/files.

Yes, I've understood the PR, but I'm confused that if we want to add something in the "readme stats" Like here, just for trial, I've added test and I've set the value as user.name, but I'm getting NaN.

@yaten2302 You can check my recent pull request https://github.com/anuraghazra/github-readme-stats/pull/3003 for example of adding new stats on the card. There was added ability to show count and percentage of merged pull requests

qwerty541 commented 1 year ago

SVGs

Hey @alex8obrien and @yaten2302, thanks for your feature request. Including pngs inside svgs is possible:
<svg>
  <image href="https://avatars.githubusercontent.com/u/17570430?v=4" x="0" y="0" width="100" height="100" />
</svg>
See https://www.w3.org/TR/SVG11/struct.html#ImageElement. Feel free to create a PR.

My only concern with this feature request is that it adds another endpoint that can fail(i.e. https://avatars.githubusercontent.com/u) and that, in theory, it could cause Vercels execution timeout to be reached if the github CDN is slow or the image is massive (see https://vercel.com/docs/limits/overview. However, I don't expect this to happen since the CDN is fast and the max profile picture size is 1 Mb (see https://docs.github.com/en/github-ae@latest/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/personalizing-your-profile).

@qwerty541 and @anuraghazra, what do you think of this feature?

@rickstaa Personally, I don't think there is a need for this feature and personally I don't intend to use it. But since this is a community project, if there is demand, I have nothing against it.

About the possible Vercel execution timeout, i expect that this feature should not affect on that since we should just put link on the avatar image inside card SVG code, it should not be downloaded or etc. This feature can only increase workload for GitHub CDN which reuploads images from Vercel instance and users browser.

rickstaa commented 1 year ago

SVGs

Hey @alex8obrien and @yaten2302, thanks for your feature request. Including pngs inside svgs is possible:
<svg>
  <image href="https://avatars.githubusercontent.com/u/17570430?v=4" x="0" y="0" width="100" height="100" />
</svg>
See https://www.w3.org/TR/SVG11/struct.html#ImageElement. Feel free to create a PR. My only concern with this feature request is that it adds another endpoint that can fail(i.e. https://avatars.githubusercontent.com/u) and that, in theory, it could cause Vercels execution timeout to be reached if the github CDN is slow or the image is massive (see https://vercel.com/docs/limits/overview. However, I don't expect this to happen since the CDN is fast and the max profile picture size is 1 Mb (see https://docs.github.com/en/github-ae@latest/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/personalizing-your-profile). @qwerty541 and @anuraghazra, what do you think of this feature?
@rickstaa Personally, I don't think there is a need for this feature and personally I don't intend to use it. But since this is a community project, if there is demand, I have nothing against it.

About the possible Vercel execution timeout, i expect that this feature should not affect on that since we should just put link on the avatar image inside card SVG code, it should not be downloaded or etc. This feature can only increase workload for GitHub CDN which reuploads images from Vercel instance and users browser.

Same for me, although I'm not going to use the feature myself as long as it doesn't create any performance issues, I'm okay with merging it if there is enough interest from the community (i.e. +1's). I think https://github.com/anuraghazra/github-readme-stats/pull/3141#issuecomment-1694168160, which I still need to review, will help check for any issues 👍🏻.

yaten2302 commented 1 year ago

I've made some changes in the code, should I create a PR, so that you can review it, and guide that where am I going wrong?

Ah, I see. I think @alex8obrien already made a PR for this. You can find it PR at https://github.com/anuraghazra/github-readme-stats/pull/3145/files.

Yes, I've understood the PR, but I'm confused that if we want to add something in the "readme stats" Like here, just for trial, I've added test and I've set the value as user.name, but I'm getting NaN.

@yaten2302 You can check my recent pull request #3003 for example of adding new stats on the card. There was added ability to show count and percentage of merged pull requests

Hi @qwerty541, for adding the stats cards, I've done same as you have, but mine is not working, could you please help🙏

rickstaa commented 1 year ago

I've made some changes in the code, should I create a PR, so that you can review it, and guide that where am I going wrong?

Ah, I see. I think @alex8obrien already made a PR for this. You can find it PR at https://github.com/anuraghazra/github-readme-stats/pull/3145/files.

Yes, I've understood the PR, but I'm confused that if we want to add something in the "readme stats" Like here, just for trial, I've added test and I've set the value as user.name, but I'm getting NaN.

@yaten2302 You can check my recent pull request #3003 for example of adding new stats on the card. There was added ability to show count and percentage of merged pull requests

Hi @qwerty541, for adding the stats cards, I've done same as you have, but mine is not working, could you please help🙏

@yaten2302 It's hard to help you without seeing the code 😅. I think it is best that you share your branch with us. Additionally, please see the CONTRIBUTING.md file on how to debug your code locally.

yaten2302 commented 1 year ago

Yeah, I've made some changes in the code, will just share the link 👍 - https://github.com/yaten2302/github-readme-stats

qwerty541 commented 1 year ago

@yaten2302 Unfortunately currently i do not have time to checkout and debug your branch locally. But i can assume that the reason of your problem is calling kFormatter() function on each stats value since we do not expect to have some non-numeric stats.

https://github.com/anuraghazra/github-readme-stats/blob/ce18431b5499134aa4d01b7caa4371d467c50e3a/src/cards/stats-card.js#L52

This function will not be called if you pass &number_format=long query option, you can check if your test string will pass in that case.

yaten2302 commented 1 year ago

@yaten2302 Unfortunately currently i do not have time to checkout and debug your branch locally. But i can assume that the reason of your problem is calling kFormatter() function on each stats value since we do not expect to have some non-numeric stats.

https://github.com/anuraghazra/github-readme-stats/blob/ce18431b5499134aa4d01b7caa4371d467c50e3a/src/cards/stats-card.js#L52

This function will not be called if you pass &number_format=long query option, you can check if your test string will pass in that case.

Yes this was only the problem, got it, thank you 😊

anuraghazra / github-readme-stats