Create a new Hydrogen project

.eslintignore

@@ -0,0 +1,5 @@
+build
+node_modules
+bin
+*.d.ts
+dist

.eslintrc.cjs

@@ -0,0 +1,11 @@
+/**
+ * @type {import("@types/eslint").Linter.BaseConfig}
+ */
+module.exports = {
+  extends: ['@remix-run/eslint-config', 'plugin:hydrogen/recommended'],
+  rules: {
+    'hydrogen/prefer-image-component': 'off',
+    'no-useless-escape': 'off',
+    'no-case-declarations': 'off',
+  },
+};

.github/workflows/oxygen-deployment-1000018173.yml

@@ -0,0 +1,44 @@
+# Don't change the line below!
+#! oxygen_storefront_id: 1000018173
+
+name: Storefront 1000018173
+on: [push]
+
+permissions:
+  contents: read
+  deployments: write
+
+jobs:
+  deploy:
+    name: Deploy to Oxygen
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "lts/*"
+          check-latest: true
+
+      - name: Cache node modules
+        id: cache-npm
+        uses: actions/cache@v4
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build and Publish to Oxygen
+        run: npx shopify hydrogen deploy
+        env:
+          SHOPIFY_HYDROGEN_DEPLOYMENT_TOKEN: ${{ secrets.OXYGEN_DEPLOYMENT_TOKEN_1000018173 }}

.gitignore

@@ -0,0 +1,9 @@
+node_modules
+/.DS_Store
+/.cache
+/build
+/dist
+/public/build
+/.mf
+.env
+.shopify

.graphqlrc.yml

@@ -0,0 +1,12 @@
+projects:
+  default:
+    schema: 'node_modules/@shopify/hydrogen/storefront.schema.json'
+    documents:
+      - '!*.d.ts'
+      - '*.{ts,tsx,js,jsx}'
+      - 'app/**/*.{ts,tsx,js,jsx}'
+      - '!app/graphql/**/*.{ts,tsx,js,jsx}'
+  customer-account:
+    schema: 'node_modules/@shopify/hydrogen/customer-account.schema.json'
+    documents:
+      - 'app/graphql/customer-account/**/*.{ts,tsx,js,jsx}'

.npmrc

@@ -0,0 +1,7 @@
+@shopify:registry=https://registry.npmjs.com
+progress=false
+
+# Ensure Vite can optimize these deps in PNPM
+public-hoist-pattern[]=cookie
+public-hoist-pattern[]=set-cookie-parser
+public-hoist-pattern[]=content-security-policy-builder

README.md

@@ -1 +1,45 @@
-# hydrogen-may
+# Hydrogen template: Skeleton
+
+Hydrogen is Shopify’s stack for headless commerce. Hydrogen is designed to dovetail with [Remix](https://remix.run/), Shopify’s full stack web framework. This template contains a **minimal setup** of components, queries and tooling to get started with Hydrogen.
+
+[Check out Hydrogen docs](https://shopify.dev/custom-storefronts/hydrogen)
+[Get familiar with Remix](https://remix.run/docs/en/v1)
+
+## What's included
+
+- Remix
+- Hydrogen
+- Oxygen
+- Vite
+- Shopify CLI
+- ESLint
+- Prettier
+- GraphQL generator
+- TypeScript and JavaScript flavors
+- Minimal setup of components and routes
+
+## Getting started
+
+**Requirements:**
+
+- Node.js version 18.0.0 or higher
+
+```bash
+npm create @shopify/hydrogen@latest
+```
+
+## Building for production
+
+```bash
+npm run build
+```
+
+## Local development
+
+```bash
+npm run dev
+```
+
+## Setup for using Customer Account API (`/account` section)
+
+Follow step 1 and 2 of <https://shopify.dev/docs/custom-storefronts/building-with-the-customer-account-api/hydrogen#step-1-set-up-a-public-domain-for-local-development>

app/components/Aside.jsx

@@ -0,0 +1,44 @@
+/**
+ * A side bar component with Overlay that works without JavaScript.
+ * @example
+ * ```jsx
+ * <Aside id="search-aside" heading="SEARCH">
+ *  <input type="search" />
+ *  ...
+ * </Aside>
+ * ```
+ * @param {{
+ *   children?: React.ReactNode;
+ *   heading: React.ReactNode;
+ *   id?: string;
+ * }}
+ */
+export function Aside({children, heading, id = 'aside'}) {
+  return (
+    <div aria-modal className="overlay" id={id} role="dialog">
+      <button
+        className="close-outside"
+        onClick={() => {
+          history.go(-1);
+          window.location.hash = '';
+        }}
+      />
+      <aside>
+        <header>
+          <h3>{heading}</h3>
+          <CloseAside />
+        </header>
+        <main>{children}</main>
+      </aside>
+    </div>
+  );
+}
+
+function CloseAside() {
+  return (
+    /* eslint-disable-next-line jsx-a11y/anchor-is-valid */
+    <a className="close" href="#" onChange={() => history.go(-1)}>
+      &times;
+    </a>
+  );
+}