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(