Production update (Sep2)

.eslintignore

@@ -0,0 +1,3 @@
+
+.gitignore 
+/\"**/*.{js,jsx}\"

gatsby-browser.js

@@ -5,8 +5,10 @@
  *
  * Note: There is an equivalent hook in Gatsby’s SSR API. It is recommended to use both APIs together.
  */
-
+import React from "react"
+import Layout from "./src/components/layout"
 import "@fontsource/titillium-web"
+import PropTypes from "prop-types"
 
 export const shouldUpdateScroll = ({ routerProps: { location } }) => {
   if (location.hash) {
@@ -15,3 +17,22 @@ export const shouldUpdateScroll = ({ routerProps: { location } }) => {
 
   return true
 }
+
+// Logs when the client route changes
+export const onRouteUpdate = ({ location, prevLocation }) => {
+  console.log("new pathname", location.pathname)
+  console.log("old pathname", prevLocation ? prevLocation.pathname : null)
+}
+
+export const wrapRootElement = ({ element }) => {
+  return <>{element}</>
+}
+
+wrapRootElement.propTypes = {
+  element: PropTypes.element,
+}
+
+// Wraps every page in a component
+export const wrapPageElement = ({ element, props }) => {
+  return <Layout {...props}>{element}</Layout>
+}

gatsby-config.js

@@ -42,7 +42,15 @@ module.exports = {
 
     `gatsby-transformer-json`,
     `gatsby-transformer-sharp`,
-    `gatsby-plugin-sharp`,
+    {
+      resolve: `gatsby-plugin-sharp`,
+      options: {
+        defaults: {
+          placeholder: `none`,
+          backgroundColor: `white`,
+        },
+      },
+    },
     `gatsby-plugin-image`,
     `gatsby-plugin-less`,
     {
@@ -66,11 +74,6 @@ module.exports = {
       },
     },
     `gatsby-plugin-styled-components`,
-    {
-      resolve: `gatsby-plugin-create-client-paths`,
-      options: { prefixes: [`/edit/*`] },
-    },
-
     {
       resolve: `gatsby-plugin-csp`,
       options: {

gatsby-ssr.js

@@ -8,6 +8,7 @@
 
 import React from "react"
 import PropTypes from "prop-types"
+import Layout from "./src/components/layout"
 
 export const wrapRootElement = ({ element }) => {
   return <>{element}</>
@@ -16,3 +17,8 @@ export const wrapRootElement = ({ element }) => {
 wrapRootElement.propTypes = {
   element: PropTypes.element,
 }
+
+// Wraps every page in a component
+export const wrapPageElement = ({ element, props }) => {
+  return <Layout {...props}>{element}</Layout>
+}

jest.config.js

@@ -18,6 +18,8 @@ module.exports = {
   globals: {
     __PATH_PREFIX__: ``,
   },
-  testURL: `http://localhost`,
+  testEnvironmentOptions: {
+    url: `http://localhost`,
+  },
   setupFiles: [`<rootDir>/test/jest.setup.js`, `<rootDir>/test/loadershim.js`],
 }

package.json

@@ -17,64 +17,64 @@
     "@knight-lab/timelinejs": "^3.9.3",
     "@mapbox/geo-viewport": "^0.5.0",
     "@mapbox/mapbox-gl-draw": "^1.3.0",
-    "@reach/accordion": "^0.17.0",
-    "@reach/auto-id": "^0.17.0",
+    "@reach/accordion": "^0.18.0",
+    "@reach/auto-id": "^0.18.0",
     "@reach/combobox": "^0.18.0",
-    "@reach/disclosure": "^0.17.0",
-    "@reach/listbox": "^0.17.0",
-    "@reach/visually-hidden": "^0.17.0",
+    "@reach/disclosure": "^0.18.0",
+    "@reach/listbox": "^0.18.0",
+    "@reach/visually-hidden": "^0.18.0",
     "@turf/area": "^6.5.0",
     "@turf/bbox": "^6.5.0",
     "@turf/boolean-disjoint": "^6.5.0",
     "@turf/centroid": "^6.5.0",
     "@turf/envelope": "^6.5.0",
     "d3": "^7.3.0",
     "date-fns": "^2.28.0",
-    "gatsby": "^4.8.1",
-    "gatsby-plugin-create-client-paths": "^4.8.0",
-    "gatsby-plugin-csp": "^1.1.3",
-    "gatsby-plugin-google-gtag": "4.24.0",
-    "gatsby-plugin-image": "^2.8.1",
-    "gatsby-plugin-less": "6.25.0-next.0",
-    "gatsby-plugin-manifest": "^4.8.1",
-    "gatsby-plugin-offline": "^5.8.1",
-    "gatsby-plugin-postcss": "5.10.0",
-    "gatsby-plugin-react-helmet": "^5.8.0",
-    "gatsby-plugin-sharp": "^4.8.1",
-    "gatsby-plugin-styled-components": "^5.8.0",
-    "gatsby-plugin-typography": "^4.8.0",
-    "gatsby-source-filesystem": "^4.8.1",
-    "gatsby-transformer-json": "^4.8.0",
-    "gatsby-transformer-sharp": "^4.8.0",
+    "gatsby": "^5.13.7",
+    "gatsby-plugin-csp": "^1.1.4",
+    "gatsby-plugin-google-gtag": "5.13.1",
+    "gatsby-plugin-image": "^3.13.1",
+    "gatsby-plugin-less": "7.13.1",
+    "gatsby-plugin-manifest": "^5.13.1",
+    "gatsby-plugin-offline": "^6.13.2",
+    "gatsby-plugin-postcss": "6.13.1",
+    "gatsby-plugin-react-helmet": "^6.13.1",
+    "gatsby-plugin-sharp": "^5.13.1",
+    "gatsby-plugin-styled-components": "^6.13.1",
+    "gatsby-plugin-typography": "^5.13.1",
+    "gatsby-source-filesystem": "^5.13.1",
+    "gatsby-transformer-json": "^5.13.1",
+    "gatsby-transformer-sharp": "^5.13.1",
     "lodash.debounce": "^4.0.8",
     "mapbox-gl": "1.13.1",
     "nuka-carousel": "^4.8.4",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "react-datepicker": "^4.7.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-tooltip": "^5.26.3",
     "react-typography": "^0.16.20",
+    "sharp": "^0.33.4",
     "styled-components": "^5.3.3",
     "typography": "^0.16.21",
     "use-debounce": "^7.0.1",
     "wellknown": "^0.5.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.4",
-    "@babel/eslint-parser": "^7.17.0",
-    "@babel/preset-env": "^7.21.4",
-    "@babel/preset-typescript": "^7.21.4",
+    "@babel/core": "^7.25.2",
+    "@babel/eslint-parser": "^7.25.1",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-typescript": "^7.24.7",
     "@playwright/test": "1.31.2",
     "@quickbaseoss/babel-plugin-styled-components-css-namespace": "^1.0.1",
     "@testing-library/react-hooks": "^7.0.2",
     "axe-core": "^4.4.1",
     "axe-playwright": "^1.2.3",
     "babel-jest": "^29.5.0",
     "babel-plugin-istanbul": "^6.1.1",
-    "babel-plugin-styled-components": "^2.0.6",
-    "babel-preset-gatsby": "^2.8.1",
+    "babel-plugin-styled-components": "^2.1.4",
+    "babel-preset-gatsby": "^3.13.2",
     "eslint": "^8.10.0",
     "eslint-config-prettier": "^8.4.0",
     "eslint-config-react-app": "^7.0.0",
@@ -85,13 +85,14 @@
     "eslint-plugin-react": "^7.29.2",
     "eslint-plugin-react-hooks": "^4.3.0",
     "gatsby-plugin-perf-budgets": "^0.0.18",
-    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.26",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.32",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.5.1",
-    "jest-styled-components": "^7.0.8",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-styled-components": "^7.2.0",
     "postcss": "8.4.23",
     "prettier": "^2.5.1",
-    "react-test-renderer": "^17.0.1",
+    "react-test-renderer": "^18.3.1",
     "start-server-and-test": "^1.14.0"
   },
   "license": "MIT",
@@ -123,5 +124,6 @@
   },
   "overrides": {
     "playwright": "1.31.2"
-  }
+  },
+  "browserslist": "> 0.25%, not dead"
 }

playwright/e2e/campaign.spec.ts

@@ -11,6 +11,8 @@ test.describe("Campaign", () => {
   })
 
   test("provides information on the campaign", async () => {
+    const hero = await page.$("[data-cy=campaign-hero] h1");
+    await expect(hero).toBeTruthy();
     await expect(page.locator("[data-cy=campaign-hero] h1")).toBeVisible()
     await expect(page.locator("[data-cy=campaign-hero-header]")).toHaveCount(1)