Dynamic social previews for every page

import { Stack0 } from '@stack0/sdk'
 
const stack0 = new Stack0({ apiKey: process.env.STACK0_API_KEY })
 
// Generate og:image for a blog post
export async function generateOGImage(post: BlogPost) {
  const ogUrl = new URL('https://yoursite.com/og-template')
  ogUrl.searchParams.set('title', post.title)
  ogUrl.searchParams.set('author', post.author)
  ogUrl.searchParams.set('date', post.date)
 
  const { imageUrl } = await stack0.screenshots.captureAndWait({
    url: ogUrl.toString(),
    width: 1200,
    height: 630,  // Standard og:image size
    format: 'webp',
    deviceScaleFactor: 2,  // Retina quality
  })
 
  return imageUrl
}
 
// Or capture existing page as og:image
export async function capturePageAsOG(pageUrl: string) {
  const { imageUrl } = await stack0.screenshots.captureAndWait({
    url: pageUrl,
    width: 1200,
    height: 630,
    format: 'webp',
    selector: '#og-hero',  // Capture specific element
  })
 
  return imageUrl
}