Skip to content
← Back to Community
πŸ”Ό Repl Talk Badges | Serverless + Web Scraping + TS = 🀯
Profile icon
h
has Hacker Plan
RonaldLeung1

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 file cannot be displayed: https://replit-badge.vercel.app/api?id=143059&type=.svg svg files cannot be displayed: https://replanalytics.repl.co/track/8b1bdb1b-4311-4a7a-aea5-48755abf148d/empty.svg

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:

This file cannot be displayed: https://replit-badge.vercel.app/api?id=143059&theme=dark&type=.svg This file cannot be displayed: https://replit-badge.vercel.app/api?id=143059&style=gradient&theme=light&type=.svg This file cannot be displayed: https://replit-badge.vercel.app/api?id=143059&style=gradient&theme=dark&type=.svg

Plus, you can customize the labels and fonts too.

This file cannot be displayed: https://replit-badge.vercel.app/api?id=143059&featuredOn=upvoted%20on&replTalk=Replit&font=Helvetica&type=.svg

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

Voters
Profile icon
LoganHudson
Profile icon
sbzm
Profile icon
pro0grammer
Profile icon
i10
Profile icon
StringentDev
Profile icon
syc1
Profile icon
CatR3kd
Profile icon
TonyWu4
Profile icon
dudeactualdev
Profile icon
NFadhlurrahman
Comments
hotnewtop
Profile icon
BIue

one heck of a project

Profile icon
jihhyuu202

this is really cool

Profile icon
plscodeinjava

i keep trying to use these for my projects but they're broken
do u know why this is happening

Profile icon
RonaldLeung1

@plscodeinjava Yeah, SVG files don't appear on Replit anymore - I think there have been some changes to the platform that prevent this for some reason, which really stinks :(

Profile icon
plscodeinjava

@RonaldLeung1
sad, this was such a great project i was planning on using these on all my codes

Profile icon
RonaldLeung1

@plscodeinjava yeah, I think I might try to follow this up with the replit team and see why they decided to do this

Profile icon
ch1ck3n

Hi, the class seletor is now .jsx-441663429.vote-control-count so you might wanna fix that

Profile icon
Kkubotatcssf

noice

Profile icon
Crowst

kewl

Profile icon
plscodeinjava

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

Profile icon
RayhanADev

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

Profile icon
ruiwenge2

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

Profile icon
StringentDev

@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.

Profile icon
plscodeinjava

@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

Profile icon
StringentDev
Profile icon
tankerguy1917

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

Profile icon
StringentDev
Profile icon
StringentDev

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

Profile icon
tankerguy1917

@StringentDev Ok. Thanks

Profile icon
Whippingdot

bruhh repl talk won't get replaced cause of the tutorials section, ask section, etc but the share section might get replaced - after a few adjustments of course like making it faster, enabling tag based search, enabling boolean search (like to see projects made in the last 24 hours), and doing other stuff and suggestions that I made (it got responded to by amjad sir(lol) and he said he would work on those things and he thanks the suggestions (i can't find it - it was on an app. I promise you though)) @StringentDev

Profile icon
StringentDev

@Whippingdot that is bascially what i just said, so... please curb your recorrections

Profile icon
Whippingdot

?? Also i was gonna originally ping Rayhan but decided against it. @StringentDev

Profile icon
codingjlu

@ruiwenge2 greetings πŸ‘»

Profile icon
firefish

make the edges transparent

Profile icon
TheH4ck3r

they are, thats just repl. @firefish

Profile icon
firefish

@TheH4ck3r i asked @RonaldLeung1 not you

Profile icon
Whippingdot

woah calm down there buddy @firefish

Profile icon
firefish

@Whippingdot how many cows in a watermelon

Profile icon
Whippingdot

72! See I am samart @firefish

Profile icon
potatojs

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

Profile icon
firefish

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

image

image

Profile icon
potatojs

@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

Profile icon
Whippingdot

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?

Profile icon
firefish

@Whippingdot yo momma has a mac

Profile icon
Whippingdot

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

Profile icon
firefish

@Whippingdot yo momma

Profile icon
potatojs

@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

Profile icon
Whippingdot

LOCKY @potatojs

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

Profile icon
potatojs

@Whippingdot lmao it is... i think

Profile icon
StringentDev

Nice, just used it on my github repo

Profile icon
sojs

cool!

Profile icon
minishxp

Ok, very useful

Profile icon
Coder100

nice!

Profile icon
JBloves27

Whoaaa, nicee!

Profile icon
Bookie0

Really cool!

Profile icon
QuickV

It's on trending now? weird πŸ€”

Profile icon
ch1ck3n

unrelated garbage:

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

Profile icon
JWZ6

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

Profile icon
ThisUserTaken

@ch1ck3n gotta flex

Profile icon
RayhanADev

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

Profile icon
potatojs

@RayhanADev exaclty what i was thinking! when i read the code i was execting graphql but then i saw

parseInt($(".jsx-1975752611.vote-control-heavy").children().last().text())

i was like bruh

Profile icon
RayhanADev

@potatojs lol xD

Profile icon
lilykhan

ooo nice

Profile icon
VulcanWM

cool!

Profile icon
InvisibleOne

This is really cool:
This file cannot be displayed: https://replit-badge.vercel.app/api?id=120501&style=gradient&theme=dark&featuredOn=crap%20ton%20of&replTalk=internet%20points&type=.svg

Profile icon
InvisibleOne

But it doesn't look like the markdown link works

Profile icon
RonaldLeung1

@InvisibleOne Yeah :/ you need to add &type=.svg to the end for it to work
This file cannot be displayed: https://replit-badge.vercel.app/api?id=120501&style=gradient&theme=dark&featuredOn=crap%20ton%20of&replTalk=internet%20points&type=.svg

Profile icon
InvisibleOne

Ok nice, it's working now @RonaldLeung1

Profile icon
EpicGamer007

niceee :)