Awesome
<h1 align="center"> Topmate <code>README</code> Badge <br> <a href="https://topmate.io/vinitshahdeo"> <img src="https://topmate-readme-badge.onrender.com"/> </a> </h1> <div align='center'> <img src="https://img.shields.io/badge/Deployed%20on%20Heroku-430098?style=flat&logo=heroku&logoColor=white"/> <a href="https://www.postman.com/restless-rocket-22186/workspace/topmate-readme-badges-api/documentation/6178851-c863d626-b2e3-49bf-82d0-4e4cb46a089c"> <img src="http://img.shields.io/badge/Postman-Collection-orange.svg?style=flat&logo=postman"/> </a> <a href="https://topmate-readme-badge.netlify.app/"> <img src="https://img.shields.io/website?logo=react&logoColor=white&up_message=up%20%7C%20visit%20now&url=https%3A%2F%2Ftopmate-readme-badge.netlify.app%2F"/> </a> <a href="https://app.netlify.com/sites/topmate-readme-badge/deploys"> <img src="https://api.netlify.com/api/v1/badges/0e91f197-4f59-438f-9eae-54ee4beb6ffe/deploy-status"/> </a> <a href="https://github.com/vinitshahdeo/topmate-readme-badge/blob/main/LICENSE"> <img src="https://img.shields.io/github/license/vinitshahdeo/topmate-readme-badge?logo=github"/> </a> <a href="https://github.dev/vinitshahdeo/topmate-readme-badge/"> <img src="https://badgen.net/badge/icon/visualstudio?icon=visualstudio&label"/> </a> <a href="https://github.com/vinitshahdeo"> <img src="https://img.shields.io/github/followers/vinitshahdeo?label=Follow%20%40vinitshahdeo&logo=github&style=social"/> </a> <a href="https://github.com/vinitshahdeo/peerlist-readme-badge/fork"> <img src="https://img.shields.io/badge/Made%20with-JavaScript-1f425f.svg?logo=javascript"/> </a> <a href="https://vinitshahdeo.dev/"> <img src="https://img.shields.io/badge/Check%20my%20blog%20on%20Hashnode-2962FF?logo=hashnode&logoColor=white"/> </a> <a href="https://twitter.com/Vinit_Shahdeo"> <img src="https://img.shields.io/twitter/follow/vinit_shahdeo?style=social"/> </a> <br /> <br /> </div> <div align="center">Topmate is a platform to connect 1:1 with your audience & monetise your time better. Basically, one link to do it all โฅ <a href="https://topmate.io/vinitshahdeo">topmate.io/vinitshahdeo</a>. Even better, you can now <strong>add a markdown badge</strong> in your GitHub profile <code>README</code> to connect with your community! If you haven't claimed your topmate link yet, visit <a href="https://topmate.io/">topmate.io</a> to join 1000+ creators, experts and mentors creating impact with their time.
<br /><a href="https://www.producthunt.com/posts/topmate-io-readme-badge-generator?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-topmate-io-readme-badge-generator" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=365190&theme=light" alt="Topmate.io README Badge Generator - Get a markdown badge for your Topmate.io profile | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> <a href="https://www.producthunt.com/posts/topmate-io-readme-badge-generator?utm_source=badge-top-post-topic-badge&utm_medium=badge&utm_souce=badge-topmate-io-readme-badge-generator" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-topic-badge.svg?post_id=365190&theme=light&period=monthly&topic_id=267" alt="Topmate.io Readme Badge Generator - Get a markdown badge for your Topmate.io profile | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> <br />
<strong>Try now: <a href="https://topmate-readme-badge.netlify.app/">topmate-readme-badge.netlify.app</a></strong>
</div>Here's how?
Replace vinitshahdeo
in the markdown with your Topmate username. Claim your Topmate link if you haven't yet!
[![Topmate](https://topmate-readme-badge.onrender.com/vinitshahdeo)](https://topmate.io/vinitshahdeo)
โฅ Try it out here: topmate-readme-badge.netlify.app <sup>(Best viewed in Desktop)</sup>
<sup>Note: In case, you're facing issues in accessing the badge using the above API which is deployed on Heroku. This happens once the monthly free dynos hours are exhausted. In such cases, consider using the service hosted on Render. Please replace the base URL from
https://topmate-readme-badge.herokuapp.com
tohttps://topmate-readme-badge.onrender.com
.</sup>
Style your badge ๐
Additionally it supports the styles. To use a different style: Replace flat-square
in the markdown with any of the styles below โคต
![Topmate](https://topmate-readme-badge.onrender.com/vinitshahdeo?style=flat-square)
Available styles
Type | Badge |
---|---|
flat <br> <sub>This is the default style.<sub> | |
flat-square | |
plastic | |
social | |
for-the-badge |
Setup
npm install
npm start
Run the above command and visit http://localhost:3000/
API Documentation
GET baseUrl/:username
- please refer to the Topmate README Badges public Postman collection for the API documentation. Please feel free to fork and use! You can directly run the collection in Postman by using the Run in Postman button above.
Under the hood
The badges are powered by an express app deployed on Heroku. These are generated using a tiny-service written by me: topmate.js
topmate
.generateBadge(username, style)
.then((badge) => {
// here is your badge
})
.catch(console.log);
Huge shoutout to Shields.io service for providing badges in the SVG format.
Topmate README
Badge Generator
The react app is available inside the
client/
directory in thefeature/web-app
. This is currently deployed using Netlify. Try it our here: topmate-readme-badge.netlify.app
Run the commands below to build locally ๐
git checkout feature/web-app
cd client/topmate-readme-badge
npm install
npm start
Contributing
This project is also open for the Hacktoberfest participants. Please check out the open issues. Your contributions are most welcome!
Similar projects
Peerlist is a community of working professionals focused on building a personal brand, sharing professional content, and finding peers to collaborate with. A Peerlist profile can be used as a simple resume or a complete portfolio to showcase your work. You can style your README.md
with an awesome Peerlist markdown badge.
Here's markdown
badge generator for any Peerlist profile ๐
โฅ peerlist-readme-badge
Sponsor
The service stops running once 550 free dyno hours on Heroku are exhausted. Consider sponsoring :dollar: me in order to keep this running by upgrading to Hobby dynos for $7 per dyno per month. The service will never sleep and you will get 24/7 access to the awesome Topmate.io badges.
Author
Acknowledgement
-
My gratitude to Yashvi for helping me in building React app. Thanks for the contributions.
-
Special thanks to Tejasvi for designing the Figma mocks.
Stargazers :heart:
Are you a student?
With the placement season around the corner and the internship season already started in many colleges, I would like to make myself available to help students in their prep. Since I have been through this phase, I know that this period can be extremely challenging, not to mention mentally exhausting. So I am opening my slots on topmate.io to help and guide in whatever ways I can. Find me here: topmate.io/vinitshahdeo
<a href="https://topmate.io/vinitshahdeo"> <img src="./public/images/vinitshahdeo-topmate-1-1.png" width="270px" height="270px"/> </a>Support
Glad to see you here! Let me briefly tell you what has motivated me to build this โคต
A lot has changed over the years, from being mentored to mentoring. I've always believed in giving back to the community, and Topmate has made it easy for me to connect with my mentees - topmate.io/vinitshahdeo. I made this tiny-service to produce README
badges for my GitHub repositories, which will help me engage with the open-source community.
Did you love it? Consider giving a :star: and share it with your friends! You can also find me on Twitter โ
<a href="https://www.buymeacoffee.com/vinitshahdeo" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 20% !important;width: 20% !important;" ></a>