Gatsby 3

package.json

@@ -15,12 +15,12 @@
     "@types/youtube": "0.0.38",
     "classnames": "^2.2.6",
     "date-fns": "^2.14.0",
-    "gatsby": "^2.21.7",
-    "gatsby-image": "^2.4.0",
-    "gatsby-plugin-google-analytics": "^2.3.19",
-    "gatsby-plugin-netlify": "^2.3.2",
+    "gatsby": "^3.0.0",
+    "gatsby-image": "^3.0.0",
+    "gatsby-plugin-google-analytics": "^3.0.0",
+    "gatsby-plugin-netlify": "^3.0.0",
     "gatsby-plugin-react-svg": "^3.0.0",
-    "gatsby-plugin-sass": "^2.3.2",
+    "gatsby-plugin-sass": "^4.0.0",
     "js-cookie": "^2.2.1",
     "object-hash": "^2.0.3",
     "query-string": "^6.12.1",
@@ -58,19 +58,19 @@
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^3.0.0",
-    "gatsby-plugin-catch-links": "^2.3.2",
-    "gatsby-plugin-manifest": "^2.4.1",
-    "gatsby-plugin-offline": "^3.2.0",
-    "gatsby-plugin-react-helmet": "^3.3.0",
-    "gatsby-plugin-sharp": "^2.6.3",
+    "gatsby-plugin-catch-links": "^3.0.0",
+    "gatsby-plugin-manifest": "^3.0.0",
+    "gatsby-plugin-offline": "^3.0.0",
+    "gatsby-plugin-react-helmet": "^4.0.0",
+    "gatsby-plugin-sharp": "^3.0.0",
     "gatsby-plugin-typegen": "^2.1.0",
-    "gatsby-plugin-typescript": "^2.4.0",
-    "gatsby-source-filesystem": "^2.3.0",
-    "gatsby-source-local-git": "^1.0.0",
-    "gatsby-source-sanity": "^5.0.6",
-    "gatsby-transformer-remark": "^2.8.3",
+    "gatsby-plugin-typescript": "^3.0.0",
+    "gatsby-source-filesystem": "^3.0.0",
+    "gatsby-source-local-git": "^1.3.0",
+    "gatsby-source-sanity": "^6.0.0",
+    "gatsby-transformer-remark": "^3.0.0",
     "gatsby-transformer-remark-frontmatter": "^0.1.0",
-    "gatsby-transformer-sharp": "^2.5.0",
+    "gatsby-transformer-sharp": "^3.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.0.1",
     "patch-package": "^6.2.2",

patches/README.md

@@ -6,11 +6,9 @@ See <https://github.com/ds300/patch-package>. Essentially, it lets us modify the
 ## What changes have you made then?
 
 ### `gatsby-plugin-sharp`
-The patch file for this has two changes.
-1. By default it always adds the original image resolution to the generated `srcSet`. This is confusing and annoying as it basically means it doesn't respect its own `maxWidth` param, and risks us serving a masssive image to the user when we weren't expecting to. So we remove it.
-2. We globally make `fluid` query generate a couple of extra sizes, so that the browser is more likely to download only exactly the right sized image.
+We globally make `fluid` query generate a couple of extra sizes, so that the browser is more likely to download only exactly the right sized image.
 
 
 ### `react-hook-form`
 Bad type def for errors - says it returns string | ReactElement - it should only be string.
-https://github.com/react-hook-form/react-hook-form/issues/1713
+https://github.com/react-hook-form/react-hook-form/issues/1713

patches/gatsby-plugin-sharp+2.6.3.patch → patches/gatsby-plugin-sharp+3.14.3.patch

@@ -1,8 +1,8 @@
 diff --git a/node_modules/gatsby-plugin-sharp/index.js b/node_modules/gatsby-plugin-sharp/index.js
-index ce52971..0faeec3 100644
+index ea4fd6b..b4382a2 100644
 --- a/node_modules/gatsby-plugin-sharp/index.js
 +++ b/node_modules/gatsby-plugin-sharp/index.js
