upgrade to Gatsby 4

gatsby-node.js

@@ -1,5 +1,5 @@
-import people from './src/data.js';
+const { tags, countries, devices, normalizeTag } = require('./src/util/stats');
-import { tags, countries, devices, normalizeTag } from './src/util/stats';
+const people = require('./src/data.js');
 
 function unique(arr) {
   return Array.from(new Set(arr));
@@ -14,12 +14,12 @@ function sourceNodes({ actions, createNodeId, createContentDigest }) {
   // Add People to the GraphQL API, we randomize the data on each build so no one gets their feelings hurt
   people
     .sort(() => Math.random() - 0.5)
-    .forEach(person => {
+    .forEach((person) => {
       const normalizedPerson = {
         ...person,
         // Clean out people that added basically the same tags twice
         tags: unique(
-          person.tags.map(tag => normalizedTagMap[normalizeTag(tag)] || tag)
+          person.tags.map((tag) => normalizedTagMap[normalizeTag(tag)] || tag)
         ),
       };
       const nodeMeta = {
@@ -38,7 +38,7 @@ function sourceNodes({ actions, createNodeId, createContentDigest }) {
     });
 
   // Add tags to GraphQL API
-  tags().forEach(tag => {
+  tags().forEach((tag) => {
     const nodeMeta = {
       id: createNodeId(`tag-${tag.name}`),
       parent: null,
@@ -55,7 +55,7 @@ function sourceNodes({ actions, createNodeId, createContentDigest }) {
   });
 
   // Add Countries to GraphQL API
-  countries().forEach(country => {
+  countries().forEach((country) => {
     const nodeMeta = {
       id: createNodeId(`country-${country.name}`),
       parent: null,
@@ -72,7 +72,7 @@ function sourceNodes({ actions, createNodeId, createContentDigest }) {
   });
 
   // Add Devices to GraphQL API
-  devices().forEach(device => {
+  devices().forEach((device) => {
     const nodeMeta = {
       id: createNodeId(`device-${device.name}`),
       parent: null,
@@ -88,4 +88,4 @@ function sourceNodes({ actions, createNodeId, createContentDigest }) {
   });
 }
 
-export { sourceNodes };
+exports.sourceNodes = sourceNodes;

package.json

@@ -21,26 +21,26 @@
     "@types/node": "^16.11.19",
     "@typescript-eslint/eslint-plugin": "^5.9.1",
     "@typescript-eslint/parser": "^5.9.1",
-    "country-emoji": "^1.5.0",
+    "country-emoji": "^1.5.6",
     "eslint-config-airbnb-typescript": "^16.1.0",
     "esm": "^3.2.25",
-    "gatsby": "^2.18.12",
+    "gatsby": "^4.5.0",
-    "gatsby-image": "^2.2.34",
+    "gatsby-image": "^3.11.0",
-    "gatsby-plugin-manifest": "^2.2.31",
+    "gatsby-plugin-manifest": "^4.5.0",
-    "gatsby-plugin-offline": "^3.0.27",
+    "gatsby-plugin-offline": "^5.5.0",
-    "gatsby-plugin-react-helmet": "^3.1.16",
+    "gatsby-plugin-react-helmet": "^5.5.0",
-    "gatsby-plugin-sharp": "^2.3.5",
+    "gatsby-plugin-sharp": "^4.5.0",
-    "gatsby-plugin-styled-components": "^3.1.16",
+    "gatsby-plugin-styled-components": "^5.5.0",
     "gatsby-plugin-web-font-loader": "^1.0.4",
-    "gatsby-source-filesystem": "^2.1.40",
+    "gatsby-source-filesystem": "^4.5.0",
-    "gatsby-transformer-sharp": "^2.3.7",
+    "gatsby-transformer-sharp": "^4.5.0",
     "joi": "^17.5.0",
     "normalize.css": "^8.0.1",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
-    "react": "^16.12.0",
+    "react": "^17.0.2",
-    "react-dom": "^16.12.0",
+    "react-dom": "^17.0.2",
-    "react-helmet": "^5.2.1",
+    "react-helmet": "^6.1.0",
-    "styled-components": "5.0.0-rc.3",
+    "styled-components": "5.3.3",
     "typescript": "^4.5.4"
   },
   "scripts": {

src/components/image.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import { useStaticQuery, graphql } from 'gatsby';
-import Img from 'gatsby-image';
-
-/*
- * This component is built using `gatsby-image` to automatically serve optimized
- * images with lazy loading and reduced file sizes. The image is loaded using a
- * `useStaticQuery`, which allows us to load the image from directly within this
- * component, rather than having to pass the image data down from pages.
- *
- * For more information, see the docs:
- * - `gatsby-image`: https://gatsby.dev/gatsby-image
- * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
- */
-
-const Image = () => {
-  const data = useStaticQuery(graphql`
-    query {
-      placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
-        childImageSharp {
-          fluid(maxWidth: 300) {
-            ...GatsbyImageSharpFluid
-          }
-        }
-      }
-    }
-  `);
-
-  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />;
-};
-
-export default Image;

src/util/stats.js

@@ -1,8 +1,8 @@
-import { name } from 'country-emoji';
+const { name } = require('country-emoji');
-import people from '../data.js';
+const people = require('../data.js');
 
 function merge(prop) {
-  return function(acc, obj) {
+  return function (acc, obj) {
     // Remove duplicated values.
     const values = [...new Set(obj[prop])];
     return [...values, ...acc];
@@ -14,7 +14,7 @@ function countInstances(acc, tag) {
   return acc;
 }
 
-export function normalizeTag(tag) {
+function normalizeTag(tag) {
   return (
     tag
       // Common mispellings currently seen in the data
@@ -31,9 +31,9 @@ export function normalizeTag(tag) {
   );
 }
 
-export function countries() {
+function countries() {
   const data = people
-    .map(person => ({
+    .map((person) => ({
       name: name(person.country),
       emoji: person.country,
     }))
@@ -57,7 +57,7 @@ export function countries() {
   return sorted;
 }
 
-export function tags() {
+function tags() {
   const allTags = people.reduce(merge('tags'), []);
   const counts = allTags.reduce(countInstances, {});
   // sort and filter for any tags that only have 1
@@ -88,13 +88,18 @@ export function tags() {
   return [{ name: 'all', count: people.length }, ...normalizedTags];
 }
 
-export function devices() {
+function devices() {
   const all = [
-    ...people.map(person => person.computer),
+    ...people.map((person) => person.computer),
-    ...people.map(person => person.phone),
+    ...people.map((person) => person.phone),
   ];
 
   return Object.entries(all.reduce(countInstances, {}))
     .map(([device, count]) => ({ name: device, count }))
     .sort((a, b) => b.count - a.count);
 }
+
+exports.normalizeTag = normalizeTag;
+exports.countries = countries;
+exports.tags = tags;
+exports.devices = devices;