Sanity fixes

app/(site)/[locale]/page.tsx

@@ -39,10 +39,13 @@ export default async function IndexPage({ params }: HomePageParams) {
     notFound();
   }
 
+  console.log('Preview:', draftMode().isEnabled);
+
   return (
     <LiveQuery
       enabled={draftMode().isEnabled}
       query={homePageQuery}
+      params={{ locale: params.locale }}
       initialData={data}
       as={HomePagePreview}
     >

app/api/preview/route.ts

@@ -1,4 +1,10 @@
+import { previewSecretId } from '@/lib/sanity/sanity.api'
+import { client } from '@/lib/sanity/sanity.client'
+import { token } from '@/lib/sanity/sanity.fetch'
 import { draftMode } from 'next/headers'
+import { isValidSecret } from 'sanity-plugin-iframe-pane/is-valid-secret'
+
+export const runtime = 'edge'
 
 export async function GET(request: Request) {
   const { searchParams } = new URL(request.url)
@@ -7,10 +13,25 @@ export async function GET(request: Request) {
   const type = searchParams.get('type')
   const locale = searchParams.get('locale')
 
-  // Check the secret and next parameters
-  // This secret should only be known to this route handler and the CMS
-  if (secret !== process.env.SANITY_API_READ_TOKEN) {
-    return new Response('Invalid token', { status: 401 })
+  if (!token) {
+    throw new Error(
+      'The `SANITY_API_READ_TOKEN` environment variable is required.',
+    )
+  }
+  if (!secret) {
+    return new Response('Invalid secret', { status: 401 })
+  }
+
+  const authenticatedClient = client.withConfig({ token })
+  
+  const validSecret = await isValidSecret(
+    authenticatedClient,
+    previewSecretId,
+    secret,
+  )
+
+  if (!validSecret) {
+    return new Response('Invalid secret', { status: 401 })
   }
 
   draftMode().enable()

components/modules/hero/hero.tsx

@@ -31,8 +31,6 @@ const heroSize = {
 const Hero = ({ variant, title, text, label, image, link, color, overlay }: HeroProps) => {
   const heroClass = heroSize[variant as HeroSize] || heroSize.fullScreen;
 
-  console.log(image);
-
   return (
     <div
       className={`relative w-screen ${heroClass} relative flex flex-col justify-end bg-neutral-300 text-high-contrast`}
@@ -46,7 +44,7 @@ const Hero = ({ variant, title, text, label, image, link, color, overlay }: Hero
           fill
         />
       )}
-      {overlay && <div className="absolute inset-0 z-10 h-full w-full bg-black/70" />}
+      {overlay && <div className="absolute inset-0 z-10 h-full w-full bg-black/60" />}
       <div
         className={`${
           color === 'dark' ? 'text-high-contrast' : 'text-white'

components/modules/reusable-section/reusable-section.tsx

@@ -1,27 +1,23 @@
-'use client'
-
-import DynamicContentManager from 'components/layout/dynamic-content-manager'
+import DynamicContentManager from 'components/layout/dynamic-content-manager';
 
 interface ReusableSectionProps {
   section: {
     existingSection: {
       section: {
-        sectionType: []
-      }
-    }
-  }
+        sectionType: [];
+      };
+    };
+  };
 }
 
-const ReusableSection = ({ section }:ReusableSectionProps) => {
-const data = section.existingSection.section.sectionType;
+const ReusableSection = ({ section }: ReusableSectionProps) => {
+  const data = section.existingSection.section.sectionType;
 
-if (!data) {
+  if (!data) {
     return;
-}
+  }
 
-  return (
-    <DynamicContentManager content={data} />
-  )
-}
+  return <DynamicContentManager content={data} />;
+};
 
 export default ReusableSection;

components/modules/slider/slider.tsx

@@ -3,9 +3,9 @@
 import Text from 'components/ui/text';
 import { useEffect, useState } from 'react';
 
+import { Carousel, CarouselItem } from '@/components/modules/carousel/carousel';
 import CategoryCard from '@/components/ui/category-card/category-card';
 import ProductCard from '@/components/ui/product-card/product-card';
-import { Carousel, CarouselItem } from '@/components/modules/carousel/carousel';
 
 interface SliderProps {
   products: [] | any;

components/ui/category-card/category-card.tsx

@@ -20,9 +20,9 @@ const CategoryCard: FC<Props> = ({ category, className }) => {
           <SanityImage
             image={category.image}
             alt={category.name || 'Category Image'}
-            width={300}
-            height={400}
-            sizes="(max-width: 1024px) 50vw, 25vw"
+            width={400}
+            height={600}
+            size="(max-width: 1024px) 50vw, 25vw"
           />
           <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-high-contrast px-6 py-3 font-medium text-white md:px-10 md:py-5">
             {category.title}

components/ui/product-card/product-card.tsx

@@ -25,12 +25,14 @@ const ProductCard: FC<Props> = ({ product, className, variant = 'default' }) =>
     >
       {variant === 'default' && (
         <div className={'relative flex h-full w-full flex-col justify-center'}>
-          <div className="relative h-full w-full overflow-hidden">
+          <div className="relative aspect-square h-full w-full overflow-hidden">
             {product?.images && (
               <SanityImage
                 image={product?.images[0]}
+                width={400}
+                height={400}
                 alt={product.title || 'Product Image'}
-                sizes="(max-width: 1024px) 50vw, 20vw"
+                size="(max-width: 1024px) 50vw, 20vw"
               />
             )}
           </div>

components/ui/sanity-image/sanity-image.tsx

@@ -1,3 +1,4 @@
+import { cn } from '@/lib/utils';
 import { urlForImage } from 'lib/sanity/sanity.image';
 import Image from 'next/image';
 
@@ -16,37 +17,42 @@ interface SanityImageProps {
 
 export default function SanityImage({
   image,
-  alt = 'Cover image',
+  alt = '',
   width = 3500,
   height = 2000,
   size = '100vw',
   fill = false,
+  priority = false,
   className
 }: SanityImageProps) {
   const imageUrl = image && urlForImage(image)?.height(height).width(width).fit('crop').url();
 
-  console.log(imageUrl);
-
   return (
-    <div className={`w-full overflow-hidden rounded-[3px] bg-gray-50 ${className}`}>
+    <div className={cn('w-full overflow-hidden bg-subtle', className)}>
       {fill && imageUrl && (
         <Image
           fill={fill}
           className="absolute h-full w-full object-cover"
-          alt={alt ? alt : ''}
+          alt={alt}
           sizes={size}
           src={imageUrl}
+          placeholder="blur"
+          priority={priority}
+          blurDataURL={image.asset.metadata.lqip}
         />
       )}
 
       {imageUrl && (
         <Image
-          className="absolute h-full w-full object-cover"
+          className="absolute h-full w-full bg-subtle object-cover"
           alt={alt ? alt : ''}
           width={width}
           height={height}
           sizes={size}
           src={imageUrl}
+          placeholder="blur"
+          priority={priority}
+          blurDataURL={image.asset.metadata.lqip}
         />
       )}
     </div>