@shopify/create-hydrogen 1.0.9 → 2.0.2

package/templates/template-hydrogen-default/src/components/Welcome.server.jsx

@@ -1,188 +0,0 @@
-import {useShopQuery, flattenConnection, Link} from '@shopify/hydrogen';
-import gql from 'graphql-tag';
-import {Suspense} from 'react';
-
-function ExternalIcon() {
-  return (
-    <svg
-      className="ml-3"
-      width="15"
-      height="14"
-      viewBox="0 0 15 14"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-    >
-      <path d="M8.11963 0.000976562C7.56734 0.000976562 7.11963 0.448692 7.11963 1.00098C7.11963 1.55326 7.56734 2.00098 8.11963 2.00098H10.7054L4.41252 8.29387C4.022 8.68439 4.022 9.31756 4.41252 9.70808C4.80305 10.0986 5.43621 10.0986 5.82674 9.70808L12.1196 3.41519V6.00098C12.1196 6.55326 12.5673 7.00098 13.1196 7.00098C13.6719 7.00098 14.1196 6.55326 14.1196 6.00098V1.00098C14.1196 0.448692 13.6719 0.000976562 13.1196 0.000976562H8.11963Z" />
-      <path d="M2.11963 2.00098C1.01506 2.00098 0.119629 2.89641 0.119629 4.00098V12.001C0.119629 13.1055 1.01506 14.001 2.11963 14.001H10.1196C11.2242 14.001 12.1196 13.1055 12.1196 12.001V9.00098C12.1196 8.44869 11.6719 8.00098 11.1196 8.00098C10.5673 8.00098 10.1196 8.44869 10.1196 9.00098V12.001H2.11963V4.00098L5.11963 4.00098C5.67191 4.00098 6.11963 3.55326 6.11963 3.00098C6.11963 2.44869 5.67191 2.00098 5.11963 2.00098H2.11963Z" />
-    </svg>
-  );
-}
-
-function DocsButton({url, label}) {
-  return (
-    <a
-      href={url}
-      target="_blank"
-      className="bg-white shadow py-2 px-5 rounded-full inline-flex items-center hover:opacity-80"
-      rel="noreferrer"
-    >
-      {label}
-      <ExternalIcon />
-    </a>
-  );
-}
-
-function BoxFallback() {
-  return (
-    <div className="bg-white p-12 shadow-xl rounded-xl text-gray-900 h-60"></div>
-  );
-}
-
-function StorefrontInfo() {
-  const {data} = useShopQuery({query: QUERY, preload: true});
-  const shopName = data ? data.shop.name : '';
-  const products = data && flattenConnection(data.products);
-  const collections = data && flattenConnection(data.collections);
-  const totalProducts = products && products.length;
-  const totalCollections = collections && collections.length;
-
-  const pluralize = (count, noun, suffix = 's') =>
-    `${count} ${noun}${count === 1 ? '' : suffix}`;
-  return (
-    <div className="bg-white p-12 shadow-xl rounded-xl text-gray-900">
-      <p className="text-md font-medium uppercase mb-4">Connected Storefront</p>
-      <h2 className="text-2xl font-bold mb-4">{shopName}</h2>
-      <p className="text-md">
-        {pluralize(totalProducts, 'Product')}
-        {', '}
-        {pluralize(totalCollections, 'Collection')}
-      </p>
-      {totalProducts === 0 && totalCollections === 0 && (
-        <div className="py-2 px-3 bg-red-100 text-md">
-          Use the{' '}
-          <a
-            href="https://shopify.dev/apps/tools/cli/getting-started"
-            className="text-primary font-mono font-bold underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Shopify CLI
-          </a>{' '}
-          to populate sample products and collections.
-        </div>
-      )}
-      <hr className="my-4" />
-      <a
-        href="https://shopify.dev/custom-storefronts/hydrogen/getting-started/create#step-2-update-information-about-your-shopify-storefront"
-        className="text-md inline-flex items-center text-blue-700 font-medium hover:underline"
-        target="_blank"
-        rel="noreferrer"
-      >
-        Change your storefront access token
-        <ExternalIcon />
-      </a>
-    </div>
-  );
-}
-
-function TemplateLinks() {
-  const {data} = useShopQuery({query: QUERY, preload: true});
-  const products = data && flattenConnection(data.products);
-  const collections = data && flattenConnection(data.collections);
-
-  const firstProduct = products && products.length ? products[0].handle : '';
-  const firstCollection = collections[0] ? collections[0].handle : '';
-
-  return (
-    <div className="bg-white p-12 md:p-12 shadow-xl rounded-xl text-gray-900">
-      <p className="text-md font-medium uppercase mb-4">
-        Explore the templates
-      </p>
-      <ul>
-        <li className="mb-4">
-          <Link
-            to={`/collections/${firstCollection}`}
-            className="text-md font-medium text-blue-700 hover:underline"
-          >
-            Collection template
-          </Link>
-        </li>
-        <li className="mb-4">
-          <Link
-            to={`/products/${firstProduct}`}
-            className="text-md font-medium text-blue-700 hover:underline"
-          >
-            Product template
-          </Link>
-        </li>
-        <li>
-          <Link
-            to="/error-page"
-            className="text-md font-medium text-blue-700 hover:underline"
-          >
-            404 template
-          </Link>
-        </li>
-      </ul>
-    </div>
-  );
-}
-
-/**
- * A server component that displays the content on the homepage of the Hydrogen app
- */
-export default function Welcome() {
-  return (
-    <div className="text-gray-900 pt-16 rounded-[40px] my-16 px-4 xl:px-12 bg-gradient-to-b from-white -mx-4 xl:-mx-12">
-      <div className="text-center mb-16">
-        <h1 className="font-extrabold mb-4 text-5xl md:text-7xl">
-          Hello, Hydrogen
-        </h1>
-        <p className="text-lg mb-8">
-          Welcome to your custom storefront. Let&rsquo;s get building.
-        </p>
-        <div className="flex flex-col lg:flex-row justify-center items-center gap-8 text-gray-700">
-          <DocsButton
-            url="https://shopify.dev/custom-storefronts/hydrogen"
-            label="Browse Hydrogen documentation"
-          />
-          <DocsButton url="/graphql" label="Open the GraphiQL explorer" />
-          <DocsButton
-            url="https://github.com/Shopify/hydrogen-examples"
-            label="Explore Hydrogen examples"
-          />
-        </div>
-      </div>
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16">
-        <Suspense fallback={<BoxFallback />}>
-          <StorefrontInfo />
-        </Suspense>
-        <Suspense fallback={<BoxFallback />}>
-          <TemplateLinks />
-        </Suspense>
-      </div>
-    </div>
-  );
-}
-
-const QUERY = gql`
-  query welcomeContent {
-    shop {
-      name
-    }
-    products(first: 250) {
-      edges {
-        node {
-          handle
-        }
-      }
-    }
-    collections(first: 250) {
-      edges {
-        node {
-          handle
-        }
-      }
-    }
-  }
-`;

