@shopify/create-hydrogen 0.3.0 → 0.15.0

package/{template-hydrogen → templates/template-hydrogen}/src/index.css

@@ -2,6 +2,37 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer utilities {
+  .scroll-snap-x {
+    scroll-snap-type: x mandatory;
+  }
+  .snap-start {
+    scroll-snap-align: start;
+  }
+  .snap-smooth {
+    scroll-behavior: smooth;
+  }
+  .snap-px-4 {
+    scroll-padding-left: 1rem;
+    scroll-padding-right: 1rem;
+  }
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
+
+* {
+  font-variant-ligatures: none;
+}
+
+html {
+  scroll-padding-top: 10rem;
+}
+
 model-viewer::part(default-progress-mask) {
   display: none;
 }

package/templates/template-hydrogen/src/pages/collections/[handle].server.jsx

@@ -0,0 +1,105 @@
+import {
+  MediaFileFragment,
+  ProductProviderFragment,
+  useShopQuery,
+  flattenConnection,
+  RawHtml,
+  Seo,
+} from '@shopify/hydrogen';
+import gql from 'graphql-tag';
+
+import LoadMoreProducts from '../../components/LoadMoreProducts.client';
+import Layout from '../../components/Layout.server';
+import ProductCard from '../../components/ProductCard';
+import NotFound from '../../components/NotFound.server';
+
+export default function Collection({
+  country = {isoCode: 'US'},
+  collectionProductCount = 24,
+  params,
+}) {
+  const {handle} = params;
+  const {data} = useShopQuery({
+    query: QUERY,
+    variables: {
+      handle,
+      country: country.isoCode,
+      numProducts: collectionProductCount,
+    },
+  });
+
+  if (data?.collection == null) {
+    return <NotFound />;
+  }
+
+  const collection = data.collection;
+  const products = flattenConnection(collection.products);
+  const hasNextPage = data.collection.products.pageInfo.hasNextPage;
+
+  return (
+    <Layout>
+      <Seo type="collection" data={collection} />
+      <h1 className="font-bold text-4xl md:text-5xl text-gray-900 mb-6 mt-6">
+        {collection.title}
+      </h1>
+      <RawHtml string={collection.descriptionHtml} className="text-lg" />
+      <p className="text-sm text-gray-500 mt-5 mb-5">
+        {products.length} {products.length > 1 ? 'products' : 'product'}
+      </p>
+
+      <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
+        {products.map((product) => (
+          <li key={product.id}>
+            <ProductCard product={product} />
+          </li>
+        ))}
+      </ul>
+
+      {hasNextPage && (
+        <LoadMoreProducts startingCount={collectionProductCount} />
+      )}
+    </Layout>
+  );
+}
+
+const QUERY = gql`
+  query CollectionDetails(
+    $handle: String!
+    $country: CountryCode
+    $numProducts: Int!
+    $includeReferenceMetafieldDetails: Boolean = false
+    $numProductMetafields: Int = 0
+    $numProductVariants: Int = 250
+    $numProductMedia: Int = 6
+    $numProductVariantMetafields: Int = 0
+    $numProductVariantSellingPlanAllocations: Int = 0
+    $numProductSellingPlanGroups: Int = 0
+    $numProductSellingPlans: Int = 0
+  ) @inContext(country: $country) {
+    collection(handle: $handle) {
+      id
+      title
+      description
+      descriptionHtml
+      image {
+        url
+        width
+        height
+      }
+      products(first: $numProducts) {
+        edges {
+          node {
+            vendor
+            ...ProductProviderFragment
+          }
+        }
+        pageInfo {
+          hasNextPage
+        }
+      }
+    }
+  }
+
+  ${MediaFileFragment}
+  ${ProductProviderFragment}
+`;

package/templates/template-hydrogen/src/pages/index.server.jsx

@@ -0,0 +1,237 @@
+import {
+  useShopQuery,
+  flattenConnection,
+  ProductProviderFragment,
+  Image,
+  Link,
+  Seo,
+} from '@shopify/hydrogen';
+import gql from 'graphql-tag';
+
+import Layout from '../components/Layout.server';
+import FeaturedCollection from '../components/FeaturedCollection';
+import ProductCard from '../components/ProductCard';
+import Welcome from '../components/Welcome.server';
+import {Suspense} from 'react';
+
+export default function Index({country = {isoCode: 'US'}}) {
+  return (
+    <Layout hero={<GradientBackground />}>
+      <Suspense fallback={null}>
+        <SeoForHomepage />
+      </Suspense>
+      <div className="relative mb-12">
+        <Welcome />
+        <Suspense fallback={<BoxFallback />}>
+          <FeaturedProductsBox country={country} />
+        </Suspense>
+        <Suspense fallback={<BoxFallback />}>
+          <FeaturedCollectionBox country={country} />
+        </Suspense>
+      </div>
+    </Layout>
+  );
+}
+
+function SeoForHomepage() {
+  const {
+    data: {
+      shop: {
+        name: shopName,
+        primaryDomain: {url: shopUrl},
+      },
+    },
+  } = useShopQuery({
+    query: SEO_QUERY,
+    cache: {maxAge: 60 * 60 * 12, staleWhileRevalidate: 60 * 60 * 12},
+  });
+
+  return (
+    <Seo
+      type="homepage"
+      data={{
+        title: shopName,
+        url: shopUrl,
+      }}
+    />
+  );
+}
+
+function BoxFallback() {
+  return <div className="bg-white p-12 shadow-xl rounded-xl mb-10 h-40"></div>;
+}
+
+function FeaturedProductsBox({country}) {
+  const {data} = useShopQuery({
+    query: QUERY,
+    variables: {
+      country: country.isoCode,
+    },
+  });
+
+  const collections = data ? flattenConnection(data.collections) : [];
+  const featuredProductsCollection = collections[0];
+  const featuredProducts = featuredProductsCollection
+    ? flattenConnection(featuredProductsCollection.products)
+    : null;
+
+  return (
+    <div className="bg-white p-12 shadow-xl rounded-xl mb-10">
+      {featuredProductsCollection ? (
+        <>
+          <div className="flex justify-between items-center mb-8 text-md font-medium">
+            <span className="text-black uppercase">
+              {featuredProductsCollection.title}
+            </span>
+            <span className="hidden md:inline-flex">
+              <Link
+                to={`/collections/${featuredProductsCollection.handle}`}
+                className="text-blue-600 hover:underline"
+              >
+                Shop all
+              </Link>
+            </span>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-8">
+            {featuredProducts.map((product) => (
+              <div key={product.id}>
+                <ProductCard product={product} />
+              </div>
+            ))}
+          </div>
+          <div className="md:hidden text-center">
+            <Link
+              to={`/collections/${featuredProductsCollection.handle}`}
+              className="text-blue-600"
+            >
+              Shop all
+            </Link>
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+function FeaturedCollectionBox({country}) {
+  const {data} = useShopQuery({
+    query: QUERY,
+    variables: {
+      country: country.isoCode,
+    },
+  });
+
+  const collections = data ? flattenConnection(data.collections) : [];
+  const featuredCollection =
+    collections && collections.length > 1 ? collections[1] : collections[0];
+
+  return <FeaturedCollection collection={featuredCollection} />;
+}
+
+function GradientBackground() {
+  return (
+    <div className="fixed top-0 w-full h-3/5 overflow-hidden">
+      <div className="absolute w-full h-full bg-gradient-to-t from-gray-50 z-10" />
+
+      <svg
+        viewBox="0 0 960 743"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        className="filter blur-[30px]"
+        aria-hidden="true"
+      >
+        <defs>
+          <path fill="#fff" d="M0 0h960v540H0z" id="reuse-0" />
+        </defs>
+        <g clipPath="url(#a)">
+          <use xlinkHref="#reuse-0" />
+          <path d="M960 0H0v743h960V0Z" fill="#7CFBEE" />
+          <path
+            d="M831 380c200.48 0 363-162.521 363-363s-162.52-363-363-363c-200.479 0-363 162.521-363 363s162.521 363 363 363Z"
+            fill="#4F98D0"
+          />
+          <path
+            d="M579 759c200.479 0 363-162.521 363-363S779.479 33 579 33 216 195.521 216 396s162.521 363 363 363Z"
+            fill="#7CFBEE"
+          />
+          <path
+            d="M178 691c200.479 0 363-162.521 363-363S378.479-35 178-35c-200.4794 0-363 162.521-363 363s162.5206 363 363 363Z"
+            fill="#4F98D0"
+          />
+          <path
+            d="M490 414c200.479 0 363-162.521 363-363S690.479-312 490-312 127-149.479 127 51s162.521 363 363 363Z"
+            fill="#4F98D0"
+          />
+          <path
+            d="M354 569c200.479 0 363-162.521 363-363 0-200.47937-162.521-363-363-363S-9 5.52063-9 206c0 200.479 162.521 363 363 363Z"
+            fill="#7CFBEE"
+          />
+          <path
+            d="M630 532c200.479 0 363-162.521 363-363 0-200.4794-162.521-363-363-363S267-31.4794 267 169c0 200.479 162.521 363 363 363Z"
+            fill="#4F98D0"
+          />
+        </g>
+        <path fill="#fff" d="M0 540h960v203H0z" />
+        <defs>
+          <clipPath id="a">
+            <use xlinkHref="#reuse-0" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+const SEO_QUERY = gql`
+  query shopInfo {
+    shop {
+      name
+      description
+      primaryDomain {
+        url
+      }
+    }
+  }
+`;
+
+const QUERY = gql`
+  query indexContent(
+    $country: CountryCode
+    $numCollections: Int = 2
+    $numProducts: Int = 3
+    $includeReferenceMetafieldDetails: Boolean = false
+    $numProductMetafields: Int = 0
+    $numProductVariants: Int = 250
+    $numProductMedia: Int = 1
+    $numProductVariantMetafields: Int = 10
+    $numProductVariantSellingPlanAllocations: Int = 0
+    $numProductSellingPlanGroups: Int = 0
+    $numProductSellingPlans: Int = 0
+  ) @inContext(country: $country) {
+    collections(first: $numCollections) {
+      edges {
+        node {
+          descriptionHtml
+          description
+          handle
+          id
+          title
+          image {
+            ...ImageFragment
+          }
+          products(first: $numProducts) {
+            edges {
+              node {
+                ...ProductProviderFragment
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  ${ProductProviderFragment}
+  ${Image.Fragment}
+`;

package/{template-hydrogen → templates/template-hydrogen}/src/pages/pages/[handle].server.jsx

@@ -1,17 +1,22 @@
-import {useParams} from 'react-router-dom';
-import {useShopQuery, RawHtml} from '@shopify/hydrogen';
+import {useShopQuery, RawHtml, Seo} from '@shopify/hydrogen';
 import gql from 'graphql-tag';
 
-import Layout from '../../components/Layout.client';
+import Layout from '../../components/Layout.server';
+import NotFound from '../../components/NotFound.server';
 
-export default function Page() {
-  const {handle} = useParams();
+export default function Page({params}) {
+  const {handle} = params;
   const {data} = useShopQuery({query: QUERY, variables: {handle}});
 
+  if (!data.pageByHandle) {
+    return <NotFound />;
+  }
+
   const page = data.pageByHandle;
 
   return (
     <Layout>
+      <Seo type="page" data={page} />
       <h1 className="text-2xl font-bold">{page.title}</h1>
       <RawHtml string={page.body} className="prose mt-8" />
     </Layout>
@@ -23,6 +28,10 @@ const QUERY = gql`
     pageByHandle(handle: $handle) {
       title
       body
+      seo {
+        title
+        description
+      }
     }
   }
 `;

package/templates/template-hydrogen/src/pages/products/[handle].server.jsx

@@ -0,0 +1,69 @@
+import {useShopQuery, ProductProviderFragment, Seo} from '@shopify/hydrogen';
+import gql from 'graphql-tag';
+
+import ProductDetails from '../../components/ProductDetails.client';
+import NotFound from '../../components/NotFound.server';
+import Layout from '../../components/Layout.server';
+
+export default function Product({country = {isoCode: 'US'}, params}) {
+  const {handle} = params;
+
+  const {
+    data: {product},
+  } = useShopQuery({
+    query: QUERY,
+    variables: {
+      country: country.isoCode,
+      handle,
+    },
+  });
+
+  if (!product) {
+    return <NotFound />;
+  }
+
+  return (
+    <Layout>
+      <Seo type="product" data={product} />
+      <ProductDetails product={product} />
+    </Layout>
+  );
+}
+
+const QUERY = gql`
+  query product(
+    $country: CountryCode
+    $handle: String!
+    $includeReferenceMetafieldDetails: Boolean = true
+    $numProductMetafields: Int = 20
+    $numProductVariants: Int = 250
+    $numProductMedia: Int = 6
+    $numProductVariantMetafields: Int = 10
+    $numProductVariantSellingPlanAllocations: Int = 0
+    $numProductSellingPlanGroups: Int = 0
+    $numProductSellingPlans: Int = 0
+  ) @inContext(country: $country) {
+    product: product(handle: $handle) {
+      id
+      description
+      vendor
+      seo {
+        title
+        description
+      }
+      images(first: 1) {
+        edges {
+          node {
+            url
+            height
+            width
+            altText
+          }
+        }
+      }
+      ...ProductProviderFragment
+    }
+  }
+
+  ${ProductProviderFragment}
+`;

package/templates/template-hydrogen/src/pages/redirect.server.jsx

@@ -0,0 +1,4 @@
+export default function Redirect({response}) {
+  response.redirect('/products/snowboard');
+  return <div>This page is redirected</div>;
+}

package/templates/template-hydrogen/src/pages/robots.txt.server.js

@@ -0,0 +1,10 @@
+/**
+ * This API endpoint generates a robots.txt file. Use this to control
+ * access to your resources from SEO crawlers.
+ * Learn more: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
+ */
+const ROBOTS_TXT = `
+User-agent: *
+Allow: /`;
+
+export const api = () => ROBOTS_TXT.trim();

package/{template-hydrogen → templates/template-hydrogen}/src/pages/sitemap.xml.server.jsx

@@ -28,7 +28,7 @@ function shopSitemap(data) {
             <changefreq>daily</changefreq>
             <image:image>
               <image:loc>
-                ${product?.images?.edges?.[0]?.node?.originalSrc}
+                ${product?.images?.edges?.[0]?.node?.url}
               </image:loc>
               <image:title>
                 ${product?.images?.edges?.[0]?.node?.altText ?? ''}
@@ -52,7 +52,7 @@ const QUERY = gql`
           images(first: 1) {
             edges {
               node {
-                originalSrc
+                url
                 altText
               }
             }

package/templates/template-hydrogen/tailwind.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {
+      typography: (theme) => ({
+        DEFAULT: {
+          css: {
+            hr: {
+              borderColor: theme('colors.gray.200'),
+              borderTopWidth: '1px',
+              marginTop: '2rem',
+              marginBottom: '2rem',
+            },
+            'ol > li::before': {
+              color: theme('colors.gray.900'),
+            },
+            'ul > li::before': {
+              backgroundColor: theme('colors.gray.900'),
+            },
+          },
+        },
+      }),
+    },
+  },
+  plugins: [require('@tailwindcss/typography')],
+};

package/{template-hydrogen → templates/template-hydrogen}/vite.config.js

@@ -6,4 +6,5 @@ import shopifyConfig from './shopify.config';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [hydrogen(shopifyConfig)],
+  optimizeDeps: {include: ['@headlessui/react']},
 });

package/{template-hydrogen → templates/template-hydrogen}/worker.js

@@ -10,6 +10,7 @@ addEventListener('fetch', (event) => {
         entrypoint,
         indexTemplate: indexHtml,
         cache: caches.default,
+        context: event,
       }),
     );
   } catch (error) {

package/README.md

@@ -1,3 +0,0 @@
-# Deprecated
-
-Please use `create-hydrogen-app` via `npm init hydrogen-app@latest` instead.