Adding draft content for reference landing page (#828)

packages/hydrogen/docs/staticPages/authenticate.env.example

@@ -0,0 +1,9 @@
+# These API credentials fetch example inventory from the Hydrogen Demo Store
+# https://hydrogen.shop
+#
+# Replace with your own store domain and Storefront API token
+
+SESSION_SECRET="foobar"
+PUBLIC_STOREFRONT_API_TOKEN="3b580e70970c4528da70c98e097c2fa0"
+PUBLIC_STOREFRONT_API_VERSION="2023-04"
+PUBLIC_STORE_DOMAIN="hydrogen-preview.myshopify.com"

packages/hydrogen/docs/staticPages/authenticate.server.js

@@ -0,0 +1,21 @@
+/**
+ * server.js
+ * ---------
+ * Create a storefront client.
+ * Check the server.js file in the root of your new Hydrogen project to see
+ * an example implementation of this function. If you start from an official
+ * Hydrogen template (Hello World or Demo Store), then the client is already
+ * set up for you. Update the Shopify store domain and API token to start
+ * querying your own store inventory.
+ */
+const {storefront} = createStorefrontClient({
+  cache,
+  waitUntil,
+  i18n: {language: 'EN', country: 'US'},
+  publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
+  privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
+  storeDomain: `https://${env.PUBLIC_STORE_DOMAIN}`,
+  storefrontApiVersion: env.PUBLIC_STOREFRONT_API_VERSION || '2023-04',
+  storefrontId: env.PUBLIC_STOREFRONT_ID,
+  storefrontHeaders: getStorefrontHeaders(request),
+});

packages/hydrogen/docs/staticPages/hydrogen.doc.ts

@@ -3,62 +3,138 @@ import {LandingTemplateSchema} from '@shopify/generate-docs';
 const data: LandingTemplateSchema = {
   title: 'Hydrogen',
   description:
-    'Hydrogen is Shopify’s stack for headless commerce. It provides a set of tools, utilities, and best-in-class examples for building dynamic and performant commerce applications.',
+    'Hydrogen is Shopify’s opinionated stack for headless commerce. It provides a set of tools, utilities, and best-in-class examples for building dynamic and performant commerce applications.',
   id: 'hydrogen',
   sections: [
     {
       type: 'Generic',
       anchorLink: 'setup',
       title: 'Setup',
-      sectionContent: `Setup content`,
+      sectionContent: `
+1. Create a new Hydrogen project with your preferred package manager.
+1. Import components, hooks, or utilities that you want to use in your app. For more detailed instructions, see the Getting Started Guide.
+      `,
+      sectionCard: [
+        {
+          subtitle: 'Navigate to',
+          name: 'Getting Started with Hydrogen',
+          url: '/docs/custom-storefronts/hydrogen/getting-started/quickstart',
+          type: 'tutorial',
+        },
+      ],
+      codeblock: {
+        title: 'Create a new Hydrogen project',
+        tabs: [
+          {
+            title: 'npm',
+            code: 'install.npm.example.sh',
+          },
+          {
+            title: 'yarn',
+            code: 'install.yarn.example.sh',
+          },
+        ],
+      },
     },
     {
       type: 'Generic',
-      anchorLink: 'versioning',
-      title: 'Versioning',
+      anchorLink: 'authentication',
+      title: 'Authentication',
       sectionContent:
-        "Hydrogen is tied to specific versions of the [Storefront API](/api/storefront). For example, if you're using Storefront API version `2023-01`, then Hydrogen React versions `2023.1.x` are fully compatible. \n\n >Caution: \n>If the Storefront API version update includes breaking changes, then Hydrogen React includes breaking changes. Because the API version is updated every three months, breaking changes to Hydrogen React could occur every three months. \n\n Learn more about [API versioning](/api/usage/versioning).",
-    },
-    {
-      type: 'Generic',
-      anchorLink: 'components',
-      title: 'Components',
-      sectionContent: 'Component description',
+        'To make full use of Hydrogen, you need to authenticate with and make requests to the [Storefront API](/docs/api/storefront). Hydrogen includes a full-featured [API client](/docs/api/hydrogen/current/utilities/createstorefrontclient) to securely handle API queries and mutations. You can create access tokens for your own Shopify store by [installing the Hydrogen sales channel](/docs/custom-storefronts/oxygen/getting-started), which includes built-in hosting on Oxygen, Shopify’s global edge hosting platform.',
+      sectionCard: [
+        {
+          subtitle: 'Install',
+          name: 'Hydrogen sales channel',
+          url: 'https://apps.shopify.com/hydrogen',
+          // TODO update this icon
+          type: 'tutorial',
+        },
+        {
+          subtitle: 'Install',
+          name: 'Headless sales channel',
+          url: 'https://apps.shopify.com/headless',
+          // TODO update this icon
+          type: 'tutorial',
+        },
+      ],
+      codeblock: {
+        title: 'Authenticate a Hydrogen app',
+        tabs: [
+          {
+            title: 'server.js',
+            code: 'authenticate.server.js',
+            language: 'javascript',
+          },
+          {
+            title: '.env',
+            code: 'authenticate.env.example',
+          },
+        ],
+      },
     },
     {
       type: 'Generic',
-      anchorLink: 'hooks',
-      title: 'Hooks',
-      sectionContent: 'Hook description',
+      anchorLink: 'versioning',
+      title: 'Versioning',
+      sectionContent:
+        "Hydrogen is tied to specific versions of the [Storefront API](/api/storefront). For example, if you're using Storefront API version `2023-04`, then Hydrogen versions `2023.1.x` are fully compatible.\n\n> Caution:\n>If a Storefront API version includes breaking changes, then the corresponding Hydrogen version will include the same breaking changes.",
+      sectionCard: [
+        {
+          subtitle: 'Learn more',
+          name: 'Shopify API versioning',
+          url: '/docs/api/usage/versioning',
+          // TODO update this icon
+          type: 'tutorial',
+        },
+        {
+          subtitle: 'Learn more',
+          name: 'API release notes',
+          url: '/docs/api/release-notes',
+          // TODO update this icon
+          type: 'tutorial',
+        },
+      ],
     },
     {
       type: 'Generic',
-      anchorLink: 'utilities',
-      title: 'Utilities',
-      sectionContent: 'Utilities description',
+      anchorLink: 'hydrogen_react',
+      title: 'How Hydrogen works with Hydrogen React',
+      sectionContent:
+        'Hydrogen is [built on Remix](/docs/custom-storefronts/hydrogen/project-structure). But many of the components, hooks and utilities built into Hydrogen come from [Hydrogen React](/docs/api/hydrogen-react), an underlying package that’s framework-agnostic. For convenience, the Hydrogen package re-exports those resources. This means that if you’re building a Hydrogen app, then you should import them from the `@shopify/hydrogen package.',
+      codeblock: {
+        title: 'Importing Hydrogen components',
+        tabs: [
+          {
+            title: 'example-page.jsx',
+            code: 'hydrogen.import.jsx',
+            language: 'jsx',
+          },
+        ],
+      },
     },
     {
       type: 'Resource',
       anchorLink: 'resources',
       title: 'Resources',
       resources: [
         {
-          name: 'Custom Storefronts',
+          name: 'Custom Storefronts on Shopify',
           subtitle:
-            'Learn more about how to design, build, and manage, your custom storefront.',
+            'Learn more about how to design, build, and manage custom storefronts on Shopify.',
           url: '/custom-storefronts',
           type: 'custom-storefronts',
         },
         {
-          name: 'Getting started guide',
-          subtitle: 'Follow this tutorial to get started with Hydrogen.',
-          url: '/custom-storefronts/hydrogen/getting-started/quickstart',
-          type: 'quickstart',
+          name: 'Hydrogen on Discord',
+          subtitle:
+            'Chat with our community of developers building on Hydrogen',
+          url: 'https://discord.gg/shopifydevs',
+          type: 'discord',
         },
         {
-          name: 'Hydrogen Github',
-          subtitle:
-            'Get more details on how to improve your end-to-end development experience.',
+          name: 'Hydrogen on Github',
+          subtitle: 'Follow the Hydrogen project, contribute ',
           url: 'https://github.com/Shopify/hydrogen',
           type: 'github',
         },

packages/hydrogen/docs/staticPages/hydrogen.import.jsx

@@ -0,0 +1,5 @@
+import {ShopPayButton} from '@shopify/hydrogen';
+
+export function renderShopPayButton({variantId, storeDomain}) {
+  return <ShopPayButton variantIds={[variantId]} storeDomain={storeDomain} />;
+}

packages/hydrogen/docs/staticPages/install.npm.example.sh

@@ -0,0 +1 @@
+npm create @shopify/hydrogen@latest

packages/hydrogen/docs/staticPages/install.yarn.example.sh

@@ -0,0 +1 @@
+yarn create @shopify/hydrogen