fix: adds temporary legacy flag for gatsby build

gatsby-config.js

@@ -60,7 +60,6 @@ module.exports = {
         ],
       },
     },
-    `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
     {
       resolve: `gatsby-plugin-csv-feed`,
@@ -152,6 +151,7 @@ module.exports = {
                 url: `${site.siteMetadata.siteUrl}${edge.node.fields.slug}`,
               })),
             output: "/rss.xml",
+            title: "Clausehound Blog RSS Feed",
           },
         ],
       },
@@ -187,24 +187,14 @@ module.exports = {
       },
     },
     `gatsby-plugin-sitemap`,
-    {
-      resolve: "gatsby-plugin-netlify-cache",
-      options: {
-        cachePublic: true,
-      },
-    },
     {
       resolve: `gatsby-plugin-facebook-pixel`,
       options: {
         pixelId: "946837209425086",
       },
     },
-    {
-      resolve: `gatsby-plugin-linkedin-insight`,
-      options: {
-        partnerId: `3630777`,
-      },
-    },
+    "gatsby-transformer-sharp",
+    "gatsby-plugin-image",
   ],
   mapping: {
     "MarkdownRemark.frontmatter.author": `AuthorJson`,

package.json

@@ -8,39 +8,42 @@
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   },
   "dependencies": {
-    "@material-ui/core": "^4.7.1",
-    "@material-ui/icons": "^4.5.1",
-    "gatsby": "^2.18.7",
-    "gatsby-image": "^2.2.34",
-    "gatsby-plugin-csv-feed": "^2.0.0",
+    "@emotion/core": "^10.0.35",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@mui/icons-material": "^5.2.0",
+    "@mui/material": "^5.16.4",
+    "@mui/styles": "^5.16.4",
+    "gatsby": "^5.14.1",
+    "gatsby-plugin-csv-feed": "^4.0.1",
     "gatsby-plugin-facebook-pixel": "^1.0.8",
-    "gatsby-plugin-feed": "^2.3.23",
-    "gatsby-plugin-google-analytics": "^2.1.31",
+    "gatsby-plugin-feed": "^5.14.0",
+    "gatsby-plugin-google-analytics": "^5.14.0",
+    "gatsby-plugin-image": "^3.14.0",
     "gatsby-plugin-linkedin-insight": "^1.0.1",
-    "gatsby-plugin-manifest": "^2.2.31",
-    "gatsby-plugin-material-ui": "^2.1.6",
-    "gatsby-plugin-netlify-cache": "^1.2.0",
-    "gatsby-plugin-offline": "^3.0.27",
-    "gatsby-plugin-react-helmet": "^3.1.16",
-    "gatsby-plugin-react-svg": "^2.1.2",
-    "gatsby-plugin-sharp": "^2.3.5",
-    "gatsby-plugin-sitemap": "^2.2.25",
-    "gatsby-plugin-typography": "^2.3.18",
-    "gatsby-remark-copy-linked-files": "^2.1.31",
+    "gatsby-plugin-manifest": "^5.14.0",
+    "gatsby-plugin-material-ui": "^4.1.0",
+    "gatsby-plugin-offline": "^6.14.0",
+    "gatsby-plugin-react-helmet": "^6.14.0",
+    "gatsby-plugin-react-svg": "^3.3.0",
+    "gatsby-plugin-sharp": "^5.14.0",
+    "gatsby-plugin-sitemap": "^6.14.0",
+    "gatsby-plugin-typography": "^5.14.0",
+    "gatsby-remark-copy-linked-files": "^6.14.0",
     "gatsby-remark-external-links": "^0.0.4",
-    "gatsby-remark-images": "^3.1.35",
-    "gatsby-remark-prismjs": "^3.3.25",
-    "gatsby-remark-responsive-iframe": "^2.2.28",
-    "gatsby-remark-smartypants": "^2.1.17",
-    "gatsby-source-filesystem": "^2.1.40",
-    "gatsby-transformer-json": "^2.2.20",
-    "gatsby-transformer-remark": "^2.6.39",
-    "gatsby-transformer-sharp": "^2.3.7",
+    "gatsby-remark-images": "^7.14.0",
+    "gatsby-remark-prismjs": "^7.14.0",
+    "gatsby-remark-responsive-iframe": "^6.14.0",
+    "gatsby-remark-smartypants": "^6.14.0",
+    "gatsby-source-filesystem": "^5.14.0",
+    "gatsby-transformer-json": "^5.14.0",
+    "gatsby-transformer-remark": "^6.14.0",
+    "gatsby-transformer-sharp": "^5.14.0",
     "prismjs": "^1.17.1",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-helmet": "^5.2.1",
-    "react-typography": "^0.16.19",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-helmet": "^6.1.0",
+    "react-typography": "^0.16.23",
     "slugify": "^1.3.6",
     "typeface-merriweather": "0.0.72",
     "typeface-montserrat": "0.0.75",
@@ -50,14 +53,14 @@
   },
   "devDependencies": {
     "@types/node": "^12.12.14",
-    "@types/react": "^16.9.15",
-    "@types/react-dom": "^16.9.4",
-    "@types/react-helmet": "^5.0.14",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@types/react-helmet": "^6.1.11",
     "@types/typography": "^0.16.3",
-    "gatsby-plugin-typescript": "^2.1.20",
+    "gatsby-plugin-typescript": "^5.14.0",
     "prettier": "^1.19.1",
     "ts-node": "^8.6.2",
-    "typescript": "^3.7.3"
+    "typescript": "^5.7.3"
   },
   "homepage": "https://github.com/gatsbyjs/gatsby-starter-blog#readme",
   "keywords": [

src/components/article-preview.ts

@@ -1,5 +1,5 @@
 import { FC, createElement as h, Fragment } from "react";
-import { Chip } from "@material-ui/core";
+import { Chip } from "@mui/material";
 import { Link, navigate } from "gatsby";
 import { rhythm } from "../utils/typography";
 import { authors } from "../utils/filters";

src/components/author.ts

@@ -1,7 +1,7 @@
 import { FC, createElement as h } from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
 import { Link } from "gatsby";
-import Image, { GatsbyImageProps } from "gatsby-image";
+import { GatsbyImage, GatsbyImageProps } from "gatsby-plugin-image";
 
 interface Props {
   id: string;
@@ -51,9 +51,9 @@ const Author: FC<Props> = ({ first, id, image, last }) => {
       className: classes.root,
       to: `/${id}`,
     },
-    image?.childImageSharp?.fluid &&
-      h(Image, {
-        fluid: image.childImageSharp.fluid,
+    image?.childImageSharp?.gatsbyImageData &&
+      h(GatsbyImage, {
+        image: image.childImageSharp.gatsbyImageData,
         alt: `picture of ${first}`,
         className: classes.avatar,
         imgStyle: {

src/components/bio.ts

@@ -7,7 +7,6 @@
 
 import { FC, createElement as h } from "react";
 import { useStaticQuery, graphql } from "gatsby";
-import Image from "gatsby-image";
 
 import { rhythm } from "../utils/typography";
 

src/components/header.ts

@@ -11,8 +11,8 @@ import {
   makeStyles,
   useScrollTrigger,
   useTheme,
-} from "@material-ui/core";
-import LanguageIcon from "@material-ui/icons/Language";
+} from "@mui/material";
+import LanguageIcon from "@mui/icons-material/Language";
 
 import Logo from "./logo";
 
@@ -58,15 +58,15 @@ const Header: FC<Props> = () => {
         ref: head,
         style: { position: "sticky" },
       },
-        h(
-          Link,
-          {
-            to: "/",
-            className: classes.logo,
-            style: { boxShadow: "none", alignSelf: "flex-end" },
-          },
-          h(Logo, { style: { height: "1.2rem", width: "auto" } }),
-        ),
+      h(
+        Link,
+        {
+          to: "/",
+          className: classes.logo,
+          style: { boxShadow: "none", alignSelf: "flex-end" },
+        },
+        h(Logo, { style: { height: "1.2rem", width: "auto" } }),
+      ),
     ),
   );
 };

src/components/hubspotForm.ts

@@ -1,5 +1,5 @@
 import { FC, createElement as h, useEffect } from "react";
-import { makeStyles } from "@material-ui/core";
+import { makeStyles } from "@mui/styles";
 import { trackCustomEvent } from "gatsby-plugin-google-analytics";
 
 const useStyles = makeStyles(theme => ({

src/components/layout.ts

@@ -1,12 +1,9 @@
 import { FC, createElement as h } from "react";
 import { Link } from "gatsby";
-import {
-  createMuiTheme,
-  MuiThemeProvider,
-  makeStyles,
-} from "@material-ui/core/styles";
-import { amber, lightBlue, grey } from "@material-ui/core/colors";
-import useMediaQuery from "@material-ui/core/useMediaQuery";
+import { makeStyles } from "@mui/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { amber, lightBlue, grey } from "@mui/material/colors";
+import useMediaQuery from "@mui/material/useMediaQuery";
 
 import { rhythm, scale } from "../utils/typography";
 
@@ -63,12 +60,12 @@ const typography = {
   },
 } as const;
 
-const themeLight = createMuiTheme({
+const themeLight = createTheme({
   palette: paletteLight,
   typography,
 });
 
-const themeDark = createMuiTheme({
+const themeDark = createTheme({
   palette: paletteDark,
   typography,
 });
@@ -147,7 +144,7 @@ const Layout: FC<Props> = ({ location, title, children }) => {
     "div",
     { className: classes.root },
     h(
-      MuiThemeProvider,
+      ThemeProvider,
       {
         theme: darkMode ? themeDark : themeLight,
       },

src/components/popular.ts

@@ -3,7 +3,7 @@
 // run fastest if it's built into the static bundle, so there it goes.
 import { createElement as h } from "react";
 import { Link } from "gatsby";
-import { Typography } from "@material-ui/core";
+import { Typography } from "@mui/material";
 
 // TODO: Load from graphql
 const popularPosts = [

src/components/seo.ts

@@ -9,7 +9,7 @@ import { FC, createElement as h } from "react";
 import PropTypes from "prop-types";
 import Helmet from "react-helmet";
 import { useStaticQuery, graphql } from "gatsby";
-import { useTheme } from "@material-ui/core/styles";
+import { useTheme } from "@mui/styles";
 
 interface MetaDescription {
   content: string;

src/components/tag-chips.ts

@@ -1,8 +1,7 @@
 import { FC, createElement as h } from "react";
-import { Chip, Theme } from "@material-ui/core";
-import { makeStyles } from "@material-ui/core/styles";
+import { Chip, Theme } from "@mui/material";
+import { makeStyles } from "@mui/styles";
 import { Link, navigate } from "gatsby";
-import Image, { GatsbyImageProps } from "gatsby-image";
 
 interface Props {
   tags: ReadonlyArray<string>;

src/pages/blogtemplate.ts

@@ -7,17 +7,15 @@ import {
   ChangeEvent,
 } from "react";
 import { graphql } from "gatsby";
-import {
-  makeStyles,
-} from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
 import slugify from "slugify";
 import Layout from "../components/layout";
 import SEO from "../components/seo";
 
 const useStyles = makeStyles({
   root: {
     "& label": { paddingTop: "0.2rem" },
-  }
+  },
 });
 
 interface Data {

src/pages/brand.ts

@@ -1,6 +1,6 @@
 import { FC, Fragment, createElement as h, useState } from "react";
 import { graphql } from "gatsby";
-import { useTheme } from "@material-ui/core";
+import { useTheme } from "@mui/material";
 import Layout from "../components/layout";
 import SEO from "../components/seo";
 

src/pages/tags.ts

@@ -1,6 +1,6 @@
 import { FC, createElement as h, useMemo, useState } from "react";
-import { Button, ButtonGroup, Typography } from "@material-ui/core";
-import { ArrowDropDown, ArrowDropUp } from "@material-ui/icons";
+import { Button, ButtonGroup, Typography } from "@mui/material";
+import { ArrowDropDown, ArrowDropUp } from "@mui/icons-material";
 import { Link, graphql } from "gatsby";
 import Bio from "../components/bio";
 import Layout from "../components/layout";
@@ -40,7 +40,8 @@ const byTag = (rev?: boolean) => (a: Tag, b: Tag) =>
   (rev ? -1 : 1) * a.tag.localeCompare(b.tag);
 
 // TODO: this should be built in somewhere
-const formatTagLink = (tag: string): string => tag.replace(/ /g, "-").replace(/#/g, "");
+const formatTagLink = (tag: string): string =>
+  tag.replace(/ /g, "-").replace(/#/g, "");
 
 const notAuthor = ({ tag }: Tag): boolean => !authors.has(tag);
 
@@ -58,9 +59,7 @@ const TagsTemplate: FC<Props> = ({
   const sortedTags = useMemo(() => {
     switch (sortBy) {
       case "total":
-        return tags
-          .filter(notAuthor)
-          .sort(byTotalCount(rev));
+        return tags.filter(notAuthor).sort(byTotalCount(rev));
       case "tag":
       default: {
         return tags.filter(notAuthor).sort(byTag(rev));

src/templates/author-bio.ts

@@ -75,9 +75,7 @@ export const pageQuery = graphql`
       bio
       image {
         childImageSharp {
-          fluid(maxWidth: 640, maxHeight: 640) {
-            ...GatsbyImageSharpFluid
-          }
+          gatsbyImageData(layout: FIXED)
         }
       }
     }

