DEV Community

Cover image for Let's give recognition to those supporting our work on GitHub Sponsors.
Kaiz Khatri
Kaiz Khatri

Posted on • Originally published at github.com

Let's give recognition to those supporting our work on GitHub Sponsors.

To shoutout your sponsors, all you need to do is use the image endpoint https://sponsor-spotlight.vercel.app/sponsor and append your GitHub Sponsor program-eligible username as the login query parameter in a markdown image tag. For example:

![shoutout-sponsors](https://sponsor-spotlight.vercel.app/sponsor?login=ful1e5)
Enter fullscreen mode Exit fullscreen mode

This will display a "Shoutout" image for a random sponsor with every request.

Sponsor

In some instances, you may receive a message for onboarding new sponsors.

Request

If you have not joined the GitHub Sponsorship program or if your GitHub username cannot be found, the following will appear:

Error

Why Sponsor Spotlight?

As a popular open-source project author or maintainer, you are likely aware of the crucial role played by your sponsors. These sponsors play a vital part in ensuring the success of our project, and it is essential to acknowledge their contributions in a meaningful way. To do this, you may use tools that generate an image featuring the avatars of all active sponsors, providing an overview of their support for the project.

However, despite the convenience of these tools, I found some visual glitches to be particularly concerning. For instance, the image generated by these tools can consume a significant amount of space in the readme, potentially becoming a distraction for users. Additionally, these tools often lack categorization capabilities, making it challenging to provide individual recognition to sponsors, which can be a significant issue for those who desire more personal recognition for their contributions.

Furthermore, slow response times can result in broken sponsor avatars appearing on certain requests, leading to an unprofessional appearance for your project.

To resolve this issue, I decided to take the time to improve the situation. I was recently accepted into the GitHub Sponsorship Program and had already started receiving my first sponsorship, so I wanted to ensure that everything looked as professional as possible. A big shoutout goes to @splooge for being my first sponsor!

With the goal of making things better, I created a public repository on GitHub called "Sponsor Spotlight". This repository generates a dynamic image (in the form of an SVG) using a serverless function and React. The image displays a random sponsor with each request, and has a subtle animation that gives your project a unique and lively look. It took me a few days and less than a week to make the code compatible with all GitHub users and to hand designed the cute Octocat icons into the SVG format.

The source code for this is available on GitHub for anyone to access. If you have any feature requests or run into any issues, you can report them on the issues page. I welcome your thoughts and am happy to work on solving any problems in my free time.

GitHub logo ful1e5 / sponsor-spotlight

Let's give recognition to those supporting our work.

sponsor-spotlight

This project would like to extend a warm shoutout to our fantastic Github monthly sponsors. Approximately 70% of requests will feature a randomly selected sponsor, with the remaining being utilized for onboarding new sponsors.

Usage

Simply use the image endpoint https://sponsor-spotlight.vercel.app/sponsor and append your GitHub Sponsor program-eligible username as the login query parameter. For example:

![shoutout-sponsors](https://sponsor-spotlight.vercel.app/sponsor?login=ful1e5)
Enter fullscreen mode Exit fullscreen mode

This will display a "Shoutout" image for a random sponsor with every request.

Sponsor

In some instances, you may receive a message for onboarding new sponsors.

Request

If you have not joined the GitHub Sponsorship program or if your GitHub username cannot be found, the following will appear:

Error

Development

Images are generated by a React component and is embedded within an SVG. You can run the project locally using the Vercel CLI by running the following command in your terminal:

vercel dev
Enter fullscreen mode Exit fullscreen mode

And also require Github personal access token (classic) with read:org and…

Alternatives

A Gift

Before wrapping up this post, I have a 🎁 for you.

If you like my work and want to help me make open-source development my full-time job, you can support me by becoming a sponsor at @ful1e5.

Thanks for joining me and I'll see you again on the internet. As-salamu alaykum.

This post is powered by TheActionDev

Top comments (1)

Collapse
 
mateusabelli profile image
Mateus Abelli

I loved this, I'm already using it on my repo github.com/mateusabelli/refine-sqlite Thank you!