website: upgrade to next 13

website/components/Navbar.tsx

@@ -17,7 +17,7 @@ import {
 import NavLink from "next/link";
 import { GoLightBulb } from "react-icons/go";
 import { FiGithub, FiSun } from "react-icons/fi";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import React from "react";
 import { AiOutlineMenu } from "react-icons/ai";
 import { BsHeartFill } from "react-icons/bs";

website/package.json

@@ -9,35 +9,35 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@babel/core": "^7.18.6",
-    "@chakra-ui/react": "^2.2.4",
-    "@chakra-ui/system": "^2.2.2",
-    "@chakra-ui/theme-tools": "^2.0.5",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
-    "@octokit/rest": "^19.0.3",
+    "@babel/core": "^7.22.10",
+    "@chakra-ui/react": "^2.8.0",
+    "@chakra-ui/system": "^2.6.0",
+    "@chakra-ui/theme-tools": "^2.1.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@octokit/rest": "^20.0.1",
     "@types/progress": "^2.0.5",
     "detect-browser": "^5.3.0",
-    "framer-motion": "^6",
+    "framer-motion": "^10",
     "gray-matter": "^4.0.3",
-    "next": "12.2.2",
-    "nextjs-progressbar": "^0.0.14",
+    "next": "13.4.19",
+    "nextjs-progressbar": "^0.0.16",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-icons": "^4.4.0",
-    "react-markdown": "^8.0.3",
+    "react-icons": "^4.10.1",
+    "react-markdown": "^8.0.7",
     "remark-gemoji": "^7.0.1",
     "remark-gfm": "^3.0.1",
-    "swr": "^1.3.0"
+    "swr": "^2.2.1"
   },
   "devDependencies": {
-    "@types/node": "18.0.5",
-    "@types/react": "18.0.15",
-    "@types/react-dom": "18.0.6",
-    "@types/react-syntax-highlighter": "^15.5.3",
-    "eslint": "8.20.0",
-    "eslint-config-next": "12.2.2",
-    "eslint-config-prettier": "^8.5.0",
-    "typescript": "4.7.4"
+    "@types/node": "20.5.3",
+    "@types/react": "18.2.21",
+    "@types/react-dom": "18.2.7",
+    "@types/react-syntax-highlighter": "^15.5.7",
+    "eslint": "8.47.0",
+    "eslint-config-next": "13.4.19",
+    "eslint-config-prettier": "^9.0.0",
+    "typescript": "5.1.6"
   }
 }

website/pages/about/index.tsx

@@ -9,7 +9,7 @@ import UserDetailedCard from "components/UserDetailedCard";
 import { octokit } from "configurations/ocotokit";
 import useSwr from "swr";
 
-const maintainers = ["KRTirtho", "RustyApple"];
+const maintainers = ["KRTirtho", "RustyApple", "raptag"];
 
 const About = () => {
   const { data } = useSwr("contributors", () =>

website/pages/index.tsx

@@ -7,7 +7,7 @@ import {
   useColorModeValue,
 } from "@chakra-ui/react";
 import DownloadButton from "components/DownloadButton";
-import Image from 'next/image';
+import Image from "next/legacy/image";
 
 const Root = () => {
   const textColor = useColorModeValue("#171717", "#f5f5f5");
@@ -23,7 +23,12 @@ const Root = () => {
           bgSize="contain"
           bgPos={useColorModeValue("right", "left")}
         >
-          <VStack mt="10" mx="6" spacing="4" alignItems={useColorModeValue("flex-start", "flex-end")}>
+          <VStack
+            mt="10"
+            mx="6"
+            spacing="4"
+            alignItems={useColorModeValue("flex-start", "flex-end")}
+          >
             <chakra.section
               p={{ base: "5", md: "0" }}
               borderRadius="2xl"
@@ -71,10 +76,10 @@ const Root = () => {
             <chakra.div maxW="600px">
               <Image
                 src="/headline-1.png"
-                m="10"
-                bgRepeat="no-repeat"
-                bgSize="contain"
-                h="60vh"
+                style={{
+                  backgroundRepeat: "no-repeat",
+                  backgroundSize: "contain",
+                }}
                 width="1020"
                 height="780"
                 layout="intrinsic"
@@ -167,7 +172,8 @@ const Root = () => {
           <div>
             <Heading size="lg">Download Now</Heading>
             <Text>
-              Download Spotube for every platform you want. It's available everywhere.
+              Download Spotube for every platform you want. It&apos;s available
+              everywhere.
             </Text>
           </div>
           <DownloadButton />