diff --git a/README.md b/README.md
index cc181b411..885c95e85 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,8 @@ Start right now at [nextjs.org/commerce](https://nextjs.org/commerce)
Demo live at: [demo.vercel.store](https://demo.vercel.store/)
-This project is currently under development.
+- Shopify Demo: https://shopify.demo.vercel.store/
+- BigCommerce Demo: https://bigcommerce.demo.vercel.store/
## Features
@@ -21,34 +22,22 @@ This project is currently under development.
- Integrations - Integrate seamlessly with the most common ecommerce platforms.
- Dark Mode Support
-## Work in progress
-
-We're using Github Projects to keep track of issues in progress and todo's. Here is our [Board](https://github.com/vercel/commerce/projects/1)
-
## Integrations
Next.js Commerce integrates out-of-the-box with BigCommerce and Shopify. We plan to support all major ecommerce backends.
-## Goals
+## Considerations
-- **Next.js Commerce** should have a completely data **agnostic** UI
-- **Aware of schema**: should ship with the right data schemas and types.
-- All providers should return the right data types and schemas to blend correctly with Next.js Commerce.
-- `@framework` will be the alias utilized in commerce and it will map to the ecommerce provider of preference- e.g BigCommerce, Shopify, Swell. All providers should expose the same standardized functions. _Note that the same applies for recipes using a CMS + an ecommerce provider._
+- `framework/commerce` contains all types, helpers and functions to be used as base to build a new **provider**.
+- **Providers** live under `framework`'s root folder and they will extend Next.js Commerce types and functionality.
+- **Features API** is to ensure feature parity between the UI and the Provider. The UI should update accordingly and no extra code should be bundled. All extra configuration for features will live under `features` in `commerce.config.json` and if needed it can also be accessed programatically.
+- Each **provider** should add its corresponding `next.config.js` and `commerce.config.json` adding specific data related to the provider. For example in case of BigCommerce, the images CDN and additional API routes.
+- **Providers don't depend on anything that's specific to the application they're used in**. They only depend on `framework/commerce`, on their own framework folder and on some dependencies included in `package.json`
+- We recommend that each **provider** ships with an `env.template` file and a `[readme.md](http://readme.md)` file.
-There is a `framework` folder in the root folder that will contain multiple ecommerce providers.
+## Provider Structure
-Additionally, we need to ensure feature parity (not all providers have e.g. wishlist) so we also have a feature API to disable/enable features in the UI.
-
-People actively working on this project: @okbel & @lfades.
-
-## Framework
-
-Framework is where the data comes from. It contains mostly hook handlers and functions.
-
-## Structure
-
-Main folder and its exposed functions
+Next.js Commerce provides a set of utilities and functions to create new providers. This is how a provider structure looks like.
- `product`
- usePrice
@@ -68,22 +57,15 @@ Main folder and its exposed functions
- getCustomerId
- getCustomerWistlist
- `cart`
-
- useCart
- useAddItem
- useRemoveItem
- useUpdateItem
-
-- `config.json`
-- README.md
-
-#### Example of correct usage of the Commerce Framework
-
-```js
-import { useUI } from '@components/ui'
-import { useCustomer } from '@framework/customer'
-import { useWishlist, useAddItem, useRemoveItem } from '@framework/wishlist'
-```
+- `env.template`
+- `provider.ts`
+- `commerce.config.json`
+- `next.config.js`
+- `README.md`
## Configuration
@@ -136,6 +118,12 @@ We'd recommend to duplicate a provider folder and push your providers SDK.
If you succeeded building a provider, submit a PR so we can all enjoy it.
+## Work in progress
+
+We're using Github Projects to keep track of issues in progress and todo's. Here is our [Board](https://github.com/vercel/commerce/projects/1)
+
+People actively working on this project: @okbel & @lfades.
+
## Contribute
Our commitment to Open Source can be found [here](https://vercel.com/oss).
diff --git a/config/seo.json b/config/seo.json
index 0d0c3d37d..82520cf9b 100644
--- a/config/seo.json
+++ b/config/seo.json
@@ -1,12 +1,22 @@
{
"title": "ACME Storefront | Powered by Next.js Commerce",
"titleTemplate": "%s - ACME Storefront",
- "description": "Next.js Commerce -> https://www.nextjs.org/commerce",
+ "description": "Next.js Commerce - https://www.nextjs.org/commerce",
"openGraph": {
+ "title": "ACME Storefront | Powered by Next.js Commerce",
+ "description": "Next.js Commerce - https://www.nextjs.org/commerce",
"type": "website",
"locale": "en_IE",
"url": "https://nextjs.org/commerce",
- "site_name": "Next.js Commerce"
+ "site_name": "Next.js Commerce",
+ "images": [
+ {
+ "url": "/card.png",
+ "width": 800,
+ "height": 600,
+ "alt": "Next.js Commerce"
+ }
+ ]
},
"twitter": {
"handle": "@nextjs",
diff --git a/framework/commerce/with-config.js b/framework/commerce/with-config.js
index da6705cef..1eb1acc19 100644
--- a/framework/commerce/with-config.js
+++ b/framework/commerce/with-config.js
@@ -7,6 +7,7 @@ const merge = require('deepmerge')
const PROVIDERS = ['bigcommerce', 'shopify']
function getProviderName() {
+ // TODO: OSOT.
return process.env.BIGCOMMERCE_STOREFRONT_API_URL ? 'bigcommerce' : null
}
diff --git a/lib/colors.ts b/lib/colors.ts
index f9c0b5b0b..139cda23d 100644
--- a/lib/colors.ts
+++ b/lib/colors.ts
@@ -194,6 +194,7 @@ const colorMap: Record = {
}
export function isDark(color: string = ''): boolean {
+ color = color.toLowerCase()
// Equation from http://24ways.org/2010/calculating-color-contrast
let rgb = colorMap[color] ? hexToRgb(colorMap[color]) : hexToRgb(color)
const res = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000
diff --git a/public/card.png b/public/card.png
new file mode 100644
index 000000000..40fcf42d1
Binary files /dev/null and b/public/card.png differ