Update to Gatsby 3.0.0

- Several major dependency updates (see changes in `package.json`) - `shockingly` version of `gsap` was causing issues, as it uses an alias, which causes issues when using `npm update`. The `shockingly` version wasn't needed anyways. See this issue: npm/cli#2800 - Ran codemod: `npx gatsby-codemods gatsby-plugin-image` (see: https://www.npmjs.com/package/gatsby-plugin-image#migrating ) - Uninstalled `prettier` as it was not used TODO: - Fix the depreciation warning caused by `gatsby-transformer-sharp` - Have a look over the image queries to see if they can be improved.
ChrisCrossCrash · Mar 3, 2021 · c1fdaad · c1fdaad
1 parent a95af24
commit c1fdaad
Show file tree

Hide file tree

Showing 8 changed files with 45,077 additions and 18,888 deletions.
diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -38,6 +38,7 @@ module.exports = {
     'gatsby-transformer-sharp',
     'gatsby-plugin-sharp',
     'gatsby-transformer-yaml',
+    'gatsby-plugin-image',
     {
       resolve: 'gatsby-plugin-robots-txt',
       options: {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,41 +10,37 @@
     "develop-lan": "gatsby develop -H 0.0.0.0 -p 45678",
     "deploy": "pscp -v -r public [email protected]:/home/ubuntu",
     "build-deply": "npm run build && npm run deploy",
-    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
     "start": "npm run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
   "dependencies": {
-    "@tailwindcss/typography": "^0.3.1",
+    "@tailwindcss/typography": "^0.4.0",
     "autoprefixer": "^10.2.4",
     "dotenv": "^8.2.0",
     "formik": "^2.2.6",
-    "gatsby": "^2.31.1",
+    "gatsby": "^3.0.0",
     "gatsby-background-image": "^1.4.0",
-    "gatsby-image": "^2.10.0",
-    "gatsby-plugin-postcss": "^3.6.0",
-    "gatsby-plugin-react-helmet": "^3.9.0",
+    "gatsby-plugin-image": "^1.0.0",
+    "gatsby-plugin-postcss": "^4.0.0",
+    "gatsby-plugin-react-helmet": "^4.0.0",
     "gatsby-plugin-remove-serviceworker": "^1.0.0",
     "gatsby-plugin-robots-txt": "^1.5.5",
-    "gatsby-plugin-sharp": "^2.13.4",
-    "gatsby-source-filesystem": "^2.10.0",
-    "gatsby-transformer-sharp": "^2.11.0",
-    "gatsby-transformer-yaml": "^2.10.0",
-    "gsap": "npm:@gsap/shockingly@^3.6.0",
+    "gatsby-plugin-sharp": "^3.0.0",
+    "gatsby-source-filesystem": "^3.0.0",
+    "gatsby-transformer-sharp": "^3.0.0",
+    "gatsby-transformer-yaml": "^3.0.0",
+    "gsap": "^3.6.0",
     "js-yaml": "^4.0.0",
     "postcss": "^8.2.4",
     "prop-types": "^15.7.2",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
     "tailwindcss": "^2.0.2",
     "yup": "^0.32.8"
   },
-  "devDependencies": {
-    "prettier": "2.2.1"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ChrisCrossCrash/chriskumm.com_gatsby.git"

diff --git a/schema.graphql b/schema.graphql
diff --git a/src/components/PortfolioSite.js b/src/components/PortfolioSite.js
@@ -1,6 +1,6 @@
 import React, {useEffect, useRef} from 'react'
 import KatoButton from './KatoButton'
-import Img from 'gatsby-image'
+import {GatsbyImage} from 'gatsby-plugin-image'
 import {gsap} from 'gsap'
 import {ScrollTrigger} from 'gsap/ScrollTrigger'
 
@@ -39,13 +39,12 @@ const PortfolioSite = ({project}) => {
 
       {/* Mockup */}
       <div ref={imageRef} className='h-full w-full' style={{flex: '1 1 0px'}}>
-        <Img
+        <GatsbyImage
+          image={project.screenshot.childImageSharp.gatsbyImageData}
           className='w-full h-full object-contain rounded-2xl'
-          fluid={project.screenshot.childImageSharp.fluid}
           alt={`${project.title} screenshot`}
-          width={project.screenshot.childImageSharp.fluid.presentationWidth}
-          height={project.screenshot.childImageSharp.fluid.presentationHeight}
-        />
+          width={project.screenshot.childImageSharp.gatsbyImageData.presentationWidth}
+          height={project.screenshot.childImageSharp.gatsbyImageData.presentationHeight}/>
       </div>
 
       {/* Spacer element */}

diff --git a/src/components/SEO.js b/src/components/SEO.js
@@ -58,44 +58,39 @@ function SEO(props) {
         },
       },
     },
-  } = useStaticQuery(graphql`
-    query {
+  } = useStaticQuery(graphql`{
       site {
-        siteMetadata {
-          title
-          description
-          author
-          siteUrl
-        }
+          siteMetadata {
+              title
+              description
+              author
+              siteUrl
+          }
       }
       siteConfigYaml {
-        title
-        description
-        lang
-        cardImage {
-          childImageSharp {
-            fixed(width: 1200, height: 627) {
-              src
-              width
-              height
-            }
+          title
+          description
+          lang
+          cardImage {
+              childImageSharp {
+                  gatsbyImageData(width: 1200, height: 627, placeholder: BLURRED, layout: FIXED)
+              }
           }
-        }
-        favicon {
-          childImageSharp {
-            fixed16: fixed(base64Width: 16) {
-              favicon16: base64
-            }
-            fixed32: fixed(base64Width: 32) {
-              favicon32: base64
-            }
-            fixed64: fixed(base64Width: 64) {
-              favicon64: base64
-            }
+          favicon {
+              childImageSharp {
+                  fixed16: fixed(base64Width: 16) {
+                      favicon16: base64
+                  }
+                  fixed32: fixed(base64Width: 32) {
+                      favicon32: base64
+                  }
+                  fixed64: fixed(base64Width: 64) {
+                      favicon64: base64
+                  }
+              }
           }
-        }
       }
-    }
+  }
   `)
 
   // Title

diff --git a/src/sections/Portfolio.js b/src/sections/Portfolio.js
@@ -4,35 +4,24 @@ import SectionHeading from '../components/SectionHeading'
 import PortfolioSite from '../components/PortfolioSite'
 
 const Portfolio = () => {
-  const {allPortfolioYaml: {projects}} = useStaticQuery(graphql`
-    query {
+  const {allPortfolioYaml: {projects}} = useStaticQuery(graphql`{
       allPortfolioYaml {
-        projects: nodes {
-          title
-          subtitle
-          description
-          features
-          technologies
-          url
-          id
-          screenshot {
-            childImageSharp {
-              fluid {
-                base64
-                aspectRatio
-                src
-                srcSet
-                srcWebp
-                srcSetWebp
-                sizes
-                presentationWidth
-                presentationHeight
+          projects: nodes {
+              title
+              subtitle
+              description
+              features
+              technologies
+              url
+              id
+              screenshot {
+                  childImageSharp {
+                      gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
+                  }
               }
-            }
           }
-        }
       }
-    }
+  }
   `)
 
   return (