Git Product home page Git Product logo

vinitshahdeo / topmate-readme-badge Goto Github PK

View Code? Open in Web Editor NEW
20.0 3.0 9.0 11.44 MB

Markdown badge generator for your Topmate profile | Style your profile README with Topmate badge to connect with your audience

Home Page: https://vinitshahdeo.github.io/topmate-readme-badge/

License: MIT License

JavaScript 92.60% CSS 1.97% EJS 5.42%
hacktoberfest readme-badges topmate badge-generator javascript markdown

topmate-readme-badge's Introduction

Topmate README Badge

Topmate is a platform to connect 1:1 with your audience & monetise your time better. Basically, one link to do it all โžฅ topmate.io/vinitshahdeo. Even better, you can now add a markdown badge in your GitHub profile README to connect with your community! If you haven't claimed your topmate link yet, visit topmate.io to join 1000+ creators, experts and mentors creating impact with their time.


Topmate.io README Badge Generator - Get a markdown badge for your Topmate.io profile | Product Hunt Topmate.io Readme Badge Generator - Get a markdown badge for your Topmate.io profile | Product Hunt

Try now: topmate-readme-badge.netlify.app

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)

Topmate

โžฅ Try it out here: topmate-readme-badge.netlify.app (Best viewed in Desktop)

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 to https://topmate-readme-badge.onrender.com.

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
This is the default style.
Topmate
flat-square Topmate
plastic Topmate
social Topmate
for-the-badge Topmate

Setup

npm install
npm start

Run the above command and visit http://localhost:3000/

API Documentation

Run in Postman

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

Deployed on Heroku

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

Netlify Status

The react app is available inside the client/ directory in the feature/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!

GitHub Hacktoberfest combined status

Forkers repo roster for @vinitshahdeo/topmate-readme-badge

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.

Peerlist Peerlist Badges Postman Collection

Here's markdown badge generator for any Peerlist profile ๐Ÿ’š โžฅ peerlist-readme-badge

peerlist-readme-badge

Sponsor

The service stops running once 550 free dyno hours on Heroku are exhausted. Consider sponsoring ๐Ÿ’ต 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.

GitHub Sponsors

Author

GitHub WidgetBox

Acknowledgement

Stargazers โค๏ธ

Stargazers repo roster for @vinitshahdeo/topmate-readme-badge

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

Support

Glad to see you here! Let me briefly tell you what has motivated me to build this โคต

Open Source Love

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 โญ and share it with your friends! You can also find me on Twitter โŽ

Buy Me A Coffee

topmate-readme-badge's People

Contributors

vinitshahdeo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

topmate-readme-badge's Issues

Add meta tags

Having proper SEO tags helps in discoverability.

PS: Add OG tags too.

Create a React App to generate Topmate README Badges

The idea is to create a web app similar to Badges Generator or Shields.io to generate Topmate README badges.

Contributing guide

Please branch off from feature/web-app and raise a PR to feature/web-app. Currently, this branch contains a client directory that contains a basic React boilerplate which can be developed further as a React app to generate Topmate badges dynamically.

API documentation

![topmate](https://topmate-readme-badge.herokuapp.com/vinitshahdeo)

topmate

Please refer to the Postman collection.

Local development

git checkout feature/web-app
cd client/topmate-readme-badge
npm install
npm run start

Related

In case, you have other frameworks in mind, please check out a branch feature/web-app- from develop and create your app within the client directory.

Add contributing doc

Planning to open this project for Hacktoberfest. Let's add a contributing doc and code of conduct

Fix CSS in header

Screenshot 2022-10-22 at 2 19 03 AM

Changes to be made:

  1. The size of logo should be consistent with the Figma mocks.
  2. Fix the size of Claim topmate link button
  3. Have consistent spacing b/w the buttons in the header

Figma mocks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.