From 997106267b0eef171fa2372c07754133366942c6 Mon Sep 17 00:00:00 2001 From: Paul Date: Sun, 10 Dec 2023 16:23:25 +0700 Subject: [PATCH] sync demo --- app/components/Cart.tsx | 1 + app/components/Logo.tsx | 2 +- app/components/OrderCard.tsx | 1 + app/root.tsx | 1 - app/routes/($locale).account.orders.$id.tsx | 1 + app/sections/CountDown/CountDown.tsx | 2 +- app/sections/HeaderImage/HeaderImage.tsx | 1 + app/sections/PromotionGrid/item.tsx | 2 +- app/sections/blog-post.tsx | 1 - app/sections/column-with-text/item.tsx | 2 +- app/sections/image-with-text.tsx | 2 ++ .../image-with-text/ImageWithText.tsx | 2 +- app/sections/single-product/index.tsx | 1 + app/sections/single-product/option.tsx | 5 ++-- app/sections/testimonials/item.tsx | 1 + app/weaverse/create-weaverse.server.ts | 23 +++++++++++++++---- 16 files changed, 35 insertions(+), 13 deletions(-) diff --git a/app/components/Cart.tsx b/app/components/Cart.tsx index 62bf88a..47071ce 100644 --- 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" /> )} diff --git a/app/components/Logo.tsx b/app/components/Logo.tsx index 542a3c8..0f20b65 100644 --- a/app/components/Logo.tsx +++ b/app/components/Logo.tsx @@ -15,7 +15,7 @@ export function Logo() { prefetch="intent" >
- +
); diff --git a/app/components/OrderCard.tsx b/app/components/OrderCard.tsx index 54f7fa9..cb66ead 100644 --- 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" /> )} diff --git a/app/root.tsx b/app/root.tsx index 6a1d34c..9823c3a 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -119,7 +119,6 @@ function App() { - diff --git a/app/routes/($locale).account.orders.$id.tsx b/app/routes/($locale).account.orders.$id.tsx index 441fa4e..4163792 100644 --- 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" /> )} diff --git a/app/sections/CountDown/CountDown.tsx b/app/sections/CountDown/CountDown.tsx index 5380a74..b92383f 100644 --- a/app/sections/CountDown/CountDown.tsx +++ b/app/sections/CountDown/CountDown.tsx @@ -36,7 +36,7 @@ let Countdown = forwardRef((props, ref) => { return (
- {backgroundImage && } + {backgroundImage && } {backgroundImage &&
}
diff --git a/app/sections/HeaderImage/HeaderImage.tsx b/app/sections/HeaderImage/HeaderImage.tsx index 9980251..cceace8 100644 --- a/app/sections/HeaderImage/HeaderImage.tsx +++ b/app/sections/HeaderImage/HeaderImage.tsx @@ -54,6 +54,7 @@ let HeaderImage = forwardRef((props, ref) => { ) : (
diff --git a/app/sections/PromotionGrid/item.tsx b/app/sections/PromotionGrid/item.tsx index e69f333..79909f2 100644 --- a/app/sections/PromotionGrid/item.tsx +++ b/app/sections/PromotionGrid/item.tsx @@ -24,7 +24,7 @@ let PromotionGridItem = forwardRef((props, r return (
- {backgroundImage ? : + {backgroundImage ? :
} diff --git a/app/sections/blog-post.tsx b/app/sections/blog-post.tsx index 387c154..c2f16ff 100644 --- a/app/sections/blog-post.tsx +++ b/app/sections/blog-post.tsx @@ -36,7 +36,6 @@ let BlogPost = forwardRef((props, ref) => { data={image} className="w-full absolute inset-0 z-0 object-cover h-full" sizes="90vw" - loading="eager" /> )}
diff --git a/app/sections/column-with-text/item.tsx b/app/sections/column-with-text/item.tsx index 616fb56..6c67af4 100644 --- a/app/sections/column-with-text/item.tsx +++ b/app/sections/column-with-text/item.tsx @@ -48,7 +48,7 @@ let ContentColumnItem = forwardRef( )} >
- {imageSrc ? : + {imageSrc ? :
} diff --git a/app/sections/image-with-text.tsx b/app/sections/image-with-text.tsx index 90114e1..869007c 100644 --- a/app/sections/image-with-text.tsx +++ b/app/sections/image-with-text.tsx @@ -92,6 +92,7 @@ let ImageWithText = forwardRef( data={imageFirst} loading={loading} className="sm:object-contain sm-max:object-contain" + sizes="auto" />
@@ -99,6 +100,7 @@ let ImageWithText = forwardRef( data={imageSecond} loading={loading} className="sm:object-contain sm-max:object-contain" + sizes="auto" />
diff --git a/app/sections/image-with-text/ImageWithText.tsx b/app/sections/image-with-text/ImageWithText.tsx index a65f483..5acb75b 100644 --- a/app/sections/image-with-text/ImageWithText.tsx +++ b/app/sections/image-with-text/ImageWithText.tsx @@ -29,7 +29,7 @@ let ImageWithText = forwardRef((props, ref) =>
- {image ? : + {image ? :
diff --git a/app/sections/single-product/index.tsx b/app/sections/single-product/index.tsx index 4c2c63e..becfd68 100644 --- a/app/sections/single-product/index.tsx +++ b/app/sections/single-product/index.tsx @@ -64,6 +64,7 @@ let SingleProduct = forwardRef( data={selectedVariant.image} aspectRatio={'4/5'} className="object-cover w-full h-full aspect-square fadeIn" + sizes="auto" />
diff --git a/app/sections/single-product/option.tsx b/app/sections/single-product/option.tsx index 0ca2b52..4fdf19b 100644 --- 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' && (
{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" /> ); @@ -149,7 +150,7 @@ export function VariantOption(props: VariantOptionProps) { )} onClick={() => onSelectOptionValue(value.value)} > - + ); })} diff --git a/app/sections/testimonials/item.tsx b/app/sections/testimonials/item.tsx index ddcb911..7446862 100644 --- a/app/sections/testimonials/item.tsx +++ b/app/sections/testimonials/item.tsx @@ -48,6 +48,7 @@ let TestimonialItem = forwardRef( } alt={authorName} width={36} + sizes="auto" />
{authorName}
diff --git a/app/weaverse/create-weaverse.server.ts b/app/weaverse/create-weaverse.server.ts index ae835d6..813eb01 100644 --- 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, ], };