sync demo

app/sections/image-gallery/image.tsx

@@ -7,11 +7,16 @@ import {forwardRef} from 'react';
 import {Image} from '@shopify/hydrogen';
 
 interface ImageGalleryItemProps extends HydrogenComponentProps {
-  src: string;
+  // TODO: change src to imageData
+  src: {
+    url: string;
+    altText: string;
+    width?: number;
+    height?: number;
+  };
   columnSpan: number;
   borderRadius: number;
   hideOnMobile: boolean;
-  altText: string;
 }
 
 let columnSpanClasses: {[span: number]: string} = {
@@ -31,7 +36,8 @@ let radiusClasses: {[radius: string]: string} = {
 
 let ImageGalleryItem = forwardRef<HTMLImageElement, ImageGalleryItemProps>(
   (props, ref) => {
-    let {src, columnSpan, borderRadius, hideOnMobile, altText, ...rest} = props;
+    let {src, columnSpan, borderRadius, hideOnMobile, ...rest} = props;
+    let data = typeof src === 'object' ? src : {url: src, altText: src};
     return (
       <Image
         ref={ref}
@@ -42,7 +48,7 @@ let ImageGalleryItem = forwardRef<HTMLImageElement, ImageGalleryItemProps>(
           radiusClasses[borderRadius],
           hideOnMobile && 'hidden sm:block',
         )}
-        data={{url: src, altText}}
+        data={data}
         sizes={`(min-width: 45em) 50vw, 100vw`}
       />
     );
@@ -60,17 +66,18 @@ export let schema: HydrogenComponentSchema = {
       inputs: [
         {
           type: 'image',
+          // TODO: change src to imageData object
           name: 'src',
           label: 'Image',
           defaultValue:
             'https://images.placeholders.dev/?width=1000&height=1000&text=Pilot&bgColor=%23f4f4f5&textColor=%23a1a1aa',
         },
-        {
-          type: 'text',
-          label: 'Alt Text',
-          name: 'altText',
-          defaultValue: 'Pilot Image',
-        },
+        // {
+        //   type: 'text',
+        //   label: 'Alt Text',
+        //   name: 'altText',
+        //   defaultValue: 'Pilot Image',
+        // },
         {
           type: 'range',
           label: 'Column Span',

app/sections/testimonial/item.tsx

@@ -9,7 +9,12 @@ import {Image} from '@shopify/hydrogen';
 interface TestimonialItemProps extends HydrogenComponentProps {
   heading: string;
   content: string;
-  authorImage: string;
+  authorImage: {
+    url: string;
+    altText: string;
+    width?: number;
+    height?: number;
+  };
   authorName: string;
   authorTitle: string;
   hideOnMobile: boolean;
@@ -42,8 +47,12 @@ let TestimonialItem = forwardRef<HTMLDivElement, TestimonialItemProps>(
           <figcaption className="flex items-center space-x-3">
             <Image
               className="h-9 rounded-full"
-              data={{url: authorImage}}
-              alt="author profile picture"
+              data={
+                typeof authorImage === 'object'
+                  ? authorImage
+                  : {url: authorImage}
+              }
+              alt={authorName}
               width={36}
             />
             <div className="space-y-0.5 font-medium dark:text-white">

sync-project.md

@@ -0,0 +1,24 @@
+### How to make your own project in sync with the original pilot project
+
+Once you've cloned the pilot project, and put it into your own github account, you'll want to keep it in sync with the
+original pilot project. This is a good idea because the original pilot project will be updated with new features and bug
+fixes.
+Here is the manual way to do it with rsync:
+
+1. Clone the original pilot project into a directory called `pilot`:
+
+    ```bash
+    git clone [email protected]:Weaverse/pilot.git
+    ```
+2. Put your own pilot project into a same level directory.
+
+3. Run the following command to sync your project with the original pilot project, Keep in mind to
+   replace `your-pilot-project` with the name of your own pilot project.
+
+    ```bash
+    rsync -arv --exclude=node_modules --exclude=.git --exclude=.cache --exclude=.turbo --exclude=dist --exclude=.env ./pilot/ ./your-pilot-project
+    ```
+
+4. Commit and push your changes to your own pilot project.
+5. It is recommended to run the sync command every time you want to update your project with the latest changes from the
+   original pilot project.