@shopify/create-hydrogen 1.0.9 → 2.0.2

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

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

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

@@ -1,40 +0,0 @@
-/**
- * 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
- */
-
-export default function RobotsTxt({request, response}) {
-  response.doNotStream();
-  response.headers.set('content-type', 'text/plain');
-
-  const url = new URL(request.url);
-
-  return response.send(robotsTxtData({url: url.origin}));
-}
-
-function robotsTxtData({url}) {
-  const sitemapUrl = url ? `${url}/sitemap.xml` : undefined;
-
-  return `
-User-agent: *
-Disallow: /admin
-Disallow: /cart
-Disallow: /orders
-Disallow: /checkouts/
-Disallow: /checkout
-Disallow: /carts
-Disallow: /account
-${sitemapUrl ? `Sitemap: ${sitemapUrl}` : ''}
-
-# Google adsbot ignores robots.txt unless specifically named!
-User-agent: adsbot-google
-Disallow: /checkouts/
-Disallow: /checkout
-Disallow: /carts
-Disallow: /orders
-
-User-agent: Pinterest
-Crawl-delay: 1
-`;
-}

package/templates/template-hydrogen-default/src/pages/sitemap.xml.server.jsx

@@ -1,151 +0,0 @@
-import {flattenConnection, useShopQuery} from '@shopify/hydrogen';
-import gql from 'graphql-tag';
-
-const MAX_URLS = 250; // the google limit is 50K, however, SF API only allow querying for 250 resources each time
-
-export default function Sitemap({request, response}) {
-  response.doNotStream();
-
-  const {data} = useShopQuery({
-    query: QUERY,
-    variables: {
-      urlLimits: MAX_URLS,
-    },
-    // Cache the page for 24 hours
-    cache: {maxAge: 60 * 60 * 24},
-  });
-
-  response.headers.set('content-type', 'application/xml');
-
-  return response.send(shopSitemap(data, request.url));
-}
-
-function shopSitemap(data, baseUrl) {
-  const productsData = flattenConnection(data.products).map((product) => {
-    const url = product.onlineStoreUrl
-      ? product.onlineStoreUrl
-      : `${baseUrl}/products/${product.handle}`;
-
-    const finalObject = {
-      url,
-      lastMod: product.updatedAt,
-      changeFreq: 'daily',
-    };
-
-    if (product.featuredImage.url) {
-      finalObject.image = {
-        url: product.featuredImage.url,
-      };
-
-      if (product.title) {
-        finalObject.image.title = product.title;
-      }
-
-      if (product.featuredImage.altText) {
-        finalObject.image.caption = product.featuredImage.altText;
-      }
-
-      return finalObject;
-    }
-  });
-
-  const collectionsData = flattenConnection(data.collections).map(
-    (collection) => {
-      const url = collection.onlineStoreUrl
-        ? collection.onlineStoreUrl
-        : `${baseUrl}/collections/${collection.handle}`;
-
-      return {
-        url,
-        lastMod: collection.updatedAt,
-        changeFreq: 'daily',
-      };
-    },
-  );
-
-  const pagesData = flattenConnection(data.pages).map((page) => {
-    const url = page.onlineStoreUrl
-      ? page.onlineStoreUrl
-      : `${baseUrl}/pages/${page.handle}`;
-
-    return {
-      url,
-      lastMod: page.updatedAt,
-      changeFreq: 'weekly',
-    };
-  });
-
-  const urlsDatas = [...productsData, ...collectionsData, ...pagesData];
-
-  return `
-    <urlset
-      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
-      xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
-    >
-      ${urlsDatas.map((url) => renderUrlTag(url)).join('')}
-    </urlset>`;
-}
-
-function renderUrlTag({url, lastMod, changeFreq, image}) {
-  return `
-    <url>
-      <loc>${url}</loc>
-      <lastmod>${lastMod}</lastmod>
-      <changefreq>${changeFreq}</changefreq>
-      ${
-        image
-          ? `
-        <image:image>
-          <image:loc>${image.url}</image:loc>
-          <image:title>${image.title ?? ''}</image:title>
-          <image:caption>${image.caption ?? ''}</image:caption>
-        </image:image>`
-          : ''
-      }
-      
-    </url>
-  `;
-}
-
-const QUERY = gql`
-  query sitemaps($urlLimits: Int) {
-    products(
-      first: $urlLimits
-      query: "published_status:'online_store:visible'"
-    ) {
-      edges {
-        node {
-          updatedAt
-          handle
-          onlineStoreUrl
-          title
-          featuredImage {
-            url
-            altText
-          }
-        }
-      }
-    }
-    collections(
-      first: $urlLimits
-      query: "published_status:'online_store:visible'"
-    ) {
-      edges {
-        node {
-          updatedAt
-          handle
-          onlineStoreUrl
-        }
-      }
-    }
-    pages(first: $urlLimits, query: "published_status:'published'") {
-      edges {
-        node {
-          updatedAt
-          handle
-          onlineStoreUrl
-        }
-      }
-    }
-  }
-`;

package/templates/template-hydrogen-default/src/routes/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/routes/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/routes/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/routes/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}
-`;

package/templates/template-hydrogen-default/src/routes/redirect.server.jsx

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

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

@@ -1,40 +0,0 @@
-/**
- * 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
- */
-
-export default function RobotsTxt({request, response}) {
-  response.doNotStream();
-  response.headers.set('content-type', 'text/plain');
-
-  const url = new URL(request.url);
-
-  return response.send(robotsTxtData({url: url.origin}));
-}
-
-function robotsTxtData({url}) {
-  const sitemapUrl = url ? `${url}/sitemap.xml` : undefined;
-
-  return `
-User-agent: *
-Disallow: /admin
-Disallow: /cart
-Disallow: /orders
-Disallow: /checkouts/
-Disallow: /checkout
-Disallow: /carts
-Disallow: /account
-${sitemapUrl ? `Sitemap: ${sitemapUrl}` : ''}
-
-# Google adsbot ignores robots.txt unless specifically named!
-User-agent: adsbot-google
-Disallow: /checkouts/
-Disallow: /checkout
-Disallow: /carts
-Disallow: /orders
-
-User-agent: Pinterest
-Crawl-delay: 1
-`;
-}