Update to Gatsby 3

package.json

@@ -5,26 +5,26 @@
   "version": "2.0.0",
   "author": "Matus Namesny <matus@namesny.com>",
   "dependencies": {
-    "@fontsource/fira-mono": "^4.2.2",
+    "@fontsource/fira-mono": "^4.5.0",
-    "@fontsource/open-sans": "^4.2.2",
+    "@fontsource/open-sans": "^4.5.1",
-    "gatsby": "^2.24.61",
+    "gatsby": "^3.14.0",
-    "gatsby-image": "^2.4.19",
+    "gatsby-image": "^3.11.0",
-    "gatsby-plugin-manifest": "^2.4.30",
+    "gatsby-plugin-manifest": "^3.14.0",
-    "gatsby-plugin-offline": "^3.2.28",
+    "gatsby-plugin-offline": "^4.14.0",
-    "gatsby-plugin-react-helmet": "^3.3.11",
+    "gatsby-plugin-react-helmet": "^4.14.0",
-    "gatsby-plugin-sass": "^2.3.13",
+    "gatsby-plugin-sass": "^4.14.0",
-    "gatsby-plugin-sharp": "^2.6.36",
+    "gatsby-plugin-sharp": "^3.14.0",
-    "gatsby-source-filesystem": "^2.3.30",
+    "gatsby-source-filesystem": "^3.14.0",
-    "gatsby-transformer-remark": "^2.8.35",
+    "gatsby-transformer-remark": "^4.11.0",
-    "gatsby-transformer-sharp": "^2.5.15",
+    "gatsby-transformer-sharp": "^3.14.0",
-    "node-sass": "^4.14.1",
+    "node-sass": "^6.0.1",
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
+    "react": "^17.0.2",
-    "react-dom": "^16.12.0",
+    "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0"
   },
   "devDependencies": {
-    "prettier": "2.1.1"
+    "prettier": "2.4.1"
   },
   "keywords": [
     "gatsby",

src/components/blog.js

@@ -1,6 +1,6 @@
 import React from "react"
 import PostLink from "./post-link"
-import styles from "../styles/blog.module.scss"
+import {header} from "../styles/blog.module.scss"
 
 const Blog = ({ edges }) => {
   const Posts = edges
@@ -8,7 +8,7 @@ const Blog = ({ edges }) => {
 
   return (
     <div>
-      <div className={styles.header}>
+      <div className={header}>
         <h1>Blog</h1>
       </div>
       <div>

src/components/footer.js

@@ -1,11 +1,11 @@
 import React from "react"
-import styles from '../styles/footer.module.scss'
+import { footer, link } from '../styles/footer.module.scss'
 
 const Footer = ({authorName}) => (
-  <footer className={styles.footer}>
+  <footer className={footer}>
     © {new Date().getFullYear()} {authorName}, Built with
     {` `}
-    <a href="https://www.gatsbyjs.org" className={styles.link}>Gatsby</a>
+    <a href="https://www.gatsbyjs.org" className={link}>Gatsby</a>
   </footer>
 )
 

src/components/header.js

@@ -1,15 +1,15 @@
 import { Link } from "gatsby"
 import PropTypes from "prop-types"
 import React from "react"
-import styles from "../styles/header.module.scss"
+import { header, headerWrapper, terminal, links } from "../styles/header.module.scss"
 
 const Header = ({ user, hostname }) => (
-  <header className={styles.headerWrapper}>
+  <header className={headerWrapper}>
-    <div className={styles.header}>
+    <div className={header}>
       <div>
-        <Link to="/" className={styles.terminal}>{user}@{hostname} ~ $</Link>
+        <Link to="/" className={terminal}>{user}@{hostname} ~ $</Link>
       </div>
-      <nav className={styles.links}>
+      <nav className={links}>
         <ul>
           <li key="about">
             <a href='/about'>

src/components/index.js

@@ -1,13 +1,13 @@
 import { Link } from "gatsby"
 import PropTypes from "prop-types"
 import React from "react"
-import styles from "../styles/index.module.scss"
+import { indexWrapper, header } from "../styles/index.module.scss"
 import Social from "./social"
 
 const Index = ({ author, social, email }) => (
-  <div className={styles.indexWrapper}>
+  <div className={indexWrapper}>
       <div>
-        <h1 className={styles.header}>{ author }</h1>
+        <h1 className={header}>{ author }</h1>
       </div>
       <Social social={social} email={email}/>
   </div>

src/components/layout.js

@@ -5,9 +5,10 @@ import { useStaticQuery, graphql } from "gatsby"
 import Header from "./header"
 import Footer from "./footer"
 import { Helmet } from "react-helmet"
-import styles from "../styles/layout.module.scss"
+import  '../styles/global.scss';
+import { main, content, vertical, flexWrapper } from "../styles/layout.module.scss"
 
-const Layout = ({ children, title, vertical}) => {
+const Layout = ({ children, title, verticalLayout}) => {
 
   const data = useStaticQuery(graphql`
   query SiteTitleQuery {
@@ -20,10 +21,10 @@ const Layout = ({ children, title, vertical}) => {
     }
   }`)
 
-  const classes = vertical ? `${styles.content} ${styles.vertical}` : styles.content
+  const classes = verticalLayout ? `${content} ${vertical}` : content
 
   return (
-    <div className={styles.flexWrapper}>
+    <div className={flexWrapper}>
       <Helmet
         titleTemplate={`%s | ${data.site.siteMetadata.author}`}>
         <html lang="en" amp />
@@ -33,7 +34,7 @@ const Layout = ({ children, title, vertical}) => {
         user={data.site.siteMetadata.user}
         hostname={data.site.siteMetadata.hostname} />
       <div className={classes}>
-        <main className={styles.main}>{children}</main>
+        <main className={main}>{children}</main>
       </div>
       <Footer authorName={data.site.siteMetadata.author}/>
     </div>

src/components/post-link.js

@@ -1,22 +1,22 @@
 import React from "react"
 import { Link } from "gatsby"
-import styles from '../styles/post-link.module.scss'
+import { postTitle, postDate, postHeader, postListItem, postExcerpt } from '../styles/post-link.module.scss'
 
 const PostLink = ({ post }) => {
 
-  const postDate = new Date(post.frontmatter.date)
+  const date = new Date(post.frontmatter.date)
   const options = { year: 'numeric', month: 'long', day: 'numeric' };
-  const postDateString = postDate.toLocaleDateString('en', options);
+  const postDateString = date.toLocaleDateString('en', options);
   const postUrl = "/posts" + post.fields.slug
 
   return (
     <Link to={postUrl}>
-      <div className={styles.postListItem} role="listitem">
+      <div className={postListItem} role="listitem">
-        <div className={styles.postHeader} >
+        <div className={postHeader} >
-          <span className={styles.postTitle}>{post.frontmatter.title}</span>
+          <span className={postTitle}>{post.frontmatter.title}</span>
-          <span className={styles.postDate}>{postDateString}</span>
+          <span className={postDate}>{postDateString}</span>
         </div>
-        <div className={styles.postExcerpt}>
+        <div className={postExcerpt}>
           <p>{post.excerpt}</p>
         </div>
       </div>

src/components/social.js

@@ -1,7 +1,7 @@
 
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import styles from '../styles/social.module.scss'
+import { socialNavbar } from '../styles/social.module.scss'
 
 export default class Social extends Component {
   static propTypes = {
@@ -33,7 +33,7 @@ export default class Social extends Component {
     )
 
     return (
-      <div className={styles.socialNavbar} role="list">
+      <div className={socialNavbar} role="list">
         <ul>
           {socialLinks}
         </ul>

src/pages/404.js

@@ -1,7 +1,5 @@
 import React from "react"
 
-import Layout from "../components/layout"
-
 const NotFoundPage = () => (
   <Layout title="404: Not found" >
     <h1>NOT FOUND</h1>

src/pages/blog.js

@@ -4,8 +4,6 @@ import { useStaticQuery, graphql } from "gatsby"
 import Layout from "../components/layout"
 import Blog from "../components/blog"
 
-import "../styles/global.scss"
-
 const IndexPage = () => {
 
   const data = useStaticQuery(graphql`

src/pages/index.js

@@ -2,8 +2,6 @@ import React from "react"
 import { useStaticQuery, graphql } from "gatsby"
 
 import Layout from "../components/layout"
-
-import "../styles/global.scss"
 import Index from "../components"
 
 const IndexPage = () => {

src/styles/global.scss

@@ -1,10 +1,10 @@
 @import "./variables.scss";
 
-:global(body, html) {
+body, html {
     height: 100%;
 }
 
-:global(body) {
+body {
   font-family: $fontParagraph;
   color: $white;
   background-color: $backgroundDark;
@@ -15,7 +15,7 @@
 }
 
 @for $i from 1 through 6 {
-  :global(h#{$i}) {
+  h#{$i} {
     font-family: $fontHeader;
   }
 }

src/templates/blog-post.js

@@ -1,13 +1,13 @@
 import React from "react"
 import { graphql } from "gatsby"
 import Layout from "../components/layout"
-import styles from "../styles/blog-post.module.scss"
+import { blogPostWrapper } from "../styles/blog-post.module.scss"
 
 export default function BlogPost({ data }) {
   const post = data.markdownRemark
   return (
     <Layout>
-      <div className={styles.blogPostWrapper}>
+      <div className={blogPostWrapper}>
         <h1>{post.frontmatter.title}</h1>
         <div dangerouslySetInnerHTML={{ __html: post.html }} />
       </div>

src/templates/page.js

@@ -1,13 +1,13 @@
 import React from "react"
 import { graphql } from "gatsby"
 import Layout from "../components/layout"
-import styles from "../styles/page.module.scss"
+import {pageWrapper} from "../styles/page.module.scss"
 
 export default function Page({ data }) {
   const page = data.markdownRemark
   return (
     <Layout>
-      <div className={styles.pageWrapper}>
+      <div className={pageWrapper}>
         <h1>{page.frontmatter.title}</h1>
         <div dangerouslySetInnerHTML={{ __html: page.html }} />
       </div>