docs: update examples

Author: cedricdelpoux

examples/basic/gatsby-config.js

@@ -8,8 +8,10 @@ module.exports = {
         // https://drive.google.com/drive/folders/1YJWX_FRoVusp-51ztedm6HSZqpbJA3ag
         folder: "1YJWX_FRoVusp-51ztedm6HSZqpbJA3ag",
         createPages: true,
+        skipImages: false,
       },
     },
+    "gatsby-plugin-image",
     "gatsby-plugin-sharp",
     "gatsby-transformer-sharp",
     {

examples/basic/package.json

@@ -10,14 +10,15 @@
     "token": "../../utils/generate-token.js"
   },
   "dependencies": {
-    "gatsby": "^4.0.1",
+    "gatsby": "^4.1.4",
     "gatsby-image": "^3.11.0",
-    "gatsby-plugin-sharp": "^4.0.1",
-    "gatsby-remark-gifs": "^1.0.0",
-    "gatsby-remark-images": "^6.0.0",
+    "gatsby-plugin-image": "^2.1.2",
+    "gatsby-plugin-sharp": "^4.1.3",
+    "gatsby-remark-gifs": "^1.1.0",
+    "gatsby-remark-images": "^6.1.3",
     "gatsby-remark-unwrap-images": "^1.0.2",
-    "gatsby-transformer-remark": "^5.0.0",
-    "gatsby-transformer-sharp": "^4.0.0",
+    "gatsby-transformer-remark": "^5.1.3",
+    "gatsby-transformer-sharp": "^4.1.0",
     "react": "link:../../node_modules/react",
     "react-dom": "link:../../node_modules/react-dom"
   }

examples/basic/src/templates/page.js

@@ -1,5 +1,5 @@
 import {Link, graphql} from "gatsby"
-import Img from "gatsby-image"
+import {GatsbyImage, getImage} from "gatsby-plugin-image"
 import React from "react"
 
 const TemplatePage = ({
@@ -22,7 +22,7 @@ const TemplatePage = ({
         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)} />}
       <div dangerouslySetInnerHTML={{__html: html}} />
     </>
   )
@@ -37,9 +37,7 @@ export const pageQuery = graphql`
       cover {
         image {
           childImageSharp {
-            fluid(maxWidth: 500, quality: 100) {
-              ...GatsbyImageSharpFluid
-            }
+            gatsbyImageData
           }
         }
       }

examples/basic/yarn.lock

@@ -44,6 +44,7 @@ module.exports = {
     "gatsby-plugin-eslint",
     "gatsby-plugin-layout",
     "gatsby-plugin-theme-ui",
+    "gatsby-plugin-image",
     "gatsby-plugin-sharp",
     "gatsby-transformer-sharp",
     "gatsby-plugin-mdx-embed",

examples/website/gatsby-config.js

@@ -12,29 +12,29 @@
   "dependencies": {
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "gatsby": "^4.0.1",
-    "gatsby-plugin-catch-links": "^4.0.0",
-    "gatsby-plugin-eslint": "^4.0.0",
-    "gatsby-plugin-image": "^2.0.0",
-    "gatsby-plugin-layout": "^3.0.0",
-    "gatsby-plugin-mdx": "^3.0.0",
+    "gatsby": "^4.1.4",
+    "gatsby-plugin-catch-links": "^4.1.0",
+    "gatsby-plugin-eslint": "^4.0.2",
+    "gatsby-plugin-image": "^2.1.2",
+    "gatsby-plugin-layout": "^3.1.0",
+    "gatsby-plugin-mdx": "^3.1.3",
     "gatsby-plugin-mdx-embed": "^0.0.22",
     "gatsby-plugin-react-svg": "^3.1.0",
-    "gatsby-plugin-sharp": "^4.0.1",
-    "gatsby-plugin-theme-ui": "^0.11.3",
+    "gatsby-plugin-sharp": "^4.1.3",
+    "gatsby-plugin-theme-ui": "^0.12.0",
     "gatsby-plugin-webfonts": "^2.1.1",
-    "gatsby-remark-gifs": "^1.0.0",
-    "gatsby-remark-images": "^6.0.0",
-    "gatsby-remark-prismjs": "^6.0.0",
+    "gatsby-remark-gifs": "^1.1.0",
+    "gatsby-remark-images": "^6.1.3",
+    "gatsby-remark-prismjs": "^6.1.0",
     "gatsby-remark-unwrap-images": "^1.0.2",
-    "gatsby-transformer-remark": "^5.0.0",
-    "gatsby-transformer-sharp": "^4.0.0",
+    "gatsby-transformer-remark": "^5.1.3",
+    "gatsby-transformer-sharp": "^4.1.0",
     "mdx-embed": "^0.0.22",
     "prismjs": "^1.25.0",
     "react": "link:../node_modules/react",
     "react-dom": "link:../node_modules/react-dom",
     "react-icons": "^4.3.1",
-    "theme-ui": "^0.11.3"
+    "theme-ui": "^0.12.0"
   },
   "devDependencies": {
     "eslint-loader": "^4.0.2",

examples/website/package.json

@@ -51,7 +51,7 @@ const theme = {
   styles: {
     root: {
       backgroundImage: gradientBackground,
-      margin: [2, 3],
+      padding: [2, 3],
       fontFamily: "Quicksand",
     },
     a: {