Let's give recognition to those supporting our work on GitHub Sponsors.
Tags: opensource, github, sponsors
Published: 2023-02-09 10:37:59

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:

```markdown
![shoutout-sponsors](https://sponsor-spotlight.vercel.app/sponsor?login=ful1e5)
```

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

![Sponsor](https://imgur.com/3Lr58oy.png)

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

![Request](https://imgur.com/2VTicOw.png)

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

![Error](https://imgur.com/qf7UrHi.png)

### 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](https://github.com/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](https://github.com/ful1e5/sponsor-spotlight/issues) page. I welcome your thoughts and am happy to work on solving any problems in my free time.

{% github ful1e5/sponsor-spotlight %}

### Alternatives

- [shivammathur/ghsvg](https://github.com/shivammathur/ghsvg)
- [tj/sponsors-api](https://github.com/tj/sponsors-api)
- [JamesIves/github-sponsors-readme-action](https://github.com/JamesIves/github-sponsors-readme-action)

### A Gift

Before wrapping up this post, I have a [🎁](https://www.figma.com/file/W4aZx0nXlbgShqEjjOYOYy/sponsor-spotlight?node-id=0%3A1&t=jLk63fHreyCpyX89-1) 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](https://github.com/sponsors/ful1e5).

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

**_This post is powered by [TheActionDev](https://github.com/ful1e5/TheActionDev)_**