@xexr/blog-platform 1.0.14 → 1.0.15

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.0.15
+
+### Patch Changes
+
+- 796a777: Preserve higher-resolution article image previews when readers zoom inline images.
+
 ## 1.0.8
 
 ### Patch Changes

package/dist/components/ExpandableArticleImage.tsx

@@ -17,6 +17,7 @@ export function ExpandableArticleImage({
   }
 
   const previewId = `blog-image-preview-${hashImageSrc(src)}`;
+  const previewSrc = getPreviewImageSrc(src);
 
   return (
     <>
@@ -50,7 +51,7 @@ export function ExpandableArticleImage({
         />
         <div className="pointer-events-none relative z-10 flex min-h-screen w-full items-center justify-center p-4 sm:p-6">
           <img
-            src={src}
+            src={previewSrc}
             alt={alt}
             className="pointer-events-auto h-[88vh] w-[94vw] rounded-3xl object-contain shadow-2xl"
           />
@@ -67,6 +68,33 @@ export function ExpandableArticleImage({
   );
 }
 
+export function getPreviewImageSrc(src: string): string {
+  if (!src.includes("/cdn-cgi/image/")) {
+    return src;
+  }
+
+  try {
+    const url = new URL(src);
+    const pathParts = url.pathname.split("/");
+    const imageIndex = pathParts.findIndex((part) => part === "image");
+
+    if (
+      imageIndex === -1 ||
+      pathParts[imageIndex - 1] !== "cdn-cgi" ||
+      !pathParts[imageIndex + 1]
+    ) {
+      return src;
+    }
+
+    pathParts[imageIndex + 1] = "width=1600,quality=90,format=webp";
+    url.pathname = pathParts.join("/");
+
+    return url.toString();
+  } catch {
+    return src;
+  }
+}
+
 function hashImageSrc(src: string): string {
   let hash = 0;