sync demo

Weaverse · Dec 10, 2023 · 9971062 · 9971062
1 parent 8a3e2b8
commit 9971062
Show file tree

Hide file tree

Showing 16 changed files with 35 additions and 13 deletions.
diff --git a/app/components/Cart.tsx b/app/components/Cart.tsx
@@ -288,6 +288,7 @@ function CartLineItem({
             data={merchandise.image}
             className="object-cover object-center w-24 h-24 rounded md:w-28 md:h-28"
             alt={merchandise.title}
+            sizes="auto"
           />
         )}
       </td>

diff --git a/app/components/Logo.tsx b/app/components/Logo.tsx
@@ -15,7 +15,7 @@ export function Logo() {
       prefetch="intent"
     >
       <div className="max-w-[120px]">
-        <Image data={logoData} className="w-full h-full object-cover" />
+        <Image data={logoData} sizes="auto" className="w-full h-full object-cover" />
       </div>
     </Link>
   );

diff --git a/app/components/OrderCard.tsx b/app/components/OrderCard.tsx
@@ -24,6 +24,7 @@ export function OrderCard({order}: {order: OrderCardFragment}) {
               className="w-full fadeIn cover"
               alt={lineItems[0].variant?.image?.altText ?? 'Order image'}
               src={lineItems[0].variant?.image.url}
+              sizes="auto"
             />
           </div>
         )}

diff --git a/app/root.tsx b/app/root.tsx
@@ -119,7 +119,6 @@ function App() {
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
-        <meta name="msvalidate.01" content="BBDE8BD42C23C165D7189D0F35E70A3F" />
         <Seo />
         <Meta />
         <Links />

diff --git a/app/routes/($locale).account.orders.$id.tsx b/app/routes/($locale).account.orders.$id.tsx
@@ -122,6 +122,7 @@ export default function OrderRoute() {
                                 data={lineItem.variant.image}
                                 width={96}
                                 height={96}
+                                sizes="auto"
                               />
                             </div>
                           )}

