Update dependency versions to the latest ones (#28)

README.md

@@ -19,7 +19,7 @@ git submodule foreach git pull origin master
 
 ### Prerequisites
 
-- [Node.js v14+](https://nodejs.org/en/download/current/)
+- [Node.js v17+](https://nodejs.org/en/download/current/)
 
 ### Run website locally
 
@@ -49,20 +49,12 @@ npm start
 
 ### Generate the sitemap
 
-Using the npm package [`sitemap`](https://www.npmjs.com/package/sitemap)
-
-```
-npm install --save sitemap
-```
-
-and then a one-liner:
+Using the `npx` and npm package [`sitemap`](https://www.npmjs.com/package/sitemap), run a one-liner:
 
 ```
 echo "https://co2birth.date" > listofurls.txt && find out/co2 -name "*.html" -maxdepth 1 -type f | sed 's/out/https:\/\/co2birth.date/g' >> listofurls.txt && npx sitemap --index-base-url https://co2birth.date < listofurls.txt > out/sitemap.xml && rm -f listofurls.txt && gzip out/sitemap.xml
 ```
 
-
-
 ### Deploy to github pages
 
 Once everything works fine, deploy the website to GitHub Pages (branch: `gh-pages`)

assets/jss/styles.js

@@ -1,5 +1,6 @@
-import CssBaseline from '@material-ui/core/CssBaseline'
-import { makeStyles, darken, lighten } from '@material-ui/core/styles'
+import CssBaseline from '@mui/material/CssBaseline'
+import { darken, lighten } from '@mui/material/styles'
+import { makeStyles } from '@mui/styles'
 
 const CssStyles = () => {
   (makeStyles(({ palette, ...theme }) => ({

components/common/link.js

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import MuiLink from '@material-ui/core/Link'
+import MuiLink from '@mui/material/Link'
 import NextLink from 'next/link'
 import { useRouter } from 'next/router'
 import { forwardRef } from 'react'

layouts/footer.js

@@ -1,7 +1,7 @@
-import Grid from '@material-ui/core/Grid'
-import Box from '@material-ui/core/Box'
-import Typography from '@material-ui/core/Typography'
-import MuiLink from '@material-ui/core/Link'
+import Grid from '@mui/material/Grid'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import MuiLink from '@mui/material/Link'
 
 export const Copyright = ({ className }) => (
   <Box mt={3} py={3} align="center" className={className}>
@@ -112,7 +112,7 @@ export const FooterSection = () => (
           >
             Mykola Tunyk
           </MuiLink>
-        </li>       
+        </li>
         <li>
           Illustration:
           &nbsp;
@@ -135,8 +135,6 @@ export const FooterSection = () => (
             Alfonso López-Sanz
           </MuiLink>
         </li>
-
-
       </ul>
     </Grid>
   </Grid>

layouts/layout.js

@@ -1,5 +1,5 @@
 import Head from 'next/head'
-import Container from '@material-ui/core/Container'
+import Container from '@mui/material/Container'
 import { Fragment } from 'react'
 
 import Nav from './nav'

layouts/nav.js

@@ -1,9 +1,9 @@
 import React from 'react'
-import MuiLink from '@material-ui/core/Link'
-import Box from '@material-ui/core/Box'
-import Grid from '@material-ui/core/Grid'
-import GitHubIcon from '@material-ui/icons/GitHub'
-// import SvgIcon from '@material-ui/core/SvgIcon'
+import MuiLink from '@mui/material/Link'
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Grid'
+import GitHubIcon from '@mui/icons-material/GitHub'
+// import SvgIcon from '@mui/material/SvgIcon'
 
 // import WtfplSvg from '../assets/svg/wtfpl.svg'
 import LogoSvg from '../assets/svg/co2logo.svg'

layouts/theme.js

@@ -1,4 +1,4 @@
-import { createMuiTheme } from '@material-ui/core/styles'
+import { createTheme } from '@mui/material/styles'
 
 const options = {
   palette: {
@@ -39,7 +39,7 @@ const options = {
   },
 }
 
-const theme = createMuiTheme(options)
+const theme = createTheme(options)
 
 
 export default theme

lib/createEmotionCache.js

@@ -0,0 +1,5 @@
+import createCache from '@emotion/cache';
+
+export default function createEmotionCache() {
+  return createCache({ key: 'css' });
+}