Extract AT Protocol image caching to shared utility

actions/publications/subscribeEmail.tsx

@@ -65,12 +65,14 @@ export async function requestPublicationEmailSubscription(
   const normalizedPub = normalizePublicationRecord(publication?.record);
   const pubName = normalizedPub?.name;
   const pubUrl = normalizedPub?.url;
-  const assetsBaseUrl = process.env.NEXT_PUBLIC_APP_URL || "https://leaflet.pub";
+  const assetsBaseUrl =
+    process.env.NEXT_PUBLIC_APP_URL || "https://leaflet.pub";
   const pubIcon = normalizedPub?.icon
     ? blobRefToSrc(
         normalizedPub.icon.ref,
         new AtUri(publicationUri).host,
         assetsBaseUrl,
+        { width: 360 },
       )
     : undefined;
 
@@ -356,4 +358,3 @@ async function linkEmailToCurrentIdentity(
   if (!merged.ok) return Err("database_error");
   return Ok(current.id);
 }
-

app/(app)/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx

@@ -129,7 +129,9 @@ const PublicationCard = (props: {
         <PubIcon
           icon={
             record.icon
-              ? blobRefToSrc(record.icon.ref, new AtUri(uri).host)
+              ? blobRefToSrc(record.icon.ref, new AtUri(uri).host, undefined, {
+                  width: 360,
+                })
               : undefined
           }
           pubName={record.name}

app/(app)/(home-pages)/p/[didOrHandle]/PubListing.tsx

@@ -28,6 +28,8 @@ export const PubListing = (props: PubListingProps) => {
     ? blobRefToSrc(
         record?.theme?.backgroundImage?.image?.ref,
         new AtUri(props.uri).host,
+        undefined,
+        { width: 2000 },
       )
     : null;
 
@@ -58,7 +60,12 @@ export const PubListing = (props: PubListingProps) => {
             <PubIcon
               icon={
                 record.icon
-                  ? blobRefToSrc(record.icon.ref, new AtUri(props.uri).host)
+                  ? blobRefToSrc(
+                      record.icon.ref,
+                      new AtUri(props.uri).host,
+                      undefined,
+                      { width: 360 },
+                    )
                   : undefined
               }
               pubName={record.name}

app/(app)/[leaflet_id]/actions/PublishButton.tsx

@@ -429,6 +429,8 @@ const PubSelector = (props: {
                         ? blobRefToSrc(
                             pubRecord.icon.ref,
                             new AtUri(p.uri).host,
+                            undefined,
+                            { width: 360 },
                           )
                         : undefined
                     }

app/(app)/[leaflet_id]/publish/PublishPost.tsx

@@ -301,7 +301,12 @@ const PublishPostForm = (
                         title: props.pubRecord?.name,
                         icon:
                           props.pubRecord?.icon && pubDid
-                            ? blobRefToSrc(props.pubRecord.icon.ref, pubDid)
+                            ? blobRefToSrc(
+                                props.pubRecord.icon.ref,
+                                pubDid,
+                                undefined,
+                                { width: 360 },
+                              )
                             : undefined,
                       },
 
@@ -562,6 +567,8 @@ const PublishingTo = (props: {
                 ? blobRefToSrc(
                     props.record.icon.ref,
                     new AtUri(props.publication_uri).host,
+                    undefined,
+                    { width: 360 },
                   )
                 : undefined
             }

app/(app)/[leaflet_id]/publish/ShareOptions.tsx

@@ -58,7 +58,14 @@ export function ShareOptions(props: Props) {
         title: props.pubRecord?.name,
         icon:
           props.pubRecord?.icon && ownerProfile.did
-            ? blobRefToSrc(props.pubRecord.icon.ref, ownerProfile.did)
+            ? blobRefToSrc(
+                props.pubRecord.icon.ref,
+                ownerProfile.did,
+                undefined,
+                {
+                  width: 360,
+                },
+              )
             : undefined,
       },
 

app/(app)/lish/[did]/[publication]/DefaultPublicationHomepage.tsx

@@ -60,7 +60,11 @@ export const DefaultPublicationHomepage = ({
       />
       <PublicationHomeLayout
         showPageBackground={!!showPageBackground}
-        iconUrl={record?.icon ? blobRefToSrc(record.icon.ref, did) : undefined}
+        iconUrl={
+          record?.icon
+            ? blobRefToSrc(record.icon.ref, did, undefined, { width: 360 })
+            : undefined
+        }
         wordmark={wordmarkFromTheme(record?.theme, did)}
         navPages={navPages}
         publicationUrl={getPublicationURL(publication)}

app/(app)/lish/[did]/[publication]/[rkey]/Blocks/PublishedImageGallery.tsx

@@ -19,19 +19,29 @@ import {
   LightboxSlide,
 } from "components/Blocks/ImageGalleryBlock/ImageGalleryLightbox";
 
+function toImage(
+  i: PubLeafletBlocksImageGallery.Image,
+  did: string,
+  transform?: Parameters<typeof blobRefToSrc>[3],
+): GalleryImage {
+  return {
+    src: blobRefToSrc(i.image.ref, did, undefined, transform),
+    alt: i.alt || "",
+    width: i.aspectRatio.width,
+    height: i.aspectRatio.height,
+  };
+}
+
 export function PublishedImageGallery(props: {
   block: PubLeafletBlocksImageGallery.Main;
   did: string;
 }) {
   let { block, did } = props;
+  // Grid/strip/carousel cells get the 1200 tier (document-body column at
+  // retina density); the lightbox gets the full-resolution blob, built
+  // per-slide only when it's actually opened.
   let images = useMemo<GalleryImage[]>(
-    () =>
-      block.images.map((i) => ({
-        src: blobRefToSrc(i.image.ref, did),
-        alt: i.alt || "",
-        width: i.aspectRatio.width,
-        height: i.aspectRatio.height,
-      })),
+    () => block.images.map((i) => toImage(i, did, { width: 1200 })),
     [block.images, did],
   );
 
@@ -76,7 +86,9 @@ export function PublishedImageGallery(props: {
         count={images.length}
         index={lightboxIndex}
         onIndexChange={setLightboxIndex}
-        renderSlide={(i) => <LightboxSlide image={images[i]} />}
+        renderSlide={(i) => (
+          <LightboxSlide image={toImage(block.images[i], did)} />
+        )}
       />
     </div>
   );

app/(app)/lish/[did]/[publication]/[rkey]/PostContent.tsx

@@ -472,7 +472,7 @@ export let Block = ({
             <div
               className={`imagePreview w-[120px] m-2 -mb-2 bg-cover shrink-0 rounded-t-md border border-border rotate-[4deg] origin-center relative`}
               style={{
-                backgroundImage: `url(${blobRefToSrc(b.block.previewImage?.ref, did)})`,
+                backgroundImage: `url(${blobRefToSrc(b.block.previewImage?.ref, did, undefined, { width: 360 })})`,
                 backgroundPosition: "center",
               }}
             />
@@ -516,7 +516,9 @@ export let Block = ({
                 height={b.block.aspectRatio?.height}
                 width={b.block.aspectRatio?.width}
                 className={`${isFullBleed ? "w-full border-none" : "rounded-lg border border-transparent "}  ${className}`}
-                src={blobRefToSrc(b.block.image.ref, did)}
+                src={blobRefToSrc(b.block.image.ref, did, undefined, {
+                  width: 2000,
+                })}
               />
             </button>
             {b.block.alt && <ReadOnlyAltText alt={b.block.alt} />}

app/(app)/lish/[did]/[publication]/[rkey]/PublicationPageRenderer.tsx

@@ -138,10 +138,7 @@ export async function PublicationPageRenderer({
         firstBatch,
         await getProfiles(bylineDidsForPosts(firstBatch)),
       );
-      return [
-        key,
-        { uris: ordered.map((p) => p.uri), initialPosts },
-      ] as const;
+      return [key, { uris: ordered.map((p) => p.uri), initialPosts }] as const;
     }),
   );
 
@@ -207,7 +204,14 @@ export async function PublicationPageRenderer({
               pageWidth={normalizedPublication?.theme?.pageWidth}
               iconUrl={
                 normalizedPublication?.icon
-                  ? blobRefToSrc(normalizedPublication.icon.ref, did)
+                  ? blobRefToSrc(
+                      normalizedPublication.icon.ref,
+                      did,
+                      undefined,
+                      {
+                        width: 360,
+                      },
+                    )
                   : undefined
               }
               wordmark={wordmarkFromTheme(normalizedPublication?.theme, did)}

app/(app)/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx

@@ -109,7 +109,7 @@ let Block = async ({
             <div
               className={`imagePreview w-[120px] m-2 -mb-2 bg-cover shrink-0 rounded-t-md border border-border rotate-[4deg] origin-center relative`}
               style={{
-                backgroundImage: `url(${blobRefToSrc(b.block.previewImage?.ref, did, baseUrl)})`,
+                backgroundImage: `url(${blobRefToSrc(b.block.previewImage?.ref, did, baseUrl, { width: 360 })})`,
                 backgroundPosition: "center",
               }}
             />
@@ -123,7 +123,7 @@ let Block = async ({
           alt={b.block.alt}
           height={b.block.aspectRatio?.height}
           width={b.block.aspectRatio?.width}
-          src={blobRefToSrc(b.block.image.ref, did, baseUrl)}
+          src={blobRefToSrc(b.block.image.ref, did, baseUrl, { width: 1200 })}
         />
       );
     }
@@ -141,7 +141,7 @@ let Block = async ({
               alt={image.alt}
               height={image.aspectRatio.height}
               width={image.aspectRatio.width}
-              src={blobRefToSrc(image.image.ref, did, baseUrl)}
+              src={blobRefToSrc(image.image.ref, did, baseUrl, { width: 1200 })}
             />
           ))}
         </div>
@@ -202,7 +202,9 @@ function ListItem(props: {
         className={`listMarker shrink-0 mx-2 z-1 mt-[14px] h-[5px] w-[5px] rounded-full bg-secondary`}
       />
       {isChecklist && (
-        <div className={`pr-2 ${props.item.checked ? "text-accent-contrast" : "text-border"}`}>
+        <div
+          className={`pr-2 ${props.item.checked ? "text-accent-contrast" : "text-border"}`}
+        >
           {props.item.checked ? <CheckboxChecked /> : <CheckboxEmpty />}
         </div>
       )}

app/(app)/lish/[did]/[publication]/[rkey]/opengraph-image.ts

@@ -1,8 +1,8 @@
 import { ogScreenshotResponse } from "src/utils/screenshotPage";
 import { supabaseServerClient } from "supabase/serverClient";
 import { jsonToLex } from "@atproto/lexicon";
-import { fetchAtprotoBlob } from "app/api/atproto_images/route";
 import { normalizeDocumentRecord } from "src/utils/normalizeRecords";
+import { coverImageRedirect } from "src/utils/ogCoverImageRedirect";
 import { resolveDocumentFilter } from "../resolveDocumentFilter";
 
 // OG content is effectively immutable post-publish, and each regeneration is a
@@ -30,28 +30,9 @@ export default async function OpenGraphImage(props: {
   if (document) {
     const docRecord = normalizeDocumentRecord(jsonToLex(document.data));
     if (docRecord?.coverImage) {
-      try {
-        // Get CID from the blob ref (handle both serialized and hydrated forms)
-        let cid =
-          (docRecord.coverImage.ref as unknown as { $link: string })["$link"] ||
-          docRecord.coverImage.ref.toString();
-
-        let imageResponse = await fetchAtprotoBlob(did, cid);
-        if (imageResponse) {
-          let imageBlob = await imageResponse.blob();
-
-          // Return the image with appropriate headers
-          return new Response(imageBlob, {
-            headers: {
-              "Content-Type": imageBlob.type || "image/jpeg",
-              "Cache-Control": "public, max-age=3600",
-            },
-          });
-        }
-      } catch (e) {
-        // Fall through to screenshot if cover image fetch fails
-        console.error("Failed to fetch cover image:", e);
-      }
+      let res = await coverImageRedirect(did, docRecord.coverImage.ref);
+      if (res) return res;
+      // Fall through to screenshot if the cover couldn't be cached
     }
   }
 

app/(app)/lish/[did]/[publication]/archive/page.tsx

@@ -130,7 +130,11 @@ export default async function PublicationArchive(props: {
         />
         <PublicationHomeLayout
           showPageBackground={!!record?.theme?.showPageBackground}
-          iconUrl={record?.icon ? blobRefToSrc(record.icon.ref, did) : undefined}
+          iconUrl={
+            record?.icon
+              ? blobRefToSrc(record.icon.ref, did, undefined, { width: 360 })
+              : undefined
+          }
           wordmark={wordmarkFromTheme(record?.theme, did)}
           navPages={publishedNavPages(publication.publication_pages)}
           publicationUrl={getPublicationURL(publication)}

app/(app)/lish/[did]/[publication]/dashboard/settings/SettingsContent.tsx

@@ -23,6 +23,7 @@ import {
   useCanSeePayments,
 } from "src/hooks/useEntitlement";
 import { useIdentityData } from "components/IdentityProvider";
+import { blobRefToSrc } from "src/utils/blobRefToSrc";
 import { InlineUpgradeToPro, UpgradeToProButton } from "../../UpgradeModal";
 import { Modal } from "components/Modal";
 import { Input } from "components/Input";
@@ -93,7 +94,9 @@ export function SettingsContent(props: { showPageBackground: boolean }) {
     setDescriptionValue(record.description || "");
     if (record.icon)
       setIconPreview(
-        `/api/atproto_images?did=${pubData.identity_did}&cid=${(record.icon.ref as unknown as { $link: string })["$link"]}`,
+        blobRefToSrc(record.icon.ref, pubData.identity_did, undefined, {
+          width: 360,
+        }),
       );
   }, [pubData, record]);
 

app/(app)/lish/[did]/[publication]/edit/PublicationDraftEditor.tsx

@@ -33,7 +33,7 @@ export function PublicationDraftEditor(props: {
 }) {
   let record = props.publicationRecord;
   const iconUrl = record?.icon
-    ? blobRefToSrc(record.icon.ref, props.did)
+    ? blobRefToSrc(record.icon.ref, props.did, undefined, { width: 360 })
     : undefined;
 
   if (!record) return;