Rationalize rules around grid-based og image

src/app/(static)/grid/page.tsx

@@ -1,6 +1,6 @@
 import MorePhotos from '@/components/MorePhotos';
 import SiteGrid from '@/components/SiteGrid';
-import { generateImageMetaForPhoto, getPhotosLimitForQuery } from '@/photo';
+import { generateOgImageMetaForPhotos, getPhotosLimitForQuery } from '@/photo';
 import PhotoGrid from '@/photo/PhotoGrid';
 import PhotosEmptyState from '@/photo/PhotosEmptyState';
 import { getPhotos, getPhotosCount } from '@/services/postgres';
@@ -10,7 +10,7 @@ export const runtime = 'edge';
 
 export async function generateMetadata(): Promise<Metadata> {
   const photos = await getPhotos();
-  return generateImageMetaForPhoto(photos[0]);
+  return generateOgImageMetaForPhotos(photos);
 }
 
 export default async function GridPage({

src/app/(static)/page.tsx

@@ -1,13 +1,19 @@
 import AnimateItems from '@/components/AnimateItems';
 import MorePhotos from '@/components/MorePhotos';
 import SiteGrid from '@/components/SiteGrid';
-import { getPhotosLimitForQuery } from '@/photo';
+import { generateOgImageMetaForPhotos, getPhotosLimitForQuery } from '@/photo';
 import PhotoLarge from '@/photo/PhotoLarge';
 import PhotosEmptyState from '@/photo/PhotosEmptyState';
 import { getPhotos, getPhotosCount } from '@/services/postgres';
+import { Metadata } from 'next';
 
 export const runtime = 'edge';
 
+export async function generateMetadata(): Promise<Metadata> {
+  const photos = await getPhotos();
+  return generateOgImageMetaForPhotos(photos);
+}
+
 export default async function HomePage({
   searchParams,
 }: {

src/app/layout.tsx

@@ -23,13 +23,10 @@ export const metadata: Metadata = {
   openGraph: {
     title: SITE_TITLE,
     description: SITE_DESCRIPTION,
-    images: '/home-image',
   },
   twitter: {
     title: SITE_TITLE,
     description: SITE_DESCRIPTION,
-    images: '/home-image',
-    card: 'summary_large_image',
   },
   icons: [{
     url: '/favicon.ico',

src/photo/image-response/HomeImageResponse.tsx

@@ -14,6 +14,10 @@ export default function HomeImageResponse({
   height: number
   fontFamily: string
 }) {
+  const grid = photos.length >= 12
+    ? { colCount: 4, rowCount: 3 }
+    : { colCount: 3, rowCount: 2 };
+
   return (
     <div style={{
       display: 'flex',
@@ -29,8 +33,7 @@ export default function HomeImageResponse({
         photos,
         request,
         nextImageWidth: 200,
-        colCount: 4,
-        rowCount: 3,
+        ...grid,
         gap: 6,
         width,
         height,

src/photo/index.ts

@@ -1,4 +1,7 @@
-import { absoluteRouteForPhotoImage } from '@/site/routes';
+import {
+  ABSOLUTE_ROUTE_FOR_HOME_IMAGE,
+  absoluteRouteForPhotoImage,
+} from '@/site/routes';
 import { formatDateFromPostgresString } from '@/utility/date';
 import {
   formatAperture,
@@ -131,8 +134,22 @@ export const getPhotosLimitForQuery = (
   };
 };
 
-export const generateImageMetaForPhoto = (photo?: Photo): Metadata => photo
-  ? {
+export const generateOgImageMetaForPhotos = (photos: Photo[]): Metadata => {
+  if (photos.length >= 6) {
+    // Show multiple photos once a 3x2 grid is available
+    return {
+      openGraph: {
+        images: ABSOLUTE_ROUTE_FOR_HOME_IMAGE,
+      },
+      twitter: {
+        card: 'summary_large_image',
+        images: ABSOLUTE_ROUTE_FOR_HOME_IMAGE,
+      },
+    };
+  } else if (photos.length > 0) {
+    // Otherwise show the first photo
+    const photo = photos[0];
+    return {
       openGraph: {
         images: absoluteRouteForPhotoImage(photo),
       },
@@ -140,8 +157,11 @@ export const generateImageMetaForPhoto = (photo?: Photo): Metadata => photo
         card: 'summary_large_image',
         images: absoluteRouteForPhotoImage(photo),
       },
+    };
   }
-  : {};
+  // If there are no photos, refrain from showing an OG image
+  return {};
+};
 
 const PHOTO_ID_FORWARDING_TABLE: Record<string, string> = JSON.parse(
   process.env.PHOTO_ID_FORWARDING_TABLE || '{}'

src/site/routes.ts

@@ -5,6 +5,8 @@ export const ROUTE_ADMIN_UPLOAD = '/admin/uploads';
 
 export const ROUTE_ADMIN_UPLOAD_BLOB_HANDLER = '/admin/uploads/blob';
 
+export const ABSOLUTE_ROUTE_FOR_HOME_IMAGE = `${BASE_URL}/home-image`;
+
 export const routeForPhoto = (photo: Photo, share?: boolean) =>
   share
     ? `/p/${photo.idShort}/share`