Release/v1.0.2

.eslintignore

@@ -3,3 +3,4 @@
 public
 gatsby-browser.js
 gatsby-ssr.js
+yarn.lock

.eslintrc.json

@@ -11,13 +11,20 @@
     "ecmaFeatures": {
       "jsx": true
     },
-    "ecmaVersion": 12,
+    "ecmaVersion": 13,
     "sourceType": "module"
   },
   "plugins": [
     "react"
   ],
   "rules": {
+    "react/function-component-definition": [
+      2,
+      {
+        "namedComponents": "arrow-function",
+        "unnamedComponents": "arrow-function"
+      }
+    ],
     "react/prop-types": 0
   }
 }

.yarn/plugins/yarn-up-all-plugin.cjs

@@ -1 +1 @@
-module.exports={name:"yarn-up-all-plugin",factory:a=>{const{Configuration:b,Project:c}=a("@yarnpkg/core"),{Cli:d,Command:e}=a("clipanion"),f=a("yup"),g=a("@yarnpkg/plugin-essentials"),h=(a,b)=>a?`@${a}/${b}`:b,i=(a,b)=>{const c=[...a.values()];return b?c.filter(a=>{const c=h(a[1].scope,a[1].name);return!b.includes(c)}):c};class j extends e{async execute(){if(!g.default.commands)throw new Error("Yarn commands are not available!");const a=await b.find(this.context.cwd,this.context.plugins),{workspace:e}=await c.find(a,this.context.cwd),f=[...e.manifest.dependencies,...e.manifest.devDependencies],j=i(f,this.exclude?this.exclude.split(" "):null),k=j.map(a=>h(a[1].scope,a[1].name)),l=d.from(g.default.commands);return l.runExit(["up",...k],this.context)}}return j.addOption("exclude",e.String("--exclude")),j.addPath("up-all"),j.schema=f.object().shape({exclude:f.string()}),j.usage=e.Usage({description:"Yarn 2 plugin that will upgrade all dependencies to their latest version with one simple command",details:"This command will upgrade all dependencies to their latest version",examples:[["Upgrade all dependencies","yarn up-all"],["Upgrade all dependencies but exclude a single dependency","yarn up-all --exclude package"],["Upgrade all dependencies but exclude multiple dependencies","yarn up-all --exclude \"package1 package2\""]]}),{commands:[j]}}};
+module.exports={name:"yarn-up-all-plugin",factory:a=>{const{Configuration:b,Project:c}=a("@yarnpkg/core"),{Cli:d,Command:e,Option:f}=a("clipanion"),g=a("@yarnpkg/plugin-essentials"),h=a("typanion"),i=(a,b)=>a?`@${a}/${b}`:b,j=(a,b)=>{const c=[...a.values()];return b?c.filter(a=>{const c=i(a[1].scope,a[1].name);return!b.includes(c)}):c};class k extends e{constructor(){super(),this.exclude=f.String("-e,--exclude",{validator:h.isString()})}async execute(){if(!g.default.commands)throw new Error("Yarn commands are not available!");const a=await b.find(this.context.cwd,this.context.plugins),{workspace:e}=await c.find(a,this.context.cwd),f=[...e.manifest.dependencies,...e.manifest.devDependencies],h=j(f,this.exclude?this.exclude.split(" "):null),k=h.map(a=>i(a[1].scope,a[1].name)),l=d.from(g.default.commands);return l.runExit(["up",...k],this.context)}}return k.paths=[["up-all"]],k.usage={category:"Utilities",description:"Yarn 2 plugin that will upgrade all dependencies to their latest version with one simple command",details:"This command will upgrade all dependencies to their latest version. You can exclude certain dependencies from being upgraded by using the `-e,--exclude` option.",examples:[["Upgrade all dependencies","yarn up-all"],["Upgrade all dependencies but exclude a single dependency","yarn up-all --exclude package"],["Upgrade all dependencies but exclude a single dependency","yarn up-all -e package"],["Upgrade all dependencies but exclude multiple dependencies","yarn up-all --exclude \"package1 package2\""]]},{commands:[k]}}};

.yarnrc.yml

@@ -2,6 +2,6 @@ nodeLinker: node-modules
 
 plugins:
   - path: .yarn/plugins/yarn-up-all-plugin.cjs
-    spec: "https://github.com/e5mode/yarn-up-all/releases/download/1.0.5/index.js"
+    spec: "https://github.com/e5mode/yarn-up-all/releases/download/1.1.0/index.js"
 
-yarnPath: .yarn/releases/yarn-2.4.2.cjs
+yarnPath: .yarn/releases/yarn-3.1.1.cjs

README.md

@@ -23,6 +23,6 @@ yarn build
 
 ## About
 
