upgrade a bunch of deps and fix weird hydration error in dev

.README.template.md

@@ -1,11 +1,37 @@
-## install
+## instructioms
+
+![jinx the cat my beolved](components/assets/jinx.png)
 
 ### repository
 
-The latest automatic release is always on https://juke.fr
+the latest "automatic" (me copying over sftp manually) release is always on https://juke.fr
 
 ```bash
 $ git clone https://code.juke.fr/kay/juke-fr.git
 
 $ yarn
+
+$ yarn dev
+```
+
+### test suite
+
+playwright is used for testing
+
+```bash
+$ yarn test:setup # only needed once to download the browsers
+
+$ yarn test
 ```
+
+playwright is cool because it gives you traces with screenshots you can go through step by step so yeah
+
+### tested upgrade
+
+the test suite can be used with npm-check-updates to mass upgrade the node modules and make sure stuff still (at least somewhat) works
+
+```bash
+$ yarn tested-upgrade
+```
+
+it will upgrade all the packages then run the test and do them one by one incrementally if that fails and not do any of the ones that makes the tests fail

components/Navbar.tsx

@@ -22,7 +22,7 @@ const Navbar = () => {
     <nav>
       <Flex mt={6} mb={12} alignItems="bottom">
         <NextLink href="/" passHref scroll={false}>
-          <Button variant="ghost" mr={3} as="a">
+          <Button variant="ghost" mr={3}>
             {' '}
             <Heading letterSpacing={'tighter'} size="md" as="h1">
               {'juke'}
@@ -30,7 +30,7 @@ const Navbar = () => {
           </Button>
         </NextLink>
         <NextLink href="/about" passHref scroll={false}>
-          <Button variant="ghost" as="a">
+          <Button variant="ghost">
             <Text>about</Text>
           </Button>
         </NextLink>

next.config.js

@@ -7,12 +7,10 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 const nextConfig = {
   reactStrictMode: true,
   // i18n: {
-    // locales: ['en'],
-    // defaultLocale: 'en',
+  //   locales: ['en'],
+  //   defaultLocale: 'en',
   // },
-  experimental: {
-    outputStandalone: true,
-  },
+  output: 'standalone',
   webpack: (config, {}) => {
     config.module.rules.push({
       test: /\.(glsl|vs|fs|vert|frag)$/,
@@ -25,15 +23,15 @@ const nextConfig = {
 
     return config;
   },
-  exportPathMap: async function (
-    defaultPathMap,
-    { dev, dir, outDir, distDir, buildId }
-  ) {
-    return {
-      '/': { page: '/' },
-      '/about': { page: '/about' },
-    }
-  },
+  // exportPathMap: async function (
+  //   defaultPathMap,
+  //   { dev, dir, outDir, distDir, buildId },
+  // ) {
+  //   return {
+  //     '/': { page: '/' },
+  //     '/about': { page: '/about' },
+  //   };
+  // },
 };
 
 module.exports = withBundleAnalyzer(nextConfig);

package.json

@@ -15,57 +15,60 @@
     "dev": "next dev",
     "lint": "next lint",
     "test:setup": "npx playwright install",
-    "test": "yarn build && yarn test:setup && playwright test"
+    "test": "yarn build && playwright test",
+    "tested-upgrade": "ncu -du --doctorInstall 'yarn' --doctorTest 'yarn test'"
   },
   "devDependencies": {
-    "@chakra-ui/icons": "^2.0.2",
+    "@chakra-ui/icons": "^2.0.17",
     "@chakra-ui/react": "^2.2.1",
     "@chakra-ui/utils": "^2.0.2",
-    "@emotion/react": "^11.9.3",
-    "@emotion/styled": "^11.9.3",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
     "@kay/komponents": "1.7.0",
-    "@next/bundle-analyzer": "^12.1.6",
-    "@next/eslint-plugin-next": "^12.1.6",
-    "@playwright/test": "^1.22.2",
+    "@next/bundle-analyzer": "^13.1.6",
+    "@next/eslint-plugin-next": "^13.1.6",
+    "@playwright/test": "^1.30.0",
     "@react-three/a11y": "^3.0.0",
-    "@react-three/fiber": "^8.0.27",
-    "@reduxjs/toolkit": "^1.8.2",
-    "@types/node": "^18.0.0",
+    "@react-three/fiber": "^8.10.1",
+    "@reduxjs/toolkit": "^1.9.2",
+    "@types/node": "^18.11.18",
     "@types/prismjs": "^1.26.0",
-    "@types/react": "^18.0.14",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
     "@types/react-lazy-load-image-component": "^1.5.2",
-    "@types/three": "^0.141.0",
-    "@typescript-eslint/eslint-plugin": "^5.29.0",
-    "@typescript-eslint/parser": "^5.29.0",
+    "@types/three": "^0.148.1",
+    "@typescript-eslint/eslint-plugin": "^5.49.0",
+    "@typescript-eslint/parser": "^5.49.0",
     "babel-plugin-prismjs": "^2.1.0",
-    "console-feed": "^3.3.0",
-    "eslint": "^8.18.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "console-feed": "^3.4.3",
+    "eslint": "^8.33.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.30.1",
-    "framer-motion": "^6.3.15",
-    "next": "^12.1.6",
-    "prettier": "^2.7.1",
+    "framer-motion": "^8.5.4",
+    "next": "^13.1.6",
+    "npm-check-updates": "^16.6.3",
+    "prettier": "^2.8.3",
     "prism-themes": "^1.9.0",
-    "prismjs": "^1.28.0",
+    "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-konami-code": "^2.3.0",
-    "react-lazy-load-image-component": "^1.5.4",
-    "react-markdown": "^8.0.3",
-    "react-redux": "^8.0.2",
-    "react-simple-code-editor": "^0.11.2",
-    "react-spring": "^9.4.5",
-    "three": "^0.141.0",
-    "typescript": "^4.7.4"
+    "react-lazy-load-image-component": "^1.5.6",
+    "react-markdown": "^8.0.5",
+    "react-redux": "^8.0.5",
+    "react-simple-code-editor": "^0.13.1",
+    "react-spring": "^9.6.1",
+    "sharp": "^0.31.3",
+    "three": "^0.149.0",
+    "typescript": "^4.9.4"
   },
   "dependencies": {
-    "@semantic-release/changelog": "^6.0.1",
+    "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/gitlab": "^9.3.2",
-    "@semantic-release/npm": "^9.0.1",
-    "semantic-release": "^19.0.3",
+    "@semantic-release/gitlab": "^10.0.2",
+    "@semantic-release/npm": "^9.0.2",
+    "semantic-release": "^20.1.0",
     "semantic-release-cli": "^5.4.4"
   }
 }