@graphcommerce/docs 3.1.4 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Change Log
 
+## 4.1.0
+
+### Minor Changes
+
+- [`ef499815c`](https://github.com/ho-nl/m2-pwa/commit/ef499815cb1d1e040408ae697f8f3156b5478020)
+  Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Fix build breaking spacing
+
+### Patch Changes
+
+- [`12fc8166f`](https://github.com/ho-nl/m2-pwa/commit/12fc8166fd255db87862a08504a5a88552e41e08)
+  Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Fix build breaking spaces
+
+## 4.0.1
+
+### Patch Changes
+
+- [`2db82d114`](https://github.com/ho-nl/m2-pwa/commit/2db82d114ffd4b4860e5a31ce0f2cd170732bda6)
+  Thanks [@paales](https://github.com/paales)! - Docs improvements: add alt attribute to docs
+  images, markup external links, images as markdown, play video inline
+
+## 4.0.0
+
+### Major Changes
+
+- [#1302](https://github.com/ho-nl/m2-pwa/pull/1302)
+  [`22ea2a0af`](https://github.com/ho-nl/m2-pwa/commit/22ea2a0af373dbd427e85f6ac82a074b1928a289)
+  Thanks [@paales](https://github.com/paales)! - Moved all rendering of docs to
+  https://www.graphcommerce.org/docs and use this only as a content package.
+
 ## 3.1.4
 
 ### Patch Changes

package/{content/framework → framework}/deployment.md

@@ -17,9 +17,11 @@ Production Branch of your GitHub project:
   it's not showing up, click the 'Configure Github App' to grant Vercel
   repository access
 
-  <figure>
-    <img src="https://cdn-std.droplr.net/files/acc_857465/e62La4"/>
-  </figure>
+<figure>
+
+![Configure Github App](https://cdn-std.droplr.net/files/acc_857465/e62La4)
+
+</figure>
 
 - Set the Environment Variables from your .env file:
 
@@ -41,9 +43,11 @@ Production Branch of your GitHub project:
   NEXT_PUBLIC_SITE_URL="https://graphcommerce-example.vercel.app/"
   ```
 
-  <figure>
-  <img src="https://cdn-std.droplr.net/files/acc_857465/gkuuby"/>
-  </figure>
+<figure>
+
+![Add Environment Variables](https://cdn-std.droplr.net/files/acc_857465/gkuuby)
+
+</figure>
 
 - Hit the "Deploy" button
 - A custom domain can be configured in the Vercel Project Settings. Update the

package/{content/framework → framework}/favicon.md

@@ -29,7 +29,9 @@ You can use the GraphCommerce
 to simplify the process of making correct favicons.
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/8wbzEN" />
+
+![Favicon sketch template](https://cdn-std.droplr.net/files/acc_857465/8wbzEN)
+
  <figcaption>Favicon sketch template</figcaption>
 </figure>
 

package/{content/framework → framework}/graphcms.md

@@ -23,7 +23,7 @@ by adding GraphCMS content to pages.
 
 To connect your GraphCommerce app to your GraphCMS project, you'll need a
 GraphCMS project with the required schema.
-[Clone the demo GraphCMS project](https://app.graphcms.com/clone/caddaa93cfa9436a9e76ae9c0F34d257)
+[Clone the demo GraphCMS project ↗](https://app.graphcms.com/clone/caddaa93cfa9436a9e76ae9c0F34d257)
 as your starting point. Update the variable in the /.env file:
 
 `GRAPHCMS_URL=""`  
@@ -45,19 +45,25 @@ wish to add content to.
 For example, the content of the 'men' Page entry in GraphCMS:
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/qv7IAn"/>
+
+![Page entry in GraphCMS](https://cdn-std.droplr.net/files/acc_857465/qv7IAn)
+
 </figure>
 
 Is used to add a`RowProduct (variant:Grid)` and a
 `RowProduct (variant:Backstory` component to: http://localhost:3000/men
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/1aSErQ" />
+
+![Content of the RowProduct component](https://cdn-std.droplr.net/files/acc_857465/1aSErQ)
+
   <figcaption>Content of the RowProduct (variant:Backstory component)</figcaption>
 </figure>
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/5Pkv37" />
+
+![Front-end render of the component](https://cdn-std.droplr.net/files/acc_857465/5Pkv37)
+
 </figure>
 
 ## Next steps

package/{content/framework → framework}/theming.md

@@ -130,7 +130,7 @@ const AnimatedButton = styled(Button, { name: 'animatedButton' })(
 
 https://user-images.githubusercontent.com/1251986/155032870-ddecefe0-afb3-418c-af3d-91d8bc435dff.mp4
 
-<video width="100%" controls autoPlay loop muted>
+<video width="100%" controls autoPlay loop muted playsinline>
 <source src="https://user-images.githubusercontent.com/1251986/155032870-ddecefe0-afb3-418c-af3d-91d8bc435dff.mp4" type="video/mp4"/>
 </video>
 

package/{content/framework → framework}/translations.md

@@ -48,7 +48,9 @@ msgstr "Empty cart!"
 Refresh to see your changes updated
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/ipzm99" />
+
+![Make changes to translations](https://cdn-std.droplr.net/files/acc_857465/ipzm99)
+
  <figcaption>Make changes to translations. Refresh to see changes updated.</figcaption>
 </figure>
 

package/{content/getting-started → getting-started}/create.md

@@ -20,12 +20,16 @@ After you've finished this tutorial, you'll have accomplished the following:
 - Generated a new project based on the magento-graphcms example
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/fk82kF" />
+
+![GraphCommerce magento-graphcms example category page](https://cdn-std.droplr.net/files/acc_857465/fk82kF)
+
  <figcaption>GraphCommerce magento-graphcms example category page</figcaption>
 </figure>
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/Fs7XWK" />
+
+![GraphCommerce magento-graphcms example product page](https://cdn-std.droplr.net/files/acc_857465/Fs7XWK)
+
  <figcaption>GraphCommerce magento-graphcms example product page</figcaption>
 </figure>
 
@@ -86,7 +90,7 @@ and/or GraphCMS project, you'll need:
 
 - Magento 2.4.3 - Clean install, or a production or development environment
 - GraphCMS - A GraphCMS project with the required schema.
-  [Clone the demo GraphCMS project](https://app.graphcms.com/clone/caddaa93cfa9436a9e76ae9c0F34d257)
+  [Clone the demo GraphCMS project ↗](https://app.graphcms.com/clone/caddaa93cfa9436a9e76ae9c0F34d257)
   as your starting point.
 
 ### Configuration

package/{content/getting-started → getting-started}/graphcms-component.md

@@ -44,31 +44,41 @@ frontend React framework that uses Next.js for server-side rendering.
 - Add a single line text field called "Identity" and configure the following:
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/6UGrfK" />
+
+![Adding a Single line text field](https://cdn-std.droplr.net/files/acc_857465/6UGrfK)
+
   <figcaption>Adding a Single line text field called "Identity"</figcaption>
 </figure>
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/TvNPoT" />
+
+![Configuring of the 'Identity' field](https://cdn-std.droplr.net/files/acc_857465/TvNPoT)
+
    <figcaption>Configuring of the "Identity" field</figcaption>
 </figure>
 
 - Add an Asset field called "Image" and configure the following:
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/OdkckP" />
+
+![Adding an Asset field called 'Image'](https://cdn-std.droplr.net/files/acc_857465/OdkckP)
+
    <figcaption>Adding an Asset field called "Image"</figcaption>
 </figure>
 
 - Add a Rich text field called "Copy" and configure the following:
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/C8nzzB" />
+
+![Adding a Rich text field called 'copy'](https://cdn-std.droplr.net/files/acc_857465/C8nzzB)
+
    <figcaption>Adding a Rich text field called "Copy"</figcaption>
 </figure>
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/j9kydr" />
+
+![Configuring of the field](https://cdn-std.droplr.net/files/acc_857465/j9kydr)
+
    <figcaption>Configuring of the "Copy" field</figcaption>
 </figure>
 
@@ -82,7 +92,9 @@ relationship between the Banner model and the Content field of the Page model.
   "Models to reference"
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/Dc4axA" />
+
+![Models to reference](https://cdn-std.droplr.net/files/acc_857465/Dc4axA)
+
    <figcaption>Adding the newly created Banner Model to "Models to reference"</figcaption>
 </figure>
 
@@ -90,7 +102,9 @@ relationship between the Banner model and the Content field of the Page model.
   the homepage:
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/lpa4x4" />
+
+![Adding a new banner to the Homepage content entry](https://cdn-std.droplr.net/files/acc_857465/lpa4x4)
+
    <figcaption>Adding a new banner to the Homepage content entry</figcaption>
 </figure>
 
@@ -114,7 +128,9 @@ query {
 Should output the following. Make note that 'Banner' is listed as a typename.
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/G51mOD" />
+
+![Validation of the addition to the GraphQL Schema](https://cdn-std.droplr.net/files/acc_857465/G51mOD)
+
    <figcaption>Validation of the addition of "Banner" to the GraphQL Schema</figcaption>
 </figure>
 
@@ -226,12 +242,16 @@ const defaultRenderer: Partial<ContentTypeRenderer> = {
   matters:
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/ONwNJD" />
+
+![An instance of the banner component rendering with content from GraphCMS](https://cdn-std.droplr.net/files/acc_857465/ONwNJD)
+
    <figcaption>An instance of the banner component rendering with content from GraphCMS</figcaption>
 </figure>
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/bMsi6A" />
+
+![Sort order matters](https://cdn-std.droplr.net/files/acc_857465/bMsi6A)
+
    <figcaption>Sort order matters</figcaption>
 </figure>
 

package/{content/getting-started → getting-started}/header.md

@@ -39,7 +39,7 @@ frontend React framework that uses Next.js for server-side rendering.
 
 https://user-images.githubusercontent.com/1251986/154978614-8d2eaee1-d64b-4bae-a7d7-cfee2e9175d3.mp4
 
-<video width="100%" controls autoPlay loop muted>
+<video width="100%" controls autoPlay loop muted playsinline>
 <source src="https://user-images.githubusercontent.com/1251986/154978614-8d2eaee1-d64b-4bae-a7d7-cfee2e9175d3.mp4" type="video/mp4"/>
 </video>
 
@@ -50,7 +50,7 @@ https://user-images.githubusercontent.com/1251986/154978614-8d2eaee1-d64b-4bae-a
 
 https://user-images.githubusercontent.com/1251986/154979091-89c72d68-c62f-451c-af49-6f36f3fa6609.mp4
 
-<video width="100%" controls autoPlay loop muted>
+<video width="100%" controls autoPlay loop muted playsinline>
 <source src="https://user-images.githubusercontent.com/1251986/154979091-89c72d68-c62f-451c-af49-6f36f3fa6609.mp4" type="video/mp4"/>
 </video>
 
@@ -81,7 +81,9 @@ https://user-images.githubusercontent.com/1251986/154979091-89c72d68-c62f-451c-a
 - Save the file to see your changes updated in real-time
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/v0jqud" />
+
+![Reorder components](https://cdn-std.droplr.net/files/acc_857465/v0jqud)
+
  <figcaption>Reorder components</figcaption>
 </figure>
 
@@ -91,7 +93,9 @@ https://user-images.githubusercontent.com/1251986/154979091-89c72d68-c62f-451c-a
   `<DesktopNavBar>...</DesktopNavBar>` component.
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/S1BIyc" />
+
+![Remove navigation](https://cdn-std.droplr.net/files/acc_857465/S1BIyc)
+
  <figcaption>Remove navigation</figcaption>
 </figure>
 
@@ -125,7 +129,9 @@ https://user-images.githubusercontent.com/1251986/154979091-89c72d68-c62f-451c-a
 ```
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/7eadNI" />
+
+![Replace search input](https://cdn-std.droplr.net/files/acc_857465/7eadNI)
+
  <figcaption>Replace search input with Search Fab, remove Customer Service Fab</figcaption>
 </figure>
 
@@ -163,7 +169,9 @@ import React, { useEffect } from 'react'
 ```
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/O1iBQ4" />
+
+![Local copy of the MenuFab component](https://cdn-std.droplr.net/files/acc_857465/O1iBQ4)
+
  <figcaption>Local copy of the MenuFab component with Fab scroll animation removed</figcaption>
 </figure>
 
@@ -213,7 +221,9 @@ TransitionComponent={Fade}
 ```
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/RyXlBV" />
+
+![Menu component with custom styling](https://cdn-std.droplr.net/files/acc_857465/RyXlBV)
+
  <figcaption>Menu component with custom styling</figcaption>
 </figure>
 

package/{content/getting-started → getting-started}/pages.md

@@ -110,7 +110,9 @@ export const getStaticProps: GetPageStaticProps = async (context) => {
 - Visiting http://localhost:3000/about/about-us will output:
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/xdI9be" />
+
+![Page with page layout (header, footer)](https://cdn-std.droplr.net/files/acc_857465/xdI9be)
+
   <figcaption>Page with page layout (header, footer)</figcaption>
 </figure>
 
@@ -164,12 +166,16 @@ function AboutUs({ pages }: Props) {
 ```
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/PIOjzB" />
+
+![Fetch page content from GraphCMS](https://cdn-std.droplr.net/files/acc_857465/PIOjzB)
+
   <figcaption>Fetch page content from GraphCMS</figcaption>
 </figure>
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/XKo4ut" />
+
+![GraphCMS entry](https://cdn-std.droplr.net/files/acc_857465/XKo4ut)
+
   <figcaption>GraphCMS entry</figcaption>
 </figure>
 
@@ -280,7 +286,9 @@ You can test the static build process by running it locally:
 - `yarn build` Start static build process
 
 <figure>
- <img src="https://cdn-std.droplr.net/files/acc_857465/AAOnX2" />
+
+![Successful pre-render of the about/about-us page](https://cdn-std.droplr.net/files/acc_857465/AAOnX2)
+
   <figcaption>Successful pre-render of the about/about-us page</figcaption>
 </figure>
 

package/{content/getting-started → getting-started}/readme.md

@@ -82,8 +82,9 @@ styles.
 
 Others components are imported where needed, and can be recognized by their
 namespace `@graphcommerce/`. There are different ways to
-[customize styles](https://mui.com/customization/how-to-customize/) of importend
-components. The most common way is by adding an sx prop: `sx={{color:'red'}}`.
+[customize styles ↗](https://mui.com/customization/how-to-customize/) of
+importend components. The most common way is by adding an sx prop:
+`sx={{color:'red'}}`.
 
 If you want to extend a component's behavior or built your own, you can
 duplicate a `@graphcommerce/` component to your /components directory. You'll

package/{content/getting-started → getting-started}/start-building.md

@@ -56,7 +56,7 @@ You've completed the
 
 https://user-images.githubusercontent.com/1251986/154980151-2039c027-c31f-4b99-86f2-8c2420053da8.mp4
 
-<video width="100%" controls autoPlay loop muted>
+<video width="100%" controls autoPlay loop muted playsinline>
 <source src="https://user-images.githubusercontent.com/1251986/154980151-2039c027-c31f-4b99-86f2-8c2420053da8.mp4" type="video/mp4"/>
 </video>
 
@@ -89,7 +89,7 @@ https://user-images.githubusercontent.com/1251986/154980151-2039c027-c31f-4b99-8
 
 https://user-images.githubusercontent.com/1251986/154980686-3d2bf587-16d7-412b-b05f-8b0f7b40cbfd.mp4
 
-<video width="100%" controls autoPlay loop muted>
+<video width="100%" controls autoPlay loop muted playsinline>
 
 <source src="https://user-images.githubusercontent.com/1251986/154980686-3d2bf587-16d7-412b-b05f-8b0f7b40cbfd.mp4" type="video/mp4"/>
 </video>

package/package.json

@@ -1,56 +1,11 @@
 {
   "name": "@graphcommerce/docs",
-  "homepage": "https://www.graphcommerce.org/",
-  "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.1.4",
-  "access": "restricted",
-  "sideEffects": false,
-  "main": "index.js",
-  "dependencies": {
-    "@graphcommerce/framer-next-pages": "^3.1.0",
-    "@graphcommerce/image": "^3.1.0",
-    "@graphcommerce/next-config": "^3.0.3",
-    "@graphcommerce/next-ui": "^4.2.2",
-    "@graphcommerce/react-hook-form": "^3.0.3",
-    "@mui/material": "^5.4.3",
-    "instantsearch.js": "^4.39.0",
-    "next": "^12.1.0",
-    "next-mdx-remote": "^4.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-instantsearch-hooks": "^6.22.0",
-    "rehype-autolink-headings": "^6.1.1",
-    "rehype-prism-plus": "^1.3.2",
-    "rehype-slug": "^5.0.1",
-    "remark": "^14.0.2",
-    "remark-gfm": "^3.0.1",
-    "strip-markdown": "^5.0.0",
-    "to-vfile": "^7.2.3",
-    "type-fest": "^2.12.0",
-    "typesense": "^1.2.1",
-    "typesense-instantsearch-adapter": "^2.4.0",
-    "vfile-matter": "^3.0.1"
-  },
+  "homepage": "https://www.graphcommerce.org/docs",
+  "repository": "github:graphcommerce-org/graphcommerce/docs",
+  "version": "4.1.0",
+  "sideEffects": true,
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.0.4",
-    "@graphcommerce/prettier-config-pwa": "^4.0.2",
-    "@graphcommerce/typescript-config-pwa": "^4.0.2",
-    "eslint": "^8.10.0",
-    "typescript": "^4.5.5"
-  },
-  "prettier": "@graphcommerce/prettier-config-pwa",
-  "eslintConfig": {
-    "extends": "@graphcommerce/eslint-config-pwa",
-    "parserOptions": {
-      "project": "./tsconfig.json"
-    }
-  },
-  "engines": {
-    "node": "14.x"
+    "@graphcommerce/prettier-config-pwa": "^4.0.2"
   },
-  "scripts": {
-    "dev": "next dev -p 3002",
-    "build": "next build",
-    "start": "next start"
-  }
+  "prettier": "@graphcommerce/prettier-config-pwa"
 }

package/{content/readme.md → readme.md}

@@ -24,7 +24,7 @@ high-end e-commerce progressive web apps (PWA).
 
 https://user-images.githubusercontent.com/1251986/154977573-4015e77c-43e7-481e-ab97-60c365c6b746.mp4
 
-<video width="100%" controls autoPlay loop muted>
+<video width="100%" controls autoPlay loop muted playsinline>
 <source src="https://user-images.githubusercontent.com/1251986/154977573-4015e77c-43e7-481e-ab97-60c365c6b746.mp4" type="video/mp4"/>
 </video>
 

package/.babelrc

@@ -1,4 +0,0 @@
-{
-  "presets": [["next/babel", { "preset-react": { "importSource": "@emotion/react" } }]],
-  "plugins": ["macros"]
-}

package/components/Layout/LayoutFull.tsx

@@ -1,85 +0,0 @@
-import {
-  iconMenu,
-  LayoutDefault,
-  LayoutDefaultProps,
-  responsiveVal,
-  IconSvg,
-} from '@graphcommerce/next-ui'
-import { Box, Fab } from '@mui/material'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { FileNode } from '../../lib/files'
-import { Search } from '../Search'
-import SidebarMenu from '../SidebarMenu'
-import { Logo } from './Logo'
-
-export type LayoutFullProps = Omit<
-  LayoutDefaultProps,
-  'pages' | 'classes' | 'header' | 'cartFab' | 'menuFab' | 'footer'
-> & { menuData?: FileNode }
-
-export function LayoutFull(props: LayoutFullProps) {
-  const { children, menuData } = props
-
-  const router = useRouter()
-
-  const selected = router.asPath.split('?')[0].split('#')[0]
-
-  return (
-    <LayoutDefault
-      header={<Logo />}
-      footer=''
-      menuFab={
-        <Link href={`/menu${selected}`} passHref>
-          <Fab
-            size='responsive'
-            sx={{
-              display: { sm: undefined, md: 'none' },
-              backgroundColor: 'text.primary',
-              color: 'background.paper',
-              '&:hover, &:focus': {
-                boxShadow: 'none',
-                backgroundColor: 'text.primary',
-              },
-            }}
-          >
-            <IconSvg src={iconMenu} size='medium' />
-          </Fab>
-        </Link>
-      }
-      sx={[
-        (theme) => ({
-          '& header': {
-            p: 0,
-          },
-          '& header a, & header > div': {
-            backgroundColor: theme.palette.background.paper,
-            [theme.breakpoints.up('md')]: {
-              borderRight: `1px solid ${theme.palette.divider}`,
-              width: `${responsiveVal(320, 340)}`,
-            },
-          },
-          '& .LayoutDefault-children': {
-            display: 'grid',
-            gridAutoFlow: 'column',
-            gridTemplateColumns: { xs: '1fe', md: `${responsiveVal(320, 340)} 1fr` },
-            borderTop: `1px solid ${theme.palette.divider}`,
-          },
-        }),
-      ]}
-    >
-      <Box
-        sx={{
-          backgroundColor: (theme) => theme.palette.background.paper,
-          padding: 2,
-          borderRight: (theme) => `1px solid ${theme.palette.divider}`,
-          display: { xs: 'none', md: 'block' },
-        }}
-      >
-        <Search />
-        {menuData && <SidebarMenu {...menuData} selected={selected} />}
-      </Box>
-      <Box sx={{ mb: 15 }}>{children}</Box>
-    </LayoutDefault>
-  )
-}

package/components/Layout/Logo.tsx

@@ -1,19 +0,0 @@
-import { Logo as LogoBase } from '@graphcommerce/next-ui'
-import svgLogo from './graphcommerce.svg'
-
-export function Logo() {
-  return (
-    <LogoBase
-      sx={{
-        '& .GcLogo-logo': {
-          width: 'auto',
-          height: { xs: '24px', md: '36px' },
-          paddingLeft: { xs: '10px', md: '52px' },
-          marginTop: { xs: 0, md: '4px' },
-          filter: (theme) => (theme.palette.mode === 'dark' ? 'invert(100%)' : 'invert(0%)'),
-        },
-      }}
-      image={{ alt: 'GraphCommerce Logo', src: svgLogo, unoptimized: true }}
-    />
-  )
-}