Dynamic Open Graph Image Generation 📷 Social Previews with SvelteKit & Satori 🔴 LIVE Coding & Chill
Let’s add enticing Social Preview images to our Emoji of the Day app!
In the previous streams we’ve successfully used ChatGPT to “impersonate” my favourite fictional characters, and “ask” them what they think about the emoji of the day… We even integrated with DALL·E 2 to have them “sketch” something related for us 😉
This week, we’ll make our app stick out more when shared in social media and messages, by adding all the related meta tags, and generating a dynamic custom image to go with them!
🚀 Check out the app yourself, ask for some quotes! https://emoji-of.com/
💻 See the code, open-source and free: https://github.com/jmagrippis/emoji-o...
My previous livestream on Dynamic Open Graph Image Generation with Next 13: • Next.js 13 & Dynamic Open Graph Image...
— COMMUNITY —
New DISCORD SERVER for us 😱: / discord
— 🥳🥳🥳 —
— Agenda —
[ ] What are we doing today? Emoji of the Day app? https://emoji-of.com/
[ ] Checking tags with any *deployed* site with a free tool: https://metatags.io/
[ ] Vercel’s solution for Next.js: https://vercel.com/docs/concepts/func...
[ ] NextJS Tuesdays?! https://nextjs.org/blog/next-13-3
[ ] Let’s add more dynamic `title` and `description` tags!
[ ] Let’s use satori with SvelteKit! https://github.com/vercel/satori
[ ] Style with Tailwind… or regular style tags?
[ ] Use custom fonts!
——⬇️ BONUS ⬇️——
[ ] Post Emoji Picks to Discord? / Discord Bot?
[ ] Post to Twitter?
[ ] Also pick the Emoji of the Week!
[ ] Also pick the Emoji of the Month!
[ ] NEXT STEPS: Some of the “BONUS”s we didn’t get to? Infinite Carousel? More SvelteKit? Next.js? Let me know!
— HAVE FUN —
No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄
— Highlighted software —
satori: https://github.com/vercel/satori
SvelteKit: https://kit.svelte.dev/
My own website: https://magrippis.com/
Search for `@jmagrippis` to find me on socials like Instagram & Twitter! And remember our DISCORD SERVER 😉: / discord
Between the comment section and the socials, let me know *somewhere* what you’d like me to cover next 🙌
Смотрите видео Dynamic Open Graph Image Generation 📷 Social Previews with SvelteKit & Satori 🔴 LIVE Coding & Chill онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Johnny Magrippis 01 Январь 1970, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 344 раз и оно понравилось 8 людям.