trying headless storefront - see CHANGELOG

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ## [0.0.1-rtw.15] - Q2/2024
+Apr-15 - Moved /static/11ty-store/ to /static/11ty-store.old and placed a shopify,hygraph website in a new 11ty-store directory  
 Apr-05 - Added /static/11ty-store/  - Testing Headless CMS Shopify solution  
 Apr-04 - Added a store  
 Apr-04 - See UPDATE.md in /static/library - It's about evidence submission for cases and deals  

static/11ty-store.old/README.md

@@ -0,0 +1,36 @@
+# Shopify Storefront reference with 11ty
+
+A reference site for exploring the Shopify storefront API with Eleventy
+
+Running at https://shopify-11ty.netlify.app/
+Blogged at https://www.netlify.com/blog/
+
+
+
+```
+# install the dependencies
+npm i
+
+# Run the local dev server during development
+netlify dev
+
+# Build the site
+npm run build
+```
+
+## Clone and deploy
+
+Make a copy of this site and deploy it for free to Netlify by clicking this button:
+
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/philhawksworth/shopify-11ty)
+
+
+## Environment variables
+
+This example site is preconfigured with the following environment variable (via the netlify.toml file) since these variables are safe to share. To customise this example to point at your own store in Shopify, you'll need to update these to your own values.
+
+```conf
+SHOPIFY_API_ENDPOINT = "{YOUR SHOPIFY STORE URL}/api/unstable/graphql.json"
+SHOPIFY_STOREFRONT_API_TOKEN = "{YOUR SHOPIFY STOREFRONT ACCESS TOKEN}"
+```
+

static/11ty-store.old/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "shopify-storefront-reference-with-eleventy",
+  "version": "0.1.0",
+  "description": "A reference site for exploring the Shopify storefront API with Eleventy ",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/philhawksworth/shopify-11ty"
+  },
+  "scripts": {
+    "build": "eleventy",
+    "serve": "eleventy --serve",
+    "start": "npm run dev",
+    "dev": "ntl dev"
+  },
+  "keywords": [
+    "eleventy",
+    "11ty",
+    "ssg",
+    "serverless",
+    "netlify"
+  ],
+  "author": "Phil Hawksworth <[email protected]>",
+  "license": "ISC",
+  "dependencies": {
+    "@11ty/eleventy": "^0.12.1",
+    "dotenv": "^10.0.0",
+    "node-fetch": "^2.6.1",
+    "sass": "^1.29.0"
+  }
+}

static/11ty-store/README.md

@@ -1,36 +1,45 @@
-# Shopify Storefront reference with 11ty
+# Hydrogen template: Skeleton
 
-A reference site for exploring the Shopify storefront API with Eleventy
+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.
 
-Running at https://shopify-11ty.netlify.app/
-Blogged at https://www.netlify.com/blog/
+[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
 
-```
-# install the dependencies
-npm i
-
-# Run the local dev server during development
-netlify dev
-
-# Build the site
-npm run build
-```
+## Getting started
 
-## Clone and deploy
+**Requirements:**
 
-Make a copy of this site and deploy it for free to Netlify by clicking this button:
+- Node.js version 18.0.0 or higher
 
-[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/philhawksworth/shopify-11ty)
+```bash
+npm create @shopify/hydrogen@latest
+```
 
+## Building for production
 
-## Environment variables
+```bash
+npm run build
+```
 
-This example site is preconfigured with the following environment variable (via the netlify.toml file) since these variables are safe to share. To customise this example to point at your own store in Shopify, you'll need to update these to your own values.
+## Local development
 
-```conf
-SHOPIFY_API_ENDPOINT = "{YOUR SHOPIFY STORE URL}/api/unstable/graphql.json"
-SHOPIFY_STOREFRONT_API_TOKEN = "{YOUR SHOPIFY STOREFRONT ACCESS TOKEN}"
+```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>

static/11ty-store/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>
+  );
+}