fix metaobject demo issue

Weaverse · Jan 11, 2024 · 69f1e9e · 69f1e9e
1 parent 4bf4fbc
commit 69f1e9e
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -21,7 +21,6 @@ _Pilot is an innovative Shopify theme, powered by Hydrogen, Remix, and Weaverse,
 
 ## Demo
 
-[![Deploy with Vercel](https://vercel.com/button)](https://wvse.cc/deploy-pilot-to-vercel)
 
 - [Live store](https://pilot.weaverse.dev)
 - Try customizing Pilot on [Weaverse Playground](https://studio.weaverse.io/demo)
@@ -41,6 +40,13 @@ _Pilot is an innovative Shopify theme, powered by Hydrogen, Remix, and Weaverse,
 - Full-featured setup of components and routes
 - Fully customizable inside [Weaverse](https://weaverse.io)
 
+
+## Deployment
+- [Deploy to Shopify Oxygen](https://weaverse.io/docs/deployment/oxygen)
+- Deploy to Vercel:
+  [![Deploy with Vercel](https://vercel.com/button)](https://wvse.cc/deploy-pilot-to-vercel)
+
+
 ## Getting started
 
 Follow these steps to get started with Pilot and begin crafting your Hydrogen-driven storefront:

diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -1,6 +1,6 @@
 import {RemixServer} from '@remix-run/react';
 import type {EntryContext} from '@shopify/remix-oxygen';
-import isbot from 'isbot';
+import {isbot} from 'isbot';
 import {renderToReadableStream} from 'react-dom/server';
 import {createContentSecurityPolicy} from '@shopify/hydrogen';
 import {getWeaverseCsp} from '~/weaverse/create-weaverse.server';

diff --git a/app/sections/image-with-text/image.tsx b/app/sections/image-with-text/image.tsx
@@ -3,25 +3,39 @@ import type {
   HydrogenComponentSchema,
   WeaverseImage,
 } from '@weaverse/hydrogen';
-import { forwardRef } from 'react';
-import { Image } from '@shopify/hydrogen';
-import { IconImageBlank } from '~/components';
+import {forwardRef} from 'react';
+import {Image} from '@shopify/hydrogen';
+import {IconImageBlank} from '~/components';
 
 interface ImageItemsProps extends HydrogenComponentProps {
-  image: WeaverseImage,
+  image: WeaverseImage;
   loading: HTMLImageElement['loading'];
 }
 
 let ImageItems = forwardRef<HTMLDivElement, ImageItemsProps>((props, ref) => {
-  let { image, loading, ...rest } = props;
+  let {image, loading, ...rest} = props;
 
   return (
-    <div ref={ref} {...rest} 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} 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
+      ref={ref}
+      {...rest}
+      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}
+          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>
-      }
+      )}
     </div>
   );
 });
@@ -30,7 +44,7 @@ export default ImageItems;
 
 export let schema: HydrogenComponentSchema = {
   type: 'image-with-text--image',
-  title: 'Image',
+  title: 'Image with text',
   toolbar: ['general-settings', ['duplicate', 'delete']],
   limit: 1,
   inspector: [
@@ -49,7 +63,7 @@ export let schema: HydrogenComponentSchema = {
           defaultValue: 'eager',
           configs: {
             options: [
-              { label: 'Eager', value: 'eager', icon: 'Lightning' },
+              {label: 'Eager', value: 'eager', icon: 'Lightning'},
               {
                 label: 'Lazy',
                 value: 'lazy',

diff --git a/app/sections/meta-demo.tsx b/app/sections/meta-demo.tsx
@@ -1,4 +1,3 @@
-import {defer} from '@remix-run/server-runtime';
 import {Image} from '@shopify/hydrogen';
 import type {
   ComponentLoaderArgs,
@@ -49,7 +48,8 @@ let MetaDemo = forwardRef<HTMLDivElement, MetaDemoProps>((props, ref) => {
       </section>
     );
   }
-  let items = loaderData?.data?.metaobjects.map(
+  console.log('loaderData', loaderData);
+  let items = loaderData?.metaobjects.map(
     (metaObject: MetaobjectData, ind: number) => {
       let {fields} = metaObject;
       let image = fields.find((field) => field.key === 'avatar');
@@ -135,9 +135,9 @@ export let loader = async (args: ComponentLoaderArgs<MetaDemoProps>) => {
       first: 10,
     },
   });
-  return defer({
+  return {
     metaobjects: metaobjects.nodes,
-  });
+  };
 };
 
 export let schema: HydrogenComponentSchema = {

diff --git a/package.json b/package.json
@@ -19,51 +19,51 @@
   ],
   "prettier": "@shopify/prettier-config",
   "dependencies": {
-    "@headlessui/react": "1.7.17",
-    "@remix-run/react": "2.4.0",
-    "@remix-run/server-runtime": "2.4.0",
-    "@shopify/cli": "3.52.0",
+    "@headlessui/react": "1.7.18",
+    "@remix-run/react": "2.4.1",
+    "@remix-run/server-runtime": "2.4.1",
+    "@shopify/cli": "3.53.0",
     "@shopify/cli-hydrogen": "^6.1.0",
     "@shopify/hydrogen": "~2023.10.3",
     "@shopify/remix-oxygen": "^2.0.2",
     "@weaverse/hydrogen": "2.8.12",
-    "clsx": "2.0.0",
+    "clsx": "2.1.0",
     "cross-env": "7.0.3",
     "graphql": "16.8.1",
     "graphql-tag": "2.12.6",
-    "isbot": "3.7.1",
+    "isbot": "4.3.0",
     "keen-slider": "^6.8.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-intersection-observer": "9.5.3",
-    "react-player": "^2.13.0",
+    "react-player": "^2.14.1",
     "react-star-rate": "^0.2.0",
     "react-use": "17.4.2",
     "schema-dts": "1.1.2",
     "tiny-invariant": "1.3.1",
     "typographic-base": "1.0.4"
   },
   "devDependencies": {
-    "@remix-run/dev": "2.4.0",
-    "@remix-run/eslint-config": "2.4.0",
+    "@remix-run/dev": "2.4.1",
+    "@remix-run/eslint-config": "2.4.1",
     "@shopify/eslint-plugin": "44.0.0",
     "@shopify/oxygen-workers-types": "^4.0.0",
     "@shopify/prettier-config": "1.1.2",
     "@tailwindcss/forms": "0.5.7",
     "@tailwindcss/typography": "0.5.10",
     "@total-typescript/ts-reset": "0.5.1",
-    "@types/eslint": "8.44.9",
-    "@types/react": "18.2.45",
-    "@types/react-dom": "18.2.17",
+    "@types/eslint": "8.56.2",
+    "@types/react": "18.2.47",
+    "@types/react-dom": "18.2.18",
     "cross-env": "7.0.3",
-    "eslint": "8.55.0",
+    "eslint": "8.56.0",
     "eslint-plugin-hydrogen": "0.12.3",
-    "postcss": "8.4.32",
-    "postcss-import": "15.1.0",
+    "postcss": "8.4.33",
+    "postcss-import": "16.0.0",
     "postcss-preset-env": "9.3.0",
     "prettier": "3.1.1",
     "rimraf": "5.0.5",
-    "tailwindcss": "3.3.6",
+    "tailwindcss": "3.4.1",
     "typescript": "5.3.3"
   },
   "engines": {