🎨 Upgrade to Next13 (deploy)

barbarbar338 · Nov 4, 2022 · 76de247 · 76de247
1 parent b522a91
commit 76de247
Show file tree

Hide file tree

Showing 60 changed files with 348 additions and 292 deletions.
diff --git a/.hintrc b/.hintrc
@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "no-inline-styles": "off"
+  }
+}
diff --git a/TODO b/TODO
diff --git a/components/AccountCard/index.tsx b/components/AccountCard/index.tsx
@@ -1,10 +1,10 @@
-import type { FC } from "react";
-import type { IconType } from "react-icons/lib";
 import { useLocaleParser } from "@libs/localeParser";
-import { useCopyToClipboard } from "react-use";
-import { toast } from "react-toastify";
 import classnames from "classnames";
 import Link from "next/link";
+import type { FC } from "react";
+import type { IconType } from "react-icons/lib";
+import { toast } from "react-toastify";
+import { useCopyToClipboard } from "react-use";
 
 export interface IAccountCardProps {
 	icon: IconType;
@@ -52,10 +52,8 @@ export const AccountCard: FC<IAccountCardProps> = ({
 	return (
 		<div>
 			{href ? (
-				<Link href={href} passHref>
-					<a target="_blank">
-						<Card />
-					</a>
+				<Link href={href} target="_blank">
+					<Card />
 				</Link>
 			) : (
 				<Card />

diff --git a/components/Apps/AppsCard/index.tsx b/components/Apps/AppsCard/index.tsx
@@ -1,7 +1,7 @@
-import type { FC } from "react";
-import type { IconType } from "react-icons/lib";
 import classnames from "classnames";
 import Link from "next/link";
+import type { FC } from "react";
+import type { IconType } from "react-icons/lib";
 
 export interface IAppsCardProps {
 	icon: IconType;

diff --git a/components/Apps/Minesweeper/MinesweeperBoard/index.tsx b/components/Apps/Minesweeper/MinesweeperBoard/index.tsx
@@ -1,10 +1,10 @@
-import { type FC, type MouseEvent, useState, useEffect } from "react";
-import { type ICell, reveal } from "@libs/apps/minesweeper/reveal";
-import { createMinesweeperBoard } from "@libs/apps/minesweeper/createMinesweeperBoard";
 import { MinesweeperCell } from "@components/Apps/Minesweeper/MinesweeperCell";
+import { createMinesweeperBoard } from "@libs/apps/minesweeper/createMinesweeperBoard";
+import { reveal, type ICell } from "@libs/apps/minesweeper/reveal";
 import { useLocaleParser } from "@libs/localeParser";
-import { toast } from "react-toastify";
 import Link from "next/link";
+import { useEffect, useState, type FC, type MouseEvent } from "react";
+import { toast } from "react-toastify";
 
 export const MinesweeperBoard: FC = () => {
 	const parser = useLocaleParser();

diff --git a/components/Apps/Minesweeper/MinesweeperCell/index.tsx b/components/Apps/Minesweeper/MinesweeperCell/index.tsx
@@ -1,7 +1,7 @@
-import type { FC, MouseEvent } from "react";
-import type { ICell } from "@libs/apps/minesweeper/reveal";
-import { randomColor } from "@libs/apps/minesweeper/randomColor";
 import { Circle } from "@components/Apps/Minesweeper/Circle";
+import { randomColor } from "@libs/apps/minesweeper/randomColor";
+import type { ICell } from "@libs/apps/minesweeper/reveal";
+import type { FC, MouseEvent } from "react";
 
 export interface IMinesweeperCell {
 	updateFlag: (

diff --git a/components/Apps/Tetris/index.tsx b/components/Apps/Tetris/index.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable no-mixed-spaces-and-tabs */
-import { type FC, useEffect, useState } from "react";
 import { useLocaleParser } from "@libs/localeParser";
-import { toast } from "react-toastify";
 import dynamic from "next/dynamic";
+import { useEffect, useState, type FC } from "react";
+import { toast } from "react-toastify";
 
 const Tetris = dynamic(() => import("react-simple-tetris"), { ssr: false });
 

diff --git a/components/Apps/TicTacToe/Board.tsx b/components/Apps/TicTacToe/Board.tsx
@@ -1,5 +1,5 @@
-import type { FC } from "react";
 import { Square } from "@components/Apps/TicTacToe/Square";
+import type { FC } from "react";
 
 export interface ITicTacToeBoard {
 	squares: string[];

diff --git a/components/Apps/TicTacToe/Square.tsx b/components/Apps/TicTacToe/Square.tsx
@@ -1,6 +1,6 @@
-import type { FC } from "react";
-import { FiX, FiCircle } from "react-icons/fi";
 import classNames from "classnames";
+import type { FC } from "react";
+import { FiCircle, FiX } from "react-icons/fi";
 
 export interface ISquare {
 	value: string;

diff --git a/components/Apps/TicTacToe/index.tsx b/components/Apps/TicTacToe/index.tsx
@@ -1,7 +1,7 @@
-import { type FC, useState } from "react";
-import { calculateWinner } from "@libs/apps/tictactoe/calculateWinner";
 import { TicTacToeBoard } from "@components/Apps/TicTacToe/Board";
+import { calculateWinner } from "@libs/apps/tictactoe/calculateWinner";
 import { useLocaleParser } from "@libs/localeParser";
+import { useState, type FC } from "react";
 import { toast } from "react-toastify";
 
 export const TicTacToeGame: FC = () => {

diff --git a/components/Blog/Categories/CategoryCard/index.tsx b/components/Blog/Categories/CategoryCard/index.tsx
@@ -1,6 +1,6 @@
-import type { FC } from "react";
 import type { ILabel } from "@libs/graphql";
 import Link from "next/link";
+import type { FC } from "react";
 
 export interface ICategoryCard {
 	category: ILabel;

diff --git a/components/Blog/Categories/index.tsx b/components/Blog/Categories/index.tsx
@@ -1,7 +1,7 @@
-import type { FC } from "react";
-import type { ILabel } from "@libs/graphql";
 import { CategoryCard } from "@components/Blog/Categories/CategoryCard";
+import type { ILabel } from "@libs/graphql";
 import { useLocaleParser } from "@libs/localeParser";
+import type { FC } from "react";
 
 export interface ICategories {
 	categories: ILabel[];

diff --git a/components/Blog/PinnedPosts/PinnedCard/index.tsx b/components/Blog/PinnedPosts/PinnedCard/index.tsx
@@ -1,7 +1,8 @@
-import type { FC } from "react";
 import type { IPost } from "@libs/graphql";
+import { shimmer } from "@libs/shimmer";
 import Image from "next/image";
 import Link from "next/link";
+import type { FC } from "react";
 
 export interface IPinnedCard {
 	post: IPost;
@@ -38,6 +39,8 @@ export const PinnedCard: FC<IPinnedCard> = ({ post }) => (
 					src={post.author.avatarUrl}
 					alt="avatar"
 					className="h-8 w-8 rounded-full object-cover"
+					blurDataURL={shimmer(32, 32)}
+					placeholder="blur"
 				/>
 				<Link href={`https://github.com/${post.author.login}`}>
 					<span className="mx-3 cursor-pointer text-sm text-gray-700 hover:underline dark:text-white">

diff --git a/components/Blog/PinnedPosts/index.tsx b/components/Blog/PinnedPosts/index.tsx
@@ -1,7 +1,7 @@
-import type { FC } from "react";
-import type { IPost } from "@libs/graphql";
 import { PinnedCard } from "@components/Blog/PinnedPosts/PinnedCard";
+import type { IPost } from "@libs/graphql";
 import { useLocaleParser } from "@libs/localeParser";
+import type { FC } from "react";
 
 interface IPinnedPosts {
 	posts: IPost[];

diff --git a/components/Blog/Posts/PostCard/index.tsx b/components/Blog/Posts/PostCard/index.tsx
@@ -1,10 +1,11 @@
-import type { FC } from "react";
 import type { IPost } from "@libs/graphql";
-import { FiCalendar, FiClock } from "react-icons/fi";
 import { useLocaleParser } from "@libs/localeParser";
+import { shimmer } from "@libs/shimmer";
 import { calculate } from "calculate-readtime";
 import Image from "next/image";
 import Link from "next/link";
+import type { FC } from "react";
+import { FiCalendar, FiClock } from "react-icons/fi";
 
 export interface IPostCard {
 	post: IPost;
@@ -45,6 +46,8 @@ export const PostCard: FC<IPostCard> = ({ post }) => {
 						<Link href={`https://github.com/${post.author.login}`}>
 							<span className="flex cursor-pointer items-center hover:underline">
 								<Image
+									placeholder="blur"
+									blurDataURL={shimmer(32, 32)}
 									width={32}
 									height={32}
 									src={post.author.avatarUrl}

diff --git a/components/Blog/Posts/index.tsx b/components/Blog/Posts/index.tsx
@@ -1,7 +1,7 @@
-import type { IPost } from "@libs/graphql";
-import type { FC } from "react";
 import { PostCard } from "@components/Blog/Posts/PostCard";
+import type { IPost } from "@libs/graphql";
 import { useLocaleParser } from "@libs/localeParser";
+import type { FC } from "react";
 
 export interface IPosts {
 	posts: IPost[];

diff --git a/components/Bookmarks/Bookmark/index.tsx b/components/Bookmarks/Bookmark/index.tsx
@@ -1,7 +1,7 @@
-import type { FC } from "react";
 import { useLocaleParser } from "@libs/localeParser";
 import moment from "moment";
 import Link from "next/link";
+import type { FC } from "react";
 
 export interface IBookmark {
 	id: number;

diff --git a/components/Bookmarks/index.tsx b/components/Bookmarks/index.tsx
@@ -1,6 +1,6 @@
-import type { FC } from "react";
-import { type IBookmark, Bookmark } from "@components/Bookmarks/Bookmark";
+import { Bookmark, type IBookmark } from "@components/Bookmarks/Bookmark";
 import { useLocaleParser } from "@libs/localeParser";
+import type { FC } from "react";
 
 export interface IBookmarks {
 	bookmarks: IBookmark[];

diff --git a/components/Git/Layout/index.tsx b/components/Git/Layout/index.tsx
@@ -1,10 +1,10 @@
-import type { FC, ReactNode } from "react";
+import { useLocaleParser } from "@libs/localeParser";
 import type { IRepo } from "@libs/rest";
-import { useCopyToClipboard } from "react-use";
+import Link from "next/link";
+import type { FC, ReactNode } from "react";
 import { FiCopy } from "react-icons/fi";
 import { toast } from "react-toastify";
-import { useLocaleParser } from "@libs/localeParser";
-import Link from "next/link";
+import { useCopyToClipboard } from "react-use";
 
 export interface IGitLayout {
 	children: ReactNode;

diff --git a/components/Home/About/FrameworkCard/index.tsx b/components/Home/About/FrameworkCard/index.tsx
@@ -1,8 +1,9 @@
-import type { FC } from "react";
 import type { IFramework } from "@libs/config";
 import { useLocaleParser } from "@libs/localeParser";
+import { shimmer } from "@libs/shimmer";
 import classNames from "classnames";
 import Image from "next/image";
+import type { FC } from "react";
 
 export interface IFrameworkCard {
 	framework: IFramework;
@@ -20,6 +21,8 @@ export const FrameworkCard: FC<IFrameworkCard> = ({ framework }) => {
 				)}
 			>
 				<Image
+					placeholder="blur"
+					blurDataURL={shimmer(32, 32)}
 					width={32}
 					height={32}
 					src={framework.icon}

diff --git a/components/Home/About/index.tsx b/components/Home/About/index.tsx
@@ -1,8 +1,8 @@
-import type { FC } from "react";
-import { FrameworkCard } from "@components/Home/About/FrameworkCard";
-import { useLocaleParser } from "@libs/localeParser";
 import { Dot } from "@components/Home/About/Dot";
+import { FrameworkCard } from "@components/Home/About/FrameworkCard";
 import { CONFIG } from "@libs/config";
+import { useLocaleParser } from "@libs/localeParser";
+import type { FC } from "react";
 
 export const About: FC = () => {
 	const parser = useLocaleParser();

diff --git a/components/Home/Contact/index.tsx b/components/Home/Contact/index.tsx
@@ -1,8 +1,8 @@
-import { type ChangeEvent, type FC, type FormEvent, useState } from "react";
-import { useLocaleParser } from "@libs/localeParser";
-import { toast } from "react-toastify";
 import { CONFIG } from "@libs/config";
+import { useLocaleParser } from "@libs/localeParser";
 import Link from "next/link";
+import { useState, type ChangeEvent, type FC, type FormEvent } from "react";
+import { toast } from "react-toastify";
 
 export const Contact: FC = () => {
 	const parser = useLocaleParser();
@@ -86,14 +86,14 @@ export const Contact: FC = () => {
 			</div>
 			<div className="-mx-4 flex flex-col justify-center lg:flex-row">
 				{CONFIG.CONTACT.map((social, idx) => (
-					<Link key={idx} href={social.href} passHref>
-						<a
-							target="_blank"
-							className="mx-2 flex cursor-pointer items-center px-4 hover:underline"
-						>
-							<social.icon className="mr-2 inline-block h-6 w-6 text-purple-600" />
-							{social.value}
-						</a>
+					<Link
+						key={idx}
+						href={social.href}
+						target="_blank"
+						className="mx-2 flex cursor-pointer items-center px-4 hover:underline"
+					>
+						<social.icon className="mr-2 inline-block h-6 w-6 text-purple-600" />
+						{social.value}
 					</Link>
 				))}
 			</div>

diff --git a/components/Home/Hero/Status/index.tsx b/components/Home/Hero/Status/index.tsx
@@ -1,8 +1,8 @@
-import type { FC } from "react";
-import { useLocaleParser } from "@libs/localeParser";
-import { useLanyard } from "react-use-lanyard";
 import { CONFIG } from "@libs/config";
+import { useLocaleParser } from "@libs/localeParser";
 import classnames from "classnames";
+import type { FC } from "react";
+import { useLanyard } from "react-use-lanyard";
 
 export const Status: FC = () => {
 	const parser = useLocaleParser();
@@ -49,13 +49,13 @@ export const Status: FC = () => {
 		switch (filtered.name) {
 			case "Spotify":
 				return parser.get("spotify_status", {
-					song: filtered.details,
+					song: filtered.details || "",
 					author: filtered.state,
-					album: filtered.assets.large_text,
+					album: filtered.assets?.large_text || "",
 				});
 			case "Visual Studio Code":
 				return parser.get("vscode_status", {
-					doing: filtered.details,
+					doing: filtered.details || "",
 					workspace: filtered.state,
 				});
 			default:

diff --git a/components/Home/Hero/index.tsx b/components/Home/Hero/index.tsx
@@ -1,9 +1,10 @@
-import type { FC } from "react";
 import { Status } from "@components/Home/Hero/Status";
-import { useLocaleParser } from "@libs/localeParser";
 import { CONFIG } from "@libs/config";
+import { useLocaleParser } from "@libs/localeParser";
+import { shimmer } from "@libs/shimmer";
 import Image from "next/image";
 import Link from "next/link";
+import type { FC } from "react";
 
 export const Hero: FC = () => {
 	const parser = useLocaleParser();
@@ -81,6 +82,8 @@ export const Hero: FC = () => {
 								className="w-full max-w-lg rounded-3xl object-cover md:h-128 md:w-128"
 								src={CONFIG.AVATAR_URL}
 								alt="Avatar"
+								placeholder="blur"
+								blurDataURL={shimmer(512, 512)}
 							/>
 						</div>
 					</div>