diff --git a/app/sections/CountDown/CountDown.tsx b/app/sections/CountDown/CountDown.tsx
@@ -36,7 +36,7 @@ let Countdown = forwardRef<HTMLElement, CountDownProps>((props, ref) => {
   return (
     <section ref={ref} {...rest} className='flex relative items-center justify-center text-center px-10 py-16 w-full sm-max:px-4 h-[var(--section-height)]' style={sectionStyle}>
       <div className='absolute inset-0 bg-[var(--section-background-color)]'>
-        {backgroundImage && <Image data={backgroundImage} className='w-full h-full object-cover' />}
+        {backgroundImage && <Image data={backgroundImage} sizes="auto" className='w-full h-full object-cover' />}
         {backgroundImage && <div className='absolute inset-0 bg-[var(--overlay-color)] opacity-[var(--overlay-opacity)]'></div>}
       </div>
       <div className='flex flex-col gap-3 items-center w-5/6 sm-max:w-full z-10'>

diff --git a/app/sections/HeaderImage/HeaderImage.tsx b/app/sections/HeaderImage/HeaderImage.tsx
@@ -54,6 +54,7 @@ let HeaderImage = forwardRef<HTMLElement, HeaderImageProps>((props, ref) => {
           <Image
             data={backgroundImage}
             className="w-full h-full object-cover"
+            sizes="auto"
           />
         ) : (
           <div className="w-full h-full flex justify-center items-center bg-gray-200">

diff --git a/app/sections/PromotionGrid/item.tsx b/app/sections/PromotionGrid/item.tsx
@@ -24,7 +24,7 @@ let PromotionGridItem = forwardRef<HTMLDivElement, PromotionItemProps>((props, r
   return (
     <div ref={ref} {...rest} className='relative w-96 aspect-video' >
       <div className='absolute inset-0'>
-        {backgroundImage ? <Image data={backgroundImage} loading='lazy' className='w-full h-full object-cover rounded-2xl' /> :
+        {backgroundImage ? <Image data={backgroundImage} sizes="auto" className='w-full h-full object-cover rounded-2xl' /> :
           <div className='w-full h-full flex justify-center items-center rounded-2xl bg-black bg-opacity-5'>
             <IconImageBlank viewBox="0 0 100 101" className='!w-24 !h-24 opacity-20' />
           </div>}

diff --git a/app/sections/blog-post.tsx b/app/sections/blog-post.tsx
@@ -36,7 +36,6 @@ let BlogPost = forwardRef<HTMLElement, BlogPostProps>((props, ref) => {
                 data={image}
                 className="w-full absolute inset-0 z-0 object-cover h-full"
                 sizes="90vw"
-                loading="eager"
               />
             )}
             <div className="space-y-5 w-full h-full flex items-center justify-end py-16 flex-col relative z-10">

diff --git a/app/sections/column-with-text/item.tsx b/app/sections/column-with-text/item.tsx
@@ -48,7 +48,7 @@ let ContentColumnItem = forwardRef<HTMLDivElement, ContentColumnItemProps>(
         )}
       >
         <div className="h-64 w-64 border border-solid border-gray-500 rounded-md">
-          {imageSrc ? <Image data={imageSrc} className="w-full h-full" /> :
+          {imageSrc ? <Image data={imageSrc} sizes="auto" className="w-full h-full" /> :
             <div className='w-full h-full bg-gray-200 flex justify-center items-center'>
               <IconImageBlank viewBox='0 0 100 100' className='!w-24 !h-24 opacity-40' />
             </div>}

diff --git a/app/sections/image-with-text.tsx b/app/sections/image-with-text.tsx
@@ -92,13 +92,15 @@ let ImageWithText = forwardRef<HTMLElement, ImageWithTextProps>(
                   data={imageFirst}
                   loading={loading}
                   className="sm:object-contain sm-max:object-contain"
+                  sizes="auto"
                 />
               </div>
               <div>
                 <Image
                   data={imageSecond}
                   loading={loading}
                   className="sm:object-contain sm-max:object-contain"
+                  sizes="auto"
                 />
               </div>
             </div>

diff --git a/app/sections/image-with-text/ImageWithText.tsx b/app/sections/image-with-text/ImageWithText.tsx
@@ -29,7 +29,7 @@ let ImageWithText = forwardRef<HTMLElement, ImageWithTextProps>((props, ref) =>
       <div className='h-full px-10 sm-max:px-6 sm-max:w-full'>
         <div className='flex justify-center items-center gap-5 h-full w-full sm-max:flex-col'>
           <div className='w-1/2 flex flex-1 items-center justify-center sm-max:order-first sm-max:w-full sm-max:py-10 sm-max:pb-0 sm-max:justify-center'>
-            {image ? <Image data={image} loading={loading} className='!w-1/2 !aspect-square sm-max:!w-full' /> :
+            {image ? <Image data={image} loading={loading} sizes="auto" className='!w-1/2 !aspect-square sm-max:!w-full' /> :
               <div className='flex justify-center items-center bg-gray-200 w-1/2 aspect-square'>
                 <IconImageBlank className='h-32 w-32 opacity-80' viewBox='0 0 100 100' />
               </div>

diff --git a/app/sections/single-product/index.tsx b/app/sections/single-product/index.tsx
@@ -64,6 +64,7 @@ let SingleProduct = forwardRef<HTMLElement, SingleProductProps>(
               data={selectedVariant.image}
               aspectRatio={'4/5'}
               className="object-cover w-full h-full aspect-square fadeIn"
+              sizes="auto"
             />
             <div className="flex flex-col justify-start space-y-5">
               <div className="space-y-4">

diff --git a/app/sections/single-product/option.tsx b/app/sections/single-product/option.tsx
@@ -108,7 +108,7 @@ export function VariantOption(props: VariantOptionProps) {
       {type === 'custom-image' && (
         <div className="flex gap-4">
           {values.map((value) => {
-            let swatchImage: string =
+            let swatchImage =
               swatches.imageSwatches.find((image) => image.name === value.value)
                 ?.value || '';
             return (
@@ -129,6 +129,7 @@ export function VariantOption(props: VariantOptionProps) {
                     'w-full h-full object-cover',
                     roundedClassName,
                   )}
+                  sizes="auto"
                 />
               </button>
             );
@@ -149,7 +150,7 @@ export function VariantOption(props: VariantOptionProps) {
                 )}
                 onClick={() => onSelectOptionValue(value.value)}
               >
-                <Image data={value.image} />
+                <Image data={value.image} sizes="auto" />
               </button>
             );
           })}

diff --git a/app/sections/testimonials/item.tsx b/app/sections/testimonials/item.tsx
@@ -48,6 +48,7 @@ let TestimonialItem = forwardRef<HTMLDivElement, TestimonialItemProps>(
               }
               alt={authorName}
               width={36}
+              sizes="auto"
             />
             <div className="space-y-0.5 font-medium">
               <div>{authorName}</div>

diff --git a/app/weaverse/create-weaverse.server.ts b/app/weaverse/create-weaverse.server.ts
@@ -25,7 +25,10 @@ export function createWeaverseClient(args: CreateWeaverseArgs) {
 export function getWeaverseCsp(request: Request) {
   let url = new URL(request.url);
   // Get weaverse host from query params
-  let localhost = 'localhost:3556';
+  let localDirectives =
+    process.env.NODE_ENV === 'development'
+      ? ['localhost:*', 'ws://localhost:*', 'ws://127.0.0.1:*']
+      : [];
   let weaverseHost = url.searchParams.get('weaverseHost');
   let weaverseHosts = ['weaverse.io', '*.weaverse.io'];
   if (weaverseHost) {
@@ -40,16 +43,28 @@ export function getWeaverseCsp(request: Request) {
       '*.youtube.com',
       '*.google.com',
       'fonts.gstatic.com',
-      localhost,
+      ...localDirectives,
+      ...weaverseHosts,
+    ],
+    imgSrc: [
+      "'self'",
+      'data:',
+      'cdn.shopify.com',
+      ...localDirectives,
       ...weaverseHosts,
     ],
-    imgSrc: ["'self'", 'data:', 'cdn.shopify.com', localhost, ...weaverseHosts],
     styleSrc: [
       "'self'",
       "'unsafe-inline'",
       'fonts.googleapis.com',
       'cdn.shopify.com',
-      localhost,
+      ...localDirectives,
+      ...weaverseHosts,
+    ],
+    connectSrc: [
+      "'self'",
+      'https://monorail-edge.shopifysvc.com',
+      ...localDirectives,
       ...weaverseHosts,
     ],
   };