feat: blog page og image

Author: kane50613

.npmrc

@@ -0,0 +1 @@
+public-hoist-pattern=@takumi-rs/core-*

netlify.toml

@@ -6,4 +6,6 @@
   publish = "dist/client"
 
 [functions]
+  node_bundler = "esbuild"
   directory = "netlify/functions"
+  included_files = ["node_modules/@takumi-rs/core-linux-x64-gnu/**/*.*"]

package.json

@@ -35,6 +35,7 @@
     "@sentry/vite-plugin": "^2.22.6",
     "@tailwindcss/typography": "^0.5.13",
     "@tailwindcss/vite": "^4.1.11",
+    "@takumi-rs/image-response": "^0.62.5",
     "@tanstack/pacer": "^0.16.4",
     "@tanstack/react-pacer": "^0.17.4",
     "@tanstack/react-query": "^5.90.12",

pnpm-lock.yaml

@@ -0,0 +1,42 @@
+import { Post } from 'content-collections'
+import { formatAuthors } from '~/utils/blog'
+
+export function BlogImage({
+  title,
+  description,
+  headerImage,
+  authors,
+  published,
+}: Post) {
+  return (
+    <div
+      tw="w-full h-full bg-cover bg-center bg-no-repeat bg-[#171717]"
+      style={{
+        backgroundImage: headerImage
+          ? `url(https://tanstack.com${headerImage})`
+          : 'none',
+      }}
+    >
+      <div tw="w-full h-full flex-col p-16 text-pretty" style={{
+        backdropFilter: 'brightness(0.3) blur(2px)',
+      }}>
+        <img
+          src="https://tanstack.com/images/logos/splash-dark.png"
+          tw="w-24"
+        />
+        <div tw="grow" />
+        <p tw="text-white text-6xl mb-4 font-bold line-clamp-2 text-ellipsis">
+          {title}
+        </p>
+        <p tw="text-white/85 text-4xl font-medium line-clamp-2 text-ellipsis mb-6">
+          {description}
+        </p>
+        <div tw="flex items-center gap-2">
+          <p tw="text-white/85 text-2xl font-medium uppercase tracking-wider font-mono">
+            by {formatAuthors(authors)} on {published}
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/og/BlogImage.tsx

@@ -89,6 +89,7 @@ import { Route as LibrariesDbVersionIndexRouteImport } from './routes/_libraries
 import { Route as LibrariesConfigVersionIndexRouteImport } from './routes/_libraries/config.$version.index'
 import { Route as LibrariesAiVersionIndexRouteImport } from './routes/_libraries/ai.$version.index'
 import { Route as LibraryIdVersionDocsIndexRouteImport } from './routes/$libraryId/$version.docs.index'
+import { Route as ApiOgBlogSplatRouteImport } from './routes/api/og/blog.$'
 import { Route as ApiAuthCallbackProviderRouteImport } from './routes/api/auth/callback/$provider'
 import { Route as LibraryIdVersionDocsChar123Char125DotmdRouteImport } from './routes/$libraryId/$version.docs.{$}[.]md'
 import { Route as LibraryIdVersionDocsContributorsRouteImport } from './routes/$libraryId/$version.docs.contributors'
@@ -513,6 +514,11 @@ const LibraryIdVersionDocsIndexRoute =
     path: '/',
     getParentRoute: () => LibraryIdVersionDocsRoute,
   } as any)
