Upgrade to Gatsby v3

README.md

@@ -10,19 +10,28 @@ https://gatsby-theme-forty.netlify.com
 
 Install this theme (assuming Gatsby is installed) by running from your CLI:
 
-```
+```shell
 gatsby new gatsby-theme-forty https://github.com/codebushi/gatsby-theme-forty
 cd gatsby-theme-forty
 gatsby develop
 ```
 
+## Updates
+
+Compared to the original work,
+
+* The Gatsby used by this package has been bumped from 2 to 3.
+* The sass version has been bumped to sass 2.
+* Drop some deprecated sass usages.
+* Drop `javascript:;` deprecated by `React`.
+
 ## CSS Grid
 
 The grid on this site was replaced with a custom version, built using CSS Grid. It's a very simple 12 column grid that is disabled on mobile. To start using the grid, wrap the desired items with `grid-wrapper`. Items inside the `grid-wrapper` use the class `col-` followed by a number, which should add up to 12.
 
 Here is an example of using the grid, for a 3 column layout:
 
-```
+```jsx
 <div className="grid-wrapper">
     <div className="col-4">
         <p>Content Here</p>

package.json

@@ -4,13 +4,18 @@
   "version": "1.0.4",
   "author": "Hunter Chang",
   "dependencies": {
-    "gatsby-plugin-manifest": "^2.2.4",
-    "gatsby-plugin-offline": "^2.2.4",
-    "gatsby-plugin-page-creator": "^2.1.5",
-    "gatsby-plugin-react-helmet": "^3.1.2",
-    "gatsby-plugin-sass": "^2.1.3",
-    "node-sass": "^4.12.0",
-    "react-helmet": "^5.2.1"
+    "gatsby-plugin-manifest": "^3.10.0",
+    "gatsby-plugin-mdx": "^2.10.1",
+    "gatsby-plugin-offline": "^4.10.0",
+    "gatsby-plugin-page-creator": "^3.10.0",
+    "gatsby-plugin-react-helmet": "^4.10.0",
+    "gatsby-plugin-sass": "^4.10.0",
+    "gatsby-plugin-sitemap": "^4.6.0",
+    "gatsby-source-filesystem": "^3.10.0",
+    "react-helmet": "^6.1.0",
+    "sass": "^1.37.0",
+    "@mdx-js/mdx": "^1.6.22",
+    "@mdx-js/react": "^1.6.22"
   },
   "keywords": [
     "gatsby",
@@ -25,15 +30,15 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
-    "prettier": "^1.18.2",
-    "gatsby": "^2.13.41",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "prettier": "^2.3.2",
+    "gatsby": "^3.10.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
   "peerDependencies": {
-    "gatsby": "^2.13.41",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "gatsby": "^3.10.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
   "repository": {
     "type": "git",

src/assets/scss/base/_typography.scss

@@ -6,6 +6,8 @@
 
 /* Type */
 
+@use "sass:math";
+
 body,
 input,
 select,
@@ -51,9 +53,9 @@ a {
     color: desaturate(darken(_palette(highlight), 15), 5) !important;
   }
 
-  &:focus {
+  /*&:focus {
     outline: 3px solid rgba(155, 241, 255, 0.5);
-  }
+  }*/
 }
 
 strong,
@@ -142,7 +144,7 @@ blockquote {
   border-left: solid 4px _palette(border);
   font-style: italic;
   margin: 0 0 _size(element-margin) 0;
-  padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4)
+  padding: math.div(_size(element-margin), 4) 0 math.div(_size(element-margin), 4)
     _size(element-margin);
 }
 

src/assets/scss/components/_tiles.scss

@@ -72,10 +72,10 @@
       z-index: 4;
     }
 
-    .link.primary:focus,
+    /*.link.primary:focus,
     .link.primary:focus h3 {
       outline: 3px solid rgba(155, 241, 255, 0.5);
-    }
+    }*/
 
     &:before {
       @include vendor('transition', 'opacity 0.5s ease');

src/assets/scss/layout/_header.scss

@@ -70,9 +70,9 @@
       }
     }
 
-    &:focus {
+    /*&:focus {
       outline: 3px solid rgba(155, 241, 255, 0.5);
-    }
+    }*/
   }
 
   nav {
@@ -92,9 +92,9 @@
       position: relative;
       vertical-align: middle;
 
-      &:focus {
+      /*&:focus {
         outline: 3px solid rgba(155, 241, 255, 0.5);
-      }
+      }*/
 
       &:last-child {
         padding-right: 1.5em;

src/assets/scss/libs/_skel.scss

@@ -4,7 +4,7 @@
 
 	/// Breakpoints.
 	/// @var {list}
-	$breakpoints: () !global;
+	$breakpoints: ();
 
 	/// Vendor prefixes.
 	/// @var {list}
@@ -573,7 +573,7 @@
 			}
 
 		// Expand just the value?
-			@elseif $expandValue {
+			@else if $expandValue {
 			    @each $vendor in $vendor-prefixes {
 			        #{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
 			    }

src/components/Header.js

@@ -6,7 +6,7 @@ const Header = (props) => (
     <header id="header" className="alt">
         <Link to="/" className="logo"><strong>Forty</strong> <span>by HTML5 UP</span></Link>
         <nav>
-            <a className="menu-link" onClick={props.onToggleMenu} href="javascript:;">Menu</a>
+            <a className="menu-link" onClick={props.onToggleMenu}>Menu</a>
         </nav>
     </header>
 )

src/components/Menu.js

@@ -16,7 +16,7 @@ const Menu = (props) => (
                 <li><a href="#" className="button fit">Log In</a></li>
             </ul>
         </div>
-        <a className="close" onClick={props.onToggleMenu} href="javascript:;">Close</a>
+        <a className="close" onClick={props.onToggleMenu}>Close</a>
     </nav>
 )