Gatsby v4 (#102)

ryanwiemer · Nov 14, 2021 · f76cb52 · f76cb52
1 parent 81b165b
commit f76cb52
Show file tree

Hide file tree

Showing 15 changed files with 7,979 additions and 9,261 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2019 Ryan Wiemer
+Copyright (c) 2021 Ryan Wiemer
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ A starter template to build amazing static websites with Gatsby, Contentful and
 
 ## Demo
 
-https://gcn.netlify.com/
+https://gcn.netlify.app/
 
 ![](screenshots/demo.jpg)
 
@@ -58,7 +58,7 @@ Edit siteMeta data in [`/src/gatsby-config.js`](https://github.com/ryanwiemer/ga
     title: 'GCN', // Title of the website
     description: // Description of the website
       'A starter template to build amazing static websites with Gatsby, Contentful and Netlify',
-    siteUrl: 'https://gcn.netlify.com', // Website URL. Do not include trailing slash
+    siteUrl: 'https://gcn.netlify.app', // Website URL. Do not include trailing slash
     image: '/images/share.jpg', // Path to default image for SEO
     menuLinks: [ // The links used in the top menu
       {
@@ -104,8 +104,7 @@ export default {
     highlight: '#5b8bf7',
   },
   fonts: {
-    body:
-      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+    body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
   },
   sizes: {
     maxWidth: '1050px',

diff --git a/gatsby-config.js b/gatsby-config.js
@@ -20,7 +20,7 @@ module.exports = {
     title: 'GCN',
     description:
       'A starter template to build amazing static websites with Gatsby, Contentful and Netlify',
-    siteUrl: 'https://gcn.netlify.com',
+    siteUrl: 'https://gcn.netlify.app',
     image: '/images/share.jpg',
     menuLinks: [
       {
@@ -41,19 +41,21 @@ module.exports = {
     basePath: '/',
   },
   plugins: [
-    `gatsby-plugin-emotion`,
+    'gatsby-plugin-emotion',
     'gatsby-plugin-theme-ui',
+    'gatsby-plugin-lodash',
     'gatsby-plugin-react-helmet',
+    'gatsby-plugin-image',
     {
-      resolve: `gatsby-transformer-remark`,
+      resolve: 'gatsby-transformer-remark',
       options: {
         plugins: [
           {
-            resolve: `gatsby-remark-prismjs`,
+            resolve: 'gatsby-remark-prismjs',
           },
-          `gatsby-remark-autolink-headers`,
+          'gatsby-remark-autolink-headers',
           {
-            resolve: `gatsby-remark-images-contentful`,
+            resolve: 'gatsby-remark-images-contentful',
             options: {
               maxWidth: 650,
               backgroundColor: 'white',
@@ -63,7 +65,7 @@ module.exports = {
         ],
       },
     },
-    `gatsby-plugin-catch-links`,
+    'gatsby-plugin-catch-links',
     {
       resolve: 'gatsby-source-contentful',
       options:
@@ -74,7 +76,7 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-google-analytics',
       options: {
-        trackingId: process.env.GOOGLE_ANALYTICS,
+        trackingId: process.env.GOOGLE_ANALYTICS || 'UA-XXXXXXXX-X',
         head: true,
       },
     },

diff --git a/gatsby-node.js b/gatsby-node.js
@@ -1,2 +1 @@
-exports.createSchemaCustomization = require('./src/gatsby/node/createSchemaCustomization')
 exports.createPages = require('./src/gatsby/node/createPages')
diff --git a/package.json b/package.json
@@ -1,42 +1,45 @@
 {
   "name": "gatsby-starter-gcn",
   "description": "A starter template to build amazing static websites with Gatsby, Contentful and Netlify",
-  "version": "2.1.3",
+  "version": "3.0.0",
   "repository": "https://github.com/ryanwiemer/gatsby-starter-gcn",
   "author": "Ryan Wiemer <[email protected]>",
   "dependencies": {
-    "@emotion/core": "^10.0.27",
-    "@emotion/styled": "^10.0.27",
-    "babel-plugin-styled-components": "^1.10.7",
-    "chalk": "^3.0.0",
-    "contentful-import": "^7.6.2",
-    "gatsby": "^2.19.12",
-    "gatsby-awesome-pagination": "^0.3.5",
-    "gatsby-image": "^2.2.40",
-    "gatsby-plugin-catch-links": "^2.1.25",
-    "gatsby-plugin-emotion": "^4.1.22",
-    "gatsby-plugin-google-analytics": "^2.1.35",
-    "gatsby-plugin-manifest": "^2.2.41",
-    "gatsby-plugin-netlify": "^2.1.32",
-    "gatsby-plugin-offline": "^3.0.34",
-    "gatsby-plugin-react-helmet": "^3.1.22",
-    "gatsby-plugin-schema-snapshot": "^1.0.0",
-    "gatsby-plugin-sitemap": "^2.2.27",
-    "gatsby-plugin-theme-ui": "^0.3.0",
-    "gatsby-remark-autolink-headers": "^2.1.24",
-    "gatsby-remark-images-contentful": "^2.1.31",
-    "gatsby-remark-prismjs": "^3.3.31",
-    "gatsby-source-contentful": "^2.1.85",
-    "gatsby-transformer-remark": "^2.6.50",
-    "inquirer": "^7.0.4",
-    "lodash": "^4.17.15",
-    "moment": "^2.24.0",
+    "@emotion/core": "^11.0.0",
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
+    "babel-plugin-styled-components": "^1.13.3",
+    "chalk": "^4.1.2",
+    "contentful-import": "^8.2.24",
+    "gatsby": "^4.1.4",
+    "gatsby-awesome-pagination": "^0.3.8",
+    "gatsby-image": "^3.11.0",
+    "gatsby-plugin-catch-links": "^4.1.0",
+    "gatsby-plugin-emotion": "^7.1.0",
+    "gatsby-plugin-google-analytics": "^4.1.0",
+    "gatsby-plugin-image": "^2.1.2",
+    "gatsby-plugin-lodash": "^5.1.0",
+    "gatsby-plugin-manifest": "^4.1.3",
+    "gatsby-plugin-netlify": "^3.14.0",
+    "gatsby-plugin-offline": "^5.1.3",
+    "gatsby-plugin-react-helmet": "^5.1.0",
+    "gatsby-plugin-schema-snapshot": "^3.1.0",
+    "gatsby-plugin-sitemap": "^5.1.1",
+    "gatsby-plugin-theme-ui": "^0.12.0",
+    "gatsby-remark-autolink-headers": "^5.1.1",
+    "gatsby-remark-images-contentful": "^5.1.0",
+    "gatsby-remark-prismjs": "^6.1.0",
+    "gatsby-source-contentful": "^6.1.3",
+    "gatsby-transformer-remark": "^5.1.3",
+    "inquirer": "^8.2.0",
+    "lodash": "^4.17.21",
+    "moment": "^2.29.1",
     "path": "^0.12.7",
-    "prismjs": "^1.19.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-helmet": "^5.2.1",
-    "theme-ui": "^0.3.1"
+    "prismjs": "^1.25.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-helmet": "^6.1.0",
+    "theme-ui": "^0.12.0"
   },
   "keywords": [
     "gatsby"
@@ -45,6 +48,7 @@
   "main": "n/a",
   "scripts": {
     "develop": "gatsby develop",
+    "dev": "gatsby develop",
     "build": "gatsby build",
     "serve": "gatsby serve",
     "test": "yarn run lint:css && yarn run lint:js && yarn run check-pretty",
@@ -55,14 +59,17 @@
     "format": "prettier --write \"src/**/*.js\"",
     "clean": "gatsby clean"
   },
+  "engines": {
+    "node": ">=14.15.0"
+  },
   "devDependencies": {
     "eslint": "^6.8.0",
-    "eslint-config-gatsby-standard": "^2.2.0",
-    "prettier": "^1.19.1",
-    "stylelint": "^13.0.0",
-    "stylelint-config-prettier": "^8.0.1",
-    "stylelint-config-standard": "^19.0.0",
+    "eslint-config-gatsby-standard": "^3.0.2",
+    "prettier": "^2.4.1",
+    "stylelint": "^14.0.1",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-standard": "^23.0.0",
     "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-processor-styled-components": "^1.9.0"
+    "stylelint-processor-styled-components": "^1.10.0"
   }
 }
diff --git a/src/components/Card.js b/src/components/Card.js
@@ -1,43 +1,44 @@
 import React from 'react'
 import styled from '@emotion/styled'
 import { Link } from 'gatsby'
-import Img from 'gatsby-image'
+import { GatsbyImage } from 'gatsby-plugin-image'
 
 const Post = styled.li`
   position: relative;
-  border: 1px solid ${props => props.theme.colors.secondary};
+  border: 1px solid ${(props) => props.theme.colors.secondary};
   border-radius: 2px;
-  margin: 0 0 1em 0;
+  margin: 0 0 1em;
   width: 100%;
   transition: background 0.2s;
-  @media screen and (min-width: ${props => props.theme.responsive.small}) {
-    flex: ${props => (props.featured ? '0 0 100%' : '0 0 49%')};
-    margin: 0 0 2vw 0;
+  @media screen and (min-width: ${(props) => props.theme.responsive.small}) {
+    flex: ${(props) => (props.featured ? '0 0 100%' : '0 0 49%')};
+    margin: 0 0 2vw;
   }
-  @media screen and (min-width: ${props => props.theme.responsive.medium}) {
-    flex: ${props => (props.featured ? '0 0 100%' : '0 0 32%')};
+  @media screen and (min-width: ${(props) => props.theme.responsive.medium}) {
+    flex: ${(props) => (props.featured ? '0 0 100%' : '0 0 32%')};
   }
   &:hover {
-    background: ${props => props.theme.colors.tertiary};
+    background: ${(props) => props.theme.colors.tertiary};
   }
   a {
     display: flex;
     flex-flow: column;
     height: 100%;
     width: 100%;
-    color: ${props => props.theme.colors.text};
+    color: ${(props) => props.theme.colors.text};
     text-decoration: none;
     .gatsby-image-wrapper {
       height: 0;
       padding-bottom: 60%;
-      @media screen and (min-width: ${props => props.theme.responsive.small}) {
-        padding-bottom: ${props => (props.featured ? '40%' : '60%')};
+      @media screen and (min-width: ${(props) =>
+          props.theme.responsive.small}) {
+        padding-bottom: ${(props) => (props.featured ? '40%' : '60%')};
       }
     }
   }
 `
 
-const StyledImg = styled(Img)`
+const StyledImg = styled(GatsbyImage)`
   border-top-left-radius: 1px;
   border-top-right-radius: 1px;
 `
@@ -46,21 +47,21 @@ const Title = styled.h2`
   font-size: 1.5em;
   font-weight: 600;
   text-transform: capitalize;
-  margin: 1rem 1rem 0.5rem 1rem;
+  margin: 1rem 1rem 0.5rem;
 `
 
 const Date = styled.h3`
-  margin: 0 1rem 0.5rem 1rem;
+  margin: 0 1rem 0.5rem;
   color: gray;
 `
 
 const ReadingTime = styled.h4`
-  margin: 0 1rem 1.5rem 1rem;
+  margin: 0 1rem 1.5rem;
   color: gray;
 `
 
 const Excerpt = styled.p`
-  margin: 0 1rem 1rem 1rem;
+  margin: 0 1rem 1rem;
   line-height: 1.6;
 `
 
@@ -70,7 +71,11 @@ const Card = ({ slug, heroImage, title, publishDate, body, ...props }) => {
       {heroImage && body && (
         <Post featured={props.featured}>
           <Link to={`${props.basePath}/${slug}/`}>
-            <StyledImg fluid={heroImage.fluid} backgroundColor={'#eeeeee'} />
+            <StyledImg
+              image={heroImage.gatsbyImageData}
+              alt={heroImage.title}
+              backgroundColor={'#eeeeee'}
+            />
             <Title>{title}</Title>
             <Date>{publishDate}</Date>
             <ReadingTime>

diff --git a/src/components/Hero.js b/src/components/Hero.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import Img from 'gatsby-image'
+import { GatsbyImage } from 'gatsby-plugin-image'
 import styled from '@emotion/styled'
 
 const Wrapper = styled.section`
@@ -10,7 +10,7 @@ const Wrapper = styled.section`
     height: ${props => props.height || 'auto'};
   }
 `
-const BgImg = styled(Img)`
+const BgImg = styled(GatsbyImage)`
   position: absolute;
   width: 100%;
   height: 100%;
@@ -46,7 +46,7 @@ const Title = styled.h1`
 
 const Hero = props => (
   <Wrapper height={props.height}>
-    <BgImg fluid={props.image.fluid} backgroundColor={'#eeeeee'} />
+    <BgImg image={props.image.gatsbyImageData} alt={props.image.title} />
     <Title>{props.title}</Title>
   </Wrapper>
 )

diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import styled from '@emotion/styled'
-import { Global } from '@emotion/core'
+import { Global } from '@emotion/react'
 import Menu from '../components/Menu'
 import Footer from '../components/Footer'
 import { globalStyles } from '../styles/globalStyles.js'

diff --git a/src/gatsby/node/createSchemaCustomization.js b/src/gatsby/node/createSchemaCustomization.js