Upgrade packages

.env.sample

@@ -1,8 +1,6 @@
 GATSBY_FIREBASE_API_KEY=<BUNCHofRandomNumbersAndChars>
-GATSBY_DEV_AUTH_DOMAIN=<name>.firebaseapp.com
-GATSBY_DEV_DATABASE_URL=https://<name>.firebaseio.com
-GATSBY_DEV_PROJECT_ID=<name>
-GATSBY_DEV_STORAGE_BUCKET=<name>.appspot.com
-GATSBY_DEV_MESSAGING_SENDER_ID=############
-
-GATSBY_CONFIRMATION_EMAIL_REDIRECT=https://<name>.firebaseapp.com
+GATSBY_AUTH_DOMAIN=<name>.firebaseapp.com
+GATSBY_DATABASE_URL=https://<name>.firebaseio.com
+GATSBY_PROJECT_ID=<name>
+GATSBY_STORAGE_BUCKET=<name>.appspot.com
+GATSBY_MESSAGING_SENDER_ID=############

README.md

@@ -49,7 +49,7 @@ Files are organized into these folders:
 
 `/components`: user interface pieces to construct the design and layout of the site  
 `/data`: local data transformed by Gatsby to become queryable by Gatsby's GraphQL data layer  
-`/img`: images used by places like landing pages that are optimized by gatsby-image and then queryable in the GraphQL layer  
+`/img`: images used by places like landing pages that are optimized by gatsby-plugin-image and then queryable in the GraphQL layer  
 `/pages`: public pages that can be seen by unauthenticated users and are completely server side rendered by Gatsby during `gatsby build`  
 `/routes`: private, client only routes only visible to authenticated users that are used by the app section of the journal  
 `/styles`: role based design tokens and theme definitions  

gatsby-browser.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { ThemeProvider as EmotionThemeProvider } from "emotion-theming"
+import { ThemeProvider as EmotionThemeProvider } from "@emotion/react"
 import Firebase, { FirebaseContext } from "components/firebase"
 import theme from "styles/theme"
 import ThemeTogglerContext, { ThemeToggler } from "components/context/theme"

gatsby-config.js

