sync demo

Weaverse · Sep 17, 2023 · 72feeef · 72feeef
1 parent 8e2eb87
commit 72feeef
Show file tree

Hide file tree

Showing 22 changed files with 271 additions and 101 deletions.
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -1,19 +1,16 @@
-import type {EntryContext} from '@shopify/remix-oxygen';
 import {RemixServer} from '@remix-run/react';
+import type {EntryContext} from '@shopify/remix-oxygen';
 import isbot from 'isbot';
 import {renderToReadableStream} from 'react-dom/server';
-import {createContentSecurityPolicy} from '@shopify/hydrogen';
-import {getWeaverseCsp} from '~/weaverse/csp.server';
+import {createContentSecurityPolicy} from '@weaverse/hydrogen';
 
 export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
   remixContext: EntryContext,
 ) {
-  const {nonce, header, NonceProvider} = createContentSecurityPolicy(
-    getWeaverseCsp(request),
-  );
+  const {nonce, header, NonceProvider} = createContentSecurityPolicy(request);
   const body = await renderToReadableStream(
     <NonceProvider>
       <RemixServer context={remixContext} url={request.url} />

diff --git a/app/root.tsx b/app/root.tsx
@@ -1,35 +1,36 @@
 import {
-  defer,
-  type LinksFunction,
-  type LoaderArgs,
-  type AppLoadContext,
-} from '@shopify/remix-oxygen';
-import {
-  isRouteErrorResponse,
   Links,
+  LiveReload,
   Meta,
   Outlet,
   Scripts,
-  LiveReload,
   ScrollRestoration,
+  isRouteErrorResponse,
   useLoaderData,
   useMatches,
   useRouteError,
   type ShouldRevalidateFunction,
 } from '@remix-run/react';
-import {ShopifySalesChannel, Seo, useNonce} from '@shopify/hydrogen';
+import {Seo, ShopifySalesChannel, useNonce} from '@shopify/hydrogen';
+import {
+  defer,
+  type AppLoadContext,
+  type LinksFunction,
+} from '@shopify/remix-oxygen';
 import invariant from 'tiny-invariant';
 
 import {Layout} from '~/components';
 import {seoPayload} from '~/lib/seo.server';
 
 import favicon from '../public/favicon.svg';
 
+import {RouteLoaderArgs} from '@weaverse/hydrogen';
 import {GenericError} from './components/GenericError';
 import {NotFound} from './components/NotFound';
-import styles from './styles/app.css';
-import {DEFAULT_LOCALE, parseMenu} from './lib/utils';
 import {useAnalytics} from './hooks/useAnalytics';
+import {DEFAULT_LOCALE, parseMenu} from './lib/utils';
+import styles from './styles/app.css';
+import {GlobalStyle} from './weaverse/style';
 
 // This is important to avoid re-fetching root queries on sub-navigations
 export const shouldRevalidate: ShouldRevalidateFunction = ({
@@ -65,7 +66,7 @@ export const links: LinksFunction = () => {
   ];
 };
 
-export async function loader({request, context}: LoaderArgs) {
+export async function loader({request, context}: RouteLoaderArgs) {
   const {session, storefront, cart} = context;
   const [customerAccessToken, layout] = await Promise.all([
     session.get('customerAccessToken'),
@@ -84,6 +85,7 @@ export async function loader({request, context}: LoaderArgs) {
       shopId: layout.shop.id,
     },
     seo,
+    weaverseTheme: await context.weaverse.loadThemeSettings(),
   });
 }
 
@@ -103,6 +105,7 @@ export default function App() {
         <Seo />
         <Meta />
         <Links />
+        <GlobalStyle />
       </head>
       <body>
         <Layout

diff --git a/app/routes/($locale)._index.tsx b/app/routes/($locale)._index.tsx
@@ -1,14 +1,14 @@
 import {AnalyticsPageType} from '@shopify/hydrogen';
-import {defer, type LoaderArgs} from '@shopify/remix-oxygen';
+import {defer} from '@shopify/remix-oxygen';
+import {type RouteLoaderArgs} from '@weaverse/hydrogen';
 import {routeHeaders} from '~/data/cache';
 import {SHOP_QUERY} from '~/data/queries';
 import {seoPayload} from '~/lib/seo.server';
 import {WeaverseContent} from '~/weaverse';
-import {loadWeaversePage} from '~/weaverse/loader.server';
 
 export const headers = routeHeaders;
 
-export async function loader(args: LoaderArgs) {
+export async function loader(args: RouteLoaderArgs) {
   let {params, context} = args;
   let {language, country} = context.storefront.i18n;
 
@@ -26,7 +26,7 @@ export async function loader(args: LoaderArgs) {
 
   return defer({
     shop,
-    weaverseData: await loadWeaversePage(args),
+    weaverseData: context.weaverse.loadPage(args),
     analytics: {
       pageType: AnalyticsPageType.home,
     },

diff --git a/app/routes/($locale).blogs.$blogHandle.$articleHandle.tsx b/app/routes/($locale).blogs.$blogHandle.$articleHandle.tsx
@@ -1,11 +1,11 @@
-import {json, type LinksFunction, type LoaderArgs} from '@shopify/remix-oxygen';
+import {json, type LinksFunction} from '@shopify/remix-oxygen';
+import {RouteLoaderArgs} from '@weaverse/hydrogen';
+import {ArticleDetailsQuery} from 'storefrontapi.generated';
 import invariant from 'tiny-invariant';
 import {routeHeaders} from '~/data/cache';
-import {seoPayload} from '~/lib/seo.server';
-import {ArticleDetailsQuery} from 'storefrontapi.generated';
 import {ARTICLE_QUERY} from '~/data/queries';
+import {seoPayload} from '~/lib/seo.server';
 import {WeaverseContent} from '~/weaverse';
-import {loadWeaversePage} from '~/weaverse/loader.server';
 import styles from '../styles/custom-font.css';
 
 export const headers = routeHeaders;
@@ -14,7 +14,7 @@ export const links: LinksFunction = () => {
   return [{rel: 'stylesheet', href: styles}];
 };
 
-export async function loader(args: LoaderArgs) {
+export async function loader(args: RouteLoaderArgs) {
   let {request, params, context} = args;
   const {language, country} = context.storefront.i18n;
 
@@ -50,7 +50,7 @@ export async function loader(args: LoaderArgs) {
     article,
     formattedDate,
     seo,
-    weaverseData: await loadWeaversePage(args),
+    weaverseData: await context.weaverse.loadPage(args),
   });
 }
 

diff --git a/app/routes/($locale).blogs.$blogHandle._index.tsx b/app/routes/($locale).blogs.$blogHandle._index.tsx
@@ -1,27 +1,23 @@
 import {flattenConnection} from '@shopify/hydrogen';
-import {json, type LoaderArgs} from '@shopify/remix-oxygen';
+import {json} from '@shopify/remix-oxygen';
+import {RouteLoaderArgs} from '@weaverse/hydrogen';
 import type {BlogQuery} from 'storefrontapi.generated';
 import invariant from 'tiny-invariant';
 import {routeHeaders} from '~/data/cache';
 import {BLOGS_QUERY} from '~/data/queries';
 import {PAGINATION_SIZE} from '~/lib/const';
 import {seoPayload} from '~/lib/seo.server';
 import {WeaverseContent} from '~/weaverse';
-import {loadWeaversePage} from '~/weaverse/loader.server';
 
 export const headers = routeHeaders;
 
-export const loader = async (args: LoaderArgs) => {
-  let {
-    params,
-    request,
-    context: {storefront},
-  } = args;
-  const {language, country} = storefront.i18n;
+export const loader = async (args: RouteLoaderArgs) => {
+  let {params, request, context} = args;
+  const {language, country} = context.storefront.i18n;
 
   invariant(params.blogHandle, 'Missing blog handle');
 
-  const {blog} = await storefront.query<BlogQuery>(BLOGS_QUERY, {
+  const {blog} = await context.storefront.query<BlogQuery>(BLOGS_QUERY, {
     variables: {
       blogHandle: params.blogHandle,
       pageBy: PAGINATION_SIZE,
@@ -51,7 +47,7 @@ export const loader = async (args: LoaderArgs) => {
     blog,
     articles,
     seo,
-    weaverseData: await loadWeaversePage(args),
+    weaverseData: await context.weaverse.loadPage(args),
   });
 };
 

diff --git a/app/routes/($locale).collections.$collectionHandle.tsx b/app/routes/($locale).collections.$collectionHandle.tsx
@@ -4,14 +4,14 @@ import {
   getPaginationVariables,
 } from '@shopify/hydrogen';
 import type {ProductCollectionSortKeys} from '@shopify/hydrogen/storefront-api-types';
-import {json, type LoaderArgs} from '@shopify/remix-oxygen';
+import {json} from '@shopify/remix-oxygen';
+import {RouteLoaderArgs} from '@weaverse/hydrogen';
 import invariant from 'tiny-invariant';
 import type {AppliedFilter, SortParam} from '~/components/SortFilter';
 import {routeHeaders} from '~/data/cache';
 import {COLLECTION_QUERY} from '~/data/queries';
 import {seoPayload} from '~/lib/seo.server';
 import {WeaverseContent} from '~/weaverse';
-import {loadWeaversePage} from '~/weaverse/loader.server';
 
 export const headers = routeHeaders;
 
@@ -25,7 +25,7 @@ type FiltersQueryParams = Array<
   VariantFilterParam | PriceFiltersQueryParam | VariantOptionFiltersQueryParam
 >;
 
-export async function loader(args: LoaderArgs) {
+export async function loader(args: RouteLoaderArgs) {
   const {params, request, context} = args;
   const paginationVariables = getPaginationVariables(request, {
     pageBy: 8,
@@ -119,7 +119,7 @@ export async function loader(args: LoaderArgs) {
       resourceId: collection.id,
     },
     seo,
-    weaverseData: await loadWeaversePage(args),
+    weaverseData: await context.weaverse.loadPage(args),
   });
 }
 

diff --git a/app/routes/($locale).collections._index.tsx b/app/routes/($locale).collections._index.tsx
@@ -1,19 +1,19 @@
 import {getPaginationVariables} from '@shopify/hydrogen';
-import {json, type LoaderArgs} from '@shopify/remix-oxygen';
+import {json} from '@shopify/remix-oxygen';
+import {RouteLoaderArgs} from '@weaverse/hydrogen';
 import {routeHeaders} from '~/data/cache';
 import {COLLECTIONS_QUERY} from '~/data/queries';
 import {seoPayload} from '~/lib/seo.server';
 import {WeaverseContent} from '~/weaverse';
-import {loadWeaversePage} from '~/weaverse/loader.server';
 
 const PAGINATION_SIZE = 4;
 
 export const headers = routeHeaders;
 
-export const loader = async (args: LoaderArgs) => {
+export const loader = async (args: RouteLoaderArgs) => {
   let {
     request,
-    context: {storefront},
+    context: {storefront, weaverse},
   } = args;
   const variables = getPaginationVariables(request, {pageBy: PAGINATION_SIZE});
   const {collections} = await storefront.query(COLLECTIONS_QUERY, {
@@ -32,7 +32,7 @@ export const loader = async (args: LoaderArgs) => {
   return json({
     collections,
     seo,
-    weaverseData: await loadWeaversePage(args),
+    weaverseData: await weaverse.loadPage(args),
   });
 };
 

diff --git a/app/routes/($locale).pages.$pageHandle.tsx b/app/routes/($locale).pages.$pageHandle.tsx
@@ -1,16 +1,16 @@
-import {json, type LoaderArgs} from '@shopify/remix-oxygen';
+import {json} from '@shopify/remix-oxygen';
 import invariant from 'tiny-invariant';
 
+import {RouteLoaderArgs} from '@weaverse/hydrogen';
 import {PageDetailsQuery} from 'storefrontapi.generated';
 import {routeHeaders} from '~/data/cache';
 import {PAGE_QUERY} from '~/data/queries';
 import {seoPayload} from '~/lib/seo.server';
 import {WeaverseContent} from '~/weaverse';
-import {loadWeaversePage} from '~/weaverse/loader.server';
 
 export const headers = routeHeaders;
 
-export async function loader(args: LoaderArgs) {
+export async function loader(args: RouteLoaderArgs) {
   let {request, params, context} = args;
   invariant(params.pageHandle, 'Missing page handle');
 
@@ -30,7 +30,7 @@ export async function loader(args: LoaderArgs) {
   return json({
     page,
     seo,
-    weaverseData: await loadWeaversePage(args),
+    weaverseData: await context.weaverse.loadPage(args),
   });
 }
 

diff --git a/app/routes/($locale).products.$productHandle.tsx b/app/routes/($locale).products.$productHandle.tsx
@@ -1,7 +1,7 @@
 import type {ShopifyAnalyticsProduct} from '@shopify/hydrogen';
 import {AnalyticsPageType} from '@shopify/hydrogen';
-import {defer, redirect, type LoaderArgs} from '@shopify/remix-oxygen';
-import {getSelectedProductOptions} from '@weaverse/hydrogen';
+import {defer, redirect} from '@shopify/remix-oxygen';
+import {RouteLoaderArgs, getSelectedProductOptions} from '@weaverse/hydrogen';
 import {
   ProductQuery,
   ProductRecommendationsQuery,
@@ -16,11 +16,10 @@ import {
 import {seoPayload} from '~/lib/seo.server';
 import type {Storefront} from '~/lib/type';
 import {WeaverseContent} from '~/weaverse';
-import {loadWeaversePage} from '~/weaverse/loader.server';
 
 export const headers = routeHeaders;
 
-export async function loader(args: LoaderArgs) {
+export async function loader(args: RouteLoaderArgs) {
   let {params, request, context} = args;
   const {productHandle} = params;
   invariant(productHandle, 'Missing productHandle param, check route filename');
@@ -91,7 +90,7 @@ export async function loader(args: LoaderArgs) {
       totalValue: parseFloat(selectedVariant.price.amount),
     },
     seo,
-    weaverseData: await loadWeaversePage(args),
+    weaverseData: context.weaverse.loadPage(args),
   });
 }
 

diff --git a/app/routes/($locale).products._index.tsx b/app/routes/($locale).products._index.tsx
@@ -1,31 +1,31 @@
 import {getPaginationVariables} from '@shopify/hydrogen';
-import {json, type LoaderArgs} from '@shopify/remix-oxygen';
+import {json} from '@shopify/remix-oxygen';
+import {RouteLoaderArgs} from '@weaverse/hydrogen';
 import {AllProductsQuery} from 'storefrontapi.generated';
 import invariant from 'tiny-invariant';
 import {routeHeaders} from '~/data/cache';
 import {ALL_PRODUCTS_QUERY} from '~/data/queries';
 import {seoPayload} from '~/lib/seo.server';
 import {WeaverseContent} from '~/weaverse';
-import {loadWeaversePage} from '~/weaverse/loader.server';
 
 const PAGE_BY = 8;
 
 export const headers = routeHeaders;
 
-export async function loader(args: LoaderArgs) {
-  let {
-    request,
-    context: {storefront},
-  } = args;
+export async function loader(args: RouteLoaderArgs) {
+  let {request, context} = args;
   const variables = getPaginationVariables(request, {pageBy: PAGE_BY});
 
-  const data = await storefront.query<AllProductsQuery>(ALL_PRODUCTS_QUERY, {
-    variables: {
-      ...variables,
-      country: storefront.i18n.country,
-      language: storefront.i18n.language,
+  const data = await context.storefront.query<AllProductsQuery>(
+    ALL_PRODUCTS_QUERY,
+    {
+      variables: {
+        ...variables,
+        country: context.storefront.i18n.country,
+        language: context.storefront.i18n.language,
+      },
     },
-  });
+  );
 
   invariant(data, 'No data returned from Shopify API');
 
@@ -50,7 +50,7 @@ export async function loader(args: LoaderArgs) {
   return json({
     products: data.products,
     seo,
-    weaverseData: await loadWeaversePage(args),
+    weaverseData: await context.weaverse.loadPage(args),
   });
 }
 

diff --git a/app/sections/collection-list/collection-card.tsx b/app/sections/collection-list/collection-card.tsx
@@ -17,6 +17,8 @@ export function CollectionCard({
         {collection?.image && (
           <Image
             data={collection.image}
+            width={collection.image.width || 600}
+            height={collection.image.height || 400}
             aspectRatio={imageAspectRatio}
             sizes="(max-width: 32em) 100vw, 45vw"
             loading={loading}