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.