Use blog header images for social sharing (TanStack#564)

* Use blog header images for social sharing instead of generic OG image

Updated blog posts to use their specific header images when shared on social media platforms (Twitter, Facebook, LinkedIn, etc.) instead of the generic TanStack OG image. This provides better visual context and engagement when blog posts are shared.

Changes:
- Extract header image URL from blog post markdown content
- Pass header image through blog post loader
- Include header image in SEO meta tags with full URL

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* Add Netlify Image CDN processing for blog social media images

Process blog header images through Netlify Image CDN to optimize them for social media sharing. Images are automatically resized to 1200x630px (the standard og:image dimensions), converted to JPG format, and quality-optimized to ensure fast loading and proper display across all social platforms.

Benefits:
- Consistent 1200x630 dimensions for all platforms (Facebook, Twitter, LinkedIn)
- Optimized file size with 80% quality JPG output
- Proper aspect ratio with cover fit mode
- Faster page preview generation on social media

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* Fix prettier formatting

---------

Co-authored-by: Claude <[email protected]>

Author: 2 people

content-collections.ts

@@ -12,11 +12,17 @@ const posts = defineCollection({
   }),
   transform: ({ content, ...post }) => {
     const frontMatter = extractFrontMatter(content)
+
+    // Extract header image (first image after frontmatter)
+    const headerImageMatch = content.match(/!\[([^\]]*)\]\(([^)]+)\)/)
+    const headerImage = headerImageMatch ? headerImageMatch[2] : undefined
+
     return {
       ...post,
       slug: post._meta.path,
       excerpt: frontMatter.excerpt,
       description: frontMatter.data.description,
+      headerImage,
       content,
     }
   },

src/routes/_libraries/blog.$.tsx

@@ -60,6 +60,7 @@ const fetchBlogPost = createServerFn({ method: 'GET' })
       published: post.published,
       content: post.content,
       authors: post.authors,
+      headerImage: post.headerImage,
       filePath,
     }
   })
@@ -68,12 +69,24 @@ export const Route = createFileRoute('/_libraries/blog/$')({
   staleTime: Infinity,
   loader: ({ params }) => fetchBlogPost({ data: params._splat }),
   head: ({ loaderData }) => {
+    // Generate optimized social media image URL using Netlify Image CDN
+    const getSocialImageUrl = (headerImage?: string) => {
+      if (!headerImage) return undefined
+
+      // Use Netlify Image CDN to optimize for social media (1200x630 is the standard for og:image)
+      const netlifyImageUrl = `https://tanstack.com/.netlify/images?url=${encodeURIComponent(
+        headerImage
+      )}&w=1200&h=630&fit=cover&fm=jpg&q=80`
+      return netlifyImageUrl
+    }
+
     return {
       meta: loaderData
         ? [
             ...seo({
               title: `${loaderData?.title ?? 'Docs'} | TanStack Blog`,
               description: loaderData?.description,
+              image: getSocialImageUrl(loaderData?.headerImage),
             }),
             {
               name: 'author',