From 78e2e9b9f4275e8147561371cc7c1511ed184fc4 Mon Sep 17 00:00:00 2001 From: Justin Po Date: Sat, 28 Oct 2023 15:59:50 +0800 Subject: [PATCH 1/5] upgrade to gatsby v5 and react 18 --- gatsby-browser.js | 13 +- gatsby-config.js | 16 +- package.json | 25 +- src/components/Footer/Footer.tsx | 14 - src/components/Header/Header.tsx | 16 +- src/components/Layout/Layout.tsx | 6 +- src/components/SEO/SEO.tsx | 103 - src/components/SEO/index.ts | 1 - src/components/index.ts | 1 - src/pages/404.tsx | 16 +- src/pages/about.tsx | 10 + src/pages/contact.tsx | 15 +- .../index.tsx | 5 +- src/pages/events/index.tsx | 15 +- .../index.tsx | 5 +- src/pages/index.tsx | 46 +- yarn.lock | 17352 +++++++--------- 17 files changed, 7369 insertions(+), 10290 deletions(-) delete mode 100644 src/components/SEO/SEO.tsx delete mode 100644 src/components/SEO/index.ts diff --git a/gatsby-browser.js b/gatsby-browser.js index b1e5c31..fd4f9be 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,7 +1,8 @@ -/** - * Implement Gatsby's Browser APIs in this file. - * - * See: https://www.gatsbyjs.org/docs/browser-apis/ - */ +import React from "react" +import { Layout } from "./src/components" -// You can delete this file if you're not using it +const wrapPageElement = ({ element, props }) => { + return {element} +} + +export { wrapPageElement } diff --git a/gatsby-config.js b/gatsby-config.js index c24ebac..10ee155 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -7,7 +7,7 @@ module.exports = { author: `@reactcebu`, }, plugins: [ - `gatsby-plugin-react-helmet`, + "gatsby-plugin-image", { resolve: `gatsby-source-filesystem`, options: { @@ -16,7 +16,16 @@ module.exports = { }, }, `gatsby-transformer-sharp`, - `gatsby-plugin-sharp`, + { + resolve: `gatsby-plugin-sharp`, + options: { + defaults: { + placeholder: "blurred", + quality: 100, + }, + }, + }, + "gatsby-transformer-sharp", { resolve: `gatsby-plugin-manifest`, options: { @@ -39,9 +48,6 @@ module.exports = { }, }, }, - // this (optional) plugin enables Progressive Web App + Offline functionality - // To learn more, visit: https://gatsby.dev/offline - // `gatsby-plugin-offline`, ], // for avoiding CORS while developing Netlify Functions locally diff --git a/package.json b/package.json index f3b78ea..e2842d8 100644 --- a/package.json +++ b/package.json @@ -8,23 +8,20 @@ "@types/body-scroll-lock": "^2.6.1", "@types/styled-components": "^5.1.1", "axios": "^0.19.2", - "babel-plugin-styled-components": "^1.10.7", + "babel-plugin-styled-components": "^2.1.4", "body-scroll-lock": "^3.1.5", - "gatsby": "^2.23.12", - "gatsby-image": "^2.4.9", - "gatsby-plugin-manifest": "^2.4.14", - "gatsby-plugin-offline": "^3.2.13", - "gatsby-plugin-react-helmet": "^3.3.6", - "gatsby-plugin-sharp": "^2.6.14", - "gatsby-plugin-styled-components": "^3.3.10", + "gatsby": "^5.8.0", + "gatsby-plugin-image": "^3.4.0", + "gatsby-plugin-manifest": "^5.8.0", + "gatsby-plugin-sharp": "^5.8.0", + "gatsby-plugin-styled-components": "^6.12.0", "gatsby-plugin-web-font-loader": "^1.0.4", - "gatsby-source-filesystem": "^2.3.14", - "gatsby-transformer-sharp": "^2.5.7", + "gatsby-source-filesystem": "^5.12.1", + "gatsby-transformer-sharp": "^5.8.0", "prop-types": "^15.7.2", - "react": "^16.12.0", - "react-dom": "^16.12.0", - "react-helmet": "^6.1.0", - "styled-components": "^5.1.1" + "react": "^18.2.0", + "react-dom": "^18.2.0", + "styled-components": "^6.1.0" }, "devDependencies": { "@types/aws-lambda": "^8.10.61", diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index fbe2e3c..7cf1146 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -2,15 +2,12 @@ import { Container, FooterContainer, MainFooter, - Top, - Center, Link, List, ListItem, } from "./Footer.styles" import React from "react" -import { graphql, useStaticQuery } from "gatsby" interface ComponentProps { siteTitle?: string @@ -68,17 +65,6 @@ const icons = [ export const Footer: React.FC = ({ siteTitle, }: ComponentProps) => { - const data = useStaticQuery(graphql` - query { - logo: file(relativePath: { eq: "logo.png" }) { - childImageSharp { - fluid(maxWidth: 300) { - ...GatsbyImageSharpFluid - } - } - } - } - `) return ( diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 356d3ac..24b6e9e 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -7,7 +7,7 @@ import { } from "./Header.styles" import { Link, graphql, useStaticQuery } from "gatsby" -import Img from "gatsby-image" +import { StaticImage } from "gatsby-plugin-image" import React, { useEffect, useRef, useState } from "react" import { disableBodyScroll, @@ -22,18 +22,6 @@ interface ComponentProps { export const Header: React.FC = ({ siteTitle, }: ComponentProps) => { - const data = useStaticQuery(graphql` - query { - logo: file(relativePath: { eq: "logo.png" }) { - childImageSharp { - fluid(maxWidth: 300) { - ...GatsbyImageSharpFluid - } - } - } - } - `) - const navRef = useRef(null) const [showMenu, setShowMenu] = useState(false) @@ -53,7 +41,7 @@ export const Header: React.FC = ({ return ( - {siteTitle} + { return ( -
{children}