From b0ea964ad74852e67de636ae00844865f44d8721 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 29 Feb 2024 23:16:58 -0600
Subject: [PATCH] Refactor photo link prefetching behavior

---
 src/components/ImageLarge.tsx | 26 +++++++++-----------------
 src/photo/PhotoLarge.tsx      | 27 +++++++++++++++++----------
 src/photo/PhotoSmall.tsx      |  4 +++-
 src/photo/PhotoTiny.tsx       |  4 +++-
 4 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/src/components/ImageLarge.tsx b/src/components/ImageLarge.tsx
index 927fb64e..d82a2212 100644
--- a/src/components/ImageLarge.tsx
+++ b/src/components/ImageLarge.tsx
@@ -1,10 +1,8 @@
 import { IMAGE_LARGE_WIDTH } from '@/site';
-import Link from 'next/link';
 import ImageBlurFallback from './ImageBlurFallback';
 
 export default function ImageLarge({
   className,
-  href,
   src,
   alt,
   aspectRatio,
@@ -12,7 +10,6 @@ export default function ImageLarge({
   priority,
 }: {
   className?: string
-  href: string
   src: string
   alt: string
   aspectRatio: number
@@ -20,19 +17,14 @@ export default function ImageLarge({
   priority?: boolean
 }) {
   return (
-    <Link
-      href={href}
-      className="active:brightness-75"
-    >
-      <ImageBlurFallback {...{
-        className,
-        src,
-        alt,
-        priority,
-        blurDataURL: blurData,
-        width: IMAGE_LARGE_WIDTH,
-        height: Math.round(IMAGE_LARGE_WIDTH / aspectRatio),
-      }} />
-    </Link>
+    <ImageBlurFallback {...{
+      className,
+      src,
+      alt,
+      priority,
+      blurDataURL: blurData,
+      width: IMAGE_LARGE_WIDTH,
+      height: Math.round(IMAGE_LARGE_WIDTH / aspectRatio),
+    }} />
   );
 };
diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index 0c3d1c2b..06b787bf 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/src/photo/PhotoLarge.tsx
@@ -22,6 +22,7 @@ export default function PhotoLarge({
   photo,
   primaryTag,
   priority,
+  prefetch = false,
   prefetchRelatedLinks = false,
   showCamera = true,
   showSimulation = true,
@@ -33,6 +34,7 @@ export default function PhotoLarge({
   photo: Photo
   primaryTag?: string
   priority?: boolean
+  prefetch?: boolean
   prefetchRelatedLinks?: boolean
   showCamera?: boolean
   showSimulation?: boolean
@@ -58,15 +60,20 @@ export default function PhotoLarge({
   return (
     <SiteGrid
       contentMain={
-        <ImageLarge
-          className="w-full"
-          alt={titleForPhoto(photo)}
+        <Link
           href={pathForPhoto(photo, primaryTag)}
-          src={photo.url}
-          aspectRatio={photo.aspectRatio}
-          blurData={photo.blurData}
-          priority={priority}
-        />}
+          className="active:brightness-75"
+          prefetch={prefetch}
+        >
+          <ImageLarge
+            className="w-full"
+            alt={titleForPhoto(photo)}
+            src={photo.url}
+            aspectRatio={photo.aspectRatio}
+            blurData={photo.blurData}
+            priority={priority}
+          />
+        </Link>}
       contentSide={
         <div className={clsx(
           'leading-snug',
@@ -82,9 +89,9 @@ export default function PhotoLarge({
               <div className="relative flex gap-2 items-start">
                 <div className="md:flex-grow">
                   <Link
-                    href={pathForPhoto(photo)}
+                    href={pathForPhoto(photo, primaryTag)}
                     className="font-bold uppercase"
-                    prefetch={false}
+                    prefetch={prefetch}
                   >
                     {titleForPhoto(photo)}
                   </Link>
diff --git a/src/photo/PhotoSmall.tsx b/src/photo/PhotoSmall.tsx
index 5437cfa9..e3d086d3 100644
--- a/src/photo/PhotoSmall.tsx
+++ b/src/photo/PhotoSmall.tsx
@@ -13,6 +13,7 @@ export default function PhotoSmall({
   simulation,
   selected,
   priority,
+  prefetch = false,
 }: {
   photo: Photo
   tag?: string
@@ -20,6 +21,7 @@ export default function PhotoSmall({
   simulation?: FilmSimulation
   selected?: boolean
   priority?: boolean
+  prefetch?: boolean
 }) {
   return (
     <Link
@@ -29,7 +31,7 @@ export default function PhotoSmall({
         'active:brightness-75',
         selected && 'brightness-50',
       )}
-      prefetch={false}
+      prefetch={prefetch}
     >
       <ImageSmall
         src={photo.url}
diff --git a/src/photo/PhotoTiny.tsx b/src/photo/PhotoTiny.tsx
index 641032bf..62accf18 100644
--- a/src/photo/PhotoTiny.tsx
+++ b/src/photo/PhotoTiny.tsx
@@ -9,11 +9,13 @@ export default function PhotoTiny({
   tag,
   selected,
   className,
+  prefetch = false,
 }: {
   photo: Photo
   tag?: string
   selected?: boolean
   className?: string
+  prefetch?: boolean
 }) {
   return (
     <Link
@@ -26,7 +28,7 @@ export default function PhotoTiny({
         'rounded-[0.15rem] overflow-hidden',
         'border border-gray-200 dark:border-gray-800',
       )}
-      prefetch={false}
+      prefetch={prefetch}
     >
       <ImageTiny
         src={photo.url}