Refine tag folder metadata

src/app/(static)/t/[tag]/page.tsx

@@ -1,12 +1,9 @@
 import SiteGrid from '@/components/SiteGrid';
+import { dateRangeForPhotos } from '@/photo';
 import PhotoGrid from '@/photo/PhotoGrid';
 import { getPhotos } from '@/services/postgres';
 import { absolutePathForTag, absolutePathForTagImage } from '@/site/paths';
-import {
-  descriptionForTaggedPhotos,
-  ogTitleForTag,
-  pageTitleForTag,
-} from '@/tag';
+import { descriptionForTaggedPhotos, titleForTag } from '@/tag';
 import PhotoTag from '@/tag/PhotoTag';
 import { cc } from '@/utility/css';
 import { Metadata } from 'next';
@@ -21,15 +18,14 @@ export async function generateMetadata({
   const photos = await getPhotos(undefined, undefined, undefined, tag);
 
   const url = absolutePathForTag(tag);
-  const titlePage = pageTitleForTag(tag);
-  const titleOg = ogTitleForTag(tag);
-  const description = descriptionForTaggedPhotos(photos);
+  const title = titleForTag(tag, photos);
+  const description = descriptionForTaggedPhotos(photos, true);
   const images = absolutePathForTagImage(tag);
 
   return {
-    title: titlePage,
+    title,
     openGraph: {
-      title: titleOg,
+      title,
       description,
       images,
       url,
@@ -46,8 +42,7 @@ export async function generateMetadata({
 export default async function TagPage({ params: { tag } }: TagProps) {
   const photos = await getPhotos(undefined, undefined, undefined, tag);
 
-  const dateStart = photos[0].takenAtNaiveFormattedShort;
-  const dateEnd = photos[photos.length - 1].takenAtNaiveFormattedShort;
+  const { start, end } = dateRangeForPhotos(photos);
 
   return (
     <SiteGrid
@@ -68,9 +63,9 @@ export default async function TagPage({ params: { tag } }: TagProps) {
             'text-right uppercase',
             'text-gray-400 dark:text-gray-500',
           )}>
-            {dateStart === dateEnd
-              ? dateStart
-              : <>{dateStart}<br />– {dateEnd}</>}
+            {start === end
+              ? start
+              : <>{start}<br />– {end}</>}
           </span>
         </div>
         <PhotoGrid photos={photos} />

src/photo/index.ts

@@ -63,8 +63,8 @@ export interface Photo extends PhotoDb {
   isoFormatted?: string
   exposureTimeFormatted?: string
   exposureCompensationFormatted?: string
-  takenAtNaiveFormatted?: string
-  takenAtNaiveFormattedShort?: string
+  takenAtNaiveFormatted: string
+  takenAtNaiveFormattedShort: string
 }
 
 export const parsePhotoFromDb = (photoDbRaw: PhotoDb): Photo => {
@@ -178,3 +178,12 @@ export const translatePhotoId = (shortId: string) => {
 
 export const titleForPhoto = (photo: Photo) =>
   photo.title || 'Untitled';
+
+export const dateRangeForPhotos = (photos: Photo[]) => {
+  const start = photos[0].takenAtNaiveFormattedShort;
+  const end = photos[photos.length - 1].takenAtNaiveFormattedShort;
+  const description = start === end
+    ? start
+    : `${start}–${end}`;
+  return { start, end, description };
+};

src/tag/index.ts

@@ -1,11 +1,13 @@
-import { Photo } from '@/photo';
+import { Photo, dateRangeForPhotos } from '@/photo';
 import { capitalizeWords } from '@/utility/string';
 
-export const pageTitleForTag = (tag: string) =>
-  `${capitalizeWords(tag.replaceAll('-', ' '))} Photos`;
+export const titleForTag = (tag: string, photos:Photo[]) =>
+  `${capitalizeWords(tag.replaceAll('-', ' '))} (${photos.length})`;
 
-export const ogTitleForTag = (tag: string) =>
-  `🏷️ ${capitalizeWords(tag.replaceAll('-', ' '))}`;
-
-export const descriptionForTaggedPhotos = (photos:Photo[]) =>
-  `${photos.length} tagged ${photos.length === 1 ? 'photo' : 'photos'}`;
+export const descriptionForTaggedPhotos = (
+  photos:Photo[],
+  dateBased?: boolean,
+) =>
+  dateBased
+    ? dateRangeForPhotos(photos).description.toUpperCase()
+    : `${photos.length} tagged ${photos.length === 1 ? 'photo' : 'photos'}`;