@graphcommerce/docs 6.0.0-canary.37 → 6.0.0-canary.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/framework/deployment.md +7 -10
  3. package/framework/readme.md +6 -6
  4. package/framework/seo.md +2 -1
  5. package/framework/translations.md +21 -104
  6. package/getting-started/create.md +9 -10
  7. package/package.json +2 -2
  8. package/framework/environment-variables.md +0 -56
package/CHANGELOG.md CHANGED
@@ -1,5 +1,9 @@
1
1
  # Change Log
2
2
 
3
+ ## 6.0.0-canary.39
4
+
5
+ ## 6.0.0-canary.38
6
+
3
7
  ## 6.0.0-canary.37
4
8
 
5
9
  ## 6.0.0-canary.36
package/framework/deployment.md CHANGED
@@ -1,3 +1,5 @@
1
+ # Deploy GraphCommerce
2
+
1
3
  # Deploy a Graphcommerce app with Vercel
2
4
 
3
5
  Congratulations, you are ready to deploy your GraphCommerce storefront to
@@ -18,14 +20,10 @@ Production Branch of your GitHub project:
18
20
 
19
21
  </figure>
20
22
 
21
- - Set the Environment Variables from your .env file:
23
+ - Optionally set the Environment Variables to override [config](./config.md)
22
24
 
23
25
  ```bash
24
- GRAPHCMS_URL=""
25
- MAGENTO_ENDPOINT=""
26
- IMAGE_DOMAINS=""
27
- NEXT_PUBLIC_LOCALE_STORES=""
28
- NEXT_PUBLIC_DISPLAY_INCL_TAX=""
26
+ GC_LIMIT_SSG=0
29
27
  ```
30
28
 
31
29
  - Vercel will auto assign a domain to your project. In this example, the Github
@@ -34,8 +32,7 @@ Production Branch of your GitHub project:
34
32
  Public site URL Environment Variables:
35
33
 
36
34
  ```bash
37
- NEXT_PUBLIC_GRAPHQL_ENDPOINT="https://graphcommerce-example.vercel.app/api/graphql"
38
- NEXT_PUBLIC_SITE_URL="https://graphcommerce-example.vercel.app/"
35
+ GC_CANONICAL_BASE_URL="https://graphcommerce-example.vercel.app/"
39
36
  ```
40
37
 
41
38
  <figure>
@@ -45,9 +42,9 @@ Production Branch of your GitHub project:
45
42
  </figure>
46
43
 
47
44
  - Hit the "Deploy" button
45
+
48
46
  - A custom domain can be configured in the Vercel Project Settings. Update the
49
- `NEXT_PUBLIC_GRAPHQL_ENDPOINT` and `NEXT_PUBLIC_SITE_URL` variables
50
- afterwards.
47
+ and `GC_CANONICAL_BASE_URL` variable afterwards.
51
48
 
52
49
  ## Next steps
53
50
 
package/framework/readme.md CHANGED
@@ -11,12 +11,12 @@ high-end e-commerce progressive web apps (PWA).
11
11
 
12
12
  ### Framework concepts and components
13
13
 
