Change home page og to grid

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

@@ -0,0 +1,41 @@
+import { auth } from '@/auth';
+import { getImageCacheHeadersForAuth } from '@/cache';
+import HomeImageResponse from '@/photo/image-response/HomeImageResponse';
+import { getPhotos } from '@/services/postgres';
+import { IMAGE_OG_HEIGHT, IMAGE_OG_WIDTH } from '@/site';
+import { FONT_FAMILY_IBM_PLEX_MONO, getIBMPlexMonoMedium } from '@/site/font';
+import { ImageResponse } from '@vercel/og';
+
+export const runtime = 'edge';
+
+export async function GET(request: Request) {
+  const photos = await getPhotos();
+  const fontData = await getIBMPlexMonoMedium();
+  const headers = await getImageCacheHeadersForAuth(await auth());
+
+  return new ImageResponse(
+    (
+      <HomeImageResponse {...{
+        photos,
+        request,
+        includeHeader: false,
+        outerMargin: 0,
+        width: IMAGE_OG_WIDTH,
+        height: IMAGE_OG_HEIGHT,
+        fontFamily: FONT_FAMILY_IBM_PLEX_MONO,
+      }}/>
+    ),
+    {
+      width: IMAGE_OG_WIDTH,
+      height: IMAGE_OG_HEIGHT,
+      fonts: [
+        {
+          name: FONT_FAMILY_IBM_PLEX_MONO,
+          data: fontData,
+          style: 'normal',
+        },
+      ],
+      headers,
+    },
+  );
+}

src/app/(static)/page.tsx

@@ -1,19 +1,13 @@
 import AnimateItems from '@/components/AnimateItems';
 import MorePhotos from '@/components/MorePhotos';
 import SiteGrid from '@/components/SiteGrid';
