Only Api endpoint you need for GitHub widgets
Our API endpoint provides a simple and easy way to display various types of data from GitHub in a visual and interactive manner. With our API endpoint, users can easily create beautiful widgets that display data such as repository information, user activity, and much more.
One of the main benefits of our API endpoint is that it allows users to quickly and easily gain insights into their GitHub data. For example, a developer could use our widgets to track the progress of their repositories, see how many people are contributing to their projects, or view statistics about their commits and pull requests. This can be especially useful for open-source projects, as it provides a way for contributors and maintainers to quickly see the activity on a project at a glance.
Our API endpoint also makes it easy for users to customize the appearance of the widgets. By using SVG and JavaScript, we were able to create visualizations that are highly customizable and can be easily styled to match the look and feel of the user's website or application.
Additionally, our API endpoint is built with performance and scalability in mind. By using Next.js, we were able to create a server-rendered application that can handle a large number of requests and provide a fast and responsive user experience.
Overall, our API endpoint provides a simple and powerful way to display GitHub data in a visual and interactive manner, making it a great tool for developers, open-source projects and anyone who wants to gain insights into their GitHub data.
SVG OVER HTML
First challenge we encountered was determining the best format to send the data in the API response. We initially considered using JSON, but found that it wasn't the best option for displaying the visualizations. After some experimentation, we found that using SVG (Scalable Vector Graphics) provided the most flexibility and allowed us to create high-quality visualizations that could be easily rendered on different devices and screen sizes. Additionally, SVG is a widely supported format, making it easy to display the visualizations in a variety of contexts. To implement this, we used some SVG Design Tools to create the SVG elements and then used JavaScript to bind the data and update the visualizations in real time as the data changed. This allowed us to create interactive and dynamic visualizations that provided a great user experience.
- The Framework Game
Another challenge we encountered while building the API endpoint was choosing the best framework for handling the API requests. Initially, we considered using a Python framework such as Flask or Django, as they are popular and well-established options for building web applications. However, we soon realized that using a JavaScript framework would be more suitable for our project as it would allow us to easily handle network requests and interact with the front-end of the application.
After evaluating several options, we decided to use Next.js, a framework for building server-rendered React applications. Next.js made it easy to handle the API requests and allowed us to easily integrate the widgets into the front-end of the application. Additionally, Next.js has built-in support for server-side rendering, which allowed us to improve the performance of the application and provide a better user experience.
Furthermore, Next.js has built-in features like automatic code splitting and optimized production builds which made it easy for us to manage the project and make it production ready.
Overall, using Next.js was a great choice for our project as it allowed us to easily handle the API requests and create a high-performance and user-friendly application.
- Customizable Styles
One of the main features of our API endpoint is that it allows users to easily customize the appearance of the widgets. To implement this, we used CSS variables to allow users to easily change the colors and styles of the widgets. This allowed us to create highly customizable widgets that could be easily styled to match the look and feel of the user's website or application. Another challenge we faced was making sure that the widgets were responsive and looked good on different screen sizes. We solved this by using CSS media queries to adjust the layout of the widgets based on the screen size.
Overall, we faced some challenges but by utilizing different libraries, techniques and testing the project multiple time we were able to overcome them and completed the project successfully.
- Next.js
- CSS
- SVG
- GitHub API
- Vercel
- Nextra
- Replit
Banner API Endpoint provides a simple card for your buymeacoffee 🍵.
You can use this API endpoint to create a card for your github profile or any other website.
To get started, simply make a GET request to the following URL:
https://wiidgets.vercel.app/api/buymeacoffee?The following query parameters are available for use in the API endpoint:
slug (string): The handle for your buymeacoffee Profile.
Here's an example of how you might use the API to create a widget with the slug "abbhishek":
https://wiidgets.vercel.app/api/buymeacoffee?slug=abbhishek
The API endpoint returns a SVG file as response which can be directly used on website or application.
We are not affiliated with buymeacoffee in any way. Use this API on your own risk.
Banner API Endpoint provides a 1500 X 500 banner with title , bio and twitter handle.
You can use this API endpoint to create a banner for your github profile or any other website.
To get started, simply make a GET request to the following URL:
https://wiidgets.vercel.app/api/banner?The following query parameters are available for use in the API endpoint:
title (string): The title of the widget. This can be any string up to 100 characters in length.bio (string): The bio of the widget. This can be any string up to 200 characters in length.twitter (string): The Twitter handle of the user. This should be a string without the '@' symbol.
Here's an example of how you might use the API to create a widget with the title "Contact Us", bio "Api Endpoint For Github Widgets" and twitter handle "widgets":
https://wiidgets.vercel.app/api/banner?title=Contact%20Us&bio=Api%20Endpoint%20For%20Github%20Widgets&twitter=widgetsThe API endpoint returns a SVG file as response which can be directly used on website or application.
Please make sure that you are passing all the parameter otherwise it will fail to create a svg.
If you want to use your own css styling please use svg class and do not change the structure of svg as it may break the widget.
We are not affiliated with Github in any way. Use this API on your own risk.
This API endpoint is used to create a card for your github repository. You can use this API endpoint to create a card for your github profile or any other website.
You can use this API endpoint to create a card for your github profile or any other website.
To get started, simply make a GET request to the following URL:
https://wiidgets.vercel.app/api/github/repocard?owner=Abbhiishek&repo=Widgets&theme=transparent?The following query parameters are available for use in the API endpoint:
owner (string): The owner of the Reporepo (string): The Repo Nametheme (string) || Optional: Themes
Here's an example of how you might use the API to create a widget with the slug "abbhishek":
https://wiidgets.vercel.app/api/github/repocard?owner=Abbhiishek&repo=Widgets&theme=transparent
The API endpoint returns a SVG file as response which can be directly used on website or application.
We are not affiliated with Github in any way. Use this API on your own risk.
With inbuilt themes, you can customize the look of the card without doing any manual customization.
Use ?theme=THEME_NAME parameter like so :-
{/* ## Stats
These themes work both for the Stats Card and Repo Card.
default |
transparent |
dark |
radical |
merko |
gruvbox |
gruvbox_light |
tokyonight |
onedark |
cobalt |
synthwave |
highcontrast |
dracula |
prussian |
monokai |
vue |
vue-dark |
shades-of-purple |
nightowl |
buefy |
blue-green |
algolia |
great-gatsby |
darcula |
bear |
solarized-dark |
solarized-light |
chartreuse-dark |
nord |
gotham |
material-palenight |
graywhite |
vision-friendly-dark |
ayu-mirage |
midnight-purple |
calm |
flag-india |
omni |
react |
jolly |
maroongold |
yeblu |
blueberry |
slateorange |
kacho_ga |
outrun |
ocean_dark |
city_lights |
github_dark |
discord_old_blurple |
aura_dark |
panda |
noctis_minimus |
cobalt2 |
swift |
aura |
apprentice |
moltack |
codeSTACKr |
rose_pine |
| [Add your theme][add-theme] |
These themes work both for the Stats Card and Repo Card.
default_repocard |
transparent |
dark |
radical |
merko |
gruvbox |
gruvbox_light |
tokyonight |
onedark |
cobalt |
synthwave |
highcontrast |
dracula |
prussian |
monokai |
vue |
vue-dark |
shades-of-purple |
nightowl |
buefy |
blue-green |
algolia |
great-gatsby |
darcula |
bear |
solarized-dark |
solarized-light |
chartreuse-dark |
nord |
gotham |
material-palenight |
graywhite |
vision-friendly-dark |
ayu-mirage |
midnight-purple |
calm |
flag-india |
omni |
react |
jolly |
maroongold |
yeblu |
blueberry |
slateorange |
kacho_ga |
outrun |
ocean_dark |
city_lights |
github_dark |
discord_old_blurple |
aura_dark |
panda |
noctis_minimus |
cobalt2 |
swift |
aura |
apprentice |
moltack |
codeSTACKr |
rose_pine |