-@@ -519,9 +519,14 @@ async function fluid({
+@@ -518,10 +518,17 @@ async function fluid({
    ]; // use standard breakpoints if no custom breakpoints are specified
 
    if (!options.srcSetBreakpoints || !options.srcSetBreakpoints.length) {
@@ -18,15 +18,8 @@ index ce52971..0faeec3 100644
 +    fluidSizes.push(options[fixedDimension] * 1.6);
 +    fluidSizes.push(options[fixedDimension] * 1.8);
      fluidSizes.push(options[fixedDimension] * 2);
++
++
    } else {
      options.srcSetBreakpoints.forEach(breakpoint => {
-@@ -542,7 +547,8 @@ async function fluid({
-   // is available for small images. Also so we can link to
-   // the original image.
-
--  filteredSizes.push(fixedDimension === `maxWidth` ? width : height); // Queue sizes for processing.
-+  // Gatsby adds the original image for some reason. This is bizarre so I'm removing that line.
-+  // filteredSizes.push(fixedDimension === `maxWidth` ? width : height); // Queue sizes for processing.
-
-   const dimensionAttr = fixedDimension === `maxWidth` ? `width` : `height`;
-   const otherDimensionAttr = fixedDimension === `maxWidth` ? `height` : `width`; // Sort sizes for prettiness.
+       if (breakpoint < 1) {

src/components/basic-text-page.tsx

@@ -2,7 +2,7 @@ import React from "react"
 
 import HeaderUnderlay from "./header-underlay"
 import Section from "./section"
-import styles from "./basic-text-page.module.scss"
+import * as styles from "./basic-text-page.module.scss"
 
 type BasicTextProps = {
     html?: string

src/components/big-video.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from "react"
 import YouTube from "react-youtube"
 
-import styles from "./big-video.module.scss"
+import * as styles from "./big-video.module.scss"
 
 interface BigVideoProps {
     youTubeVideoId: string

src/components/bio.tsx

@@ -4,7 +4,7 @@ import { graphql } from "gatsby"
 import Img from "./img"
 import { sortedWithPriority } from "../utils"
 
-import styles from "./bio.module.scss"
+import * as styles from "./bio.module.scss"
 import FindOutMoreText from "./find-out-more-text"
 import Section from "./section"
 

src/components/christmas/christmas2020.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { graphql, useStaticQuery } from "gatsby"
-import styles from "./christmas2020.module.scss"
+import * as styles from "./christmas2020.module.scss"
 import { parseISO } from "date-fns"
 import Section from "../section"
 import PartiallyDisclosedList from "./partially-disclosed-list"

src/components/christmas/christmas2021.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { graphql, useStaticQuery } from "gatsby"
-import styles from "./christmas2021.module.scss"
+import * as styles from "./christmas2021.module.scss"
 import Section from "../section"
 import ChristmasTitle from "../../content/christmas2021/christmaswordmark.inline.svg"
 import { EventListing, hasSingleEventPassedFilter, SingleEvent } from "./event"

src/components/christmas/event.tsx

@@ -1,6 +1,6 @@
 import { format, isAfter, sub } from "date-fns"
 import React from "react"
-import styles from "./christmas2021.module.scss"
+import * as styles from "./christmas2021.module.scss"
 
 export type SingleEvent = {
     title: string

src/components/cookie-notice.tsx

@@ -2,7 +2,7 @@ import classnames from "classnames"
 import React from "react"
 import { graphql, useStaticQuery, Link } from "gatsby"
 
-import styles from "./cookie-notice.module.scss"
+import * as styles from "./cookie-notice.module.scss"
 import useConsentCookie from "./hooks/useConsentCookie"
 
 const CookieNotice = () => {

src/components/covid-notice.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { graphql, useStaticQuery } from "gatsby"
 import Section from "./section"
-import styles from "./covid-notice.module.scss"
+import * as styles from "./covid-notice.module.scss"
 
 const CovidNotice = () => {
     const { covid } = useStaticQuery<GatsbyTypes.CovidQuery>(graphql`

src/components/double-image-section.tsx

@@ -1,7 +1,7 @@
 import classnames from "classnames"
 import React, { FC, ReactNode } from "react"
 
-import styles from "./double-image-section.module.scss"
+import * as styles from "./double-image-section.module.scss"
 import Section from "./section"
 
 type ImagesPosition = "left" | "right"

src/components/find-out-more-text.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from "react"
 
-import styles from "./find-out-more-text.module.scss"
+import * as styles from "./find-out-more-text.module.scss"
 
 interface FindOutMoreTextProps {
     innerHTML: string

src/components/find-out-more.tsx

@@ -1,6 +1,6 @@
 import React, { FC, HTMLProps } from "react"
 
-import styles from "./find-out-more.module.scss"
+import * as styles from "./find-out-more.module.scss"
 import Section from "./section"
 
 interface FindOutMoreProps extends HTMLProps<HTMLDivElement> {}

src/components/find-us.tsx

@@ -5,7 +5,7 @@ import { InView } from "react-intersection-observer"
 import MapPin from "../assets/icons/mappin.inline.svg"
 import Roundel from "../assets/icons/roundel2.inline.svg"
 
-import styles from "./find-us.module.scss"
+import * as styles from "./find-us.module.scss"
 import Section from "./section"
 
 const LATITUDE = 51.505263

src/components/footer.tsx

@@ -3,7 +3,7 @@ import { useStaticQuery, graphql, Link } from "gatsby"
 
 import CcmLogo from "../content/assets/images/ccm-logo-full.inline.svg"
 
-import styles from "./footer.module.scss"
+import * as styles from "./footer.module.scss"
 import SocialMediaIcon from "./social-media-icon"
 
 const links: Array<{ path: string; title: string }> = [

src/components/form/field.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 
-import styles from "./field.module.scss"
+import * as styles from "./field.module.scss"
 import classNames from "classnames"
 
 interface Props {

src/components/form/fields/basic-text-field.tsx

@@ -1,7 +1,7 @@
 import Field from "../field"
 import React from "react"
 import classNames from "classnames"
-import formStyles from "../form.module.scss"
+import * as formStyles from "../form.module.scss"
 import { ReactHookFormWiring, CommonField } from "../form-config.types"
 import { prependRequired } from "../form"
 import { shouldShowField } from "../conditional-visibility"

src/components/form/fields/checkbox-field.tsx

@@ -2,7 +2,7 @@ import { ReactHookFormWiring, CommonField } from "../form-config.types"
 import Field from "../field"
 import React from "react"
 import classNames from "classnames"
-import formStyles from "../form.module.scss"
+import * as formStyles from "../form.module.scss"
 import { prependRequired } from "../form"
 import { shouldShowField, VisibilityCondition } from "../conditional-visibility"
 

src/components/form/fields/date-field.tsx

@@ -1,7 +1,7 @@
 import Field from "../field"
 import React from "react"
 import classNames from "classnames"
-import formStyles from "../form.module.scss"
+import * as formStyles from "../form.module.scss"
 import { ReactHookFormWiring, CommonField } from "../form-config.types"
 import { prependRequired } from "../form"
 import { Controller } from "react-hook-form"

src/components/form/fields/drop-down-field.tsx

@@ -2,7 +2,7 @@ import { ReactHookFormWiring, CommonField } from "../form-config.types"
 import { prependRequired } from "../form"
 import Field from "../field"
 import React from "react"
-import formStyles from "../form.module.scss"
+import * as formStyles from "../form.module.scss"
 import { shouldShowField } from "../conditional-visibility"
 
 type DropDownChoice = {

src/components/form/fields/form-section-start.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { shouldShowField, VisibilityCondition } from "../conditional-visibility"
 import { ReactHookFormWiring } from "../form-config.types"
-import formStyles from "../form.module.scss"
+import * as formStyles from "../form.module.scss"
 
 type Props = {
     showWhen?: VisibilityCondition

src/components/form/fields/number-field.tsx

@@ -1,7 +1,7 @@
 import Field from "../field"
 import React from "react"
 import classNames from "classnames"
-import formStyles from "../form.module.scss"
+import * as formStyles from "../form.module.scss"
 import { ReactHookFormWiring, CommonField } from "../form-config.types"
 import { prependRequired } from "../form"
 import { shouldShowField } from "../conditional-visibility"

src/components/form/fields/radio-button-field.tsx

@@ -2,7 +2,7 @@ import { ReactHookFormWiring, CommonField } from "../form-config.types"
 import Field from "../field"
 import React from "react"
 import classNames from "classnames"
-import formStyles from "../form.module.scss"
+import * as formStyles from "../form.module.scss"
 import { prependRequired } from "../form"
 import { shouldShowField } from "../conditional-visibility"
 

src/components/form/form.tsx

@@ -3,7 +3,7 @@ import React from "react"
 import Field from "./field"
 import { useForm } from "react-hook-form"
 
-import formStyles from "./form.module.scss"
+import * as formStyles from "./form.module.scss"
 import classNames from "classnames"
 import { ValidationOptions } from "react-hook-form"
 import Section from "../section"

src/components/gospelgenerationstrust/alum.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from "react"
 
-import styles from "./alum.module.scss"
+import * as styles from "./alum.module.scss"
 import Img, { FluidObject } from "../img"
 
 type AlumProps = {

src/components/gospelgenerationstrust/footer.tsx

@@ -3,7 +3,7 @@ import { useStaticQuery, graphql, Link } from "gatsby"
 
 import GospelGenerationsTrustLogoFull from "../../content/assets/images/gospelgenerationstrust-logo.inline.svg"
 
-import styles from "../footer.module.scss"
+import * as styles from "../footer.module.scss"
 
 const links: Array<{ path: string; title: string }> = [
     { path: "/gospelgenerationstrust/stories", title: "Stories" },

src/components/gospelgenerationstrust/header.tsx

@@ -6,7 +6,7 @@ import GospelGenerationsTrustLogoFull from "../../content/assets/images/gospelge
 import CloseMenuButton from "../../content/assets/images/close-menu-button.inline.svg"
 import Hamburger from "../../content/assets/images/hamburger.inline.svg"
 
-import styles from "../header.module.scss"
+import * as styles from "../header.module.scss"
 
 const MAX_WIDTH_MOBILE_HEADER = 968
 

src/components/header-underlay.tsx

@@ -2,7 +2,7 @@ import React, { FC, HTMLProps } from "react"
 
 import Section, { colorScheme } from "./section"
 
-import styles from "./header-underlay.module.scss"
+import * as styles from "./header-underlay.module.scss"
 import classNames from "classnames"
 
 interface HeaderUnderlayProps extends HTMLProps<HTMLDivElement> {

src/components/header.tsx

@@ -6,7 +6,7 @@ import CcmLogoFull from "../content/assets/images/ccm-logo-full.inline.svg"
 import CloseMenuButton from "../content/assets/images/close-menu-button.inline.svg"
 import Hamburger from "../content/assets/images/hamburger.inline.svg"
 
-import styles from "./header.module.scss"
+import * as styles from "./header.module.scss"
 
 const MAX_WIDTH_MOBILE_HEADER = 968
 

src/components/hero.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 
 import Img, { FluidObject } from "./img"
-import styles from "./hero.module.scss"
+import * as styles from "./hero.module.scss"
 import Section from "./section"
 
 interface HeroProps {

src/components/hopeinthedarkness.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { graphql, useStaticQuery } from "gatsby"
-import styles from "./hopeinthedarkness.module.scss"
+import * as styles from "./hopeinthedarkness.module.scss"
 import Section from "./section"
 
 const HopeInTheDarkness = () => {

src/components/important-notice.tsx

@@ -1,7 +1,7 @@
 import classNames from "classnames"
 import React, { FC } from "react"
 
-import styles from "./important-notice.module.scss"
+import * as styles from "./important-notice.module.scss"
 import Section from "./section"
 import SectionText from "./section-text"
 

src/components/large-navigation-buttons.tsx

@@ -1,7 +1,7 @@
 import classnames from "classnames"
 import React, { FC, ElementType, Fragment } from "react"
 
-import styles from "./large-navigation-buttons.module.scss"
+import * as styles from "./large-navigation-buttons.module.scss"
 import { Link } from "gatsby"
 
 interface ButtonConfig {

src/components/london-living-promo.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { graphql, useStaticQuery } from "gatsby"
-import styles from "./london-living-promo.module.scss"
+import * as styles from "./london-living-promo.module.scss"
 import LondonLivingLogo from "../content/londonliving/LL_logo.inline.svg"
 import Section from "./section"
 

src/components/missionpartner.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from "react"
 
-import styles from "./missionpartner.module.scss"
+import * as styles from "./missionpartner.module.scss"
 import Img, { FluidObject } from "./img"
 import classNames from "classnames"
 

src/components/post-lockdown-notice.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { graphql, useStaticQuery } from "gatsby"
 import Section from "./section"
-import styles from "./post-lockdown-notice.module.scss"
+import * as styles from "./post-lockdown-notice.module.scss"
 
 const PostLockDownNotice = () => {
     const { postLockDown } = useStaticQuery<

src/components/rootsofjazzpromo.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { graphql, useStaticQuery } from "gatsby"
-import styles from "./rootsofjazz.module.scss"
+import * as styles from "./rootsofjazz.module.scss"
 import Section from "./section"
 
 const RootsOfJazzPromo = () => {