added cropping of preview images to a max height of 1000pixels to red…

…uce the filesize significantly if the preview is a full page screenshot

apps/web/app/api/assets/[assetId]/route.ts

@@ -1,5 +1,6 @@
 import { createContextFromRequest } from "@/server/api/client";
 import { and, eq } from "drizzle-orm";
+import sharp from "sharp";
 
 import { assets } from "@hoarder/db/schema";
 import { readAsset } from "@hoarder/shared/assetdb";
@@ -27,10 +28,33 @@ export async function GET(
     assetId: params.assetId,
   });
 
-  return new Response(asset, {
+  let finalAsset = asset;
+
+  const { searchParams } = new URL(request.url);
+  if (searchParams.has("preview")) {
+    finalAsset = await cropImage(asset);
+  }
+
+  return new Response(finalAsset, {
     status: 200,
     headers: {
       "Content-type": metadata.contentType,
     },
   });
 }
+
+async function cropImage(buffer: Buffer): Promise<Buffer> {
+  try {
+    const metadata = await sharp(buffer).metadata();
+    if (!metadata.height || metadata.height < 1000) {
+      return buffer;
+    }
+    return await sharp(buffer)
+      // cropping to 1000 pixels which is just a conservative guess and not something that is actually calculated
+      .extract({ left: 0, top: 0, width: metadata.width!, height: 1000 })
+      .toBuffer();
+  } catch (error) {
+    console.error("Error cropping image:", error);
+    throw error;
+  }
+}

apps/web/components/dashboard/bookmarks/LinkCard.tsx

@@ -44,7 +44,7 @@ function LinkImage({
     />
   );
 
-  const imageDetails = getBookmarkLinkImageUrl(link);
+  const imageDetails = getBookmarkLinkImageUrl(link, true);
 
   let img: React.ReactNode;
   if (isBookmarkStillCrawling(bookmark)) {

packages/shared-react/utils/assetUtils.ts

@@ -1,3 +1,3 @@
-export function getAssetUrl(assetId: string) {
-  return `/api/assets/${assetId}`;
+export function getAssetUrl(assetId: string, preview?: boolean) {
+  return `/api/assets/${assetId}${preview ? "?preview" : ""}`;
 }

packages/shared-react/utils/bookmarkUtils.ts

@@ -8,12 +8,21 @@ import { getAssetUrl } from "./assetUtils";
 
 const MAX_LOADING_MSEC = 30 * 1000;
 
-export function getBookmarkLinkImageUrl(bookmark: ZBookmarkedLink) {
+export function getBookmarkLinkImageUrl(
+  bookmark: ZBookmarkedLink,
+  preview?: boolean,
+) {
   if (bookmark.imageAssetId) {
-    return { url: getAssetUrl(bookmark.imageAssetId), localAsset: true };
+    return {
+      url: getAssetUrl(bookmark.imageAssetId, preview),
+      localAsset: true,
+    };
   }
   if (bookmark.screenshotAssetId) {
-    return { url: getAssetUrl(bookmark.screenshotAssetId), localAsset: true };
+    return {
+      url: getAssetUrl(bookmark.screenshotAssetId, preview),
+      localAsset: true,
+    };
   }
   return bookmark.imageUrl
     ? { url: bookmark.imageUrl, localAsset: false }