Added product slug to image url

next.config.mjs

@@ -17,7 +17,7 @@ const nextConfig = {
         hostname: "bevgyjm5apuichhj.public.blob.vercel-storage.com",
         port: "",
         pathname: "/**",
-        search: "",
+        // search: "",
       },
     ],
   },

src/app/(category-sidebar)/[collection]/page.tsx

@@ -35,7 +35,11 @@ export default async function Home(props: {
                 <Image
                   loading={imageCount++ < 15 ? "eager" : "lazy"}
                   decoding="sync"
-                  src={category.image_url ?? "/placeholder.svg"}
+                  src={
+                    category.image_url
+                      ? category.image_url + `?category=${category.slug}`
+                      : "/placeholder.svg"
+                  }
                   alt={`A small picture of ${category.name}`}
                   className="mb-2 h-14 w-14 border hover:bg-yellow-200"
                   width={48}

src/app/(category-sidebar)/page.tsx

@@ -29,7 +29,11 @@ export default async function Home() {
                 <Image
                   loading={imageCount++ < 15 ? "eager" : "lazy"}
                   decoding="sync"
-                  src={category.image_url ?? "/placeholder.svg"}
+                  src={
+                    category.image_url
+                      ? category.image_url + `?category=${category.slug}`
+                      : "/placeholder.svg"
+                  }
                   alt={`A small picture of ${category.name}`}
                   className="mb-2 h-14 w-14 border hover:bg-yellow-200"
                   width={48}

src/app/(category-sidebar)/products/[category]/[subcategory]/[product]/page.tsx

@@ -81,7 +81,11 @@ export default async function Page(props: {
           <Image
             loading="eager"
             decoding="sync"
-            src={productData.image_url ?? "/placeholder.svg?height=64&width=64"}
+            src={
+              productData.image_url
+                ? productData.image_url + `?product=${productData.slug}`
+                : "/placeholder.svg?height=64&width=64"
+            }
             alt={`A small picture of ${productData.name}`}
             height={256}
             quality={80}

src/app/(category-sidebar)/products/[category]/page.tsx

@@ -51,7 +51,12 @@ export default async function Page(props: {
                       <Image
                         loading="eager"
                         decoding="sync"
-                        src={subcategory.image_url ?? "/placeholder.svg"}
+                        src={
+                          subcategory.image_url
+                            ? subcategory.image_url +
+                              `?subcategory=${subcategory.slug}`
+                            : "/placeholder.svg"
+                        }
                         alt={`A small picture of ${subcategory.name}`}
                         width={48}
                         height={48}

src/app/order/dynamic.tsx

@@ -47,7 +47,11 @@ function CartItem({ product }: { product: CartItem }) {
             <Image
               loading="eager"
               decoding="sync"
-              src={product.image_url ?? "/placeholder.svg"}
+              src={
+                product.image_url
+                  ? product.image_url + `?product=${product.slug}`
+                  : "/placeholder.svg"
+              }
               alt="Product"
               width={256}
               height={256}

src/components/search-dropdown.tsx

@@ -123,7 +123,11 @@ export function SearchDropdownComponent() {
                       <Image
                         loading="eager"
                         decoding="sync"
-                        src={item.image_url ?? "/placeholder.svg"}
+                        src={
+                          item.image_url
+                            ? item.image_url + `?product=${item.slug}`
+                            : "/placeholder.svg"
+                        }
                         alt=""
                         className="h-10 w-10 pr-2"
                         height={40}

src/components/ui/link.tsx

@@ -2,7 +2,7 @@
 
 import NextLink from "next/link";
 import { useRouter } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 
 type PrefetchImage = {
   srcset: string;
@@ -12,10 +12,6 @@ type PrefetchImage = {
   loading: string;
 };
 
-function sleep(ms: number) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
 async function prefetchImages(href: string) {
   if (!href.startsWith("/") || href.startsWith("/order") || href === "/") {
     return [];
@@ -35,58 +31,16 @@ async function prefetchImages(href: string) {
 const seen = new Set<string>();
 
 export const Link: typeof NextLink = (({ children, ...props }) => {
-  const [images, setImages] = useState<PrefetchImage[]>([]);
   const [preloading, setPreloading] = useState<(() => void)[]>([]);
   const linkRef = useRef<HTMLAnchorElement>(null);
   const router = useRouter();
-  let prefetchTimeout: NodeJS.Timeout | null = null; // Track the timeout ID
-
-  useEffect(() => {
-    if (props.prefetch === false) {
-      return;
-    }
-
-    const linkElement = linkRef.current;
-    if (!linkElement) return;
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const entry = entries[0];
-        if (entry.isIntersecting) {
-          // Set a timeout to trigger prefetch after 1 second
-          prefetchTimeout = setTimeout(async () => {
-            router.prefetch(String(props.href));
-            await sleep(0); // We want the doc prefetches to happen first.
-            void prefetchImages(String(props.href)).then((images) => {
-              setImages(images);
-            }, console.error);
-            // Stop observing once images are prefetched
-            observer.unobserve(entry.target);
-          }, 300); // 300ms delay
-        } else if (prefetchTimeout) {
-          // If the element leaves the viewport before 1 second, cancel the prefetch
-          clearTimeout(prefetchTimeout);
-          prefetchTimeout = null;
-        }
-      },
-      { rootMargin: "0px", threshold: 0.1 }, // Trigger when at least 10% is visible
-    );
-
-    observer.observe(linkElement);
-
-    return () => {
-      observer.disconnect(); // Cleanup the observer when the component unmounts
-      if (prefetchTimeout) {
-        clearTimeout(prefetchTimeout); // Clear any pending timeouts when component unmounts
-      }
-    };
-  }, [props.href, props.prefetch]);
 
   return (
     <NextLink
       ref={linkRef}
       prefetch={false}
-      onMouseEnter={() => {
+      onMouseEnter={async () => {
+        const images = await prefetchImages(String(props.href));
         router.prefetch(String(props.href));
         if (preloading.length) return;
         const p: (() => void)[] = [];

src/components/ui/product-card.tsx

@@ -33,7 +33,9 @@ export function ProductLink(props: {
     height: 256,
     quality: 80,
     width: 256,
-    src: imageUrl ?? "/placeholder.svg?height=64&width=64",
+    src: imageUrl
+      ? imageUrl + `?product=${product.slug}`
+      : "/placeholder.svg?height=64&width=64",
     alt: `A small picture of ${product.name}`,
   });
   useEffect(() => {
@@ -62,7 +64,11 @@ export function ProductLink(props: {
         <NextImage
           loading={props.loading}
           decoding="sync"
-          src={imageUrl ?? "/placeholder.svg?height=48&width=48"}
+          src={
+            imageUrl
+              ? imageUrl + `?product=${product.slug}`
+              : "/placeholder.svg?height=48&width=48"
+          }
           alt={`A small picture of ${product.name}`}
           width={48}
           height={48}