Lädt...


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


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

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

...

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


📈 98.7 Punkte
🔧 Programmierung

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


📈 98.7 Punkte
🔧 Programmierung

🔧 The Pinata Challenge: Pinata File Hub - Seamless File Management & Uploads


📈 42.79 Punkte
🔧 Programmierung

🔧 How to generate dynamic OG (OpenGraph) images with Satori and React


📈 40.91 Punkte
🔧 Programmierung

🔧 Pinata CLI: A CLI Application for the Pinata.Cloud Files Interface


📈 35.58 Punkte
🔧 Programmierung

🔧 Introducing gleam.so: Create Perfect OpenGraph (OG) Images Without The Hassle 🎨


📈 29.77 Punkte
🔧 Programmierung

🔧 Making OpenGraph (OG) Images More Accessible: Now Design & Preview Everything for Free 🎨


📈 29.77 Punkte
🔧 Programmierung

🔧 The No-Fluff Guide to OpenGraph Images That Actually Work 🎯


📈 29.77 Punkte
🔧 Programmierung

🔧 Tired of Wasting Hours on OpenGraph Images? Let's Fix That Together 👋


📈 29.77 Punkte
🔧 Programmierung

🔧 Tired of Wasting Hours on OpenGraph Images? Let's Fix That Together 👋


📈 29.77 Punkte
🔧 Programmierung

🔧 More Haskell Diagrams: Dynamic OpenGraph Images


📈 29.77 Punkte
🔧 Programmierung

🔧 More Haskell Diagrams: OpenGraph Images


📈 29.77 Punkte
🔧 Programmierung

🔧 Personalized Social Images: Enhancing User Profiles with Opengraph


📈 29.77 Punkte
🔧 Programmierung

🔧 Introducing autocomponents: Instantly generate beautiful React UIs that come connected to your API


📈 29.75 Punkte
🔧 Programmierung

🔧 Building an OpenGraph Image API with Next.js and Sharp


📈 28.79 Punkte
🔧 Programmierung

🔧 Zenml for beautiful beautiful orchestration pt 3: Mlflow Aliases/Tags


📈 27.04 Punkte
🔧 Programmierung

🔧 Zenml for beautiful beautiful orchestration


📈 27.04 Punkte
🔧 Programmierung

🍏 Acefast Fast Charge Power Bank M1 review: Beautiful exterior with a not so beautiful price


📈 27.04 Punkte
🍏 iOS / Mac OS

🔧 File Upload with Pinata’s Files API


📈 26.48 Punkte
🔧 Programmierung

🔧 Generate API document with redoc to view a local API .json file using Angular Application


📈 24.92 Punkte
🔧 Programmierung

🔧 Genith: Create Images and Videos with AI, Store with Pinata


📈 23.85 Punkte
🔧 Programmierung

🔧 7 Common OpenGraph Mistakes and How to Fix Them


📈 23.71 Punkte
🔧 Programmierung

🔧 5 OpenGraph (OG) Image Tricks That Made My Life Easier 🎨


📈 23.71 Punkte
🔧 Programmierung

🔧 How to Integrate OpenGraph in React to Boost SEO and Social Sharing


📈 23.71 Punkte
🔧 Programmierung

🔧 Mastering Deep Linking and Universal Links in React Native: OpenGraph Share & Node.js Integration


📈 23.71 Punkte
🔧 Programmierung

🕵️ CVE-2020-36663 | Artesãos SEOTools up to 0.17.1 OpenGraph.php makeTag value redirect (ID 201)


📈 23.71 Punkte
🕵️ Sicherheitslücken

🕵️ XSS in the image presenter of opengraph module


📈 23.71 Punkte
🕵️ Sicherheitslücken

🕵️ Mattermost Server up to 4.10.6/5.6.4/5.7.1 OpenGraph resource consumption


📈 23.71 Punkte
🕵️ Sicherheitslücken

🕵️ Extended escaping in opengraph to prevent XSS


📈 23.71 Punkte
🕵️ Sicherheitslücken

🕵️ Content Cards Plugin 0.9.7 auf WordPress OpenGraph Data Cross Site Scripting


📈 23.71 Punkte
🕵️ Sicherheitslücken

🔧 Laveraging Pinata API to upload files


📈 22.88 Punkte
🔧 Programmierung

🔧 Introducing PinataNET: A Simple C# Wrapper for the Pinata API


📈 22.88 Punkte
🔧 Programmierung

🔧 FileShare| A FileSharing Platform built using Next.js and Pinata Files API


📈 22.88 Punkte
🔧 Programmierung

🔧 Generate SSH Keys Effortlessly with generate-ssh-key


📈 22.29 Punkte
🔧 Programmierung

🔧 Image Optimizer Powered by Pinata: Secure File Storage Meets Real-Time Customization


📈 21.39 Punkte
🔧 Programmierung

matomo