Merge pull request #25 from CodeDead/feature/upgrades

feat: MUI upgrade, Yarn upgrade, refactoring, dependency upgrades

Author: CodeDead

.yarn/releases/yarn-4.3.1.cjs

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.3.1.cjs
+yarnPath: .yarn/releases/yarn-4.5.0.cjs

.yarn/releases/yarn-4.5.0.cjs

@@ -15,11 +15,12 @@
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^5.16.1",
-    "@mui/material": "^5.16.1",
-    "axios": "^1.7.2",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@fontsource/roboto": "^5.1.0",
+    "@mui/icons-material": "^6.1.1",
+    "@mui/material": "^6.1.1",
+    "axios": "^1.7.7",
     "gatsby": "^5.13.7",
     "gatsby-plugin-catch-links": "^5.13.1",
     "gatsby-plugin-google-gtag": "^5.13.1",
@@ -28,7 +29,7 @@
     "gatsby-plugin-robots-txt": "^1.8.0",
     "gatsby-plugin-sharp": "^5.13.1",
     "gatsby-plugin-sitemap": "^6.13.1",
-    "gatsby-remark-images": "^7.13.1",
+    "gatsby-remark-images": "^7.13.2",
     "gatsby-source-filesystem": "^5.13.1",
     "gatsby-theme-material-ui": "^5.3.0",
     "gatsby-transformer-remark": "^6.13.1",
@@ -38,11 +39,11 @@
     "react-helmet": "^6.1.0"
   },
   "devDependencies": {
-    "eslint": "^9.6.0",
+    "eslint": "^9.11.1",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.9.0",
-    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-react": "^7.37.0",
     "eslint-plugin-react-hooks": "^4.6.2"
   },
   "repository": {
@@ -52,5 +53,5 @@
   "bugs": {
     "url": "https://github.com/CodeDead/codedead.com/issues"
   },
-  "packageManager": "yarn@4.3.1"
+  "packageManager": "yarn@4.5.0"
 }

.yarnrc.yml

@@ -23,10 +23,10 @@ const Application = ({
   };
 
   return (
-    <Card style={{ height: '100%' }}>
+    <Card sx={{ height: '100%' }}>
       <CardActionArea
         onClick={goToUrl}
-        style={{ height: '100%' }}
+        sx={{ height: '100%' }}
       >
         <CardMedia
           title={name}
@@ -37,7 +37,7 @@ const Application = ({
           title={name}
         />
         <CardContent>
-          <Typography color="textSecondary" paragraph>
+          <Typography color="textSecondary" component="p">
             {description}
           </Typography>
         </CardContent>

package.json

@@ -1,13 +1,13 @@
 import React from 'react';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Grid2';
 import BlogPost from '../BlogPost';
 
-const BlogList = ({ blogPosts, style }) => (
-  <Grid container spacing={2} style={style}>
+const BlogList = ({ blogPosts}) => (
+  <Grid container spacing={2}>
     {blogPosts && blogPosts.map((item) => {
       const post = item.node.frontmatter;
       return (
-        <Grid item xs={12} md={12} lg={12} key={post.path}>
+        <Grid size={12} key={post.path}>
           <BlogPost
             title={post.title}
             abstract={post.abstract}

src/components/Application/index.jsx

@@ -9,9 +9,7 @@ import Typography from '@mui/material/Typography';
 const BlogPost = ({
   title, path, abstract, date,
 }) => (
-  <Card
-    elevation={2}
-  >
+  <Card elevation={2}>
     <CardActionArea onClick={() => navigate(path)}>
       <CardHeader title={title} subheader={<i>{date}</i>} />
       <CardContent>

src/components/BlogList/index.jsx

@@ -51,7 +51,7 @@ const Layout = ({ children }) => {
    * Go to the GDPR site
    */
   const gotoGdpr = () => {
-    navigate('http://ec.europa.eu/ipg/basics/legal/cookies/index_en.htm');
+    navigate('https://commission.europa.eu/resources-partners/europa-web-guide_en');
   };
 
   return (
@@ -62,8 +62,8 @@ const Layout = ({ children }) => {
       {hasAcceptedCookieNotice ? null : (
         <Alert
           severity="warning"
-          style={{
-            position: 'sticky', bottom: 0, marginTop: 10, zIndex: 1000,
+          sx={{
+            position: 'sticky', bottom: 0, mt: 5, zIndex: 1000,
           }}
         >
           <Typography>
@@ -75,7 +75,7 @@ const Layout = ({ children }) => {
             variant="contained"
             color="secondary"
             onClick={gotoGdpr}
-            style={{ marginRight: 5 }}
+            sx={{ mr: 1 }}
           >
             Decline
           </Button>

src/components/BlogPost/index.jsx

@@ -24,7 +24,7 @@ const PageHeader = ({ title, subTitle, backButton }) => {
             : null}
           {title}
         </Typography>
-        <Typography variant="h5" align="center" color="textSecondary" paragraph>
+        <Typography variant="h5" align="center" color="textSecondary" component="p">
           {subTitle}
         </Typography>
       </Container>

src/components/Layout/index.jsx

@@ -3,7 +3,10 @@ import { Helmet } from 'react-helmet';
 import { useStaticQuery, graphql } from 'gatsby';
 
 const SEO = ({
-  description, lang, meta, title,
+  description = '',
+  lang = 'en',
+  meta = [],
+  title,
 }) => {
   const { site } = useStaticQuery(
     graphql`
@@ -67,10 +70,4 @@ const SEO = ({
   );
 };
 
-SEO.defaultProps = {
-  lang: 'en',
-  meta: [],
-  description: '',
-};
-
 export default SEO;