Update (#21)

* Update dependencies including Gatsby
ryanwiemer · Sep 15, 2023 · d79b615 · d79b615
1 parent 1cbc15c
commit d79b615
Show file tree

Hide file tree

Showing 11 changed files with 6,196 additions and 6,725 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # [ryanwiemer.com](https://www.ryanwiemer.com)
 
-- © Copyright 2021 Ryan Wiemer
+- © Copyright 2023 Ryan Wiemer
 - [Inter typeface](https://rsms.me/inter/) by Rasmus Andersson
 
 ## Learning In Public
@@ -9,6 +9,6 @@
 
 If you want a starter template for Gatsby, Contentful and Netlify check out my **MIT LICENSED** repo: https://github.com/ryanwiemer/gatsby-starter-gcn.
 
-If you still have any questions feel free to contact me:
+If you still have any questions feel free to reach out via my contact form:
 
 👉 **[https://www.ryanwiemer.com/contact/](https://www.ryanwiemer.com/contact/)**
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -39,13 +39,15 @@ module.exports = {
     'gatsby-plugin-theme-ui',
     'gatsby-plugin-twitter',
     'gatsby-plugin-sitemap',
-    'gatsby-plugin-offline',
     {
       resolve: `gatsby-plugin-google-gtag`,
       options: {
-        trackingIds: [process.env.GOOGLE_ANALYTICS],
+        trackingIds: [
+          process.env.GOOGLE_ANALYTICS || 'GA-TRACKING_ID', // Google Analytics / GA
+        ],
         pluginConfig: {
           head: true,
+          delayOnRouteUpdate: 350, // Delays processing pageview events on route update (in milliseconds)
         },
       },
     },
@@ -72,5 +74,6 @@ module.exports = {
       options: contentfulConfig,
     },
     'gatsby-plugin-netlify',
+    'gatsby-plugin-remove-serviceworker',
   ],
 }
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "rw",
   "description": "Ryan Wiemer's online portfolio",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "author": "Ryan Wiemer <[email protected]>",
   "keywords": [
     "rw"
@@ -10,43 +10,46 @@
   "homepage": "https://www.ryanwiemer.com/",
   "dependencies": {
     "@emotion/core": "^11.0.0",
-    "@emotion/react": "^11.7.0",
-    "@emotion/styled": "^11.6.0",
-    "babel-plugin-styled-components": "^2.0.2",
-    "framer-motion": "^5.3.3",
-    "gatsby": "^4.3.0",
-    "gatsby-plugin-emotion": "^7.3.0",
-    "gatsby-plugin-gatsby-cloud": "^4.3.0",
-    "gatsby-plugin-google-gtag": "4.3.0",
-    "gatsby-plugin-image": "^2.3.0",
-    "gatsby-plugin-manifest": "^4.3.0",
-    "gatsby-plugin-netlify": "^3.14.0",
-    "gatsby-plugin-offline": "^5.3.0",
-    "gatsby-plugin-react-helmet": "^5.3.0",
-    "gatsby-plugin-sharp": "^4.3.0",
-    "gatsby-plugin-sitemap": "^5.3.0",
-    "gatsby-plugin-theme-ui": "^0.12.1",
-    "gatsby-plugin-twitter": "^4.3.0",
-    "gatsby-remark-images-contentful": "^5.3.0",
-    "gatsby-remark-prismjs": "^6.3.0",
-    "gatsby-remark-responsive-iframe": "^5.3.0",
-    "gatsby-source-contentful": "^7.1.0",
-    "gatsby-source-filesystem": "^4.3.0",
-    "gatsby-transformer-remark": "^5.3.0",
-    "gatsby-transformer-sharp": "^4.3.0",
-    "prismjs": "^1.25.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mdx-js/react": "^2.3.0",
+    "@theme-ui/mdx": "^0.16.1",
+    "babel-plugin-styled-components": "^2.1.4",
+    "framer-motion": "^10.16.4",
+    "gatsby": "^5.12.4",
+    "gatsby-plugin-emotion": "^8.12.0",
+    "gatsby-plugin-gatsby-cloud": "^5.12.0",
+    "gatsby-plugin-google-gtag": "5.12.0",
+    "gatsby-plugin-image": "^3.12.0",
+    "gatsby-plugin-manifest": "^5.12.0",
+    "gatsby-plugin-netlify": "^5.1.0",
+    "gatsby-plugin-offline": "^6.12.0",
+    "gatsby-plugin-react-helmet": "^6.12.0",
+    "gatsby-plugin-remove-serviceworker": "^1.0.0",
+    "gatsby-plugin-sharp": "^5.12.0",
+    "gatsby-plugin-sitemap": "^6.12.0",
+    "gatsby-plugin-theme-ui": "^0.16.1",
+    "gatsby-plugin-twitter": "^5.12.0",
+    "gatsby-remark-images-contentful": "^6.12.0",
+    "gatsby-remark-prismjs": "^7.12.0",
+    "gatsby-remark-responsive-iframe": "^6.12.0",
+    "gatsby-source-contentful": "^8.12.0",
+    "gatsby-source-filesystem": "^5.12.0",
+    "gatsby-transformer-remark": "^6.12.0",
+    "gatsby-transformer-sharp": "^5.12.0",
+    "prismjs": "^1.29.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "theme-ui": "^0.12.1"
+    "theme-ui": "^0.16.1"
   },
   "devDependencies": {
-    "eslint": "^8.3.0",
+    "eslint": "^8.49.0",
     "eslint-config-gatsby-standard": "^3.0.2",
-    "prettier": "^2.5.0",
-    "stylelint": "^14.1.0",
-    "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-standard": "^24.0.0",
+    "prettier": "^3.0.3",
+    "stylelint": "^15.10.3",
+    "stylelint-config-prettier": "^9.0.5",
+    "stylelint-config-standard": "^34.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.9.0"
   },

diff --git a/src/components/general/Transition.js b/src/components/general/Transition.js
@@ -11,9 +11,8 @@ const Transition = ({ children, location }) => {
     enter: {
       opacity: 1,
       transition: {
-        duration: duration,
-        delay: duration,
         when: 'beforeChildren',
+        duration: duration,
       },
     },
     exit: {
@@ -23,7 +22,7 @@ const Transition = ({ children, location }) => {
   }
 
   return (
-    <AnimatePresence>
+    <AnimatePresence mode="wait" onExitComplete={() => window.scrollTo(0, 0)}>
       <motion.main
         key={location.pathname}
         variants={variants}

diff --git a/src/components/templates/PostList.js b/src/components/templates/PostList.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import Link from 'gatsby-link'
+import { Link } from "gatsby"
 import styled from '@emotion/styled'
 
 const Wrapper = styled.div`

diff --git a/src/components/templates/Preview.js b/src/components/templates/Preview.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from '@emotion/styled'
-import Link from 'gatsby-link'
+import { Link } from "gatsby"
 import { GatsbyImage } from 'gatsby-plugin-image'
 
 const Wrapper = styled.div`

diff --git a/src/components/templates/WorkList.js b/src/components/templates/WorkList.js
@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
-import Link from 'gatsby-link'
+import { Link } from "gatsby"
 import styled from '@emotion/styled'
 import { GatsbyImage } from 'gatsby-plugin-image'
-import { motion, AnimateSharedLayout, AnimatePresence } from 'framer-motion'
+import { motion, AnimatePresence } from 'framer-motion'
 
 const Wrapper = styled.div`
   padding: 2.5em 1.5em;
@@ -154,7 +154,6 @@ const WorkList = (props) => {
       <Header>
         <Title>Selected Work</Title>
         <Row>
-          <AnimateSharedLayout>
             <AnimatePresence>
               <Button onClick={() => filter('All')}>
                 All
@@ -167,11 +166,9 @@ const WorkList = (props) => {
                 </Button>
               ))}
             </AnimatePresence>
-          </AnimateSharedLayout>
         </Row>
       </Header>
       <List>
-        <AnimateSharedLayout>
           <AnimatePresence>
             {projects.map(({ node: project }) => (
               <Item
@@ -194,7 +191,6 @@ const WorkList = (props) => {
               </Item>
             ))}
           </AnimatePresence>
-        </AnimateSharedLayout>
       </List>
     </Wrapper>
   )

diff --git a/src/gatsby/data/query.js b/src/gatsby/data/query.js
@@ -1,60 +1,60 @@
 module.exports.data = {
   posts: `{
-    allContentfulPost(sort: { fields: [date], order: DESC }) {
-      edges {
-        node {
-          title
-          id
-          slug
-          date(formatString: "MMMM DD, YYYY")
-          content {
-            childMarkdownRemark {
-              html
-              excerpt(format: PLAIN)
-            }
-          }
-          cover {
-            title
-            gatsbyImageData(width: 1800, placeholder: BLURRED, aspectRatio: 1.75)
+  allContentfulPost(sort: {date: DESC}) {
+    edges {
+      node {
+        title
+        id
+        slug
+        date(formatString: "MMMM DD, YYYY")
+        content {
+          childMarkdownRemark {
+            html
+            excerpt(format: PLAIN)
           }
         }
+        cover {
+          title
+          gatsbyImageData(width: 1800, placeholder: BLURRED, aspectRatio: 1.75)
+        }
       }
     }
-  }`,
+  }
+}`,
   projects: `{
-    allContentfulProject(sort: { fields: [date], order: DESC }) {
-      edges {
-        node {
-          title
-          id
-          slug
-          date(formatString: "MMMM DD, YYYY")
-          category
-          content {
-            childMarkdownRemark {
-              html
-              excerpt(format: PLAIN)
-            }
-          }
-          highlights
-          url
-          video {
-              id
-              title
-              file {
-                url
-              }
-            }
-          images {
-            title
-            gatsbyImageData(width: 1800, placeholder: BLURRED)
+  allContentfulProject(sort: {date: DESC}) {
+    edges {
+      node {
+        title
+        id
+        slug
+        date(formatString: "MMMM DD, YYYY")
+        category
+        content {
+          childMarkdownRemark {
+            html
+            excerpt(format: PLAIN)
           }
-          cover {
-            title
-            gatsbyImageData(width: 1800, placeholder: BLURRED, aspectRatio: 1.75)
+        }
+        highlights
+        url
+        video {
+          id
+          title
+          file {
+            url
           }
         }
+        images {
+          title
+          gatsbyImageData(width: 1800, placeholder: BLURRED)
+        }
+        cover {
+          title
+          gatsbyImageData(width: 1800, placeholder: BLURRED, aspectRatio: 1.75)
+        }
       }
     }
-  }`,
+  }
+}`,
 }
diff --git a/src/pages/notes.js b/src/pages/notes.js
@@ -20,33 +20,27 @@ const NotesPage = ({ data }) => {
   )
 }
 
-export const query = graphql`
-  query {
-    allContentfulPost(limit: 1000, sort: { fields: [date], order: DESC }) {
-      edges {
-        node {
+export const query = graphql`{
+  allContentfulPost(limit: 1000, sort: {date: DESC}) {
+    edges {
+      node {
+        title
+        id
+        slug
+        date(formatString: "MMMM DD, YYYY")
+        cover {
           title
-          id
-          slug
-          date(formatString: "MMMM DD, YYYY")
-          cover {
-            title
-            gatsbyImageData(
-              width: 1000
-              placeholder: BLURRED
-              aspectRatio: 1.75
-            )
-          }
-          content {
-            childMarkdownRemark {
-              html
-              excerpt(format: PLAIN)
-            }
+          gatsbyImageData(width: 1000, placeholder: BLURRED, aspectRatio: 1.75)
+        }
+        content {
+          childMarkdownRemark {
+            html
+            excerpt(format: PLAIN)
           }
         }
       }
     }
   }
-`
+}`
 
 export default NotesPage