+const ApiOgBlogSplatRoute = ApiOgBlogSplatRouteImport.update({
+  id: '/api/og/blog/$',
+  path: '/api/og/blog/$',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ApiAuthCallbackProviderRoute = ApiAuthCallbackProviderRouteImport.update({
   id: '/api/auth/callback/$provider',
   path: '/api/auth/callback/$provider',
@@ -644,6 +650,7 @@ export interface FileRoutesByFullPath {
   '/$libraryId/$version/docs/contributors': typeof LibraryIdVersionDocsContributorsRoute
   '/$libraryId/$version/docs/{$}.md': typeof LibraryIdVersionDocsChar123Char125DotmdRoute
   '/api/auth/callback/$provider': typeof ApiAuthCallbackProviderRoute
+  '/api/og/blog/$': typeof ApiOgBlogSplatRoute
   '/$libraryId/$version/docs/': typeof LibraryIdVersionDocsIndexRoute
   '/ai/$version': typeof LibrariesAiVersionIndexRoute
   '/config/$version': typeof LibrariesConfigVersionIndexRoute
@@ -730,6 +737,7 @@ export interface FileRoutesByTo {
   '/$libraryId/$version/docs/contributors': typeof LibraryIdVersionDocsContributorsRoute
   '/$libraryId/$version/docs/{$}.md': typeof LibraryIdVersionDocsChar123Char125DotmdRoute
   '/api/auth/callback/$provider': typeof ApiAuthCallbackProviderRoute
+  '/api/og/blog/$': typeof ApiOgBlogSplatRoute
   '/$libraryId/$version/docs': typeof LibraryIdVersionDocsIndexRoute
   '/ai/$version': typeof LibrariesAiVersionIndexRoute
   '/config/$version': typeof LibrariesConfigVersionIndexRoute
@@ -823,6 +831,7 @@ export interface FileRoutesById {
   '/$libraryId/$version/docs/contributors': typeof LibraryIdVersionDocsContributorsRoute
   '/$libraryId/$version/docs/{$}.md': typeof LibraryIdVersionDocsChar123Char125DotmdRoute
   '/api/auth/callback/$provider': typeof ApiAuthCallbackProviderRoute
+  '/api/og/blog/$': typeof ApiOgBlogSplatRoute
   '/$libraryId/$version/docs/': typeof LibraryIdVersionDocsIndexRoute
   '/_libraries/ai/$version/': typeof LibrariesAiVersionIndexRoute
   '/_libraries/config/$version/': typeof LibrariesConfigVersionIndexRoute
@@ -916,6 +925,7 @@ export interface FileRouteTypes {
     | '/$libraryId/$version/docs/contributors'
     | '/$libraryId/$version/docs/{$}.md'
     | '/api/auth/callback/$provider'
+    | '/api/og/blog/$'
     | '/$libraryId/$version/docs/'
     | '/ai/$version'
     | '/config/$version'
@@ -1002,6 +1012,7 @@ export interface FileRouteTypes {
     | '/$libraryId/$version/docs/contributors'
     | '/$libraryId/$version/docs/{$}.md'
     | '/api/auth/callback/$provider'
+    | '/api/og/blog/$'
     | '/$libraryId/$version/docs'
     | '/ai/$version'
     | '/config/$version'
@@ -1094,6 +1105,7 @@ export interface FileRouteTypes {
     | '/$libraryId/$version/docs/contributors'
     | '/$libraryId/$version/docs/{$}.md'
     | '/api/auth/callback/$provider'
+    | '/api/og/blog/$'
     | '/$libraryId/$version/docs/'
     | '/_libraries/ai/$version/'
     | '/_libraries/config/$version/'
@@ -1137,6 +1149,7 @@ export interface RootRouteChildren {
   StatsNpmPackagesRoute: typeof StatsNpmPackagesRoute
   StatsNpmIndexRoute: typeof StatsNpmIndexRoute
   ApiAuthCallbackProviderRoute: typeof ApiAuthCallbackProviderRoute
+  ApiOgBlogSplatRoute: typeof ApiOgBlogSplatRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -1701,6 +1714,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LibraryIdVersionDocsIndexRouteImport
       parentRoute: typeof LibraryIdVersionDocsRoute
     }
+    '/api/og/blog/$': {
+      id: '/api/og/blog/$'
+      path: '/api/og/blog/$'
+      fullPath: '/api/og/blog/$'
+      preLoaderRoute: typeof ApiOgBlogSplatRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/api/auth/callback/$provider': {
       id: '/api/auth/callback/$provider'
       path: '/api/auth/callback/$provider'
@@ -2018,6 +2038,7 @@ const rootRouteChildren: RootRouteChildren = {
   StatsNpmPackagesRoute: StatsNpmPackagesRoute,
   StatsNpmIndexRoute: StatsNpmIndexRoute,
   ApiAuthCallbackProviderRoute: ApiAuthCallbackProviderRoute,
+  ApiOgBlogSplatRoute: ApiOgBlogSplatRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

src/routeTree.gen.ts

@@ -62,25 +62,14 @@ const fetchBlogPost = createServerFn({ method: 'GET' })
 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
-    }
-
+  head: ({ loaderData, params }) => {
     return {
       meta: loaderData
         ? [
             ...seo({
               title: `${loaderData?.title ?? 'Docs'} | TanStack Blog`,
               description: loaderData?.description,
-              image: getSocialImageUrl(loaderData?.headerImage),
+              image: `/api/og/blog/${params._splat}`,
             }),
             {
               name: 'author',

src/routes/_libraries/blog.$.tsx

@@ -0,0 +1,43 @@
+import { createFileRoute, notFound } from '@tanstack/react-router'
+import { ImageResponse, ImageResponseOptions } from '@takumi-rs/image-response'
+import { BlogImage } from '~/components/og/BlogImage'
+import { allPosts } from 'content-collections'
+
+function handleRedirects(docsPath: string) {
+  if (docsPath.includes('directives-the-new-framework-lock-in')) {
+    return 'directives-and-the-platform-boundary'
+  }
+
+  return docsPath
+}
+
+export const Route = createFileRoute('/api/og/blog/$')({
+  server: {
+    handlers: {
+      GET: async ({ params }) => {
+        if (!params._splat) {
+          throw notFound()
+        }
+
+        const slug = handleRedirects(params._splat)
+
+        const post = allPosts.find((post) => post.slug === slug)
+
+        if (!post) {
+          throw notFound()
+        }
+
+        return new ImageResponse(<BlogImage {...post} />, {
+          width: 1200,
+          height: 630,
+          format: 'webp',
+          headers: {
+            'Cache-Control': 'public, max-age=0, must-revalidate',
+            'Netlify-CDN-Cache-Control':
+              'public, max-age=300, durable, stale-while-revalidate=300',
+          },
+        })
+      },
+    },
+  },
+})

src/routes/api/og/blog.$.tsx

@@ -14,10 +14,10 @@ export default defineConfig({
   },
   ssr: {
     external: ['postgres'],
-    noExternal: ['drizzle-orm'],
+    noExternal: ['drizzle-orm', '@takumi-rs/image-response', '@takumi-rs/core'],
   },
   optimizeDeps: {
-    exclude: ['postgres'],
+    exclude: ['postgres', '@takumi-rs/core'],
   },
   build: {
     rollupOptions: {