🌄 Dynamic Social Preview Images with SvelteKit & Puppeteer 🎎🔴 LIVE Coding & Chill
Have you ever shared a link in a social platform, like Discord or WhatsApp, and it looked absolutely AWESOME? An example would be a GitHub repo!
Have you shared YOUR app, and it looked… like a regular link? 😬
Let’s see if we can do better, with Dynamic Social Preview Images for Techy Cat!
We did go over adding Meta Tags in SvelteKit in this stream, where we created bespoke thumbnails: • META tags & social SNIPPETS with Svel...
Not required viewing, as in this stream we’ll be focusing on how we can generate our social preview images, dynamically!
Suggest features, as we’re doing it live 🙌
Like anything I show in this channel, this is REAL and you can click around yourself 👾 https://techy.cat
— Agenda —
✅ What are Social Preview Images? Why make them dynamic?
✅ Discord community + vote what to build on October 21st! / discord
✅ Recap how we’ve done Meta tags in Techy Cat
✅ Build Svelte UI of a Social Preview
✅ Refactor so we can reset to an almost empty layout!
✅ Dynamic properties from search parameters
✅ SvelteKit Endpoint to return an image
✅ Setup Puppeteer: https://github.com/puppeteer/puppeteer
✅ Run in Endpoint, Stream a screenshot with Puppeteer!
❌ Cache heavily
✅ Deploy to Vercel and see if it actually works on serverless… (it doesn't)
❌ AI-generated images as base???
✅ Next steps + make yourselves heard!
It's likely we'll be adding / demo-ing stuff in this app, so click around yourself: https://techy.cat
See the code: https://github.com/jmagrippis/techy-cat
— COMMUNITY —
I've just started a DISCORD SERVER for us 😱: / discord
— 🥳🥳🥳 —
— Highlighted software —
SvelteKit: https://kit.svelte.dev/
Puppeteer: https://github.com/puppeteer/puppeteer
No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄
My own website: https://magrippis.com/
Search for `@jmagrippis` to find me on socials like Discord, Instagram & Twitter!
Between the comment section and the socials, let me know *somewhere* what you’d like me to cover next 🙌
--
TIMESTAMPS
--
0:00 - Hello and welcome 👋 everyone
0:45 - Agenda overview
1:35 - What are Social Preview Images? Why make them dynamic?
8:55 - The clear plan for today & Discord community for the future
11:40 - More technical recap of how we’ve done Meta tags in Techy Cat
16:35 - Build Svelte UI of a Social Preview
43:30 - BREAK / coffee & chat
48:50 - Refactor so we can reset to an almost empty layout!
53:20 - DEMO 🥳🥳🥳 TIME
55:45 - Dynamic properties from search parameters
1:02:35 - SvelteKit Endpoint to return an image
1:10:05 - Setup Puppeteer: https://github.com/puppeteer/puppeteer
1:12:50 - DEMO 🥳 Run in Endpoint, Stream a screenshot with Puppeteer! 🥳 DEMO
1:13:25 - Amend to hit our own URL and screenshot our Social Preview Component!
1:17:00 - DEMO 🥳 "This is gonna work" 🥳 DEMO
1:19:55 - Sanity-check, style tweaks and proof of dynamism
1:25:40 - Push to GitHub, deploy with Vercel!
1:31:20 - DEMO 😬 Does it actually work on serverless?! (spoiler alert: no) 😬 DEMO
1:32:40 - Debugging what's wrong!
1:41:25 - App idea for the marathon stream!
1:42:30 - BREAK / agenda recap, coffee & chat
1:46:20 - More debugging!
1:47:35 - Try screenshotting with Playwright instead of Puppeteer
2:13:50 - Recap, concerns and next steps
2:15:00 - OUTRO, final chats and make yourself heard!
Смотрите видео 🌄 Dynamic Social Preview Images with SvelteKit & Puppeteer 🎎🔴 LIVE Coding & Chill онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Johnny Magrippis 01 Январь 1970, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 718 раз и оно понравилось 27 людям.