Merge pull request #8 from andrianfaa/dev

Dev

package.json

@@ -18,6 +18,7 @@
     "next": "13.4.13",
     "next-intl": "^2.20.2",
     "next-router-mock": "^0.9.10",
+    "next-seo": "^6.1.0",
     "next-themes": "^0.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

src/components/NavigationBar/NavigationBar.test.tsx

@@ -1,17 +1,18 @@
+import { getLocalization } from "@/utils";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { NextIntlClientProvider, type AbstractIntlMessages } from "next-intl";
 import NavigationBar from "./NavigationBar.component";
 
 describe("test `<Navigation />` component", () => {
-  let messages: AbstractIntlMessages | undefined = undefined;
+  let localize: AbstractIntlMessages | undefined = undefined;
 
   beforeAll(async () => {
-    messages = (await import("../../messages/en.json")).default;
+    localize = await getLocalization("en");
   });
 
   it("should be rendered", () => {
     render(
-      <NextIntlClientProvider locale="en" messages={messages}>
+      <NextIntlClientProvider locale="en" messages={localize}>
         <NavigationBar
           testId={{
             parent: "navigation-parent"
@@ -27,7 +28,7 @@ describe("test `<Navigation />` component", () => {
 
   it("should render navigation toggler", () => {
     render(
-      <NextIntlClientProvider locale="en" messages={messages}>
+      <NextIntlClientProvider locale="en" messages={localize}>
         <NavigationBar
           testId={{
             toggler: "navigation-toggler"
@@ -43,7 +44,7 @@ describe("test `<Navigation />` component", () => {
 
   it('should contain class "opened" when the navigation toggler is clicked', () => {
     render(
-      <NextIntlClientProvider locale="en" messages={messages}>
+      <NextIntlClientProvider locale="en" messages={localize}>
         <NavigationBar
           testId={{
             toggler: "navigation-toggler"

src/components/NavigationBar/QuickCenter/QuickCenter.test.tsx

@@ -1,3 +1,4 @@
+import { getLocalization } from "@/utils";
 import { render, screen } from "@testing-library/react";
 import { NextIntlClientProvider, type AbstractIntlMessages } from "next-intl";
 import mockRouter from "next-router-mock";
@@ -6,7 +7,7 @@ import QuickCenter from "./QuickCenter.component";
 jest.mock("next/router", () => jest.requireActual("next-router-mock"));
 
 describe("test `<QuickCenter />` component", () => {
-  let messages: AbstractIntlMessages | undefined = undefined;
+  let localize: AbstractIntlMessages | undefined = undefined;
 
   const state = {
     isOpen: true,
@@ -16,7 +17,7 @@ describe("test `<QuickCenter />` component", () => {
   };
 
   beforeAll(async () => {
-    messages = (await import("../../../messages/en.json")).default;
+    localize = await getLocalization("en");
   });
 
   beforeEach(() => {
@@ -25,7 +26,7 @@ describe("test `<QuickCenter />` component", () => {
 
   it("should be rendered", () => {
     render(
-      <NextIntlClientProvider locale="en" messages={messages}>
+      <NextIntlClientProvider locale="en" messages={localize}>
         <QuickCenter
           isOpen={state.isOpen}
           onClickClose={state.setIsOpen}
@@ -43,7 +44,7 @@ describe("test `<QuickCenter />` component", () => {
 
   it("should be render button for change app theme", () => {
     render(
-      <NextIntlClientProvider locale="en" messages={messages}>
+      <NextIntlClientProvider locale="en" messages={localize}>
         <QuickCenter
           isOpen={state.isOpen}
           onClickClose={state.setIsOpen}

src/constants/framer-motion-animation.constant.ts

@@ -0,0 +1,15 @@
+import type { AnimationProps } from "framer-motion";
+
+export const FRAMER_MOTION_ANIMATION = {
+  initial: {
+    opacity: 0,
+    translateY: 25
+  } as AnimationProps["initial"],
+  animate: {
+    opacity: 100,
+    translateY: 0
+  } as AnimationProps["animate"],
+  transition: {
+    duration: 0.25
+  } as AnimationProps["transition"]
+};

src/constants/index.ts

@@ -0,0 +1 @@
+export * from "./framer-motion-animation.constant";

src/messages/en.json → src/localization/en.json

@@ -1,4 +1,8 @@
 {
+  "seo": {
+    "title": "Andrian Fadhilla - Computer Science Student and React Developer",
+    "description": "a Computer Science Student and also Freelance React Developer based in Bekasi, Indonesia."
+  },
   "NavigationBar": {
     "NavigationLink": {
       "about": "About",
@@ -35,6 +39,10 @@
       "title": "Hi!<wavehand></wavehand><block>I'm Andrian Fadhilla.</block>",
       "subtitle": "a Computer Science Student and also Freelance React Developer based in Bekasi, Indonesia.",
       "ctaButtonText": "Learn more about me"
+    },
+    "portfolio": {
+      "heading": "Portfolio.",
+      "subHeading": "List of all the projects I've made, starting from just for fun projects to professional projects"
     }
   }
 }

src/messages/id.json → src/localization/id.json

@@ -1,4 +1,8 @@
 {
+  "seo": {
+    "title": "Andrian Fadhilla - Mahasiswa Ilmu Komputer dan React Developer",
+    "description": "Seorang Mahasiswa Ilmu Komputer dan juga Freelance React Developer yang berbasis di Bekasi, Indonesia."
+  },
   "NavigationBar": {
     "NavigationLink": {
       "about": "Tentang",
@@ -35,6 +39,10 @@
       "title": "Halo!<wavehand></wavehand><block>Saya Andrian Fadhilla.</block>",
       "subtitle": "Seorang Mahasiswa Ilmu Komputer dan juga Freelance React Developer yang berbasis di Bekasi, Indonesia.",
       "ctaButtonText": "Pelajari lebih lanjut tentang saya"
+    },
+    "portfolio": {
+      "heading": "Portofolio.",
+      "subHeading": "Daftar semua project yang pernah saya buat, mulai dari project sekadar untuk kesenangan hingga project profesional"
     }
   }
 }

src/pages/_app.tsx

@@ -1,40 +1,27 @@
 import { NavigationBar } from "@/components";
-import clsx from "clsx";
 import { NextIntlClientProvider } from "next-intl";
+import { DefaultSeo, type DefaultSeoProps } from "next-seo";
 import { ThemeProvider } from "next-themes";
 import type { AppProps } from "next/app";
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
 
 import "@/styles/root.scss";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  const { events } = useRouter();
-
-  const [playAnimation, setPlayAnimation] = useState<boolean>(false);
-
-  useEffect(() => {
-    events.on("routeChangeComplete", () => setPlayAnimation(false));
-    events.on("routeChangeStart", () => setPlayAnimation(true));
-
-    return () => {
-      events.off("routeChangeStart", () => setPlayAnimation(true));
-      events.off("routeChangeComplete", () => setPlayAnimation(false));
-    };
-  }, [events]);
+  const defaultSeo: DefaultSeoProps = {
+    title: pageProps.localize.seo.title || "Andrian Fadhilla - Computer Science Student and React Developer",
+    description:
+      pageProps.localize.seo.description ||
+      "a Computer Science Student and also Freelance React Developer based in Bekasi, Indonesia"
+  };
 
   return (
-    <NextIntlClientProvider messages={pageProps.messages}>
+    <NextIntlClientProvider messages={pageProps.localize}>
+      <DefaultSeo {...defaultSeo} />
+
       <ThemeProvider attribute="class">
         <NavigationBar locale={pageProps.locale || "en"} />
 
-        <main
-          className={clsx(
-            playAnimation
-              ? "-translate-y-6 opacity-0"
-              : "transition-all duration-300 ease-in-out opacity-100 translate-y-0"
-          )}
-        >
+        <main>
           <Component {...pageProps} />
         </main>
       </ThemeProvider>

src/pages/about.tsx

@@ -1,11 +1,11 @@
 import { ComingSoon } from "@/components";
+import { getLocalization } from "@/utils";
 import type { NextPage } from "next";
 import { Router } from "next/router";
 
 type PageProps = {
   locale: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  messages: any;
+  localize: unknown;
 };
 
 const AboutPage: NextPage<PageProps> = ({ locale }: PageProps) => {
@@ -20,8 +20,8 @@ export async function getStaticProps(router: Router) {
   return {
     props: {
       locale: router.locale || "en",
-      messages: (await import(`../messages/${router.locale}.json`)).default
-    } as PageProps
+      localize: await getLocalization(router.locale)
+    }
   };
 }
 

src/pages/guestbook.tsx

@@ -1,11 +1,11 @@
 import { ComingSoon } from "@/components";
+import { getLocalization } from "@/utils";
 import type { NextPage } from "next";
 import { Router } from "next/router";
 
 type PageProps = {
   locale: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  messages: any;
+  localize: unknown;
 };
 
 const GuestbookPage: NextPage<PageProps> = ({ locale }: PageProps) => {
@@ -20,8 +20,8 @@ export async function getStaticProps(router: Router) {
   return {
     props: {
       locale: router.locale || "en",
-      messages: (await import(`../messages/${router.locale}.json`)).default
-    } as PageProps
+      localize: await getLocalization(router.locale)
+    }
   };
 }
 

src/pages/index.tsx

@@ -1,29 +1,17 @@
+import { FRAMER_MOTION_ANIMATION } from "@/constants";
+import { getLocalization } from "@/utils";
 import clsx from "clsx";
-import { AnimationProps, motion } from "framer-motion";
+import { motion } from "framer-motion";
 import type { NextPage } from "next";
-import { Router } from "next/router";
 import { useTranslations } from "next-intl";
+import { Router } from "next/router";
 
 const Home: NextPage = () => {
   const translate = useTranslations("Pages.home");
 
-  const animation = {
-    initial: {
-      opacity: 0,
-      translateY: 25
-    } as AnimationProps["initial"],
-    animate: {
-      opacity: 100,
-      translateY: 0
-    } as AnimationProps["animate"],
-    transition: {
-      duration: 0.25
-    } as AnimationProps["transition"]
-  };
-
   return (
     <>
-      <div className="relative">
+      <div className="relative header-background dark:header-background-dark">
         <header
           className={clsx(
             "container min-h-screen lg:min-h-[unset] lg:h-screen z-[1] !max-h-[720px]",
@@ -33,11 +21,11 @@ const Home: NextPage = () => {
           )}
         >
           <motion.h1
-            initial={animation.initial}
-            animate={animation.animate}
+            initial={FRAMER_MOTION_ANIMATION.initial}
+            animate={FRAMER_MOTION_ANIMATION.animate}
             transition={{
               delay: 0.1,
-              ...animation.transition
+              ...FRAMER_MOTION_ANIMATION.transition
             }}
             className={clsx(
               "font-bold text-4xl leading-[1.25] text-gray-900 dark:text-white md:text-5xl lg:text-6xl",
@@ -51,23 +39,23 @@ const Home: NextPage = () => {
           </motion.h1>
 
           <motion.p
-            initial={animation.initial}
-            animate={animation.animate}
+            initial={FRAMER_MOTION_ANIMATION.initial}
+            animate={FRAMER_MOTION_ANIMATION.animate}
             transition={{
               delay: 0.2,
-              ...animation.transition
+              ...FRAMER_MOTION_ANIMATION.transition
             }}
             className={clsx("mb-4", "max-w-xl lg:max-w-2xl", "text-base md:text-lg lg:text-xl")}
           >
             {translate("subtitle")}
           </motion.p>
 
           <motion.button
-            initial={animation.initial}
-            animate={animation.animate}
+            initial={FRAMER_MOTION_ANIMATION.initial}
+            animate={FRAMER_MOTION_ANIMATION.animate}
             transition={{
               delay: 0.3,
-              ...animation.transition
+              ...FRAMER_MOTION_ANIMATION.transition
             }}
             type="button"
             className={clsx("button button-default", "py-4 px-6", "rounded-lg", "font-semibold")}
@@ -86,7 +74,7 @@ export async function getStaticProps(router: Router) {
   return {
     props: {
       locale: router.locale || "en",
-      messages: (await import(`../messages/${router.locale}.json`)).default
+      localize: await getLocalization(router.locale)
     }
   };
 }