🔼 Repl Talk Badges | Serverless + Web Scraping + TS = 🤯

Repl Talk Badges are a set of simple, dynamic images that display the number of upvotes on your Repl Talk posts! You can add badges to markdown files (e.g. a GitHub README page) or to any website to link back to your post and incentivize more upvotes.

These badges are mainly inspired by those from Product Hunt - you can see how people use them on landing pages to promote their products, and you can do the same to promote your posts on Repl Talk!

Want to see it in action? Upvote this post, reload the page, and see the image below update right before your eyes (you may have to clear your cache first though) 😉

This is how the badge is used with markdown:

and with HTML:

Also, it comes in 3 other styles:

Plus, you can customize the labels and fonts too.

Here's a summary of all the different options:

idIntegerYes-Repl Talk post ID, located in post URL
styleStringNo"flat""flat" | "gradient"
themeStringNo"light""light" | "dark"
featuredOnStringNo"FEATURED ON"Alternate text for upper label
replTalkStringNo"Repl Talk"Alternate text for lower label

Also, add &type=.svg to the end of the URL if using the badge on Repl Talk. This is a hacky fix since Replit requires file extensions like .svg and .png to properly render images.

👉 To make your own, scroll down or go to create-replit-badge.now.sh!

How it works

Much of the microservice itself owes to AnandChowdhary/hackerbadge, which was an excellent starting point for this project (it uses TypeScript too, which is pretty neat). The API is powered by serverless functions and hosted on Vercel, meaning it doesn't rely on a dedicated server). With every request, the Repl Talk post of choosing is scraped using Axios and Cheerio to fetch upvotes in real time. The badges themselves are scalable vector graphics (SVG), designed in Figma.

The badge generator, which you can try out below, is just a Next.js site using the Geist UI component library. You can export badges in markdown or HTML.

That's all! I hope this will make the Repl Talk community more awesome than it already is, and I can't wait to see what you do with it!

👉 If you liked this, leave a star on GitHub at https://github.com/googol88/repltalk-badge! Pull requests are welcome :)

You are viewing a single comment. View All

make the edges transparent


they are, thats just repl. @firefish


@TheH4ck3r i asked @RonaldLeung1 not you


woah calm down there buddy @firefish


@Whippingdot how many cows in a watermelon


72! See I am samart @firefish


@Whippingdot bruh, that's a trick question :|
there is watermelons IN cows but not COWS IN watermelons


@potatojs you're back! do you know what 1 cow is in watermelons though?i mean, google, duckduckgo, and bing are all right


@firefish bruh i was always watching... repl is just too slow for any kind of full stack dev so i switched to vscode locally and then i kinda just forgot repl.
and yes i already knew how to convert cows to watermelons i do it every day


lol...also who are you and how does the fireyfish know you? Also @firefish ew you don't use the new google dark mode ew ew ew!

Also @potatojs I understand you. I don't use replit for anything and for the weekly challenges (that are revived if you didn't know) i just paste my vscode code. VSCode's extensions are just OP!

Two last questions - are you British and do you have a mac?


@Whippingdot yo momma has a mac


no she doesn't... we don't have any macs at my house...well other than my dad's company given one. @firefish


@Whippingdot yo momma


@Whippingdot i'm from a third world country :) they don't teach us english, that's why my english is kinda weird
and no i don't have a mac.

when i started programming about 1 year ago i used replit, and i don't have friends to show my creations to so i started posting in repl talk. i think many people know me because like 99% of my posts got trending lol


LOCKY @potatojs

EDIT: Also your english doesn't seem weird to me... HMMMM


@Whippingdot lmao it is... i think