14
- | Concepts | Customizing | Other |
15
- | -------------------------------------------------------------- | ---------------------------------------- | -------------------------------------------------- |
16
- | [Static generation](../framework/static-generation.md) | [Theming](../framework/theming.md) | [Translations](../framework/translations.md) |
17
- | [Environment Variables](../framework/environment-variables.md) | [Typography](../framework/typography.md) | [Troubleshooting](../framework/troubleshooting.md) |
18
- | [Deployment](../framework/deployment.md) | [Favicon](../framework/favicon.md) | [SEO](../framework/seo.md) |
19
- | [Hygraph](../framework/graphcms.md) | [Icons](../framework//icons.md) | |
14
+ | Concepts | Customizing | Other |
15
+ | ------------------------------------------------------ | ---------------------------------------- | -------------------------------------------------- |
16
+ | [Static generation](../framework/static-generation.md) | [Theming](../framework/theming.md) | [Translations](../framework/translations.md) |
17
+ | [Confg](../framework/config.md) | [Typography](../framework/typography.md) | [Troubleshooting](../framework/troubleshooting.md) |
18
+ | [Deployment](../framework/deployment.md) | [Favicon](../framework/favicon.md) | [SEO](../framework/seo.md) |
19
+ | [Hygraph](../framework/graphcms.md) | [Icons](../framework//icons.md) | |
20
20
 
21
21
  ## GraphCommerce project structure
22
22
 
package/framework/seo.md CHANGED
@@ -46,7 +46,8 @@ Generating the sitemap.xml file is part of the static build process. Use
46
46
  `yarn build` to initiate the build process and to generate a new sitemap.xml
47
47
  file.
48
48
 
49
- Sitemap generation uses the `NEXT_PUBLIC_SITE_URL` variable in your .env fil.
49
+ Sitemap generation uses the
50
+ [`canonicalBaseUrl` configuration](./config.md#canonicalbaseurl-string).
50
51
 
51
52
  ## Modify /robots.txt
52
53
 
package/framework/translations.md CHANGED
@@ -138,19 +138,31 @@ msgstr "Cart ({0})"
138
138
  1. Create a new storeview and configure the locale,
139
139
  `Admin > Store > Configuration > General > General > Locale`. Choose one of
140
140
  the options from the Magento Locale codes (below).
141
- 2. In your .env file, add the desired route and store_code to the
142
- `NEXT_PUBLIC_LOCALE_STORES` environment variable. The route will be visible
143
- to the user (added to the url) when the user switches storeview.
141
+ 2. In your graphcommerce.config.js file, add the desired `locale` and
142
+ `magentoStoreCode` to the [i18n config](./config.md#graphcommercei18nconfig)
143
+ environment variable. The route will be visible to the user (added to the
144
+ url) when the user switches storeview.
144
145
 
145
- It's considered best practice to match the route with the locale code,
146
+ It's considered best practice to match the route with the store code,
146
147
  replacing an underscore for a dash. For example, to add Swedish (Finland),
147
- which has locale code sv_FI, add the following:
148
+ which has store code sv_FI, add the following:
148
149
 
149
150
  ```tsx
150
- //Example from .env
151
-
152
- NEXT_PUBLIC_LOCALE_STORES =
153
- '{"en-us":"default",sv-fi":"[store_code from desired storeview]"}'
151
+ //Example from graphcommerce.config.js
152
+
153
+ /**
154
+ * Docs: https://graphcommerce.org/docs/framework/config
155
+ *
156
+ * @type {import('@graphcommerce/next-config/src/generated/config').GraphCommerceConfig}
157
+ */
158
+ const config = {
159
+ i18n: [
160
+ {
161
+ locale: 'sv-fi',
162
+ magentoStoreCode: 'sv_FI',
163
+ },
164
+ ],
165
+ }
154
166
  ```
155
167
 
156
168
  3. Run `yarn lingui`:
@@ -202,101 +214,6 @@ msgstr ""
202
214
  > suggestions in VS Code with the
203
215
  > [Github copilot extention ↗](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot).
204
216
 
205
- ### Magento Locale codes
206
-
207
- | Locale | Language (country) |
208
- | ---------- | --------------------------------------------------- |
209
- | af_ZA | Afrikaans (South Africa) |
210
- | sq_AL | Albanian (Albania) |
211
- | ar_DZ | Arabic (Algeria) |
212
- | ar_EG | Arabic (Egypt) |
213
- | ar_KW | Arabic (Kuwait) |
214
- | ar_MA | Arabic (Morocco) |
215
- | ar_SA | Arabic (Saudi Arabia) |
216
- | az_Latn_AZ | Azerbaijani (Latijns, Azerbaijan) |
217
- | bn_BD | Bangla (Bangladesh) |
218
- | eu_ES | Basque (Spain) |
219
- | be_BY | Belarusian (Belarus) |
220
- | bs_Latn_BA | Bosnian (Latijns, Bosnia & Herzegovina) |
221
- | bg_BG | Bulgarian (Bulgaria) |
222
- | ca_ES | Catalan (Spain) |
223
- | zh_Hant_HK | Chinese (traditioneel Chinees, Hong Kong SAR China) |
224
- | zh_Hant_TW | Chinese (traditioneel Chinees, Taiwan) |
225
- | zh_Hans_CN | Chinese (vereenvoudigd Chinees, China) |
226
- | hr_HR | Croatian (Croatia) |
227
- | cs_CZ | Czech (Czechia) |
228
- | da_DK | Danish (Denmark) |
229
- | nl_BE | Dutch (Belgium) |
230
- | nl_NL | Dutch (Netherlands) |
231
- | en_AU | English (Australia) |
232
- | en_CA | English (Canada) |
233
- | en_IE | English (Ireland) |
234
- | en_NZ | English (New Zealand) |
235
- | en_GB | English (United Kingdom) |
236
- | en_US | English (United States) |
237
- | et_EE | Estonian (Estonia) |
238
- | fil_PH | Filipino (Philippines) |
239
- | fi_FI | Finnish (Finland) |
240
- | fr_BE | French (Belgium) |
241
- | fr_CA | French (Canada) |
242
- | fr_FR | French (France) |
243
- | fr_LU | French (Luxembourg) |
244
- | fr_CH | French (Switzerland) |
245
- | gl_ES | Galician (Spain) |
246
- | ka_GE | Georgian (Georgia) |
247
- | de_AT | German (Austria) |
248
- | de_DE | German (Germany) |
249
- | de_LU | German (Luxembourg) |
250
- | de_CH | German (Switzerland) |
251
- | el_GR | Greek (Greece) |
252
- | gu_IN | Gujarati (India) |
253
- | he_IL | Hebrew (Israel) |
254
- | hi_IN | Hindi (India) |
255
- | hu_HU | Hungarian (Hungary) |
256
- | is_IS | Icelandic (Iceland) |
257
- | id_ID | Indonesian (Indonesia) |
258
- | it_IT | Italian (Italy) |
259
- | it_CH | Italian (Switzerland) |
260
- | ja_JP | Japanese (Japan) |
261
- | km_KH | Khmer (Cambodia) |
262
- | ko_KR | Korean (South Korea) |
263
- | lo_LA | Lao (Laos) |
264
- | lv_LV | Latvian (Latvia) |
265
- | lt_LT | Lithuanian (Lithuania) |
266
- | mk_MK | Macedonian (North Macedonia) |
267
- | ms_MY | Malay (Malaysia) |
268
- | nb_NO | Norwegian Bokmål (Norway) |
269
- | nn_NO | Norwegian Nynorsk (Norway) |
270
- | fa_IR | Persian (Iran) |
271
- | pl_PL | Polish (Poland) |
272
- | pt_BR | Portuguese (Brazil) |
273
- | pt_PT | Portuguese (Portugal) |
274
- | ro_RO | Romanian (Romania) |
275
- | ru_RU | Russian (Russia) |
276
- | sr_Cyrl_RS | Serbian (Cyrillisch, Serbia) |
277
- | sr_Latn_RS | Serbian (Latijns, Serbia) |
278
- | sk_SK | Slovak (Slovakia) |
279
- | sl_SI | Slovenian (Slovenia) |
280
- | es_AR | Spanish (Argentina) |
281
- | es_BO | Spanish (Bolivia) |
282
- | es_CL | Spanish (Chile) |
283
- | es_CO | Spanish (Colombia) |
284
- | es_CR | Spanish (Costa Rica) |
285
- | es_MX | Spanish (Mexico) |
286
- | es_PA | Spanish (Panama) |
287
- | es_PE | Spanish (Peru) |
288
- | es_ES | Spanish (Spain) |
289
- | es_US | Spanish (United States) |
290
- | es_VE | Spanish (Venezuela) |
291
- | sw_KE | Swahili (Kenya) |
292
- | sv_FI | Swedish (Finland) |
293
- | sv_SE | Swedish (Sweden) |
294
- | th_TH | Thai (Thailand) |
295
- | tr_TR | Turkish (Turkey) |
296
- | uk_UA | Ukrainian (Ukraine) |
297
- | vi_VN | Vietnamese (Vietnam) |
298
- | cy_GB | Welsh (United Kingdom) |
299
-
300
217
  ## Next steps
301
218
 
302
219
  - Learn more about
package/getting-started/create.md CHANGED
@@ -95,20 +95,19 @@ and/or Hygraph project, you'll need:
95
95
  ### Configuration
96
96
 
97
97
  To connect your GraphCommerce app to your Magento backend and/or Hygraph
98
- project, you need to update variables in the /.env file. The .env file contains
99
- useful information about your storefront.
98
+ project, you need to update variables in the graphcommerce.config.js file. The
99
+ graphcommerce.config.js file contains useful information about your storefront.
100
100
 
101
- `MAGENTO_ENDPOINT=""`
102
- Magento 2 API URL, located at `http://<magento2-server>/graphql`.
101
+ Create a copy: `cp graphcommerce.config.js.example graphcommerce.config.js` and
102
+ configure the following fields:
103
103
 
104
- `IMAGE_DOMAINS=",media.graphcms.com"`
105
- Comma-separated list of image domains. Add media.graphcms.com as default.
104
+ - [magentoEndpoint](../framework/config.md#magentoendpoint-string),
105
+ - [hygraphEndpoint](../framework/config.md#hygraphendpoint-string).
106
106
 
107
- `GRAPHCMS_URL=""`
108
- Hygraph API URL. Once logged in, copy it from Project Settings > Api Access >
109
- Content API
107
+ Store code configuration:
108
+
109
+ - [magentoStoreCode](../framework/config.md#magentostorecode-string),
110
110
 
111
- `NEXT_PUBLIC_LOCALE_STORES='{"en-us": "default", "en-ca": "canada"}'`
112
111
  List of routes and store_codes:
113
112
 
114
113
  - When the user switches to the Canadian storeview, the suffix /en-ca is added
package/package.json CHANGED
@@ -2,10 +2,10 @@
2
2
  "name": "@graphcommerce/docs",
3
3
  "homepage": "https://www.graphcommerce.org/docs",
4
4
  "repository": "github:graphcommerce-org/graphcommerce/docs",
5
- "version": "6.0.0-canary.37",
5
+ "version": "6.0.0-canary.39",
6
6
  "sideEffects": true,
7
7
  "devDependencies": {
8
- "@graphcommerce/prettier-config-pwa": "6.0.0-canary.37"
8
+ "@graphcommerce/prettier-config-pwa": "6.0.0-canary.39"
9
9
  },
10
10
  "prettier": "@graphcommerce/prettier-config-pwa"
11
11
  }
package/framework/environment-variables.md DELETED
@@ -1,56 +0,0 @@
1
- # Environment Variables
2
-
3
- This guide describes how to store environment variables in your GraphCommerce
4
- project.
5
-
6
- ## How environment variables work
7
-
8
- You can store environment variables in the .env file in your GraphCommerce root
9
- directory. Any variable from .env files that aren't prefixed with `NEXT_PUBLIC`
10
- is treated as a server runtime variable. These variables are not exposed to the
11
- browser.
12
-
13
- Environment variables will be loaded into `process.env`, allowing you to use
14
- them in Next.js data fetching methods and API routes:
15
-
16
- ```ts
17
- // /lib/graphql/GraphQLProvider.tsx
18
-
19
- // ...
20
- new HttpLink({
21
- uri: process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT,
22
- credentials: 'same-origin',
23
- })
24
- // ...
25
- ```
26
-
27
- ## Public variables
28
-
29
- Expose environment variables to the browser by prefixing with `NEXT_PUBLIC`.
30
- These variables can be accessed in any component:
31
-
32
- ```bash
33
- # Google TagManager ID
34
- NEXT_PUBLIC_GTM_ID="GTM-000000"
35
- ```
36
-
37
- ```tsx
38
- // /node_modules/@graphcommerce/googleanalytics/components/GoogleAnalyticsScript.tsx
39
-
40
- export default function GoogleAnalyticsScript() {
41
- const id = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS
42
-
43
- ...
44
- }
45
- ```
46
-
47
- ## Deployment Environment Variables
48
-
49
- When [deploying your GraphCommerce storefront](./deployment.md) to Vercel,
50
- Environment Variables can be configured in the Project Settings.
51
-
52
- ## Next steps
53
-
54
- - Learn how to [deploy your GraphCommerce storefront](./deployment.md) to Vercel
55
- - Read more about
56
- [Environment Variables in Next.js ↗](https://nextjs.org/docs/basic-features/environment-variables#loading-environment-variables)