This is a submission for the The Pinata Challenge
What I Built | Pinata OG
pinata.nightly.ink
Ever found yourself pulling your hair out over OpenGraph (OG) Images? Wait, what's an OG Image, you ask? It's the secret sauce that turns your boring links into eye-catching masterpieces when you share them on social media! Picture this: your link, strutting its stuff on platforms like a digital runway model. Trust me, a sizzling OG Image is the difference between "meh" and "click me now!"
Feast your eyes on this beauty! ☝️ That, my friends, is the power of a well-crafted OG Image in action.
Tired of your links being wallflowers at the social media party? Fear not! I've built a platform that would let you generate gorgeous OpenGraph Images With just a few clicks, and you'll be pumping out drop-dead gorgeous OpenGraph Images for your sites in seconds!
Here's the deal: edit some fields, sprinkle your magic on it, and voilà! Your OG Image is ready to rock. But wait, there's more! We'll even generate those pesky metadata tags for you. Just copy, paste them into your <head></head> component, and you're good to go! It's so simple even your grandmother could do it!
So, ready to give your links a glow-up and watch those click rates soar? Let's make your content pop!
Demo
This is me dog fooding Pinata OG for my submission site, which is used to generate the OG image you see in the site embed above!
My Code
Pinata DEV Hackathon Submission | Pinata OG
Tired of your links being wallflowers at the social media party? Fear not! I've built a platform that would let you generate gorgeous OpenGraph Images With just a few clicks, and you'll be pumping out drop-dead gorgeous OpenGraph Images for your sites in seconds!
Here's the deal: edit some fields, sprinkle your magic on it, and voilà! Your OG Image is ready to rock. But wait, there's more! We'll even generate those pesky metadata tags for you. Just copy, paste them into your <head></head> component, and you're good to go! It's so simple even your grandmother could do it!
So, ready to give your links a glow-up and watch those click rates soar? Let's make your content pop!
Built with...
- Pinata File API
- Supabase
- Shadcn/ui
- NextJS
More Details
Here's a rough sketch of Pinata OG! works...
Journey of generating the needed metatags
- OG Image is client-side generated with
html2canvas - Along with all the metadata that the user input, this metadata is then submitted with the image in multiform
POSTrequest. - In a NextJS api route handler, we upload the image to Pinata and obtain a unique CID.
- This CID is then generated to the user and populated in the metatags.
- The og:url will be
/api/get-og?cid=[cid]which is another route handler used to actually serve the og images.
Journey of getting the og image when someone pastes a link
-
GETrequest from og:url to/api/get-og?cid=[cid], route handler requests from Pinata Gateway API. - Pinata Gateway API does image optimizations to serve og:images faster!
- Because each image is unique, requesting for the correct image becomes very simple without the need to think of how to organize everyone's images.
- Just like that,
pinata.nightly.inkis now an og:image provider thanks to Pinata!
Submission by: @nightlyinks
Thank you for reading!
I had a lot of fun building this, even if this doesn't win anything, I will still continue working on it because i believe in it!
Ps.. this submission was made in two days because I couldn't decide what to build...
Top comments (6)
Awesome!!!!
This is really amazing! Thank You for sharing!
Great Job 👍
Looks great but.... what is an OG image exactly?
Interesting! Would definitely give it a try!!
Love to see projects that streamline development, will definitely be using this!