Add site title to root og image

src/app/(static)/home-image/route.tsx

@@ -5,6 +5,7 @@ import {
   MAX_PHOTOS_TO_SHOW_HOME,
 } from '@/photo/image-response';
 import HomeImageResponse from '@/photo/image-response/HomeImageResponse';
+import { getIBMPlexMonoMedium } from '@/site/font';
 import { ImageResponse } from 'next/server';
 
 export const runtime = 'edge';
@@ -13,15 +14,17 @@ export async function GET() {
   const [
     photos,
     headers,
+    { fontFamily, fonts },
   ] = await Promise.all([
     getPhotosCached({ limit: MAX_PHOTOS_TO_SHOW_HOME }),
     getImageCacheHeadersForAuth(await auth()),
+    getIBMPlexMonoMedium(),
   ]);
 
   const { width, height } = IMAGE_OG_SMALL_SIZE;
 
   return new ImageResponse(
-    <HomeImageResponse {...{ photos, width, height }}/>,
-    { width, height, headers },
+    <HomeImageResponse {...{ photos, width, height, fontFamily }}/>,
+    { width, height, headers, fonts },
   );
 }

src/photo/image-response/HomeImageResponse.tsx

@@ -1,4 +1,6 @@
+import { SITE_DOMAIN_OR_TITLE } from '@/site/config';
 import { Photo } from '..';
+import ImageCaption from './components/ImageCaption';
 import ImageContainer from './components/ImageContainer';
 import ImagePhotoGrid from './components/ImagePhotoGrid';
 
@@ -6,10 +8,12 @@ export default function HomeImageResponse({
   photos,
   width,
   height,
+  fontFamily,
 }: {
   photos: Photo[]
   width: number
   height: number
+  fontFamily: string
 }) {
   return (
     <ImageContainer {...{ width, height }} >
@@ -20,6 +24,9 @@ export default function HomeImageResponse({
           height,
         }}
       />
+      <ImageCaption {...{ width, height, fontFamily }}>
+        {SITE_DOMAIN_OR_TITLE}
+      </ImageCaption>
     </ImageContainer>
   );
 }

src/photo/image-response/components/ImageCaption.tsx

@@ -28,6 +28,9 @@ export default function ImageCaption({
       bottom: 0,
       left: 0,
       right: 0,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
     }}>
       {children}
     </div>

src/photo/index.ts

@@ -1,7 +1,4 @@
-import {
-  ABSOLUTE_PATH_FOR_HOME_IMAGE,
-  absolutePathForPhotoImage,
-} from '@/site/paths';
+import { ABSOLUTE_PATH_FOR_HOME_IMAGE } from '@/site/paths';
 import { formatDateFromPostgresString } from '@/utility/date';
 import {
   formatAperture,
@@ -146,8 +143,7 @@ export const getPhotosLimitForQuery = (
 };
 
 export const generateOgImageMetaForPhotos = (photos: Photo[]): Metadata => {
-  if (photos.length >= 6) {
-    // Show multiple photos once a 3x2 grid is available
+  if (photos.length > 0) {
     return {
       openGraph: {
         images: ABSOLUTE_PATH_FOR_HOME_IMAGE,
@@ -157,21 +153,10 @@ export const generateOgImageMetaForPhotos = (photos: Photo[]): Metadata => {
         images: ABSOLUTE_PATH_FOR_HOME_IMAGE,
       },
     };
-  } else if (photos.length > 0) {
-    // Otherwise show the first photo
-    const photo = photos[0];
-    return {
-      openGraph: {
-        images: absolutePathForPhotoImage(photo),
-      },
-      twitter: {
-        card: 'summary_large_image',
-        images: absolutePathForPhotoImage(photo),
-      },
-    };
+  } else {
+    // If there are no photos, refrain from showing an OG image
+    return {};
   }
-  // If there are no photos, refrain from showing an OG image
-  return {};
 };
 
 const PHOTO_ID_FORWARDING_TABLE: Record<string, string> = JSON.parse(