diff --git a/src/app/(static)/home-image/route.tsx b/src/app/(static)/home-image/route.tsx new file mode 100644 index 00000000..23dbab93 --- /dev/null +++ b/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( + ( + + ), + { + width: IMAGE_OG_WIDTH, + height: IMAGE_OG_HEIGHT, + fonts: [ + { + name: FONT_FAMILY_IBM_PLEX_MONO, + data: fontData, + style: 'normal', + }, + ], + headers, + }, + ); +} diff --git a/src/app/(static)/page.tsx b/src/app/(static)/page.tsx index 3736e778..43c75b58 100644 --- a/src/app/(static)/page.tsx +++ b/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 { - const photos = await getPhotos(); - return generateImageMetaForPhoto(photos[0]); -} - export default async function HomePage({ searchParams, }: { diff --git a/src/app/(static)/template-image-tight/route.tsx b/src/app/(static)/template-image-tight/route.tsx index 85893e29..1379a992 100644 --- a/src/app/(static)/template-image-tight/route.tsx +++ b/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, diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 79ce5152..765d74ae 100644 --- a/src/app/layout.tsx +++ b/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', diff --git a/src/photo/image-response/HomeImageResponse.tsx b/src/photo/image-response/HomeImageResponse.tsx new file mode 100644 index 00000000..c9e145c7 --- /dev/null +++ b/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 ( +
+ +
+ ); +} diff --git a/src/photo/image-response/PhotoGridImageResponse.tsx b/src/photo/image-response/PhotoGridImageResponse.tsx index fbcab83e..5cbc6412 100644 --- a/src/photo/image-response/PhotoGridImageResponse.tsx +++ b/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 (
{photos .slice(0, colCount * rowCount) - .map((photo, index) => - {titleForPhoto(photo)})} + .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 ( +
+ {titleForPhoto(photo)} +
+ ); + })}
); } diff --git a/src/services/postgres.ts b/src/services/postgres.ts index b0d0f490..aabd7eb9 100644 --- a/src/services/postgres.ts +++ b/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` 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));