og-image fix 2

Author: DexterStorey

src/app/(rest)/blog/[slug]/opengraph-image.tsx

@@ -0,0 +1,13 @@
+import { getBlogSocialImageResponse } from '../social-image'
+
+export const runtime = 'nodejs'
+export const revalidate = 86400
+
+type Params = {
+	params: Promise<{ slug: string }>
+}
+
+export async function GET(_request: Request, { params }: Params) {
+	const { slug } = await params
+	return getBlogSocialImageResponse(slug)
+}

src/app/(rest)/blog/[slug]/opengraph-image/route.ts

@@ -24,12 +24,25 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 	const { slug } = await params
 
 	const { metadata } = await getPost(slug)
-
-	return createMetadata({
+	const socialImageAlt = metadata.title
+	const socialMetadataPath = `/blog/${slug}`
+	const baseMetadata = createMetadata({
 		description: metadata.description,
-		pathname: `/blog/${slug}`,
+		pathname: socialMetadataPath,
 		title: `${metadata.title} | ${META.title}`
 	})
+
+	return {
+		...baseMetadata,
+		openGraph: {
+			...(baseMetadata.openGraph ?? {}),
+			images: [{ alt: socialImageAlt, url: `${socialMetadataPath}/opengraph-image` }]
+		},
+		twitter: {
+			...(baseMetadata.twitter ?? {}),
+			images: [{ alt: socialImageAlt, url: `${socialMetadataPath}/twitter-image` }]
+		}
+	}
 }
 
 export default async function Page({ params }: Props) {

src/app/(rest)/blog/[slug]/page.tsx

@@ -1,26 +1,20 @@
 import { readFile } from 'node:fs/promises'
 import path from 'node:path'
 import { ImageResponse } from 'next/og'
-import { getPost, getPostSlugs } from '~/lib/utils/posts'
+import { getPost } from '~/lib/utils/posts'
 import { Rubric } from '~/ui/logos/rubric'
 
-export const runtime = 'nodejs'
-export const revalidate = 86400
-export const contentType = 'image/png'
-export const size = {
+export const BLOG_SOCIAL_IMAGE_ALT =
+	'Applied AI lab helping companies build intelligent applications'
+export const BLOG_SOCIAL_IMAGE_SIZE = {
 	height: 630,
 	width: 1200
 }
 
 const fontDataPromise = readFile(path.join(process.cwd(), 'src/app/fonts/matter-regular.woff'))
 const bannerSrcCache = new Map<string, string>()
 
-export async function generateStaticParams() {
-	const slugs = await getPostSlugs()
-	return slugs.map(slug => ({ slug }))
-}
-
-export const Component = ({
+const BlogSocialImage = ({
 	title,
 	backgroundImageUrl
 }: {
@@ -113,14 +107,12 @@ const getBannerSrc = async (bannerImageUrl: string) => {
 	return bannerSrc
 }
 
-export default async function Response({ params }: { params: Promise<{ slug: string }> }) {
-	const { slug } = await params
-
+export const getBlogSocialImageResponse = async (slug: string) => {
 	const [{ metadata }, localFont] = await Promise.all([getPost(slug), fontDataPromise])
 	const bannerSrc = await getBannerSrc(metadata.bannerImageUrl)
 
-	return new ImageResponse(<Component title={metadata.title} backgroundImageUrl={bannerSrc} />, {
-		...size,
+	return new ImageResponse(<BlogSocialImage title={metadata.title} backgroundImageUrl={bannerSrc} />, {
+		...BLOG_SOCIAL_IMAGE_SIZE,
 		fonts: [
 			{
 				data: localFont,

…app/(rest)/blog/[slug]/twitter-image.tsx …/app/(rest)/blog/[slug]/social-image.tsxsrc/app/(rest)/blog/[slug]/twitter-image.tsx renamed to src/app/(rest)/blog/[slug]/social-image.tsx src/app/(rest)/blog/[slug]/twitter-image.tsx renamed to src/app/(rest)/blog/[slug]/social-image.tsx

@@ -0,0 +1,13 @@
+import { getBlogSocialImageResponse } from '../social-image'
+
+export const runtime = 'nodejs'
+export const revalidate = 86400
+
+type Params = {
+	params: Promise<{ slug: string }>
+}
+
+export async function GET(_request: Request, { params }: Params) {
+	const { slug } = await params
+	return getBlogSocialImageResponse(slug)
+}

src/app/(rest)/blog/[slug]/twitter-image/route.ts

@@ -13,13 +13,15 @@ export const env = createEnv({
 		ROS_API_URL: process.env.ROS_API_URL,
 		ROS_SECRET: process.env.ROS_SECRET,
 		URL: process.env.URL,
+		VERCEL_PROJECT_PRODUCTION_URL: process.env.VERCEL_PROJECT_PRODUCTION_URL,
 		VERCEL_URL: process.env.VERCEL_URL
 	},
 	server: {
 		NODE_ENV: z.string().min(1),
 		ROS_API_URL: z.string().min(1),
 		ROS_SECRET: z.string().min(1),
 		URL: z.string().min(1),
+		VERCEL_PROJECT_PRODUCTION_URL: z.string().min(1).optional(),
 		VERCEL_URL: z.string().min(1).optional()
 	}
 })

src/lib/env.ts

@@ -1,7 +1,8 @@
 import { env } from '~/lib/env'
 
 export const getBaseUrl = () => {
-	const host = env.VERCEL_URL ?? env.URL
+	const host = env.URL || env.VERCEL_PROJECT_PRODUCTION_URL || env.VERCEL_URL
+	if (!host) throw new Error('Missing URL configuration')
 	const protocol = host.includes('localhost') ? 'http' : 'https'
 	return `${protocol}://${host}`
 }