diff --git a/app/sections/image-gallery/image.tsx b/app/sections/image-gallery/image.tsx index 72ad092..b4918f9 100644 --- a/app/sections/image-gallery/image.tsx +++ b/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( (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 ( ( 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', diff --git a/app/sections/testimonial/item.tsx b/app/sections/testimonial/item.tsx index d766f5e..b194c7b 100644 --- a/app/sections/testimonial/item.tsx +++ b/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(
author profile picture
diff --git a/sync-project.md b/sync-project.md new file mode 100644 index 0000000..0166c09 --- /dev/null +++ b/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 git@github.com: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.