diff --git a/src/app/(static)/home-image/route.tsx b/src/app/(static)/home-image/route.tsx index 0014e91d..6bf7ef96 100644 --- a/src/app/(static)/home-image/route.tsx +++ b/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( - , - { width, height, headers }, + , + { width, height, headers, fonts }, ); } diff --git a/src/photo/image-response/HomeImageResponse.tsx b/src/photo/image-response/HomeImageResponse.tsx index 5479dca4..512bda1a 100644 --- a/src/photo/image-response/HomeImageResponse.tsx +++ b/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 ( @@ -20,6 +24,9 @@ export default function HomeImageResponse({ height, }} /> + + {SITE_DOMAIN_OR_TITLE} + ); } diff --git a/src/photo/image-response/components/ImageCaption.tsx b/src/photo/image-response/components/ImageCaption.tsx index 39a8a740..a3a0234a 100644 --- a/src/photo/image-response/components/ImageCaption.tsx +++ b/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} diff --git a/src/photo/index.ts b/src/photo/index.ts index 94bfa5c1..16168697 100644 --- a/src/photo/index.ts +++ b/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 = JSON.parse(