chore: Upgrade gatsby to v5

Author: rmariuzzo

package-lock.json

@@ -27,34 +27,34 @@
     "@fontsource/source-code-pro": "^4.5.0",
     "@fontsource/source-sans-pro": "^4.5.0",
     "date-fns": "^2.23.0",
-    "gatsby": "^4.25.9",
-    "gatsby-plugin-google-gtag": "^4.0.0",
-    "gatsby-plugin-manifest": "^4.0.0",
-    "gatsby-remark-prismjs": "^6.0.0",
-    "gatsby-source-filesystem": "^4.0.0",
-    "gatsby-transformer-remark": "^5.0.0",
+    "gatsby": "^5.15.0",
+    "gatsby-plugin-google-gtag": "^5.15.0",
+    "gatsby-plugin-manifest": "^5.15.0",
+    "gatsby-remark-prismjs": "^7.15.0",
+    "gatsby-source-filesystem": "^5.15.0",
+    "gatsby-transformer-remark": "^6.15.0",
     "normalize.css": "^8.0.1",
     "prismjs": "^1.24.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-helmet": "^6.1.0",
-    "styled-breakpoints": "^10.0.1"
+    "styled-breakpoints": "^14.1.5"
   },
   "devDependencies": {
     "@types/inquirer": "^7.3.3",
     "@types/react-helmet": "^6.1.2",
     "@types/styled-components": "^5.1.12",
     "babel-plugin-styled-components": "^2.0.0",
-    "gatsby-cli": "^3.15.0",
-    "gatsby-plugin-styled-components": "^5.0.0",
-    "gatsby-plugin-typescript": "^4.0.0",
+    "gatsby-cli": "^5.15.0",
+    "gatsby-plugin-styled-components": "^6.15.0",
+    "gatsby-plugin-typescript": "^5.15.0",
     "gh-pages": "^3.2.3",
     "husky": "^7.0.1",
     "inquirer": "^8.1.2",
     "lint-staged": "^11.1.2",
     "prettier": "^2.3.2",
     "shorted-theme": "^0.1.1",
-    "styled-components": "^5.3.0",
+    "styled-components": "^6.1.19",
     "ts-node": "^10.2.1",
     "typescript": "^4.3.5",
     "untoken": "^0.0.2",

package.json

@@ -1,9 +1,9 @@
-import { up } from 'styled-breakpoints'
 import styled from 'styled-components'
 
 import { $theme } from '../styles/theme'
 
 import { Link } from './Link'
+import { theme } from '../theme'
 
 export const Container = styled.header`
   display: grid;
@@ -12,7 +12,7 @@ export const Container = styled.header`
   align-items: center;
   margin: 1rem 0 2rem 0;
 
-  ${up('tablet')} {
+  ${theme.breakpoints.up('lg')} {
     margin: 2rem 0;
   }
 `
@@ -23,7 +23,7 @@ export const Brand = styled.div`
   display: grid;
   justify-content: center;
 
-  ${up('tablet')} {
+  ${theme.breakpoints.up('lg')} {
     grid-column: 1 / 1;
   }
 `
@@ -54,7 +54,7 @@ export const Nav = styled.nav`
   display: grid;
   justify-content: center;
 
-  ${up('tablet')} {
+  ${theme.breakpoints.up('lg')} {
     grid-row: 1;
     grid-column: 2;
     justify-content: end;
@@ -69,7 +69,7 @@ export const NavMenu = styled.ul`
   column-gap: 2em;
   grid-template-columns: repeat(3, auto);
 
-  ${up('tablet')} {
+  ${theme.breakpoints.up('lg')} {
     grid-template-columns: repeat(4, auto);
   }
 `
@@ -78,7 +78,7 @@ export const NavMenuItem = styled.li`
   &:first-child {
     display: none;
 
-    ${up('tablet')} {
+    ${theme.breakpoints.up('lg')} {
       display: block;
     }
   }

src/components/Header.styles.ts

@@ -43,15 +43,15 @@ export const linkStyles = css<LinkProps>`
   ${(props) => props.variant === 'block' && linkBlockStyles}
 `
 
-export const ExternalLink = styled.a`
+export const ExternalLink = styled.a<LinkProps>`
   ${linkStyles};
 `
 
 ExternalLink.defaultProps = {
   variant: 'inline'
 }
 
-export const InternalLink = styled(GatsbyLink)`
+export const InternalLink = styled(GatsbyLink)<LinkProps>`
   ${linkStyles};
 `
 

src/components/Link.styles.ts

@@ -25,10 +25,14 @@ type SEOProps = {
 }
 
 export const SEO: React.FC<SEOProps> = ({
-  description,
-  lang,
-  meta,
-  image,
+  description = '',
+  lang = 'en',
+  meta = [],
+  image = {
+    src: '/images/icon.png',
+    height: 1040,
+    width: 1040
+  },
   title,
   pathname,
   breadcrumbs = [],
@@ -175,14 +179,3 @@ export const SEO: React.FC<SEOProps> = ({
     />
   )
 }
-
-SEO.defaultProps = {
-  lang: `en`,
-  meta: [],
-  description: ``,
-  image: {
-    src: '/images/icon.png',
-    height: 1040,
-    width: 1040
-  }
-}

src/components/SEO.tsx

@@ -1,9 +1,8 @@
-import { up } from 'styled-breakpoints'
 import styled from 'styled-components'
-
 import { $theme } from '../styles/theme'
 
 import { linkInlineStyles } from './Link.styles'
+import { theme } from '../theme'
 
 export const Heading1 = styled.h1`
   font-weight: ${$theme.fontWeight.black};
@@ -27,7 +26,7 @@ export const PageTitle = styled.h1`
   line-height: 1em;
   margin: 0.2em 0 2rem 0;
 
-  ${up('tablet')} {
+  ${theme.breakpoints.up('lg')} {
     font-size: ${$theme.fontSize.l1}rem;
     line-height: 1.5em;
   }

src/components/Typography.ts

@@ -1,5 +1,5 @@
-import { up } from 'styled-breakpoints'
 import styled from 'styled-components'
+import { theme } from '../theme'
 
 export const Container = styled.div`
   display: grid;
@@ -8,7 +8,7 @@ export const Container = styled.div`
   margin: auto;
   padding: 0 1rem;
 
-  ${up('tablet')} {
+  ${theme.breakpoints.up('lg')} {
     padding: 0 2rem;
   }
 `

src/layouts/MainLayout.styles.ts

@@ -8,7 +8,7 @@ import { theme } from '../styles/theme'
 
 import * as S from './MainLayout.styles'
 
-export const MainLayout: React.FC = ({ children }) => {
+export const MainLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
     <ThemeProvider theme={theme}>
       <S.Container>

src/layouts/MainLayout.tsx

@@ -1,9 +1,9 @@
 import styled, { css } from 'styled-components'
-import { up } from 'styled-breakpoints'
 
 import { PageTitle, TextBlock } from '../components/Typography'
 import { Link } from '../components/Link'
 import { $theme } from '../styles/theme'
+import { theme } from '../theme'
 
 export const Container = styled.div``
 
@@ -15,12 +15,12 @@ export const PostCategory = styled.div`
   font-size: ${$theme.fontSize.l3}rem;
   font-weight: ${$theme.fontWeight.light};
 
-  ${up('tablet')} {
+  ${theme.breakpoints.up('lg')} {
     font-size: ${$theme.fontSize.l2}rem;
     margin: 2rem 0;
   }
 
-  ${up('desktop')} {
+  ${theme.breakpoints.up('xl')} {
     margin: 3rem 0;
   }
 `

src/layouts/PostLayout.styles.ts

@@ -0,0 +1,3 @@
+import { createStyledBreakpointsTheme } from 'styled-breakpoints'
+
+export const theme = createStyledBreakpointsTheme()