Add caption, semantic description conditionally to photo meta

__tests__/photo.test.ts

@@ -0,0 +1,34 @@
+import { descriptionForPhoto, Photo } from '@/photo';
+
+const PHOTO: Partial<Photo> = {
+  takenAt: new Date('2025-01-01 12:00:00'),
+};
+
+const PHOTO_SEMANTIC: Partial<Photo> = {
+  ...PHOTO,
+  semanticDescription: 'Semantic Description',
+};
+
+const PHOTO_CAPTION: Partial<Photo> = {
+  ...PHOTO_SEMANTIC,
+  caption: 'Caption',
+};
+
+describe('Should generate photo description', () => {
+  it('with caption', () => {
+    expect(descriptionForPhoto(PHOTO_CAPTION as Photo))
+      .toBe('Caption');
+  });
+  it('with semantic description (disabled)', () => {
+    expect(descriptionForPhoto(PHOTO_SEMANTIC as Photo))
+      .toBe('01 JAN 2025 12:00PM');
+  });
+  it('with semantic description (enabled)', () => {
+    expect(descriptionForPhoto(PHOTO_SEMANTIC as Photo, true))
+      .toBe('Semantic Description');
+  });
+  it('with date', () => {
+    expect(descriptionForPhoto(PHOTO as Photo))
+      .toBe('01 JAN 2025 12:00PM');
+  });
+});

app/film/[film]/[photoId]/page.tsx

@@ -41,12 +41,13 @@ export async function generateMetadata({
 
   const title = titleForPhoto(photo);
   const description = descriptionForPhoto(photo);
+  const descriptionHtml = descriptionForPhoto(photo, true);
   const images = absolutePathForPhotoImage(photo);
   const url = absolutePathForPhoto({ photo, film: film });
 
   return {
     title,
-    description,
+    description: descriptionHtml,
     openGraph: {
       title,
       images,

app/focal/[focal]/[photoId]/page.tsx

@@ -38,12 +38,13 @@ export async function generateMetadata({
 
   const title = titleForPhoto(photo);
   const description = descriptionForPhoto(photo);
+  const descriptionHtml = descriptionForPhoto(photo, true);
   const images = absolutePathForPhotoImage(photo);
   const url = absolutePathForPhoto({ photo, focal });
 
   return {
     title,
-    description,
+    description: descriptionHtml,
     openGraph: {
       title,
       images,

app/lens/[make]/[model]/[photoId]/page.tsx

@@ -46,6 +46,7 @@ export async function generateMetadata({
 
   const title = titleForPhoto(photo);
   const description = descriptionForPhoto(photo);
+  const descriptionHtml = descriptionForPhoto(photo, true);
   const images = absolutePathForPhotoImage(photo);
   const url = absolutePathForPhoto({
     photo,
@@ -54,7 +55,7 @@ export async function generateMetadata({
 
   return {
     title,
-    description,
+    description: descriptionHtml,
     openGraph: {
       title,
       images,

app/p/[photoId]/page.tsx

@@ -38,12 +38,13 @@ export async function generateMetadata({
 
   const title = titleForPhoto(photo);
   const description = descriptionForPhoto(photo);
+  const descriptionHtml = descriptionForPhoto(photo, true);
   const images = absolutePathForPhotoImage(photo);
   const url = absolutePathForPhoto({ photo });
 
   return {
     title,
-    description,
+    description: descriptionHtml,
     openGraph: {
       title,
       images,

app/recipe/[recipe]/[photoId]/page.tsx

@@ -40,12 +40,13 @@ export async function generateMetadata({
 
   const title = titleForPhoto(photo);
   const description = descriptionForPhoto(photo);
+  const descriptionHtml = descriptionForPhoto(photo, true);
   const images = absolutePathForPhotoImage(photo);
   const url = absolutePathForPhoto({ photo, recipe });
 
   return {
     title,
-    description,
+    description: descriptionHtml,
     openGraph: {
       title,
       images,

app/shot-on/[make]/[model]/[photoId]/page.tsx

@@ -45,6 +45,7 @@ export async function generateMetadata({
 
   const title = titleForPhoto(photo);
   const description = descriptionForPhoto(photo);
+  const descriptionHtml = descriptionForPhoto(photo, true);
   const images = absolutePathForPhotoImage(photo);
   const url = absolutePathForPhoto({
     photo,
@@ -53,7 +54,7 @@ export async function generateMetadata({
 
   return {
     title,
-    description,
+    description: descriptionHtml,
     openGraph: {
       title,
       images,

app/tag/[tag]/[photoId]/page.tsx

@@ -37,12 +37,13 @@ export async function generateMetadata({
 
   const title = titleForPhoto(photo);
   const description = descriptionForPhoto(photo);
+  const descriptionHtml = descriptionForPhoto(photo, true);
   const images = absolutePathForPhotoImage(photo);
   const url = absolutePathForPhoto({ photo, tag });
 
   return {
     title,
-    description,
+    description: descriptionHtml,
     openGraph: {
       title,
       images,

app/tag/hidden/[photoId]/page.tsx

@@ -35,11 +35,12 @@ export async function generateMetadata({
 
   const title = titleForPhoto(photo);
   const description = descriptionForPhoto(photo);
+  const descriptionHtml = descriptionForPhoto(photo, true);
   const url = absolutePathForPhoto({ photo, tag: TAG_HIDDEN });
 
   return {
     title,
-    description,
+    description: descriptionHtml,
     openGraph: {
       title,
       description,

src/photo/index.ts

@@ -171,7 +171,12 @@ export const photoStatsAsString = (photo: Photo) => [
   photo.isoFormatted,
 ].join(' ');
 
-export const descriptionForPhoto = (photo: Photo) =>
+export const descriptionForPhoto = (
+  photo: Photo,
+  includeSemanticDescription?: boolean,
+) =>
+  photo.caption ||
+  (includeSemanticDescription && photo.semanticDescription) ||
   formatDate({ date: photo.takenAt }).toLocaleUpperCase();
 
 export const getPreviousPhoto = (photo: Photo, photos: Photo[]) => {