Pinata OG! | Generate beautiful OpenGraph Images with Pinata File API

nightly - Oct 14 -

- Dev Community

This is a submission for the The Pinata Challenge

What I Built | Pinata OG

Pinata OG!

Generate beautiful OG Images with Pinata File API!

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

multipletwigs / pinata-og

Pinata DEV Hackathon Submission | Pinata OG

Name: Pinata OG! | Generate beautiful OpenGraph Images with Pinata File API
Rating: 2.2 (7303 reviews)
Author: nightlyinks

So, ready to give your links a glow-up and watch those click rates soar? Let's make your content pop!

View on GitHub

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 POST request.
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

GET request 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.ink is 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...