Add card generation website

rickstaa commented 2 years ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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, or unsubscribe. You are receiving this because you were assigned.Message ID: @.***>

rickstaa commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

I see. Alright then. Thanks

rickstaa commented 1 year ago

@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 commented 1 year ago

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

rickstaa commented 1 year ago

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

rickstaa commented 1 year ago

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

yaten2302 commented 10 months ago

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 commented 8 months ago

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 https://github.com/anuraghazra/github-readme-stats/pull/2473, which I or any of the other collaborators still have to review 😅.

yaten2302 commented 8 months ago

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 commented 8 months ago

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 https://github.com/anuraghazra/github-readme-stats/issues/2179).

yaten2302 commented 8 months ago

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 commented 8 months ago

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 https://github.com/anuraghazra/github-readme-stats/pull/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 https://github.com/anuraghazra/github-readme-stats/pull/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 commented 8 months ago

@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 https://github.com/anuraghazra/github-readme-stats/pull/2473.

@qwerty541 you are right the feature is not directly blocked by #2473. As explained by @anuraghazra in https://github.com/anuraghazra/github-readme-stats/issues/1761#issuecomment-1270596602 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 commented 1 month ago

@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

anuraghazra / github-readme-stats

Add card generation website #1761