DEV Community

Cover image for Pinata OG! | Generate beautiful OpenGraph Images with Pinata File API
nightly
nightly Subscriber

Posted on

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

This is a submission for the The Pinata Challenge

What I Built | Pinata OG

Pinata OG!

Generate beautiful OG Images with Pinata File API!

favicon 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!"

Discord Link OG Image Embed
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

site_ss

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

Architecture Diagram of Pinata OG!

Here's a rough sketch of Pinata OG! works...
Journey of generating the needed metatags

  1. OG Image is client-side generated with html2canvas
  2. Along with all the metadata that the user input, this metadata is then submitted with the image in multiform POST request.
  3. In a NextJS api route handler, we upload the image to Pinata and obtain a unique CID.
  4. This CID is then generated to the user and populated in the metatags.
  5. 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

  1. GET request from og:url to /api/get-og?cid=[cid], route handler requests from Pinata Gateway API.
  2. Pinata Gateway API does image optimizations to serve og:images faster!
  3. 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.
  4. 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...

Top comments (6)

Collapse
 
tobysolutions profile image
Tobiloba Adedeji

Awesome!!!!

Collapse
 
ye_wernwong_34aa74956ea5 profile image
Ye Wern Wong

This is really amazing! Thank You for sharing!

Collapse
 
kim_junghan_5b890c0d362b2 profile image
Kim Junghan

Great Job 👍

Collapse
 
jasuperior profile image
Ja

Looks great but.... what is an OG image exactly?

Collapse
 
gyn_jie_7f356d9a260898f9f profile image
Gyn Jie

Interesting! Would definitely give it a try!!

Collapse
 
alloysius_cheah_eb0c60bbe profile image
Alloysius Cheah

Love to see projects that streamline development, will definitely be using this!