@@ -1,12 +1,11 @@
+require("dotenv").config();
+
 module.exports = {
   plugins: [
     `gatsby-plugin-react-helmet`,
     `gatsby-plugin-emotion`,
+    `gatsby-plugin-image`,
     // create routes for client side routing
-    {
-      resolve: `gatsby-plugin-create-client-paths`,
-      options: { prefixes: [`/app/*`] },
-    },
     // provide fonts from Google fonts
     // {
     //   resolve: `gatsby-plugin-prefetch-google-fonts`,
@@ -39,10 +38,9 @@ module.exports = {
         theme_color: `#FFF`,
         display: `standalone`,
         icon: `src/img/splash.png`,
+        cache_busting_mode: 'none'
       },
     },
-    // plugins for optimized images
-    `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
     {
       resolve: `gatsby-source-filesystem`,
@@ -52,6 +50,7 @@ module.exports = {
       },
     },
     // parse data from /src/data as Javascrip objects
+    `gatsby-transformer-sharp`,
     `gatsby-transformer-json`,
     {
       resolve: `gatsby-source-filesystem`,

gatsby-ssr.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { ThemeProvider } from "emotion-theming"
+import { ThemeProvider } from "@emotion/react"
 import Firebase, { FirebaseContext } from "./src/components/firebase"
 import theme from "./src/styles/theme"
 

package.json

@@ -3,25 +3,24 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/core": "^10.0.10",
-    "@emotion/styled": "^10.0.10",
-    "babel-plugin-emotion": "^10.0.9",
+    "@emotion/babel-plugin": "^11.10.0",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
     "date-fns": "^1.30.1",
-    "emotion-theming": "^10.0.10",
-    "firebase": "^5.9.0",
-    "gatsby": "^2.4.3",
-    "gatsby-image": "^2.1.0",
-    "gatsby-plugin-create-client-paths": "^2.0.5",
-    "gatsby-plugin-emotion": "^4.0.6",
-    "gatsby-plugin-manifest": "^2.1.1",
+    "firebase": "^8.9.1",
+    "firebase-tools": "^11.4.1",
+    "gatsby": "^4.20.0",
+    "gatsby-plugin-emotion": "^7.20.0",
+    "gatsby-plugin-image": "2.20.0",
+    "gatsby-plugin-manifest": "^4.20.0",
     "gatsby-plugin-module-resolver": "^1.0.3",
-    "gatsby-plugin-offline": "^2.1.0",
-    "gatsby-plugin-react-helmet": "^3.0.12",
-    "gatsby-plugin-sharp": "^2.0.37",
+    "gatsby-plugin-offline": "^5.20.0",
+    "gatsby-plugin-react-helmet": "^5.20.0",
+    "gatsby-plugin-sharp": "^4.20.0",
     "gatsby-plugin-web-font-loader": "^1.0.4",
-    "gatsby-source-filesystem": "^2.0.36",
-    "gatsby-transformer-json": "^2.1.11",
-    "gatsby-transformer-sharp": "^2.1.19",
+    "gatsby-source-filesystem": "^4.20.0",
+    "gatsby-transformer-json": "^4.20.0",
+    "gatsby-transformer-sharp": "^4.20.0",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-feather": "^1.1.6",

public/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><title data-react-helmet="true"></title><link rel="shortcut icon" href="/icons/icon-48x48.png?v=54c7134a7e5384a7327f957c04754c6d"/><link rel="manifest" href="/manifest.webmanifest"/><meta name="theme-color" content="#FFF"/><link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=54c7134a7e5384a7327f957c04754c6d"/><link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=54c7134a7e5384a7327f957c04754c6d"/><link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=54c7134a7e5384a7327f957c04754c6d"/><link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=54c7134a7e5384a7327f957c04754c6d"/><link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=54c7134a7e5384a7327f957c04754c6d"/><link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=54c7134a7e5384a7327f957c04754c6d"/><link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=54c7134a7e5384a7327f957c04754c6d"/><link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=54c7134a7e5384a7327f957c04754c6d"/><script src="/socket.io/socket.io.js"></script></head><body><noscript id="gatsby-noscript">This app works best with JavaScript enabled.</noscript><div id="___gatsby"></div><script src="/commons.js"></script></body></html>
+<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="note" content="environment=development"/><title data-react-helmet="true"></title><link rel="icon" href="/favicon-32x32.png?v=cc0ce901fd5ad5624af6690b0b976c50" type="image/png"/><link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous"/><meta name="theme-color" content="#FFF"/><link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=cc0ce901fd5ad5624af6690b0b976c50"/><link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=cc0ce901fd5ad5624af6690b0b976c50"/><link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=cc0ce901fd5ad5624af6690b0b976c50"/><link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=cc0ce901fd5ad5624af6690b0b976c50"/><link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=cc0ce901fd5ad5624af6690b0b976c50"/><link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=cc0ce901fd5ad5624af6690b0b976c50"/><link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=cc0ce901fd5ad5624af6690b0b976c50"/><link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=cc0ce901fd5ad5624af6690b0b976c50"/><script src="/socket.io/socket.io.js"></script></head><body><div id="___gatsby"></div><script src="/polyfill.js" nomodule=""></script><script src="/commons.js"></script></body></html>

src/components/App.js

@@ -2,7 +2,7 @@ import React, { Component } from "react"
 import { Router } from "@reach/router"
 import { compose } from "recompose"
 import styled from "@emotion/styled"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 import { SIZES } from "styles/constants"
 

src/components/Footer.js

@@ -2,7 +2,7 @@ import React from "react"
 import { Link } from "gatsby"
 import { css } from "@emotion/core"
 import styled from "@emotion/styled"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 import Logo from "components/Logo"
 

src/components/Icon.js

@@ -21,7 +21,7 @@ import {
   Sun,
   User,
 } from "react-feather"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 const IconBase = styled.div`
   display: flex;

src/components/Layout.js

@@ -3,7 +3,7 @@ import { Helmet } from "react-helmet"
 import { Global, css } from "@emotion/core"
 import styled from "@emotion/styled"
 
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 const Layout = ({ children, theme }) => (
   <>

src/components/Navbar.js

@@ -5,7 +5,7 @@ import styled from "@emotion/styled"
 /** @jsx jsx */
 import { jsx } from "@emotion/core"
 import { compose } from "recompose"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 import { SIZES } from "styles/constants"
 import { todayUrl, yearUrl } from "utils/date"

src/components/ResendNotice.js

@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "@emotion/styled"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 import { compose } from "recompose"
 
 import { withFirebase } from "components/firebase"

src/components/Seek.js

@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "@emotion/styled"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 import Icon from "components/Icon"
 import { H1 } from "components/elements"

src/components/SignOut.js

@@ -1,6 +1,6 @@
 import React from "react"
 import { compose } from "recompose"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 import { Button } from "components/elements"
 

src/components/elements.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 import { Link } from "gatsby"
 import styled from "@emotion/styled"
 

src/components/firebase/fire.js

@@ -6,11 +6,12 @@ import "firebase/firestore"
 // the prefix GATSBY_ is necessary here
 const config = {
   apiKey: process.env.GATSBY_FIREBASE_API_KEY,
-  authDomain: process.env.GATSBY_DEV_AUTH_DOMAIN,
-  databaseURL: process.env.GATSBY_DEV_DATABASE_URL,
-  projectId: process.env.GATSBY_DEV_PROJECT_ID,
-  storageBucket: process.env.GATSBY_DEV_STORAGE_BUCKET,
-  messagingSenderId: process.env.GATSBY_DEV_MESSAGING_SENDER_ID,
+  authDomain: process.env.GATSBY_AUTH_DOMAIN,
+  databaseURL: process.env.GATSBY_DATABASE_URL,
+  projectId: process.env.GATSBY_PROJECT_ID,
+  storageBucket: process.env.GATSBY_STORAGE_BUCKET,
+  messagingSenderId: process.env.GATSBY_MESSAGING_SENDER_ID,
+  appId: process.env.GATSBY_APP_ID,
 }
 
 class Firebase {

src/pages/[...].js

@@ -8,8 +8,9 @@ import Layout from "components/Layout"
    Context providers are moved to gatsby-browser.js
    to wrap the root element with necessary providers
    and context */
-export default () => (
+const app = () => (
   <Layout>
     <App />
   </Layout>
 )
+export default app;

src/pages/index.js

@@ -7,7 +7,7 @@ import Container from "components/container"
 // the landing page is generated like other Gatsby pages
 // other unprotected routes like /login, /privacy, etc
 // are completely server side rendered by gatsby build
-export default () => (
+const index = () => (
   <Layout>
     <SimpleNavbar />
     <Container>
@@ -15,3 +15,4 @@ export default () => (
     </Container>
   </Layout>
 )
+export default index

src/pages/login.js

@@ -3,7 +3,7 @@ import { navigate, Link } from "gatsby"
 import styled from "@emotion/styled"
 import { compose } from "recompose"
 import { format } from "date-fns"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 import { SimpleNavbar } from "components/Navbar"
 import { Input, Button, P } from "components/elements"
@@ -108,5 +108,3 @@ class LoginFormBase extends Component {
 const LoginForm = compose(withTheme)(LoginFormBase)
 
 export default withTheme(LoginPage)
-
-export { LoginForm }

src/pages/privacy.js

@@ -4,7 +4,7 @@ import { SimpleH1, SimpleH2, P, Em } from "components/elements"
 import Layout from "components/Layout"
 import Container from "components/container"
 import { SimpleNavbar } from "components/Navbar"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 const Terms = ({ theme }) => (
   <Layout>

src/pages/register.js

@@ -2,7 +2,7 @@ import React, { Component } from "react"
 import styled from "@emotion/styled"
 import { navigate, Link } from "gatsby"
 import { compose } from "recompose"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 import { SimpleNavbar } from "components/Navbar"
 import { Input, Button, P } from "components/elements"
@@ -151,5 +151,3 @@ class RegisterFormBase extends Component {
 const RegisterForm = compose(withTheme)(RegisterFormBase)
 
 export default withTheme(RegisterPage)
-
-export { RegisterForm }

src/pages/resetpassword.js

@@ -3,7 +3,7 @@ import { navigate, Link } from "gatsby"
 import styled from "@emotion/styled"
 import { compose } from "recompose"
 import { format } from "date-fns"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 import { SimpleNavbar } from "components/Navbar"
 import { Input, Button, P } from "components/elements"
@@ -99,5 +99,3 @@ class LoginFormBase extends Component {
 const LoginForm = compose(withTheme)(LoginFormBase)
 
 export default withTheme(LoginPage)
-
-export { LoginForm }

src/pages/terms.js

@@ -4,7 +4,7 @@ import { SimpleH1, SimpleH2, P, Em } from "components/elements"
 import Layout from "components/Layout"
 import Container from "components/container"
 import { SimpleNavbar } from "components/Navbar"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 const Terms = ({ theme }) => (
   <Layout>

src/routes/Day.js

@@ -5,7 +5,7 @@ import styled from "@emotion/styled"
 /** @jsx jsx */
 import { jsx, css, keyframes } from "@emotion/core"
 import { compose } from "recompose"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 import { withFirebase } from "components/firebase"
 import { withAuthentication } from "components/session"

src/routes/Search.js

@@ -3,7 +3,7 @@ import { Component } from "react"
 import { jsx, css, keyframes } from "@emotion/core"
 import styled from "@emotion/styled"
 import { compose } from "recompose"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 import { BeatLoader } from "react-spinners"
 
 import { AppLink as Link } from "components/elements"

src/routes/Start.js

@@ -1,9 +1,9 @@
 import React, { Component } from "react"
 import { Helmet } from "react-helmet"
 import { Link, StaticQuery, graphql } from "gatsby"
-import Img from "gatsby-image"
+import { GatsbyImage } from "gatsby-plugin-image"
 import styled from "@emotion/styled"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 import { SIZES } from "styles/constants"
 import { Button, P } from "components/elements"
@@ -116,42 +116,42 @@ class Start extends Component {
                   relativePath: { eq: "landing-graphic-light.png" }
                 ) {
                   childImageSharp {
-                    fluid(maxWidth: 320) {
-                      ...GatsbyImageSharpFluid
-                    }
+                    gatsbyImageData(layout: CONSTRAINED)
                   }
                 }
                 landingGraphicDark: file(
                   relativePath: { eq: "landing-graphic-dark.png" }
                 ) {
                   childImageSharp {
-                    fluid(maxWidth: 320) {
-                      ...GatsbyImageSharpFluid
-                    }
+                    gatsbyImageData(layout: CONSTRAINED)
                   }
                 }
               }
             `}
             render={data => {
               return theme.name === "LIGHT" ? (
-                <Img
+                <GatsbyImage
+                  alt="splash"
                   style={{
                     maxWidth: 320,
                     width: "100%",
                     maxHeight: 350,
                     height: "100%",
                   }}
-                  fluid={data.landingGraphicLight.childImageSharp.fluid}
+                  image={data.landingGraphicLight.childImageSharp.gatsbyImageData}
+                  layout="constrained"
                 />
               ) : (
-                <Img
+                <GatsbyImage
+                  alt="splash"
                   style={{
                     maxWidth: 320,
                     width: "100%",
                     maxHeight: 350,
                     height: "100%",
                   }}
-                  fluid={data.landingGraphicDark.childImageSharp.fluid}
+                  image={data.landingGraphicDark.childImageSharp.gatsbyImageData}
+                  layout="constrained"
                 />
               )
             }}
@@ -169,8 +169,8 @@ class Start extends Component {
           of the things you don't:
         </P>
         <FeatureGrid>
-          {features.map(feature => (
-            <FeatureRow>
+          {features.map((feature, index) => (
+            <FeatureRow key={index}>
               <div
                 style={{
                   display: "flex",

src/routes/User.js

@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "@emotion/styled"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 import { compose } from "recompose"
 import { format } from "date-fns"
 import { BeatLoader } from "react-spinners"

src/routes/Welcome.js

@@ -2,7 +2,7 @@ import React, { Component } from "react"
 import { Helmet } from "react-helmet"
 import { Link } from "gatsby"
 import styled from "@emotion/styled"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 import { getDayOfYear } from "date-fns"
 
 import { SIZES } from "styles/constants"

src/routes/Year.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react"
 import { addYears, subYears, format, isThisYear, getMonth } from "date-fns"
 import styled from "@emotion/styled"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 import { AppLink as Link } from "components/elements"
 import Seek from "components/Seek"