gitmyhub

github-project-cards

TypeScript ★ 17 updated 1mo ago

Open-source tool to generate beautiful, customizable GitHub project cards with live preview, themes, and easy integration for READMEs and portfolios.

Hosted service that returns SVG cards summarising a GitHub repo so you can embed them in a README or profile with a single markdown line.

Next.jsReactTypeScriptSatoriVercelsetup: easycomplexity 2/5

GitHub Project Cards is a small open source tool that generates picture-style cards summarising a GitHub repository. The cards are produced as SVG images, which means you can drop them into a README, a portfolio site, a documentation page, or a profile page by pasting a single markdown line. The image is fetched on demand from a hosted URL, so there is no copy-and-paste of any code into your own project.

The basic usage is one markdown line, where you put the owner and repository name into the URL's query string. The endpoint then returns a card with the repository's name, description, and other details rendered into an image. The README shows extra query parameters you can add: a theme name, a locale, a custom image, a list of technologies to display, and switches to show or hide the star count and fork count.

Four themes are listed in the README, called Dark, Light, GitHub, and Dracula, and there are two locales available, Brazilian Portuguese and English. There is also a live preview page on the project's hosted site where you can adjust the card's options visually and copy the resulting markdown when you are happy with it.

The project itself is built with Next.js, React, TypeScript, and a rendering library called Satori, and it is set up for deployment on Vercel. The README invites people to deploy their own copy on Vercel if they want to host the card service themselves. Contributions are welcomed through a CONTRIBUTING.md file in the repository, and the code is released under the MIT license. The project keeps its scope narrow: it makes one kind of card, with a small set of theme and content options, and exposes it as a URL you can embed anywhere markdown is rendered.

Where it fits