From 9c813577e1deaf69166ef96fc72e24c4bd98ca04 Mon Sep 17 00:00:00 2001
From: Michael Novotny <manovotny@gmail.com>
Date: Wed, 2 Aug 2023 21:07:35 -0500
Subject: [PATCH 1/2] Optimizes image sizes (#1140)

---
 app/product/[handle]/page.tsx            | 31 ++++++++--------
 components/carousel.tsx                  | 35 +++++++++---------
 components/cart/modal.tsx                |  4 +-
 components/grid/three-items.tsx          | 12 +++---
 components/layout/product-grid-items.tsx |  6 +--
 components/product/gallery.tsx           | 47 ++++++++++++------------
 6 files changed, 69 insertions(+), 66 deletions(-)

diff --git a/app/product/[handle]/page.tsx b/app/product/[handle]/page.tsx
index 815078b56..d59423364 100644
--- a/app/product/[handle]/page.tsx
+++ b/app/product/[handle]/page.tsx
@@ -82,8 +82,8 @@ export default async function ProductPage({ params }: { params: { handle: string
         }}
       />
       <div className="mx-auto max-w-screen-2xl px-4">
-        <div className="rounded-lg border border-neutral-200 bg-white p-8 px-4 dark:border-neutral-800 dark:bg-black md:p-12 lg:grid lg:grid-cols-6">
-          <div className="lg:col-span-4">
+        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row">
+          <div className="h-full w-full basis-full lg:basis-4/6">
             <Gallery
               images={product.images.map((image: Image) => ({
                 src: image.url,
@@ -92,7 +92,7 @@ export default async function ProductPage({ params }: { params: { handle: string
             />
           </div>
 
-          <div className="py-6 pr-8 md:pr-12 lg:col-span-2">
+          <div className="basis-full lg:basis-2/6">
             <ProductDescription product={product} />
           </div>
         </div>
@@ -115,14 +115,13 @@ async function RelatedProducts({ id }: { id: string }) {
   return (
     <div className="py-8">
       <h2 className="mb-4 text-2xl font-bold">Related Products</h2>
-      <div className="flex w-full gap-4 overflow-x-auto pt-1">
-        {relatedProducts.map((product, i) => {
-          return (
-            <Link
-              key={i}
-              className="w-full flex-none min-[475px]:w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/5"
-              href={`/product/${product.handle}`}
-            >
+      <ul className="flex w-full gap-4 overflow-x-auto pt-1">
+        {relatedProducts.map((product) => (
+          <li
+            key={product.handle}
+            className="aspect-square w-full flex-none min-[475px]:w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/5"
+          >
+            <Link className="relative h-full w-full" href={`/product/${product.handle}`}>
               <GridTileImage
                 alt={product.title}
                 label={{
@@ -131,13 +130,13 @@ async function RelatedProducts({ id }: { id: string }) {
                   currencyCode: product.priceRange.maxVariantPrice.currencyCode
                 }}
                 src={product.featuredImage?.url}
-                width={600}
-                height={600}
+                fill
+                sizes="(min-width: 1024px) 20vw, (min-width: 768px) 25vw, (min-width: 640px) 33vw, (min-width: 475px) 50vw, 100vw"
               />
             </Link>
-          );
-        })}
-      </div>
+          </li>
+        ))}
+      </ul>
     </div>
   );
 }
diff --git a/components/carousel.tsx b/components/carousel.tsx
index d67ba5deb..a4c58bd5d 100644
--- a/components/carousel.tsx
+++ b/components/carousel.tsx
@@ -10,27 +10,28 @@ export async function Carousel() {
 
   return (
     <div className=" w-full overflow-x-auto pb-6 pt-1">
-      <div className="flex animate-carousel gap-4">
+      <ul className="flex animate-carousel gap-4">
         {[...products, ...products].map((product, i) => (
-          <Link
+          <li
             key={`${product.handle}${i}`}
-            href={`/product/${product.handle}`}
-            className="h-[30vh] w-2/3 flex-none md:w-1/3"
+            className="relative aspect-square h-[30vh] max-h-[275px] w-2/3 max-w-[475px] flex-none md:w-1/3"
           >
-            <GridTileImage
-              alt={product.title}
-              label={{
-                title: product.title,
-                amount: product.priceRange.maxVariantPrice.amount,
-                currencyCode: product.priceRange.maxVariantPrice.currencyCode
-              }}
-              src={product.featuredImage?.url}
-              width={600}
-              height={600}
-            />
-          </Link>
+            <Link href={`/product/${product.handle}`} className="relative h-full w-full">
+              <GridTileImage
+                alt={product.title}
+                label={{
+                  title: product.title,
+                  amount: product.priceRange.maxVariantPrice.amount,
+                  currencyCode: product.priceRange.maxVariantPrice.currencyCode
+                }}
+                src={product.featuredImage?.url}
+                fill
+                sizes="(min-width: 1024px) 25vw, (min-width: 768px) 33vw, 50vw"
+              />
+            </Link>
+          </li>
         ))}
-      </div>
+      </ul>
     </div>
   );
 }
diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
index a6b45b9ae..4fbfcc6ad 100644
--- a/components/cart/modal.tsx
+++ b/components/cart/modal.tsx
@@ -111,7 +111,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                             >
                               <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
                                 <Image
-                                  className="h-full w-full object-cover "
+                                  className="h-full w-full object-cover"
                                   width={64}
                                   height={64}
                                   alt={
@@ -141,7 +141,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                               />
                               <div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200 dark:border-neutral-700">
                                 <EditItemQuantityButton item={item} type="minus" />
-                                <p className="w-6 text-center ">
+                                <p className="w-6 text-center">
                                   <span className="w-full text-sm">{item.quantity}</span>
                                 </p>
                                 <EditItemQuantityButton item={item} type="plus" />
diff --git a/components/grid/three-items.tsx b/components/grid/three-items.tsx
index 4a680fc36..abb379e5c 100644
--- a/components/grid/three-items.tsx
+++ b/components/grid/three-items.tsx
@@ -6,13 +6,15 @@ import Link from 'next/link';
 function ThreeItemGridItem({ item, size }: { item: Product; size: 'full' | 'half' }) {
   return (
     <div
-      className={size === 'full' ? 'lg:col-span-4 lg:row-span-2' : 'lg:col-span-2 lg:row-span-1'}
+      className={size === 'full' ? 'md:col-span-4 md:row-span-2' : 'md:col-span-2 md:row-span-1'}
     >
-      <Link className="block h-full" href={`/product/${item.handle}`}>
+      <Link className="relative block aspect-square h-full w-full" href={`/product/${item.handle}`}>
         <GridTileImage
           src={item.featuredImage.url}
-          width={size === 'full' ? 1080 : 540}
-          height={size === 'full' ? 1080 : 540}
+          fill
+          sizes={
+            size === 'full' ? '(min-width: 768px) 66vw, 100vw' : '(min-width: 768px) 33vw, 100vw'
+          }
           priority={true}
           alt={item.title}
           label={{
@@ -38,7 +40,7 @@ export async function ThreeItemGrid() {
   const [firstProduct, secondProduct, thirdProduct] = homepageItems;
 
   return (
-    <section className="mx-auto grid max-w-screen-2xl gap-4 px-4 pb-4 lg:grid-cols-6 lg:grid-rows-2">
+    <section className="mx-auto grid max-w-screen-2xl gap-4 px-4 pb-4 md:grid-cols-6 md:grid-rows-2">
       <ThreeItemGridItem size="full" item={firstProduct} />
       <ThreeItemGridItem size="half" item={secondProduct} />
       <ThreeItemGridItem size="half" item={thirdProduct} />
diff --git a/components/layout/product-grid-items.tsx b/components/layout/product-grid-items.tsx
index d9060adbb..ea8a5ebf7 100644
--- a/components/layout/product-grid-items.tsx
+++ b/components/layout/product-grid-items.tsx
@@ -8,7 +8,7 @@ export default function ProductGridItems({ products }: { products: Product[] })
     <>
       {products.map((product) => (
         <Grid.Item key={product.handle} className="animate-fadeIn">
-          <Link className="inline-block h-full w-full" href={`/product/${product.handle}`}>
+          <Link className="relative inline-block h-full w-full" href={`/product/${product.handle}`}>
             <GridTileImage
               alt={product.title}
               label={{
@@ -17,8 +17,8 @@ export default function ProductGridItems({ products }: { products: Product[] })
                 currencyCode: product.priceRange.maxVariantPrice.currencyCode
               }}
               src={product.featuredImage?.url}
-              width={600}
-              height={600}
+              fill
+              sizes="(min-width: 768px) 33vw, (min-width: 640px) 50vw, 100vw"
             />
           </Link>
         </Grid.Item>
diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx
index 99742a917..d1f567aef 100644
--- a/components/product/gallery.tsx
+++ b/components/product/gallery.tsx
@@ -27,13 +27,13 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
     'h-full px-6 transition-all ease-in-out hover:scale-110 hover:text-black dark:hover:text-white flex items-center justify-center';
 
   return (
-    <div className="mr-8 h-full">
-      <div className="relative mb-12 h-full max-h-[550px] overflow-hidden">
+    <>
+      <div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden">
         {images[imageIndex] && (
           <Image
-            className="relative h-full w-full object-contain"
-            height={600}
-            width={600}
+            className="h-full w-full object-contain"
+            fill
+            sizes="(min-width: 1024px) 66vw, 100vw"
             alt={images[imageIndex]?.altText as string}
             src={images[imageIndex]?.src as string}
             priority={true}
@@ -60,7 +60,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
       </div>
 
       {images.length > 1 ? (
-        <div className="flex items-center justify-center gap-2 overflow-auto py-1">
+        <ul className="my-12 flex items-center justify-center gap-2 overflow-auto py-1 lg:mb-0">
           {images.map((image, index) => {
             const isActive = index === imageIndex;
             const imageSearchParams = new URLSearchParams(searchParams.toString());
@@ -68,25 +68,26 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
             imageSearchParams.set('image', index.toString());
 
             return (
-              <Link
-                aria-label="Enlarge product image"
-                key={image.src}
-                className="h-auto w-20"
-                href={createUrl(pathname, imageSearchParams)}
-                scroll={false}
-              >
-                <GridTileImage
-                  alt={image.altText}
-                  src={image.src}
-                  width={600}
-                  height={600}
-                  active={isActive}
-                />
-              </Link>
+              <li key={image.src} className="h-auto w-20">
+                <Link
+                  aria-label="Enlarge product image"
+                  href={createUrl(pathname, imageSearchParams)}
+                  scroll={false}
+                  className="h-full w-full"
+                >
+                  <GridTileImage
+                    alt={image.altText}
+                    src={image.src}
+                    width={80}
+                    height={80}
+                    active={isActive}
+                  />
+                </Link>
+              </li>
             );
           })}
-        </div>
+        </ul>
       ) : null}
-    </div>
+    </>
   );
 }

From 9e1388f97409ec7a5bba9da1f0a0b3bdb1e7c13b Mon Sep 17 00:00:00 2001
From: Michael Novotny <manovotny@gmail.com>
Date: Wed, 2 Aug 2023 21:17:11 -0500
Subject: [PATCH 2/2] Updates favicon (#1141)

Co-authored-by: Lee Robinson <lrobinson2011@gmail.com>
---
 app/favicon.ico | Bin 535 -> 15086 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/app/favicon.ico b/app/favicon.ico
index c4826c94780efdd7e92092dc77fd4388fd8cd7f5..dc7d8431e47ee24c71eebaffe30786769b348353 100644
GIT binary patch
literal 15086
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
Cr`cHm

literal 535
zcmV+y0_gpTP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0jx<xK~#7F#aDrG
zgD?zK?mB=+&<16LG6EaG2F(UZCI}lqH)toIouJ(SHgGqf62Uo_0G1sHfA^O=V*6jR
zbch|up@<3bg%}aBf5!MFHpCy|C-I|ywg`}z6E(5*VA1al21j@H6dmIk0)WJN0dd0`
zJhBljEN+{KT;jNrxF{29WpUet8Z+Qsa9NhMh!|qxrZCa>5EicMx~-}zG!tkWD18q&
z91g8P9LFIBawD!nqPLNzX@~*cYeVL{xh%`8IA246xMAj<eoprS(Hj<Q;M->tM{H0O
z#XaI}uPuMcaNF4!wqQV8vbJooQpy>9U|Y%-+HJ=|!$|LFOZOE>+KwX+=nO3?LP^^V
zP44%5iGi*N%eh5S6#Y9mNs=4k<MG(ht`V(uS2qp=1sllb7P$(~PW=#U%3&a718S-c
zByHz{qb=1FT&CAI;wy~cbUJmvlnH2>X7c|j&=rpEgUi)lCuam%)h<aKI?5j?p2G+>
zAIShV9!d>19n06sgedYM_@0(1%p7L!Tml6Dp;h<7=sJ7{a+uHanD`9SpXXo1cMyJ_
Z{{e%1|CY$w7P0^U002ovPDHLkV1nrA+7|!-