🌄 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!
Watch video 🌄 Dynamic Social Preview Images with SvelteKit & Puppeteer 🎎🔴 LIVE Coding & Chill online without registration, duration hours minute second in high quality. This video was added by user Johnny Magrippis 01 January 1970, don't forget to share it with your friends and acquaintances, it has been viewed on our site 718 once and liked it 27 people.