src/templates/blog-list.ts

@@ -1,5 +1,5 @@
 import { FC, createElement as h } from "react";
-import { makeStyles } from "@material-ui/core";
+import { makeStyles } from "@mui/styles";
 import { Link, graphql } from "gatsby";
 import Bio from "../components/bio";
 import Layout from "../components/layout";

src/templates/blog-post.ts

@@ -1,5 +1,5 @@
 import { FC, createElement as h } from "react";
-import { makeStyles } from "@material-ui/core";
+import { makeStyles } from "@mui/styles";
 import { Link, graphql } from "gatsby";
 import { Helmet } from "react-helmet";
 
@@ -11,7 +11,7 @@ import Popular from "../components/popular";
 import TagChips from "../components/tag-chips";
 import { scale } from "../utils/typography";
 import { authors } from "../utils/filters";
-import { GatsbyImageProps } from "gatsby-image";
+import { GatsbyImageProps } from "gatsby-plugin-image";
 import HubspotForm from "../components/hubspotForm";
 
 const useStyles = makeStyles(theme => ({
@@ -221,9 +221,7 @@ export const pageQuery = graphql`
           bio
           image {
             childImageSharp {
-              fluid(maxWidth: 320, maxHeight: 320) {
-                ...GatsbyImageSharpFluid
-              }
+              gatsbyImageData(layout: FIXED)
             }
           }
         }

src/templates/tag-list.ts

@@ -1,5 +1,5 @@
 import { FC, createElement as h } from "react";
-import { Typography } from "@material-ui/core";
+import { Typography } from "@mui/material";
 import { Link, graphql } from "gatsby";
 import Bio from "../components/bio";
 import Layout from "../components/layout";