docs: update examples

Author: cedricdelpoux

examples/basic/gatsby-config.js

@@ -5,9 +5,9 @@ module.exports = {
     {
       resolve: require.resolve(`../..`),
       options: {
-        folder: process.env.GOOGLE_DOCS_FOLDER,
+        // https://drive.google.com/drive/folders/1YJWX_FRoVusp-51ztedm6HSZqpbJA3ag
+        folder: "1YJWX_FRoVusp-51ztedm6HSZqpbJA3ag",
         createPages: true,
-        keepDefaultStyle: true,
       },
     },
     "gatsby-plugin-sharp",

examples/basic/src/pages/index.js

@@ -9,13 +9,14 @@ module.exports = {
       // resolve: "gatsby-source-google-docs",
       resolve: require.resolve(`../..`),
       options: {
-        folder: process.env.GOOGLE_DOCS_FOLDER,
+        // https://drive.google.com/drive/folders/1YJWX_FRoVusp-51ztedm6HSZqpbJA3ag
+        folder: "1YJWX_FRoVusp-51ztedm6HSZqpbJA3ag",
         // --------
         // Optional
         // --------
         debug: false,
         createPages: true,
-        skipImages: DEV ? true : false,
+        // skipImages: DEV ? true : false,
         imagesOptions: {
           width: DEV ? 512 : 1024,
         },

examples/website/gatsby-config.js

@@ -12,24 +12,25 @@
   "dependencies": {
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "gatsby": "^2.24.66",
-    "gatsby-image": "^2.4.20",
-    "gatsby-plugin-catch-links": "^2.10.0",
-    "gatsby-plugin-eslint": "^2.0.8",
-    "gatsby-plugin-layout": "^1.7.0",
-    "gatsby-plugin-mdx": "^1.7.1",
-    "gatsby-plugin-mdx-embed": "^0.0.17",
+    "gatsby": "^3.0.3",
+    "gatsby-plugin-catch-links": "^3.0.0",
+    "gatsby-plugin-eslint": "^3.0.0",
+    "gatsby-plugin-image": "^1.0.0",
+    "gatsby-plugin-layout": "^2.0.0",
+    "gatsby-plugin-mdx": "^2.0.0",
+    "gatsby-plugin-mdx-embed": "^0.0.19",
     "gatsby-plugin-react-svg": "^3.0.0",
-    "gatsby-plugin-sharp": "^2.6.37",
+    "gatsby-plugin-sharp": "^3.0.0",
     "gatsby-plugin-theme-ui": "^0.3.5",
+    "gatsby-plugin-webfonts": "^2.0.0",
     "gatsby-remark-gifs": "^1.0.0",
-    "gatsby-remark-images": "^3.3.31",
-    "gatsby-remark-prismjs": "^3.5.14",
+    "gatsby-remark-images": "^4.0.0",
+    "gatsby-remark-prismjs": "^4.0.0",
     "gatsby-remark-unwrap-images": "^1.0.2",
-    "gatsby-transformer-remark": "^2.8.36",
-    "gatsby-transformer-sharp": "^2.5.16",
-    "mdx-embed": "^0.0.17",
-    "prismjs": "^1.21.0",
+    "gatsby-transformer-remark": "^3.0.0",
+    "gatsby-transformer-sharp": "^3.0.0",
+    "mdx-embed": "^0.0.19",
+    "prismjs": "^1.23.0",
     "react": "link:../node_modules/react",
     "react-dom": "link:../node_modules/react-dom",
     "react-icons": "^4.2.0",

examples/website/package.json

@@ -23,7 +23,6 @@ export const Menu = ({open, onClose}) => {
         onKeyDown={onClose}
         role="button"
         tabIndex="0"
-        ariaLabel="Close menu"
         sx={{
           position: "fixed",
           top: 0,
@@ -33,13 +32,15 @@ export const Menu = ({open, onClose}) => {
           bg: "black",
           opacity: "0.5",
           display: open ? "block" : "none",
+          zIndex: 1,
         }}
       >
         {" "}
       </div>
       {/* Sidebar */}
       <div
         sx={{
+          zIndex: 2,
           position: "fixed",
           top: 0,
           left: 0,

examples/website/src/components/menu.js

@@ -1,7 +1,7 @@
 const gradientBackground = (theme) =>
   `linear-gradient(to right, ${theme.colors.primary}, ${theme.colors.secondary})`
 
-export default {
+const theme = {
   space: [0, 8, 16, 32, 64],
   radii: [0, 10, 20],
   breakpoints: ["500px", "800px", "1080px"],
@@ -84,3 +84,5 @@ export default {
     },
   },
 }
+
+export default theme

examples/website/src/gatsby-plugin-theme-ui/index.js

@@ -11,7 +11,7 @@ import {GatsbyLogo} from "../components/gatsby-logo"
 import {Grid} from "../components/grid"
 import {Menu} from "../components/menu"
 
-export default ({children}) => {
+const LayoutIndex = ({children}) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [colorMode, setColorMode] = useColorMode()
   const location = useLocation()
@@ -52,7 +52,6 @@ export default ({children}) => {
           onKeyDown={() => setIsMenuOpen(!isMenuOpen)}
           role="button"
           tabIndex="0"
-          ariaLabel="Toggle Menu"
         >
           <RiMenuLine />
         </div>
@@ -94,8 +93,6 @@ export default ({children}) => {
         <Menu open={isMenuOpen} onClose={() => setIsMenuOpen(false)} />
         <div
           sx={{
-            display: "flex",
-            flexDirection: "column",
             "& > p": {
               mb: 0,
             },
@@ -155,3 +152,5 @@ export default ({children}) => {
     </div>
   )
 }
+
+export default LayoutIndex

examples/website/src/layouts/index.js

@@ -1,7 +1,7 @@
 import {Link} from "gatsby"
 import React from "react"
 
-export default () => {
+const Page404 = () => {
   return (
     <main>
       <Link to="/">
@@ -11,3 +11,5 @@ export default () => {
     </main>
   )
 }
+
+export default Page404

examples/website/src/pages/404.js

@@ -1,40 +1,43 @@
 import {graphql} from "gatsby"
-import Img from "gatsby-image"
+import {GatsbyImage, getImage} from "gatsby-plugin-image"
 import {MDXRenderer} from "gatsby-plugin-mdx"
 import React from "react"
 import {Styled} from "theme-ui"
 /** @jsx jsx */
 import {jsx} from "theme-ui"
 
-export default ({
+const H1 = Styled.h1
+
+const PageTemplate = ({
   data: {
     page: {name, cover, childMdx},
   },
 }) => {
+  console.log(cover)
   return (
     <React.Fragment>
-      <Styled.h1>{name}</Styled.h1>
+      <H1>{name}</H1>
       {/*
         To add a cover:
         Add an image in your Google Doc first page header
         https://support.google.com/docs/answer/86629
       */}
-      {cover && <Img fluid={cover.image.childImageSharp.fluid} />}
+      {cover && <GatsbyImage image={getImage(cover.image)} />}
       <MDXRenderer>{childMdx.body}</MDXRenderer>
     </React.Fragment>
   )
 }
 
+export default PageTemplate
+
 export const pageQuery = graphql`
   query Page($path: String!) {
     page: googleDocs(slug: {eq: $path}) {
       name
       cover {
         image {
           childImageSharp {
-            fluid(maxWidth: 500, quality: 100) {
-              ...GatsbyImageSharpFluid
-            }
+            gatsbyImageData(placeholder: BLURRED)
           }
         }
       }