OG (opengraph) images - Githubissues

pisa-dev / pisa.dev

Source code for pisa.dev website!

https://pisa.dev

MIT License

19 stars 3 forks source link

OG (opengraph) images #47

Closed Pitasi closed 1 year ago

Pitasi commented 1 year ago

Quando condividiamo un link sui social sarebbe molto più bello se mostrasse un'anteprima.

Vercel recentemente ha rilasciato una libreria che sembra fare al caso nostro: https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation

In questo modo dovremmo essere in grado di generare dinamicamente dei banner per gli eventi.

DoD:

seguire la doc linkata e gli esempi per aggiungere un endpoint che genera immagini per gli eventi (può prendere i parametri in chiaro)
aggiungere i metatag di opengraph alle pagine degli eventi

yhoungdev commented 1 year ago

whould love to wok on this, can you please translate to english

Pitasi commented 1 year ago

Hi @yhoungdev, we basically want to generate dynamic opengraph images to links like this: https://pisa.dev/event/hacktoberfest-2022

If you check the links from Vercel in my first message, they now provide a library that can be integrated with Next.js to generate such images. Since we already use Next.js it should sufficient to follow their tutorials.

Can you try it? We want to generate some basics images containing the title of the event and our logo at least.

I will assign this issue to you if you confirm you want to work on that. Many thanks!

Pitasi commented 1 year ago

Vercel at some point released a new for achieving this: https://github.com/vercel/satori.

The playground with tailwind is 🔥 https://og-playground.vercel.app/

We should use this to generate event covers in different sizes (e.g. square for linkedin/instagram posts, 16:9 for youtube covers, ...).