Merge pull request #607 from kduprey/dependabot/npm_and_yarn/vercel/s…

…tyle-guide-6.0.0 build(deps-dev): bump @vercel/style-guide from 5.1.0 to 6.0.0
kduprey · May 12, 2024 · b8a4d99 · b8a4d99
2 parents 8855fdf + c5a35c1
commit b8a4d99
Show file tree

Hide file tree

Showing 13 changed files with 997 additions and 285 deletions.
diff --git a/package.json b/package.json
@@ -50,7 +50,7 @@
 		"@types/jsonwebtoken": "^9.0.6",
 		"@types/node": "^20.12.10",
 		"@types/react": "^18.2.46",
-		"@vercel/style-guide": "^5.1.0",
+		"@vercel/style-guide": "^6.0.0",
 		"autoprefixer": "^10.4.19",
 		"eslint": "^8.57.0",
 		"eslint-config-next": "^14.2.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -16,7 +16,7 @@ const inter = Inter({
 
 const rootLayout = ({ children }: PropsWithChildren) => {
 	return (
-		<html className={`${inter.variable}`} lang="en">
+		<html className={inter.variable} lang="en">
 			<body>{children}</body>
 		</html>
 	);

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -51,7 +51,7 @@ const Home: NextPage = async () => {
 	}
 
 	return (
-		<main className="flex h-full w-full flex-col items-center gap-10 p-6 font-display dark:bg-black dark:text-white">
+		<main className="flex size-full flex-col items-center gap-10 p-6 font-display dark:bg-black dark:text-white">
 			<Navbar />
 			<Hero />
 			<Projects projectsData={projects} />
@@ -82,7 +82,7 @@ const getContent = async (): Promise<{
 				projects: Project[];
 				skills: SkillIcon[];
 			};
-		}>(`${process.env.GRAPH_CMS_API}`, {
+		}>(process.env.GRAPH_CMS_API ?? "", {
 			params: {
 				query: QUERY,
 			},

diff --git a/src/app/qr/page.tsx b/src/app/qr/page.tsx
@@ -5,11 +5,11 @@ import { SvgIcon } from "@/components";
 
 const page = () => {
 	return (
-		<main className="flex h-full w-full flex-col items-center gap-10 p-6 font-display dark:bg-black dark:text-white">
+		<main className="flex size-full flex-col items-center gap-10 p-6 font-display dark:bg-black dark:text-white">
 			<div className="flex h-screen flex-col">
 				<div className="mb-3 flex w-full flex-col items-center space-y-3 bg-black sm:mb-0">
 					<div
-						className="mb-0 mt-3 h-[95px] w-[95px] rounded-[50%]"
+						className="mb-0 mt-3 size-[95px] rounded-[50%]"
 						style={{
 							clipPath: "circle()",
 							backgroundSize: "cover",

diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
@@ -14,17 +14,13 @@ export const Icon = ({ iconName, size, color }: IconProps) => {
 	const library = iconName.icon.substring(0, 2).toLowerCase();
 	switch (library) {
 		case "fa":
-			// const a = React.createElement(FontAwesome[iconName.icon]);
-
 			return (
 				<div style={{ fontSize: size, color }}>
 					{createElement(
 						FontAwesome[iconName.icon as keyof typeof FontAwesome]
 					)}
 				</div>
 			);
-
-			break;
 		case "si":
 			return (
 				<div style={{ fontSize: size, color }}>
@@ -33,7 +29,6 @@ export const Icon = ({ iconName, size, color }: IconProps) => {
 					)}
 				</div>
 			);
-			break;
 		case "gr":
 			return (
 				<div style={{ fontSize: size, color }}>
@@ -42,7 +37,6 @@ export const Icon = ({ iconName, size, color }: IconProps) => {
 					)}
 				</div>
 			);
-			break;
 		default:
 			return (
 				<div style={{ fontSize: size, color }}>
@@ -51,6 +45,5 @@ export const Icon = ({ iconName, size, color }: IconProps) => {
 					)}
 				</div>
 			);
-			break;
 	}
 };
diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
@@ -11,7 +11,7 @@ export const ProjectCard = ({
 	projectSkills,
 }: Project) => {
 	return (
-		<div className="max-w-md rounded-xl bg-white shadow-md ring-2 ring-slate-100 dark:border dark:border-gray-300 dark:bg-black md:max-w-lg">
+		<div className="max-w-md rounded-xl bg-white shadow-md ring-2 ring-slate-100 md:max-w-lg dark:border dark:border-gray-300 dark:bg-black">
 			<Image
 				alt={title}
 				height={projectImage.height}
@@ -25,10 +25,10 @@ export const ProjectCard = ({
 				width={projectImage.width}
 			/>
 			<div className="flex flex-col justify-between gap-3 space-y-3 p-3">
-				<h3 className="text-xl font-medium leading-tight text-black hover:underline dark:text-white md:text-2xl">
+				<h3 className="text-xl font-medium leading-tight text-black hover:underline md:text-2xl dark:text-white">
 					{title}
 				</h3>
-				<p className="text-gray-500 dark:text-gray-200 md:text-lg">
+				<p className="text-gray-500 md:text-lg dark:text-gray-200">
 					{description}
 				</p>
 				<div className="flex justify-evenly text-xl md:text-3xl" id="skills">

diff --git a/src/components/Sections/About.tsx b/src/components/Sections/About.tsx
@@ -9,7 +9,7 @@ export const About = ({ biographyBlurb, bioPic }: Bio) => {
 		>
 			<h2 className="text-center font-bold">About</h2>
 			<div className="flex flex-col items-center justify-evenly gap-8 text-justify md:flex-row md:text-left">
-				<div className="max-w-[18rem]">
+				<div className="max-w-72">
 					<Image
 						alt="Kenton Duprey"
 						className="rounded-full dark:border dark:border-white"

diff --git a/src/components/Sections/Contact.tsx b/src/components/Sections/Contact.tsx
@@ -66,7 +66,7 @@ export const Contact = () => {
 					setSuccess(false);
 				}, 2000);
 			})
-			.catch((err) => {
+			.catch((err: unknown) => {
 				console.error(err);
 			});
 	};
@@ -127,7 +127,7 @@ export const Contact = () => {
 						{loading ? "Sending..." : "Send"}
 
 						<CgSpinner
-							className={`ml-1 h-6 w-6 animate-spin text-gray-500 ${
+							className={`ml-1 size-6 animate-spin text-gray-500 ${
 								loading ? "" : "hidden"
 							}`}
 						/>

diff --git a/src/components/Skill.tsx b/src/components/Skill.tsx
@@ -5,7 +5,6 @@ interface SkillProps {
 	project: boolean;
 	title: string;
 	iconName: IconName;
-	children?: React.ReactNode;
 }
 
 export const Skill = ({ project, title, iconName }: SkillProps) => {

diff --git a/src/components/SvgIcons/SvgIcon.tsx b/src/components/SvgIcons/SvgIcon.tsx
@@ -17,7 +17,6 @@ export const SvgIcon = ({ iconName }: SvgIconProps) => {
 					<path d="M17.543 9.704c.302.728.457 1.508.457 2.296h-1.8A4.199 4.199 0 0012 7.8V6a6 6 0 015.543 3.704z" />
 				</svg>
 			);
-			break;
 		case "email":
 			return (
 				<svg
@@ -34,7 +33,6 @@ export const SvgIcon = ({ iconName }: SvgIconProps) => {
 					/>
 				</svg>
 			);
-			break;
 		case "work":
 			return (
 				<svg
@@ -51,7 +49,6 @@ export const SvgIcon = ({ iconName }: SvgIconProps) => {
 					/>
 				</svg>
 			);
-			break;
 		case "website":
 			return (
 				<svg
@@ -68,8 +65,6 @@ export const SvgIcon = ({ iconName }: SvgIconProps) => {
 					/>
 				</svg>
 			);
-			break;
-
 		case "addContact":
 			return (
 				<svg
@@ -87,8 +82,6 @@ export const SvgIcon = ({ iconName }: SvgIconProps) => {
 					<path d="M11 14a1 1 0 011 1v6h2v-6a3 3 0 00-3-3H5a3 3 0 00-3 3v6h2v-6a1 1 0 011-1h6zM18 7h2v2h2v2h-2v2h-2v-2h-2V9h2V7z" />
 				</svg>
 			);
-			break;
-
 		default:
 			break;
 	}

diff --git a/src/libs/prisma.ts b/src/libs/prisma.ts
@@ -27,7 +27,7 @@ let prisma: PrismaClient;
 if (typeof window === "undefined") {
 	if (process.env.VERCEL_ENV === "production") {
 		prisma =
-			global.prisma || new PrismaClient(dev ? { ...prismaConfig } : undefined);
+			global.prisma ?? new PrismaClient(dev ? { ...prismaConfig } : undefined);
 	} else {
 		if (!global.prisma) {
 			global.prisma = new PrismaClient(dev ? { ...prismaConfig } : undefined);

diff --git a/src/libs/stripe.ts b/src/libs/stripe.ts
@@ -2,7 +2,11 @@ import Stripe from "stripe";
 import { z } from "zod";
 
 export const stripe = new Stripe(
-	z.string().parse(process.env.STRIPE_SECRET_KEY),
+	z
+		.string({
+			required_error: "STRIPE_SECRET_KEY is required",
+		})
+		.parse(process.env.STRIPE_SECRET_KEY),
 	{
 		apiVersion: "2024-04-10",
 		typescript: true,