chore: update deps

package.json

@@ -15,28 +15,27 @@
 		]
 	},
 	"dependencies": {
-		"@emotion/css": "^11.9.0",
+		"@emotion/css": "^11.11.2",
-		"classnames": "^2.3.1",
+		"date-fns": "^2.30.0",
-		"date-fns": "^2.28.0",
+		"framer-motion": "^10.16.4",
-		"framer-motion": "^6.3.15",
+		"gm": "^1.25.0",
-		"gm": "^1.23.1",
 		"imagen": "github:MKRhere/imagen",
-		"marked": "^4.0.17",
+		"marked": "^9.0.3",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"react-router-dom": "^6.3.0"
+		"react-router-dom": "^6.16.0"
 	},
 	"devDependencies": {
-		"@svgr/rollup": "^6.2.1",
+		"@svgr/rollup": "^8.1.0",
-		"@types/gm": "^1.18.12",
+		"@types/gm": "^1.25.2",
-		"@types/marked": "^4.0.3",
+		"@types/marked": "^5.0.2",
-		"@types/node": "^18.0.0",
+		"@types/node": "^20.8.0",
-		"@types/react": "^18.0.14",
+		"@types/react": "^18.2.24",
-		"@types/react-dom": "^18.0.5",
+		"@types/react-dom": "^18.2.8",
 		"@types/react-router-dom": "^5.3.3",
-		"@vitejs/plugin-react": "^1.3.2",
+		"@vitejs/plugin-react": "^4.1.0",
 		"react-scripts": "5.0.1",
-		"typescript": "^4.7.4",
+		"typescript": "^5.2.2",
-		"vite": "^2.9.12"
+		"vite": "^4.4.9"
 	}
 }

src/components/Timeline.tsx

@@ -2,7 +2,12 @@ import React, { useMemo } from "react";
 import { css, cx } from "@emotion/css";
 import { format, isBefore, startOfDay } from "date-fns";
 
-export type TimelineUnit = { title?: string; url?: string; img?: string; date: string };
+export type TimelineUnit = {
+	title?: string;
+	url?: string;
+	img?: string;
+	date: string;
+};
 export type TimelineUnits = TimelineUnit[];
 
 const unit = css`
@@ -82,7 +87,11 @@ const tlcontainer = css`
 		bottom: 0;
 		left: 0;
 		background: rgb(0, 0, 0);
-		background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
+		background: linear-gradient(
+			0deg,
+			rgba(0, 0, 0, 1) 0%,
+			rgba(0, 0, 0, 0) 100%
+		);
 	}
 `;
 
@@ -107,7 +116,9 @@ const Unit: React.FC<{ contents: TimelineUnit }> = ({ contents }) => {
 					`,
 			)}
 			onClick={() =>
-				contents.url ? window.open(contents.url, "_blank", `noreferrer, noopener`) : ""
+				contents.url
+					? window.open(contents.url, "_blank", `noreferrer, noopener`)
+					: ""
 			}>
 			{contents.title ? <h4>{contents.title}</h4> : ""}
 			<h3>{format(date, "h:mm a")}</h3>

src/pages/blog/Home.tsx

@@ -1,4 +1,4 @@
-import { css } from "@emotion/css";
+import { css, cx } from "@emotion/css";
 import React, { useEffect, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { Spacer } from "../../components/Spacer";
@@ -6,7 +6,6 @@ import { ArticleSubHeader } from "./components/ArticleSubHeader";
 import { BlogPost } from "./components/BlogContent";
 import { articles, getBlogPath } from "../../data";
 import { ReactComponent as DrawClose } from "../../assets/arrow-thin.svg";
-import classNames from "classnames";
 
 const Header: React.FC = () => {
 	return (
@@ -84,7 +83,7 @@ const BlogHome: React.FC = () => {
 		<div
 			data-home
 			key="blog-home"
-			className={classNames(
+			className={cx(
 				{ "article-open": isArticleOpen, "aside-closed": isAsideClosed },
 				css`
 					display: flex;
@@ -132,7 +131,7 @@ const BlogHome: React.FC = () => {
 			)}>
 			<button
 				onClick={() => setAsideClosed(closed => !closed)}
-				className={classNames(
+				className={cx(
 					"draw-ctl",
 					css`
 						border: none;
@@ -160,7 +159,7 @@ const BlogHome: React.FC = () => {
 				)}>
 				<DrawClose
 					style={{ width: "2.6rem", height: "1rem" }}
-					className={classNames(
+					className={cx(
 						css`
 							transform: rotate(180deg);
 							transition: transform 100ms;
@@ -182,7 +181,7 @@ const BlogHome: React.FC = () => {
 					overflow-y: auto;
 				`}>
 				<div
-					className={classNames(
+					className={cx(
 						"blog-list",
 						css`
 							width: 100%;
@@ -240,7 +239,7 @@ const BlogHome: React.FC = () => {
 				</div>
 			</aside>
 			<article
-				className={classNames(
+				className={cx(
 					{ "article-open": isArticleOpen },
 					css`
 						height: 100%;
@@ -259,7 +258,7 @@ const BlogHome: React.FC = () => {
 				)}>
 				<div
 					key="blog-content"
-					className={classNames(
+					className={cx(
 						css`
 							background: #111111;
 							position: absolute;

src/pages/main/Exp.tsx

@@ -132,7 +132,9 @@ const Exp: React.FC = () => {
 	return (
 		<Container next="/projects">
 			<h2>I’m a {age} year old developer from Chennai, India.</h2>
-			<p>Here are some places I’ve worked at in reverse chronological order:</p>
+			<p>
+				Here are some places I’ve worked at, in reverse chronological order:
+			</p>
 			<div
 				className={css`
 					display: flex;