From 583df5698e2a6a0a8678faa6ef2b39b8d0d18bdc Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 8 May 2024 11:47:20 -0500
Subject: [PATCH] Make og image access resilient on first deploy

---
 src/app/p/[photoId]/image/route.tsx       | 13 ++++++++++++-
 src/image-response/PhotoImageResponse.tsx |  4 +++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/app/p/[photoId]/image/route.tsx b/src/app/p/[photoId]/image/route.tsx
index 2e87c567..ac9a761d 100644
--- a/src/app/p/[photoId]/image/route.tsx
+++ b/src/app/p/[photoId]/image/route.tsx
@@ -6,6 +6,7 @@ import { ImageResponse } from 'next/og';
 import { getImageResponseCacheControlHeaders } from '@/image-response/cache';
 import { STATICALLY_OPTIMIZED } from '@/site/config';
 import { GENERATE_STATIC_PARAMS_LIMIT, getPhotoIds } from '@/photo/db';
+import { isNextImageReadyBasedOnPhotos } from '@/photo';
 
 export let generateStaticParams:
   (() => Promise<{ photoId: string }[]>) | undefined = undefined;
@@ -34,9 +35,19 @@ export async function GET(
   if (!photo) { return new Response('Photo not found', { status: 404 }); }
 
   const { width, height } = IMAGE_OG_DIMENSION;
+
+  // Make sure next/image can be reached from absolute urls,
+  // which may not exist on first pre-render
+  const isNextImageReady = await isNextImageReadyBasedOnPhotos([photo]);
   
   return new ImageResponse(
-    <PhotoImageResponse {...{ photo, width, height, fontFamily }} />,
+    <PhotoImageResponse {...{
+      photo,
+      width,
+      height,
+      fontFamily,
+      isNextImageReady,
+    }} />,
     { width, height, fonts, headers },
   );
 }
diff --git a/src/image-response/PhotoImageResponse.tsx b/src/image-response/PhotoImageResponse.tsx
index f633e513..2175add2 100644
--- a/src/image-response/PhotoImageResponse.tsx
+++ b/src/image-response/PhotoImageResponse.tsx
@@ -12,11 +12,13 @@ export default function PhotoImageResponse({
   width,
   height,
   fontFamily,
+  isNextImageReady = true,
 }: {
   photo: Photo
   width: NextImageSize
   height: number
   fontFamily: string
+  isNextImageReady: boolean
 }) {
   const model = photo.model
     ? formatCameraModelTextShort(cameraFromPhoto(photo))
@@ -25,7 +27,7 @@ export default function PhotoImageResponse({
   return (
     <ImageContainer {...{ width, height }}>
       <ImagePhotoGrid {...{
-        photos: [photo],
+        photos: isNextImageReady ? [photo] : [],
         width,
         height,
         ...OG_TEXT_BOTTOM_ALIGNMENT && { imagePosition: 'top' },