update landing page (#153)

* update landing page * edits * update examples * fix example * format * Update packages/react/docs/staticPages/hook.example.jsx Co-authored-by: Anthony Frehner <[email protected]> * Update packages/react/docs/staticPages/hydrogenReact.doc.ts --------- Co-authored-by: Anthony Frehner <[email protected]>
Shopify · Feb 1, 2023 · d35dc8b · d35dc8b
1 parent 2e7c3af
commit d35dc8b
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 30 deletions.
diff --git a/packages/react/docs/staticPages/component.example.jsx b/packages/react/docs/staticPages/component.example.jsx
@@ -0,0 +1,5 @@
+import {ShopPayButton} from '@shopify/hydrogen-react';
+
+export function MyProduct({variantId}) {
+  return <ShopPayButton variantIds={[variantId]} />;
+}
diff --git a/packages/react/docs/staticPages/homepage.example.tsx b/packages/react/docs/staticPages/homepage.example.tsx
diff --git a/packages/react/docs/staticPages/hook.example.jsx b/packages/react/docs/staticPages/hook.example.jsx
@@ -0,0 +1,13 @@
+import {useMoney} from '@shopify/hydrogen-react';
+
+export function MyComponent() {
+  const {currencyCode, currencySymbol, amount} = useMoney(variant.pricev2);
+
+  return (
+    <div>
+      <strong>{currencyCode}</strong>
+      <span>{currencySymbol}</span>
+      <span>{amount}</span>
+    </div>
+  );
+}
diff --git a/packages/react/docs/staticPages/hydrogenReact.doc.ts b/packages/react/docs/staticPages/hydrogenReact.doc.ts
@@ -3,7 +3,7 @@ import {LandingTemplateSchema} from '@shopify/generate-docs';
 const data: LandingTemplateSchema = {
   title: 'Hydrogen React',
   description:
-    'Hydrogen React is a performant library of Shopify-specific React components, reusable functions, and utilities for interacting with the Storefront API. This guide provides a complete reference of the components, hooks, and utilities that Hydrogen React offers, and their relationships to each other.',
+    'Hydrogen React is an unopiniated and performant library of Shopify-specific React components, reusable functions, and utilities for interacting with the Storefront API. This guide provides a complete reference of the components, hooks, and utilities that Hydrogen React offers, and their relationships to each other.',
   id: 'hydrogen-react',
   sections: [
     {
@@ -30,13 +30,10 @@ const data: LandingTemplateSchema = {
       ],
       sectionSubContent: [
         {
-          title: 'Requirements',
+          title: 'Authentication',
           sectionContent: `
-- You're familiar with [API authentication](/api/usage/authentication).
-- You can [make an authenticated request](/apps/auth/oauth/getting-started#make-authenticated-requests) to the Admin API for an access token.
-- You've [retrieved a parent access token](/apps/auth/oauth/getting-started#step-5-get-an-access-token) for the Admin API, which you can use to request a delegate access token for server requests.
-- You've set the parent access token to [offline](/apps/auth/oauth/access-modes#offline-access).
-            `,
+          To use Hydrogen React, you need to authenticate with and make requests to the [Storefront API](/api/storefront-api). Refer to [Get started with Hydrogen React](/custom-storefronts/hydrogen-react#get-started-with-hydrogen-react) for instructions on how to get an access token and set up the Storefront API client.
+           `,
           sectionCard: [
             {
               subtitle: 'Navigate to',
@@ -46,21 +43,6 @@ const data: LandingTemplateSchema = {
             },
           ],
         },
-        {
-          title: 'Authentication',
-          sectionContent: `
-Prevent rate-limiting on server requests to the Storefront API using a [delegate access token](/apps/auth/oauth/delegate-access-tokens).
-You'll need to [create an app](/apps/getting-started/create) from which you can make an authenticated request to the Admin API for a delegate access token.
-           `,
-          sectionNotice: [
-            {
-              title: 'Caution',
-              type: 'warning',
-              sectionContent:
-                'Unlike public access tokens, authenticated access tokens should be treated as secret and not used client-side. We recommend only requesting the scopes that your app needs, to reduce the security risk if the token leaks.',
-            },
-          ],
-        },
         {
           title: 'Versioning',
           sectionContent:
@@ -142,11 +124,21 @@ You'll need to [create an app](/apps/getting-started/create) from which you can
         },
       ],
       codeblock: {
-        title: 'Homepage',
+        title: 'Example',
         tabs: [
           {
-            title: 'Storefront Client',
-            code: './homepage.example.tsx',
+            title: 'Component',
+            code: './component.example.jsx',
+            language: 'javascript',
+          },
+          {
+            title: 'Hook',
+            code: './hook.example.jsx',
+            language: 'javascript',
+          },
+          {
+            title: 'Utility',
+            code: './utility.example.jsx',
             language: 'javascript',
           },
         ],

diff --git a/packages/react/docs/staticPages/install.npm.example.sh b/packages/react/docs/staticPages/install.npm.example.sh
@@ -1 +1 @@
-npm i --save @shopify/storefront-kit-react
+npm i --save @shopify/hydrogen-react
diff --git a/packages/react/docs/staticPages/install.yarn.example.sh b/packages/react/docs/staticPages/install.yarn.example.sh
@@ -1 +1 @@
-yarn add @shopify/storefront-kit-react
+yarn add @shopify/hydrogen-react
diff --git a/packages/react/docs/staticPages/utility.example.jsx b/packages/react/docs/staticPages/utility.example.jsx
@@ -0,0 +1,12 @@
+import {flattenConnection, MediaFile} from '@shopify/hydrogen-react';
+
+export function Product({product}) {
+  const media = flattenConnection(product.media);
+  return (
+    <>
+      {media.map((mediaFile) => {
+        return <MediaFile data={mediaFile} key={mediaFile.id} />;
+      })}
+    </>
+  );
+}