-import { generateImageMetaForPhoto, getPhotosLimitForQuery } from '@/photo';
+import { 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 generateImageMetaForPhoto(photos[0]);
-}
-
 export default async function HomePage({
   searchParams,
 }: {

src/app/(static)/template-image-tight/route.tsx

@@ -2,6 +2,7 @@ import { auth } from '@/auth';
 import { getImageCacheHeadersForAuth } from '@/cache';
 import DeployImageResponse from '@/photo/image-response/DeployImageResponse';
 import { getPhotos } from '@/services/postgres';
+import { IMAGE_OG_HEIGHT, IMAGE_OG_WIDTH } from '@/site';
 import { FONT_FAMILY_IBM_PLEX_MONO, getIBMPlexMonoMedium } from '@/site/font';
 import { ImageResponse } from '@vercel/og';
 
@@ -19,15 +20,15 @@ export async function GET(request: Request) {
         request,
         includeHeader: false,
         outerMargin: 0,
-        width: 1200,
-        height: 1200 * 900 / 1600,
+        width: IMAGE_OG_WIDTH,
+        height: IMAGE_OG_HEIGHT,
         verticalOffset: -30,
         fontFamily: FONT_FAMILY_IBM_PLEX_MONO,
       }}/>
     ),
     {
-      width: 1200,
-      height: 1200 * 900 / 1600,
+      width: IMAGE_OG_WIDTH,
+      height: IMAGE_OG_HEIGHT,
       fonts: [
         {
           name: FONT_FAMILY_IBM_PLEX_MONO,

src/app/layout.tsx

@@ -23,10 +23,13 @@ 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

@@ -0,0 +1,38 @@
+import { Photo } from '..';
+import PhotoGridImageResponse from './PhotoGridImageResponse';
+
+export default function HomeImageResponse({
+  photos,
+  request,
+  width,
+  height,
+  fontFamily,
+}: {
+  photos: Photo[]
+  request: Request
+  width: number
+  height: number
+  fontFamily: string
+}) {
+  return (
+    <div style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'column',
+      background: 'transparent',
+      width,
+      height,
+      fontFamily,
+    }}>
+      <PhotoGridImageResponse {...{
+        photos,
+        request,
+        colCount: 4,
+        rowCount: 3,
+        width,
+        height,
+      }} />
+    </div>
+  );
+}

src/photo/image-response/PhotoGridImageResponse.tsx

@@ -6,6 +6,7 @@ const IMAGE_WIDTH = 400;
 export default function PhotoGridImageResponse({
   photos,
   request,
+  height,
   width,
   colCount,
   rowCount,
@@ -14,13 +15,17 @@ export default function PhotoGridImageResponse({
 }: {
   photos: Photo[]
   request: Request
+  height?: number
   width: number
   colCount: number
   rowCount: number
   gap?: number
   verticalOffset?: number
 }) {
-  const imageWidth = (width - ((colCount - 1) * gap)) / colCount ;
+  const imageWidth = (width - ((colCount - 1) * gap)) / colCount;
+  const imageHeight = height
+    ? (height - ((rowCount - 1) * gap)) / rowCount
+    : undefined;
 
   return (
     <div style={{
@@ -30,28 +35,53 @@ export default function PhotoGridImageResponse({
     }}>
       {photos
         .slice(0, colCount * rowCount)
-        .map((photo, index) =>
-          <img
-            key={photo.id}
-            src={getNextImageUrlForRequest(
-              photo.url,
-              request,
-              IMAGE_WIDTH,
-            )}
-            alt={titleForPhoto(photo)}
-            width={IMAGE_WIDTH}
-            height={IMAGE_WIDTH / photo.aspectRatio}
-            style={{
-              width: imageWidth,
-              height: imageWidth / photo.aspectRatio,
-              ...(index + 1) % colCount !== 0 && {
-                marginRight: gap,
-              },
-              ...index < colCount * (rowCount - 1) && {
-                marginBottom: gap,
-              },
-            }}
-          />)}
+        .map((photo, index) => {
+          const photoWidth = imageHeight
+            ? imageHeight * photo.aspectRatio
+            : imageWidth;
+          const photoHeight = imageHeight ?? imageWidth / photo.aspectRatio;
+          const horizontalOffset = imageHeight
+            ? Math.abs((imageHeight * photo.aspectRatio - imageWidth) / 2)
+            : undefined;
+
+          return (
+            <div
+              key={photo.id}
+              style={{
+                display: 'flex',
+                position: 'relative',
+                width: imageWidth,
+                height: imageHeight ?? imageWidth / photo.aspectRatio,
+                ...(index + 1) % colCount !== 0 && {
+                  marginRight: gap,
+                },
+                ...index < colCount * (rowCount - 1) && {
+                  marginBottom: gap,
+                },
+                overflow: 'hidden',
+              }}
+            >
+              <img
+                src={getNextImageUrlForRequest(
+                  photo.url,
+                  request,
+                  IMAGE_WIDTH,
+                )}
+                alt={titleForPhoto(photo)}
+                width={IMAGE_WIDTH}
+                height={IMAGE_WIDTH / photo.aspectRatio}
+                style={{
+                  display: 'flex',
+                  width: photoWidth,
+                  height: photoHeight,
+                  ...horizontalOffset && {
+                    marginLeft: `-${horizontalOffset}px`,
+                  },
+                }}
+              />
+            </div>
+          );
+        })}
     </div>
   );
 }

src/services/postgres.ts

@@ -108,7 +108,7 @@ export const sqlUpdatePhotoInDb = (photo: PhotoDbInsert) =>
     latitude=${photo.latitude},
     longitude=${photo.longitude},
     film_simulation=${photo.filmSimulation},
-    priority_order=${photo.priorityOrder},
+    priority_order=${photo.priorityOrder || null},
     taken_at=${photo.takenAt},
     taken_at_naive=${photo.takenAtNaive},
     updated_at=${(new Date()).toISOString()}
@@ -146,7 +146,7 @@ const sqlGetPhotosFromDbSortedByPriority = (
 ) =>
   sql<PhotoDb>`
     SELECT * FROM photos
-    ORDER BY priority_order ASC
+    ORDER BY priority_order ASC, taken_at DESC
     LIMIT ${limit} OFFSET ${offset}
   `
     .then(({ rows }) => rows.map(parsePhotoFromDb));