-This website is maintained by CodeDead.
+This website is maintained by [CodeDead](https://codedead.com).
 
 Copyright © 2021 CodeDead

gatsby-config.js

@@ -14,10 +14,10 @@ module.exports = {
     author: 'CodeDead',
     github: 'https://github.com/CodeDead',
     twitter: 'https://twitter.com/C0DEDEAD',
-    reddit: 'https://reddit.com/r/CodeDead/',
     facebook: 'https://facebook.com/deadlinecodedead',
   },
   plugins: [
+    'gatsby-theme-material-ui',
     {
       resolve: 'gatsby-source-filesystem',
       options: {
@@ -60,7 +60,6 @@ module.exports = {
     'gatsby-plugin-catch-links',
     'gatsby-plugin-react-helmet',
     'gatsby-transformer-remark',
-    'gatsby-theme-material-ui',
     'gatsby-plugin-sitemap',
     'gatsby-plugin-robots-txt',
     'gatsby-plugin-image',

package.json

@@ -2,7 +2,7 @@
   "name": "codedead.com",
   "private": true,
   "description": "CodeDead Website",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "license": "0BSD",
   "scripts": {
     "build": "gatsby build",
@@ -14,39 +14,42 @@
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
   "dependencies": {
-    "@material-ui/core": "^4.11.4",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.58",
-    "axios": "^0.21.1",
-    "gatsby": "^3.6.2",
-    "gatsby-plugin-catch-links": "^3.6.0",
-    "gatsby-plugin-google-gtag": "^3.6.0",
-    "gatsby-plugin-image": "^1.6.0",
-    "gatsby-plugin-robots-txt": "^1.6.2",
-    "gatsby-plugin-sharp": "^3.6.0",
-    "gatsby-plugin-sitemap": "^4.2.0",
-    "gatsby-remark-images": "^5.3.0",
-    "gatsby-source-filesystem": "^3.6.0",
-    "gatsby-theme-material-ui": "^2.0.1",
-    "gatsby-transformer-remark": "^4.3.0",
-    "gatsby-transformer-sharp": "^3.6.0",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@mui/icons-material": "^5.2.5",
+    "@mui/material": "^5.2.8",
+    "axios": "^0.24.0",
+    "gatsby": "^4.5.3",
+    "gatsby-plugin-catch-links": "^4.5.0",
+    "gatsby-plugin-google-gtag": "^4.5.0",
+    "gatsby-plugin-image": "^2.5.2",
+    "gatsby-plugin-react-helmet": "^5.5.0",
+    "gatsby-plugin-robots-txt": "^1.7.0",
+    "gatsby-plugin-sharp": "^4.5.2",
+    "gatsby-plugin-sitemap": "^5.5.0",
+    "gatsby-remark-images": "^6.5.2",
+    "gatsby-source-filesystem": "^4.5.2",
+    "gatsby-theme-material-ui": "^5.1.0",
+    "gatsby-transformer-remark": "^5.5.2",
+    "gatsby-transformer-sharp": "^4.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0"
   },
   "devDependencies": {
-    "eslint": "^7.28.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0"
+    "eslint": "^8.7.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/CodeDead/codedead.com"
   },
   "bugs": {
     "url": "https://github.com/CodeDead/codedead.com/issues"
-  }
+  },
+  "packageManager": "yarn@3.1.1"
 }

src/components/AlertDialog/index.jsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogActions from '@material-ui/core/DialogActions';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
 
 const AlertDialog = ({
   title, content, ok, onClose,
@@ -28,9 +28,7 @@ const AlertDialog = ({
     >
       <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
       <DialogContent>
-        <DialogContentText id="alert-dialog-description">
-          {content}
-        </DialogContentText>
+        {content}
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose} color="primary" autoFocus>

src/components/Application/index.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import CardActionArea from '@material-ui/core/CardActionArea';
 import { navigate } from 'gatsby';
-import CardContent from '@material-ui/core/CardContent';
-import Typography from '@material-ui/core/Typography';
-import Card from '@material-ui/core/Card';
-import { CardMedia } from '@material-ui/core';
+import CardActionArea from '@mui/material/CardActionArea';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import Card from '@mui/material/Card';
+import CardMedia from '@mui/material/CardMedia';
+import CardHeader from '@mui/material/CardHeader';
 import { GatsbyImage } from 'gatsby-plugin-image';
-import CardHeader from '@material-ui/core/CardHeader';
 
 const Application = ({
   name, description, url, image,

src/components/BackButton/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Button from '@material-ui/core/Button';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import Button from '@mui/material/Button';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { navigate } from 'gatsby';
 
 const BackButton = ({ disabled, style }) => {

src/components/BlogList/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Grid from '@material-ui/core/Grid';
+import Grid from '@mui/material/Grid';
 import BlogPost from '../BlogPost';
 
 const BlogList = ({ blogPosts, style }) => (

src/components/BlogPost/index.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { navigate } from 'gatsby';
-import Card from '@material-ui/core/Card';
-import CardActionArea from '@material-ui/core/CardActionArea';
-import CardHeader from '@material-ui/core/CardHeader';
-import CardContent from '@material-ui/core/CardContent';
-import Typography from '@material-ui/core/Typography';
+import Card from '@mui/material/Card';
+import CardActionArea from '@mui/material/CardActionArea';
+import CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
 
 const BlogPost = ({
   title, path, abstract, date,

src/components/DefaultAppBar/index.jsx

@@ -1,37 +1,25 @@
 import React, { useContext, useState } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import MenuIcon from '@mui/icons-material/Menu';
 import { Link } from 'gatsby';
-import Brightness5Icon from '@material-ui/icons/Brightness5';
-import Brightness7Icon from '@material-ui/icons/Brightness7';
+import Brightness5Icon from '@mui/icons-material/Brightness5';
+import Brightness7Icon from '@mui/icons-material/Brightness7';
+import { useTheme } from '@mui/material/styles';
 import NavigationDrawer from '../NavigationDrawer';
 import { MainContext } from '../../contexts/MainContextProvider';
 import { setThemeIndex } from '../../reducers/MainReducer/Actions';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    flexGrow: 1,
-  },
-  menuButton: {
-    marginRight: theme.spacing(2),
-  },
-  title: {
-    flexGrow: 1,
-  },
-}));
-
 const DefaultAppBar = ({
   title,
 }) => {
   const [state, dispatch] = useContext(MainContext);
 
   const { themeIndex } = state;
 
-  const classes = useStyles();
+  const theme = useTheme();
   const [drawerOpen, setDrawerOpen] = useState(false);
 
   /**
@@ -42,12 +30,14 @@ const DefaultAppBar = ({
   };
 
   return (
-    <div className={classes.root}>
+    <div style={{ flexGrow: 1 }}>
       <AppBar position="static">
         <Toolbar>
           <IconButton
             edge="start"
-            className={classes.menuButton}
+            sx={{
+              marginRight: theme.spacing(2),
+            }}
             color="inherit"
             aria-label="menu"
             onClick={() => setDrawerOpen(true)}
@@ -66,7 +56,7 @@ const DefaultAppBar = ({
             </Typography>
           </Link>
 
-          <div className={classes.title} />
+          <div style={{ flexGrow: 1 }} />
 
           <IconButton color="inherit" onClick={changeTheme}>
             {themeIndex === 1 ? <Brightness5Icon /> : <Brightness7Icon />}

src/components/FacebookIcon/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 const FacebookIcon = () => (
   <SvgIcon>

src/components/Footer/index.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import BottomNavigation from '@material-ui/core/BottomNavigation';
-import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
-import { SvgIcon } from '@material-ui/core';
+import BottomNavigation from '@mui/material/BottomNavigation';
+import BottomNavigationAction from '@mui/material/BottomNavigationAction';
+import Paper from '@mui/material/Paper';
+import SvgIcon from '@mui/material/SvgIcon';
 import FacebookIcon from '../FacebookIcon';
 import TwitterIcon from '../TwitterIcon';
 import GitHubIcon from '../GithubIcon';
@@ -18,40 +19,47 @@ const Footer = ({ facebookUrl, githubUrl, twitterUrl }) => {
   };
 
   return (
-    <BottomNavigation
-      showLabels
-      style={{
-        position: 'fixed', bottom: 0, width: '100%',
+    <Paper
+      sx={{
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        right: 0,
       }}
+      elevation={3}
     >
-      <BottomNavigationAction
-        icon={(
-          <SvgIcon>
-            <FacebookIcon />
-          </SvgIcon>
-        )}
-        label="Facebook"
-        onClick={() => openSite(facebookUrl)}
-      />
-      <BottomNavigationAction
-        icon={(
-          <SvgIcon>
-            <TwitterIcon />
-          </SvgIcon>
-        )}
-        label="Twitter"
-        onClick={() => openSite(twitterUrl)}
-      />
-      <BottomNavigationAction
-        icon={(
-          <SvgIcon>
-            <GitHubIcon />
-          </SvgIcon>
-        )}
-        label="GitHub"
-        onClick={() => openSite(githubUrl)}
-      />
-    </BottomNavigation>
+      <BottomNavigation
+        showLabels
+      >
+        <BottomNavigationAction
+          icon={(
+            <SvgIcon>
+              <FacebookIcon />
+            </SvgIcon>
+          )}
+          label="Facebook"
+          onClick={() => openSite(facebookUrl)}
+        />
+        <BottomNavigationAction
+          icon={(
+            <SvgIcon>
+              <TwitterIcon />
+            </SvgIcon>
+          )}
+          label="Twitter"
+          onClick={() => openSite(twitterUrl)}
+        />
+        <BottomNavigationAction
+          icon={(
+            <SvgIcon>
+              <GitHubIcon />
+            </SvgIcon>
+          )}
+          label="GitHub"
+          onClick={() => openSite(githubUrl)}
+        />
+      </BottomNavigation>
+    </Paper>
   );
 };