From 236101d34e087fa5fab6a9ef1d2e9f39895f9483 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 5 Sep 2024 20:31:23 -0500
Subject: [PATCH] Wrap page titles in <h1> tags

---
 src/photo/PhotoDetailPage.tsx |  1 +
 src/photo/PhotoHeader.tsx     | 25 +++++++++++++++----------
 src/photo/PhotoLarge.tsx      | 18 ++++++++++++------
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/photo/PhotoDetailPage.tsx b/src/photo/PhotoDetailPage.tsx
index ecfd14d7..a23f0505 100644
--- a/src/photo/PhotoDetailPage.tsx
+++ b/src/photo/PhotoDetailPage.tsx
@@ -102,6 +102,7 @@ export default function PhotoDetailPage({
             priority
             prefetchRelatedLinks
             showTitle={Boolean(customHeader)}
+            showTitleAsH1
             showCamera={!camera}
             showSimulation={!simulation}
             shouldShare={shouldShare}
diff --git a/src/photo/PhotoHeader.tsx b/src/photo/PhotoHeader.tsx
index a0e33a56..d798eedf 100644
--- a/src/photo/PhotoHeader.tsx
+++ b/src/photo/PhotoHeader.tsx
@@ -77,6 +77,18 @@ export default function PhotoHeader({
         : <>{end}<br />– {start}</>}
     </span>;
 
+  const renderContentA = () => entity ?? (
+    selectedPhoto !== undefined &&
+      <PhotoLink
+        photo={selectedPhoto}
+        className="uppercase font-bold text-ellipsis truncate"
+      >
+        {
+          selectedPhoto.title ||
+          formatDate(selectedPhoto.takenAt, 'tiny')
+        }
+      </PhotoLink>);
+
   return (
     <AnimateItems
       type="bottom"
@@ -106,16 +118,9 @@ export default function PhotoHeader({
                 ? 'col-span-3 sm:col-span-3 lg:col-span-5'
                 : 'col-span-3 md:col-span-2 lg:col-span-3',
         )}>
-          {entity ?? (selectedPhoto !== undefined &&
-            <PhotoLink
-              photo={selectedPhoto}
-              className="uppercase font-bold text-ellipsis truncate"
-            >
-              {
-                selectedPhoto.title ||
-                formatDate(selectedPhoto.takenAt, 'tiny')
-              }
-            </PhotoLink>)}
+          {headerType === 'photo-detail-with-entity'
+            ? renderContentA()
+            : <h1>{renderContentA()}</h1>}
         </div>
         {/* Content B: Filter Set Meta or Photo Pagination */}
         <div className={clsx(
diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index 01fb21c3..fb87af1d 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/src/photo/PhotoLarge.tsx
@@ -42,6 +42,7 @@ export default function PhotoLarge({
   prefetchRelatedLinks = SHOULD_PREFETCH_ALL_LINKS,
   revalidatePhoto,
   showTitle = true,
+  showTitleAsH1,
   showCamera = true,
   showSimulation = true,
   shouldShare = true,
@@ -61,6 +62,7 @@ export default function PhotoLarge({
   prefetchRelatedLinks?: boolean
   revalidatePhoto?: RevalidatePhoto
   showTitle?: boolean
+  showTitleAsH1?: boolean
   showCamera?: boolean
   showSimulation?: boolean
   shouldShare?: boolean
@@ -103,6 +105,13 @@ export default function PhotoLarge({
     hasTitleContent ||
     hasMetaContent;
 
+  const renderPhotoLink = () =>
+    <PhotoLink
+      photo={photo}
+      className="font-bold uppercase flex-grow"
+      prefetch={prefetch}
+    />;
+
   return (
     <SiteGrid
       containerRef={ref}
@@ -146,12 +155,9 @@ export default function PhotoLarge({
           {/* Meta */}
           <div className="pr-2 md:pr-0">
             <div className="md:relative flex gap-2 items-start">
-              {hasTitle &&
-                <PhotoLink
-                  photo={photo}
-                  className="font-bold uppercase flex-grow"
-                  prefetch={prefetch}
-                />}
+              {hasTitle && (showTitleAsH1
+                ? <h1>{renderPhotoLink()}</h1>
+                : renderPhotoLink())}
               <div className="absolute right-0 translate-y-[-4px] z-10">
                 <AdminPhotoMenuClient {...{
                   photo,