@graphcommerce/docs 4.0.0 → 4.2.0
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.
- package/CHANGELOG.md +27 -0
- package/framework/deployment.md +10 -6
- package/framework/favicon.md +3 -1
- package/framework/graphcms.md +10 -4
- package/framework/theming.md +1 -1
- package/framework/translations.md +3 -1
- package/getting-started/create.md +7 -3
- package/getting-started/graphcms-component.md +30 -10
- package/getting-started/header.md +17 -7
- package/getting-started/pages.md +12 -4
- package/getting-started/readme.md +3 -2
- package/getting-started/start-building.md +2 -2
- package/package.json +1 -1
- package/readme.md +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,32 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 4.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`2eaf3f7c7`](https://github.com/ho-nl/m2-pwa/commit/2eaf3f7c77b20da78a167b9fdb641cdd26a17e21)
|
|
8
|
+
Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Upload images to github
|
|
9
|
+
|
|
10
|
+
## 4.1.0
|
|
11
|
+
|
|
12
|
+
### Minor Changes
|
|
13
|
+
|
|
14
|
+
- [`ef499815c`](https://github.com/ho-nl/m2-pwa/commit/ef499815cb1d1e040408ae697f8f3156b5478020)
|
|
15
|
+
Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Fix build breaking spacing
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- [`12fc8166f`](https://github.com/ho-nl/m2-pwa/commit/12fc8166fd255db87862a08504a5a88552e41e08)
|
|
20
|
+
Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Fix build breaking spaces
|
|
21
|
+
|
|
22
|
+
## 4.0.1
|
|
23
|
+
|
|
24
|
+
### Patch Changes
|
|
25
|
+
|
|
26
|
+
- [`2db82d114`](https://github.com/ho-nl/m2-pwa/commit/2db82d114ffd4b4860e5a31ce0f2cd170732bda6)
|
|
27
|
+
Thanks [@paales](https://github.com/paales)! - Docs improvements: add alt attribute to docs
|
|
28
|
+
images, markup external links, images as markdown, play video inline
|
|
29
|
+
|
|
3
30
|
## 4.0.0
|
|
4
31
|
|
|
5
32
|
### Major Changes
|
package/framework/deployment.md
CHANGED
|
@@ -17,9 +17,11 @@ Production Branch of your GitHub project:
|
|
|
17
17
|
it's not showing up, click the 'Configure Github App' to grant Vercel
|
|
18
18
|
repository access
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
<figure>
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
</figure>
|
|
23
25
|
|
|
24
26
|
- Set the Environment Variables from your .env file:
|
|
25
27
|
|
|
@@ -41,9 +43,11 @@ Production Branch of your GitHub project:
|
|
|
41
43
|
NEXT_PUBLIC_SITE_URL="https://graphcommerce-example.vercel.app/"
|
|
42
44
|
```
|
|
43
45
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
46
|
+
<figure>
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
</figure>
|
|
47
51
|
|
|
48
52
|
- Hit the "Deploy" button
|
|
49
53
|
- A custom domain can be configured in the Vercel Project Settings. Update the
|
package/framework/favicon.md
CHANGED
|
@@ -29,7 +29,9 @@ You can use the GraphCommerce
|
|
|
29
29
|
to simplify the process of making correct favicons.
|
|
30
30
|
|
|
31
31
|
<figure>
|
|
32
|
-
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
33
35
|
<figcaption>Favicon sketch template</figcaption>
|
|
34
36
|
</figure>
|
|
35
37
|
|
package/framework/graphcms.md
CHANGED
|
@@ -23,7 +23,7 @@ by adding GraphCMS content to pages.
|
|
|
23
23
|
|
|
24
24
|
To connect your GraphCommerce app to your GraphCMS project, you'll need a
|
|
25
25
|
GraphCMS project with the required schema.
|
|
26
|
-
[Clone the demo GraphCMS project](https://app.graphcms.com/clone/caddaa93cfa9436a9e76ae9c0F34d257)
|
|
26
|
+
[Clone the demo GraphCMS project ↗](https://app.graphcms.com/clone/caddaa93cfa9436a9e76ae9c0F34d257)
|
|
27
27
|
as your starting point. Update the variable in the /.env file:
|
|
28
28
|
|
|
29
29
|
`GRAPHCMS_URL=""`
|
|
@@ -45,19 +45,25 @@ wish to add content to.
|
|
|
45
45
|
For example, the content of the 'men' Page entry in GraphCMS:
|
|
46
46
|
|
|
47
47
|
<figure>
|
|
48
|
-
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
49
51
|
</figure>
|
|
50
52
|
|
|
51
53
|
Is used to add a`RowProduct (variant:Grid)` and a
|
|
52
54
|
`RowProduct (variant:Backstory` component to: http://localhost:3000/men
|
|
53
55
|
|
|
54
56
|
<figure>
|
|
55
|
-
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
56
60
|
<figcaption>Content of the RowProduct (variant:Backstory component)</figcaption>
|
|
57
61
|
</figure>
|
|
58
62
|
|
|
59
63
|
<figure>
|
|
60
|
-
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
61
67
|
</figure>
|
|
62
68
|
|
|
63
69
|
## Next steps
|
package/framework/theming.md
CHANGED
|
@@ -130,7 +130,7 @@ const AnimatedButton = styled(Button, { name: 'animatedButton' })(
|
|
|
130
130
|
|
|
131
131
|
https://user-images.githubusercontent.com/1251986/155032870-ddecefe0-afb3-418c-af3d-91d8bc435dff.mp4
|
|
132
132
|
|
|
133
|
-
<video width="100%" controls autoPlay loop muted>
|
|
133
|
+
<video width="100%" controls autoPlay loop muted playsInline>
|
|
134
134
|
<source src="https://user-images.githubusercontent.com/1251986/155032870-ddecefe0-afb3-418c-af3d-91d8bc435dff.mp4" type="video/mp4"/>
|
|
135
135
|
</video>
|
|
136
136
|
|
|
@@ -48,7 +48,9 @@ msgstr "Empty cart!"
|
|
|
48
48
|
Refresh to see your changes updated
|
|
49
49
|
|
|
50
50
|
<figure>
|
|
51
|
-
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
52
54
|
<figcaption>Make changes to translations. Refresh to see changes updated.</figcaption>
|
|
53
55
|
</figure>
|
|
54
56
|
|
|
@@ -20,12 +20,16 @@ After you've finished this tutorial, you'll have accomplished the following:
|
|
|
20
20
|
- Generated a new project based on the magento-graphcms example
|
|
21
21
|
|
|
22
22
|
<figure>
|
|
23
|
-
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
24
26
|
<figcaption>GraphCommerce magento-graphcms example category page</figcaption>
|
|
25
27
|
</figure>
|
|
26
28
|
|
|
27
29
|
<figure>
|
|
28
|
-
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
29
33
|
<figcaption>GraphCommerce magento-graphcms example product page</figcaption>
|
|
30
34
|
</figure>
|
|
31
35
|
|
|
@@ -86,7 +90,7 @@ and/or GraphCMS project, you'll need:
|
|
|
86
90
|
|
|
87
91
|
- Magento 2.4.3 - Clean install, or a production or development environment
|
|
88
92
|
- GraphCMS - A GraphCMS project with the required schema.
|
|
89
|
-
[Clone the demo GraphCMS project](https://app.graphcms.com/clone/caddaa93cfa9436a9e76ae9c0F34d257)
|
|
93
|
+
[Clone the demo GraphCMS project ↗](https://app.graphcms.com/clone/caddaa93cfa9436a9e76ae9c0F34d257)
|
|
90
94
|
as your starting point.
|
|
91
95
|
|
|
92
96
|
### Configuration
|
|
@@ -44,31 +44,41 @@ frontend React framework that uses Next.js for server-side rendering.
|
|
|
44
44
|
- Add a single line text field called "Identity" and configure the following:
|
|
45
45
|
|
|
46
46
|
<figure>
|
|
47
|
-
|
|
47
|
+
|
|
48
|
+
![Adding a Single line text field]()
|
|
49
|
+
|
|
48
50
|
<figcaption>Adding a Single line text field called "Identity"</figcaption>
|
|
49
51
|
</figure>
|
|
50
52
|
|
|
51
53
|
<figure>
|
|
52
|
-
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
53
57
|
<figcaption>Configuring of the "Identity" field</figcaption>
|
|
54
58
|
</figure>
|
|
55
59
|
|
|
56
60
|
- Add an Asset field called "Image" and configure the following:
|
|
57
61
|
|
|
58
62
|
<figure>
|
|
59
|
-
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
|
|
60
66
|
<figcaption>Adding an Asset field called "Image"</figcaption>
|
|
61
67
|
</figure>
|
|
62
68
|
|
|
63
69
|
- Add a Rich text field called "Copy" and configure the following:
|
|
64
70
|
|
|
65
71
|
<figure>
|
|
66
|
-
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
67
75
|
<figcaption>Adding a Rich text field called "Copy"</figcaption>
|
|
68
76
|
</figure>
|
|
69
77
|
|
|
70
78
|
<figure>
|
|
71
|
-
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
|
|
72
82
|
<figcaption>Configuring of the "Copy" field</figcaption>
|
|
73
83
|
</figure>
|
|
74
84
|
|
|
@@ -82,7 +92,9 @@ relationship between the Banner model and the Content field of the Page model.
|
|
|
82
92
|
"Models to reference"
|
|
83
93
|
|
|
84
94
|
<figure>
|
|
85
|
-
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
|
|
86
98
|
<figcaption>Adding the newly created Banner Model to "Models to reference"</figcaption>
|
|
87
99
|
</figure>
|
|
88
100
|
|
|
@@ -90,7 +102,9 @@ relationship between the Banner model and the Content field of the Page model.
|
|
|
90
102
|
the homepage:
|
|
91
103
|
|
|
92
104
|
<figure>
|
|
93
|
-
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
|
|
94
108
|
<figcaption>Adding a new banner to the Homepage content entry</figcaption>
|
|
95
109
|
</figure>
|
|
96
110
|
|
|
@@ -114,7 +128,9 @@ query {
|
|
|
114
128
|
Should output the following. Make note that 'Banner' is listed as a typename.
|
|
115
129
|
|
|
116
130
|
<figure>
|
|
117
|
-
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
|
|
118
134
|
<figcaption>Validation of the addition of "Banner" to the GraphQL Schema</figcaption>
|
|
119
135
|
</figure>
|
|
120
136
|
|
|
@@ -226,12 +242,16 @@ const defaultRenderer: Partial<ContentTypeRenderer> = {
|
|
|
226
242
|
matters:
|
|
227
243
|
|
|
228
244
|
<figure>
|
|
229
|
-
|
|
245
|
+
|
|
246
|
+
|
|
247
|
+
|
|
230
248
|
<figcaption>An instance of the banner component rendering with content from GraphCMS</figcaption>
|
|
231
249
|
</figure>
|
|
232
250
|
|
|
233
251
|
<figure>
|
|
234
|
-
|
|
252
|
+
|
|
253
|
+
|
|
254
|
+
|
|
235
255
|
<figcaption>Sort order matters</figcaption>
|
|
236
256
|
</figure>
|
|
237
257
|
|
|
@@ -39,7 +39,7 @@ frontend React framework that uses Next.js for server-side rendering.
|
|
|
39
39
|
|
|
40
40
|
https://user-images.githubusercontent.com/1251986/154978614-8d2eaee1-d64b-4bae-a7d7-cfee2e9175d3.mp4
|
|
41
41
|
|
|
42
|
-
<video width="100%" controls autoPlay loop muted>
|
|
42
|
+
<video width="100%" controls autoPlay loop muted playsInline>
|
|
43
43
|
<source src="https://user-images.githubusercontent.com/1251986/154978614-8d2eaee1-d64b-4bae-a7d7-cfee2e9175d3.mp4" type="video/mp4"/>
|
|
44
44
|
</video>
|
|
45
45
|
|
|
@@ -50,7 +50,7 @@ https://user-images.githubusercontent.com/1251986/154978614-8d2eaee1-d64b-4bae-a
|
|
|
50
50
|
|
|
51
51
|
https://user-images.githubusercontent.com/1251986/154979091-89c72d68-c62f-451c-af49-6f36f3fa6609.mp4
|
|
52
52
|
|
|
53
|
-
<video width="100%" controls autoPlay loop muted>
|
|
53
|
+
<video width="100%" controls autoPlay loop muted playsInline>
|
|
54
54
|
<source src="https://user-images.githubusercontent.com/1251986/154979091-89c72d68-c62f-451c-af49-6f36f3fa6609.mp4" type="video/mp4"/>
|
|
55
55
|
</video>
|
|
56
56
|
|
|
@@ -81,7 +81,9 @@ https://user-images.githubusercontent.com/1251986/154979091-89c72d68-c62f-451c-a
|
|
|
81
81
|
- Save the file to see your changes updated in real-time
|
|
82
82
|
|
|
83
83
|
<figure>
|
|
84
|
-
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
85
87
|
<figcaption>Reorder components</figcaption>
|
|
86
88
|
</figure>
|
|
87
89
|
|
|
@@ -91,7 +93,9 @@ https://user-images.githubusercontent.com/1251986/154979091-89c72d68-c62f-451c-a
|
|
|
91
93
|
`<DesktopNavBar>...</DesktopNavBar>` component.
|
|
92
94
|
|
|
93
95
|
<figure>
|
|
94
|
-
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
95
99
|
<figcaption>Remove navigation</figcaption>
|
|
96
100
|
</figure>
|
|
97
101
|
|
|
@@ -125,7 +129,9 @@ https://user-images.githubusercontent.com/1251986/154979091-89c72d68-c62f-451c-a
|
|
|
125
129
|
```
|
|
126
130
|
|
|
127
131
|
<figure>
|
|
128
|
-
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
129
135
|
<figcaption>Replace search input with Search Fab, remove Customer Service Fab</figcaption>
|
|
130
136
|
</figure>
|
|
131
137
|
|
|
@@ -163,7 +169,9 @@ import React, { useEffect } from 'react'
|
|
|
163
169
|
```
|
|
164
170
|
|
|
165
171
|
<figure>
|
|
166
|
-
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
|
|
167
175
|
<figcaption>Local copy of the MenuFab component with Fab scroll animation removed</figcaption>
|
|
168
176
|
</figure>
|
|
169
177
|
|
|
@@ -213,7 +221,9 @@ TransitionComponent={Fade}
|
|
|
213
221
|
```
|
|
214
222
|
|
|
215
223
|
<figure>
|
|
216
|
-
|
|
224
|
+
|
|
225
|
+
|
|
226
|
+
|
|
217
227
|
<figcaption>Menu component with custom styling</figcaption>
|
|
218
228
|
</figure>
|
|
219
229
|
|
package/getting-started/pages.md
CHANGED
|
@@ -110,7 +110,9 @@ export const getStaticProps: GetPageStaticProps = async (context) => {
|
|
|
110
110
|
- Visiting http://localhost:3000/about/about-us will output:
|
|
111
111
|
|
|
112
112
|
<figure>
|
|
113
|
-
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
|
|
114
116
|
<figcaption>Page with page layout (header, footer)</figcaption>
|
|
115
117
|
</figure>
|
|
116
118
|
|
|
@@ -164,12 +166,16 @@ function AboutUs({ pages }: Props) {
|
|
|
164
166
|
```
|
|
165
167
|
|
|
166
168
|
<figure>
|
|
167
|
-
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
|
|
168
172
|
<figcaption>Fetch page content from GraphCMS</figcaption>
|
|
169
173
|
</figure>
|
|
170
174
|
|
|
171
175
|
<figure>
|
|
172
|
-
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
173
179
|
<figcaption>GraphCMS entry</figcaption>
|
|
174
180
|
</figure>
|
|
175
181
|
|
|
@@ -280,7 +286,9 @@ You can test the static build process by running it locally:
|
|
|
280
286
|
- `yarn build` Start static build process
|
|
281
287
|
|
|
282
288
|
<figure>
|
|
283
|
-
|
|
289
|
+
|
|
290
|
+
|
|
291
|
+
|
|
284
292
|
<figcaption>Successful pre-render of the about/about-us page</figcaption>
|
|
285
293
|
</figure>
|
|
286
294
|
|
|
@@ -82,8 +82,9 @@ styles.
|
|
|
82
82
|
|
|
83
83
|
Others components are imported where needed, and can be recognized by their
|
|
84
84
|
namespace `@graphcommerce/`. There are different ways to
|
|
85
|
-
[customize styles](https://mui.com/customization/how-to-customize/) of
|
|
86
|
-
components. The most common way is by adding an sx prop:
|
|
85
|
+
[customize styles ↗](https://mui.com/customization/how-to-customize/) of
|
|
86
|
+
importend components. The most common way is by adding an sx prop:
|
|
87
|
+
`sx={{color:'red'}}`.
|
|
87
88
|
|
|
88
89
|
If you want to extend a component's behavior or built your own, you can
|
|
89
90
|
duplicate a `@graphcommerce/` component to your /components directory. You'll
|
|
@@ -56,7 +56,7 @@ You've completed the
|
|
|
56
56
|
|
|
57
57
|
https://user-images.githubusercontent.com/1251986/154980151-2039c027-c31f-4b99-86f2-8c2420053da8.mp4
|
|
58
58
|
|
|
59
|
-
<video width="100%" controls autoPlay loop muted>
|
|
59
|
+
<video width="100%" controls autoPlay loop muted playsInline>
|
|
60
60
|
<source src="https://user-images.githubusercontent.com/1251986/154980151-2039c027-c31f-4b99-86f2-8c2420053da8.mp4" type="video/mp4"/>
|
|
61
61
|
</video>
|
|
62
62
|
|
|
@@ -89,7 +89,7 @@ https://user-images.githubusercontent.com/1251986/154980151-2039c027-c31f-4b99-8
|
|
|
89
89
|
|
|
90
90
|
https://user-images.githubusercontent.com/1251986/154980686-3d2bf587-16d7-412b-b05f-8b0f7b40cbfd.mp4
|
|
91
91
|
|
|
92
|
-
<video width="100%" controls autoPlay loop muted>
|
|
92
|
+
<video width="100%" controls autoPlay loop muted playsInline>
|
|
93
93
|
|
|
94
94
|
<source src="https://user-images.githubusercontent.com/1251986/154980686-3d2bf587-16d7-412b-b05f-8b0f7b40cbfd.mp4" type="video/mp4"/>
|
|
95
95
|
</video>
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@graphcommerce/docs",
|
|
3
3
|
"homepage": "https://www.graphcommerce.org/docs",
|
|
4
4
|
"repository": "github:graphcommerce-org/graphcommerce/docs",
|
|
5
|
-
"version": "4.
|
|
5
|
+
"version": "4.2.0",
|
|
6
6
|
"sideEffects": true,
|
|
7
7
|
"devDependencies": {
|
|
8
8
|
"@graphcommerce/prettier-config-pwa": "^4.0.2"
|
package/readme.md
CHANGED
|
@@ -24,7 +24,7 @@ high-end e-commerce progressive web apps (PWA).
|
|
|
24
24
|
|
|
25
25
|
https://user-images.githubusercontent.com/1251986/154977573-4015e77c-43e7-481e-ab97-60c365c6b746.mp4
|
|
26
26
|
|
|
27
|
-
<video width="100%" controls autoPlay loop muted>
|
|
27
|
+
<video width="100%" controls autoPlay loop muted playsInline>
|
|
28
28
|
<source src="https://user-images.githubusercontent.com/1251986/154977573-4015e77c-43e7-481e-ab97-60c365c6b746.mp4" type="video/mp4"/>
|
|
29
29
|
</video>
|
|
30
30
|
|