Add card generation website

[rickstaa]

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

I think it would be nice to have a card creation website for this project. This would allow users to generate the markdown code for our card using a simple interface. @anuraghazra, I vaguely remember you already did some work on this. No pressure, I just created this issue so we can track this feature.

Example

I think something like https://github-readme-streak-stats.herokuapp.com/demo would be amazing! Unfortunately, this example is coded in PHP. For future maintainability, I however think using a framework like React with https://mui.com is the better choice (see https://github.com/DenverCoder1/github-readme-streak-stats/tree/main/src/demo).

[arnu515]

Hello @rickstaa I would like to work on this as part of hacktoberfest.

I know React and Svelte and TailwindCSS. I can use typescript with this too.

Please assign me this issue

[rickstaa]

@arnu515, thank you very much for offering to take on this issue! 🚀 I think your contribution will be very significant. I assigned you to the issue. I know that @anuraghazra already did some work on this, so maybe he can share what he did so you can use it as a starting point. My preference would go to a website implemented in typescript using React.

[arnu515]

Should I implement it from scratch or wait for @anuraghazra to reply. Ill use React+Vite with typescript and TailwindCSS. Let me know if you want me to use NextJS instead.

…

-------- Original Message --------

On 3 Oct 2022, 16:41, Rick Staa wrote: Assigned [#1761](#1761) to ***@***.***(https://github.com/arnu515). — Reply to this email directly, [view it on GitHub](#1761 (comment)), or [unsubscribe](https://github.com/notifications/unsubscribe-auth/AMOJCNDX65HZYLTRC5OQWTLWBK5OPANCNFSM5WHTJPBQ). You are receiving this because you were assigned.Message ID: ***@***.***>

[rickstaa]

Should I implement it from scratch or wait for @anuraghazra to reply. Ill use React+Vite with typescript and TailwindCSS. Let me know if you want me to use NextJS instead.
…
-------- Original Message --------
On 3 Oct 2022, 16:41, Rick Staa wrote: Assigned #1761 to @.(https://github.com/arnu515). — Reply to this email directly, [view it on GitHub](#1761 (comment)), or unsubscribe. You are receiving this because you were assigned.Message ID: @.>

I'm familiar with those frameworks, so it looks like a good setup. Since I know that @anuraghazra has been working on this in the past, I think it is best to wait for his reply. It could be that he already finished this issue but had no time to push the changes to the master.

[anuraghazra]

@arnu515 I would say hold onto this one.

Here's what I've been building, but didn't got time to progress further.
https://twitter.com/anuraghazru/status/1432065428746956803

The reason I'm saying to hold because

• As you can see the card preview updates are happening very dynamically with every keypress
• And to make it this much interactive you cannot just refetch it every time, you need to actually render the card with the github-readme-stats render functions on the client side.
• And to do that, we need some special changes to github-readme-stats like publishing the parts of it as an npm package so we can npm install the render functions.

On the video demo which I've built I'm doing it locally just in a hacky way.

[arnu515]

I see. Alright then. Thanks

[rickstaa]

@arnu515 I would say hold onto this one.

Here's what I've been building, but didn't got time to progress further. https://twitter.com/anuraghazru/status/1432065428746956803

The reason I'm saying to hold because

• As you can see the card preview updates are happening very dynamically with every keypress
• And to make it this much interactive you cannot just refetch it every time, you need to actually render the card with the github-readme-stats render functions on the client side.
• And to do that, we need some special changes to github-readme-stats like publishing the parts of it as an npm package so we can npm install the render functions.

On the video demo which I've built I'm doing it locally just in a hacky way.

Very clear explanation. Maybe we can extend #2151 to also export the card render functions?

[rickstaa]

Just found another example of card generation we can look at https://awesome-github-stats.azurewebsites.net/.

[rickstaa]

This is the codebase the last example is based on https://streak-stats.demolab.com/demo/ might anybody want to take it on!

[rickstaa]

Another example https://github.com/joshxfi/github-stats-generator.

[yaten2302]

Hi @anuraghazra making a card generation website is a really good idea.

I know HTML, CSS, Tailwind CSS and JavaScript. I would love to work on this issue, if it's ok with you?

But actually, I don't have knowledge about ReactJS or Svelte, if it's ok with you, then can we make this website in Tailwind and JavaScript?

[rickstaa]

Hi @anuraghazra making a card generation website is a really good idea.

I know HTML, CSS, Tailwind CSS and JavaScript. I would love to work on this issue, if it's ok with you?

But actually, I don't have knowledge about ReactJS or Svelte, if it's ok with you, then can we make this website in Tailwind and JavaScript?

Hey @yaten2302, thanks a lot for wanting to contribute to our project. Sadly, I think this feature is, however, blocked by #2473, which I or any of the other collaborators still have to review 😅.

[yaten2302]

Hi @rickstaa, since we are using vercel, for rendering of the cards, I guess, the main problem is that there is a limit of 5k requests per hour.

To avoid this, instead of using vercel, can we create our own database and then link it with the website? So that whichever card the users want can get it and the link will be there on our database, so it can be used by the user anywhere.

[rickstaa]

Hi @rickstaa, since we are using vercel, for rendering of the cards, I guess, the main problem is that there is a limit of 5k requests per hour. To avoid this, instead of using vercel, can we create our own database and then link it with the website? So that whichever card the users want can get it and the link will be there on our database, so it can be used by the user anywhere.

@yaten2302 Thanks for your suggestion! I discussed a similar solution some time ago with @anuraghazra and in the end, we decided to go with a github action (see #2179).

[yaten2302]

Hi @rickstaa, since we are using vercel, for rendering of the cards, I guess, the main problem is that there is a limit of 5k requests per hour. To avoid this, instead of using vercel, can we create our own database and then link it with the website? So that whichever card the users want can get it and the link will be there on our database, so it can be used by the user anywhere.

@yaten2302 Thanks for your suggestion! I discussed a similar solution some time ago with @anuraghazra and in the end, we decided to go with a github action (see #2179).

@rickstaa, actually I've a doubt, as far as I know GitHub actions is used only for testing the pull requests, so how will this be used in the website?

[qwerty541]

Hi @rickstaa, since we are using vercel, for rendering of the cards, I guess, the main problem is that there is a limit of 5k requests per hour. To avoid this, instead of using vercel, can we create our own database and then link it with the website? So that whichever card the users want can get it and the link will be there on our database, so it can be used by the user anywhere.

@yaten2302 We are limited by 5k requests per hour by GitHub API from which we fetch stats card data, it's not Vercel issue. Vercel also provide some limits, i do not know which exactly for paid plan, but it's almost impossible to reach them. We cannot have own database since it's impossible for us to fill it with private GitHub users data and frequently update it.

Hey @yaten2302, thanks a lot for wanting to contribute to our project. Sadly, I think this feature is, however, blocked by #2473, which I or any of the other collaborators still have to review 😅.

@rickstaa I'm not sure that this feature is blocked. We can just add index endpoint that will return HTML page instead of current redirecting on this repository. This page will contains simple link constructor. I thought on this because i wanted to personally implement that feature in future. The only problem that card generation will not work during public instance downtime, may be this is the reason why you think that this feature blocked by #2473.

@rickstaa, actually I've a doubt, as far as I know GitHub actions is used only for testing the pull requests, so how will this be used in the website?

@yaten2302 GitHub action will be installed on user's readme repositoies, it will generate card SVG file with certain frequency and store it / overwrite previous version. User's will use link on generated file in their readmes instead of link on public Vercel deployment. I also expect that installation will require own GitHub API token. It will be a new recommended way of using github-readme-stats and it will reduce load on public instance and our PATs (GitHub API tokens).

[rickstaa]

@rickstaa I'm not sure that this feature is blocked. We can just add index endpoint that will return HTML page instead of current redirecting on this repository. This page will contains simple link constructor. I thought on this because i wanted to personally implement that feature in future. The only problem that card generation will not work during public instance downtime, may be this is the reason why you think that this feature blocked by #2473.

@qwerty541 you are right the feature is not directly blocked by #2473. As explained by @anuraghazra in #1761 (comment) however having the npm package released will simplify the implementation of this feature. If you want to take this feature on in the future you should discuss it with @anuraghazra since he already implemented parts of it 👍🏻.

[factman]

@rickstaa @anuraghazra @qwerty541
I've been going through the issue and I can see you guys have been on this for a while, and I appreciate you guys for making this in the first place and the time you’ve dedicated to this project, I'd love to jump on this ASAP. I can be a catalyst to speed up this process, as I currently have much time at my disposal.

The website is very important, and I'll suggest you have the website for the current API before introducing new APIs and inevitably Breaking Changes based on @qwerty541 comment

@yaten2302 GitHub action will be installed on user's readme repositoies, it will generate card SVG file with certain frequency and store it / overwrite previous version. User's will use link on generated file in their readmes instead of link on public Vercel deployment. I also expect that installation will require own GitHub API token. It will be a new recommended way of using github-readme-stats and it will reduce load on public instance and our PATs (GitHub API tokens).

I already have some ideas on what the website should look like and the functionality to implement to make it very interactive and user-friendly.

Looking forward to hearing from you