package/templates/template-hydrogen-default/src/index.css

@@ -1,68 +0,0 @@
-@tailwind base;
-@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;
-}
-
-model-viewer::part(default-progress-bar) {
-  display: none;
-}
-
-.gradient {
-  background: linear-gradient(
-    310deg,
-    rgba(255, 97, 0, 1),
-    white,
-    rgba(0, 197, 185, 1)
-  );
-  background-size: 600% 600%;
-  animation: gradient-animation 14s ease infinite;
-
-  /* prettier-ignore */
-  clip-path: polygon(100% 0%, 0% 0% , 0% 65%, 1% 64.95%, 2% 64.8%, 3% 64.6%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.4%, 79% 64.7%, 80% 64.85%, 81% 65%, 82% 65%, 83% 64.9%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%);
-}
-
-@keyframes gradient-animation {
-  0% {
-    background-position: 97% 0%;
-  }
-  50% {
-    background-position: 4% 100%;
-  }
-  100% {
-    background-position: 97% 0%;
-  }
-}

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

@@ -1,105 +0,0 @@
-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,
-    },
-    preload: true,
-  });
-
-  if (data?.collection == null) {
-    return <NotFound />;
-  }
-
-  const collection = data.collection;
-  const products = flattenConnection(collection.products);
-  const hasNextPage = data.collection.products.pageInfo.hasNextPage;
-
-  return (
-    <Layout>
-      {/* the seo object will be expose in API version 2022-04 or later */}
-      <Seo type="collection" data={{seo: {}, ...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-default/src/pages/index.server.jsx

@@ -1,241 +0,0 @@
-import {
-  useShopQuery,
-  flattenConnection,
-  ProductProviderFragment,
-  Image,
-  Link,
-  Seo,
-  CacheDays,
-} 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: CacheDays(),
-    preload: true,
-  });
-
-  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,
-    },
-    preload: true,
-  });
-
-  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,
-    },
-    preload: true,
-  });
-
-  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 homeShopInfo {
-    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/templates/template-hydrogen-default/src/pages/pages/[handle].server.jsx

@@ -1,37 +0,0 @@
-import {useShopQuery, RawHtml, Seo} from '@shopify/hydrogen';
-import gql from 'graphql-tag';
-
-import Layout from '../../components/Layout.server';
-import NotFound from '../../components/NotFound.server';
-
-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>
-  );
-}
-
-const QUERY = gql`
-  query PageDetails($handle: String!) {
-    pageByHandle(handle: $handle) {
-      title
-      body
-      seo {
-        title
-        description
-      }
-    }
-  }
-`;

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

@@ -1,66 +0,0 @@
-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,
-    },
-    preload: true,
-  });
-
-  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
-      }
-      featuredImage {
-        url
-        height
-        width
-        altText
-      }
-      ...ProductProviderFragment
-    }
-  }
-
-  ${ProductProviderFragment}
-`;