Share your repls and programming experiences

← Back to all posts
🔼 Repl Talk Badges | Serverless + Web Scraping + TS = 🤯
RonaldLeung1 (74)

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:

[![Repl Talk Badge](https://replit-badge.vercel.app/api?id=143059&type=.svg)](https://replit.com/talk/share/post/143059)

and with HTML:

<a href="https://replit.com/talk/share/post/143059">
  <img src="https://replit-badge.vercel.app/api?id=143059&type=.svg" alt="Repl Talk Badge">
</a>

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:

OptionTypeRequiredDefaultDescription
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 :)

Comments
hotnewtop
BIue (66)

one heck of a project

jihhyuu202 (13)

this is really cool

plscodeinjava (376)

see, this is an amazing project. i'm not trying to rain on your parade or anything
but here's the problem:
repl talk is getting removed very soon, and being replaced with apps
so like
this will become obsolete
sadge
sorry bro

RayhanADev (2594)

@plscodeinjava ReplTalk will not get removed if the community has anything to say about it!

ruiwenge2 (1101)

@RayhanADev @plscodeinjava yep, remember what @codingjlu’s petition was for!

StringentDev (233)

@plscodeinjava This is not confirmed by the repl team yet. This is mostly an assumptions based on recent behaviors, like setting the default trending to the apps page.

Plus removing the entire talk would require database migrations which would (due to the amount of projects posted on replit) take an extremely long time. Nevermind how it would break many user profiles (cycles.)

Other issues would arise in performance, Repl Apps is extremely slow to load compared to talk (I'll be posting that in bugs) on low-end devices.

So it is extremely unlikely that replit will be removing talk for now.

plscodeinjava (376)

@StringentDev
Thank you so much for responding like that! That gives me hope for repl talk to stay the meta for years to come lol

tankerguy1917 (178)

@StringentDev Wait, the bugs page is still around? I haven't been able to find it, or I get a 404 error.

StringentDev (233)

@tankerguy1917 Go to the help icon in the sidebar, then click report a bug.

firefish (953)

make the edges transparent

StringentDev (233)

Nice, just used it on my github repo

minishxp (7)

Ok, very useful

QuickV (72)

It's on trending now? weird 🤔

ch1ck3n (2309)

unrelated garbage:

i was the OG who saw the first post from this (this is the second one) hehe

JWZ6 (710)

@ch1ck3n yeah when i came back to upvote im like where's the post?

RayhanADev (2594)

Niceee! Maybe try using GraphQL (official API) instead of web scraping?

InvisibleOne (3186)

This is really cool:

InvisibleOne (3186)

But it doesn't look like the markdown link works

RonaldLeung1 (74)

@InvisibleOne Yeah :/ you need to add &type=.svg to the end for it to work