feat(www): add og images on docs & blog posts

[KATT]

Moved from #3379

Closes #3364

🎯 Changes

Adds Open Graph image generation to www build step, adds og meta tags to blog posts. OG images are generated using the title metadata of the blog post (if one is not passed the text will be set to "tRPC Blog Post"). OG images are served as static png files.

Open Graph generation is done in memory using satori from vercel (which is what they use under the hood in their new @vercel/og library).

The background and font used for the og generation can be swapped out in static/og-assets.

One caveat is that there seems to be an issue with satori where it will clip the bottom of the image used, so the source background image needs to be taller than the target resolution (I used 720px height when targeting 640px and it looked good).

Swizzles the BlogPostPageMetadata component to add the og meta tags.

✅ Checklist

• I have followed the steps listed in the Contributing guide.
• If necessary, I have added documentation related to the changes made.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
next-prisma-starter	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Dec 15, 2022 at 9:50PM (UTC)
og-image	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Dec 15, 2022 at 9:50PM (UTC)
www	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Dec 15, 2022 at 9:50PM (UTC)

[KATT]

let's gooo