Format and lint

amrabed · Aug 11, 2024 · 3d144dc · 3d144dc
1 parent e2652b0
commit 3d144dc
Show file tree

Hide file tree

Showing 41 changed files with 4,694 additions and 1,642 deletions.
diff --git a/next/.eslintrc.json b/next/.eslintrc.json
@@ -1,18 +1,23 @@
 {
-  "extends": ["next/core-web-vitals"],
+  "extends": ["next/core-web-vitals", "prettier"],
   "rules": {
     "no-multiple-empty-lines": ["error", { "max": 2 }],
     "import/no-duplicates": "error",
     "import/order": [
       "error",
       {
-        "groups": [["builtin", "external"], "internal", ["parent", "sibling", "index"]],
+        "groups": [
+          ["builtin", "external"],
+          "internal",
+          "index",
+          ["parent", "sibling"]
+        ],
         "newlines-between": "always"
       }
     ],
     "quotes": ["error", "double"],
     "react/jsx-max-props-per-line": ["error", { "maximum": 3 }],
-    "react/jsx-sort-props": ["error", { "ignoreCase": true }],
+    // "react/jsx-sort-props": ["error", { "ignoreCase": true }],
     "react/self-closing-comp": "error"
   }
 }
diff --git a/next/.prettierrc.json b/next/.prettierrc.json
@@ -0,0 +1,5 @@
+{
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "importOrder": ["^[react]", "^@(?!/)", "^@/", "^[./]"],
+  "importOrderSeparation": true
+}
diff --git a/next/Makefile b/next/Makefile
@@ -0,0 +1,14 @@
+pnpm:
+	npm install pnpm
+
+install:
+	pnpm install
+
+format:
+	pnpm format
+
+lint: format
+	pnpm lint
+
+local:
+	pnpm dev
diff --git a/next/components/Footer.jsx b/next/components/Footer.jsx
@@ -4,8 +4,10 @@ const Footer = () => {
   return (
     <Fragment>
       <div className="p-2 font-sans text-sm left-15 bottom-10">
-        &copy; {new Date().getFullYear()} Amr Abed - Built with {" "}
-        <a href="https://nextjs.org" target="_blank" rel="noopener noreferrer">Next.js</a>
+        &copy; {new Date().getFullYear()} Amr Abed - Built with{" "}
+        <a href="https://nextjs.org" target="_blank" rel="noopener noreferrer">
+          Next.js
+        </a>
       </div>
     </Fragment>
   );

diff --git a/next/components/Header.jsx b/next/components/Header.jsx
@@ -1,13 +1,14 @@
 "use client";
+
 import React, { Fragment, useContext, useEffect, useState } from "react";
-import ToggleThemeButton from "./ToggleThemeButton";
 
-import MobileNavbar from "./mobile/Sidebar";
+import NavbarLinks from "./NavbarLinks";
+import PageTitle from "./PageTitle";
+import ToggleThemeButton from "./ToggleThemeButton";
 import NavbarMobile from "./mobile/Header";
+import MobileNavbar from "./mobile/Sidebar";
 
 import { ThemeContext } from "@/context/themeContext";
-import NavbarLinks from "./NavbarLinks";
-import PageTitle from "./PageTitle";
 
 const Header = () => {
   const [top, setTop] = useState("0");
@@ -32,13 +33,12 @@ const Header = () => {
     <Fragment>
       {/* Desktop Header */}
       <div
-        className='w-full h-[70px] px-8 bg-[rgba(255,255,255,0.8)] dark:bg-[rgba(0,0,0,0.8)] backdrop-filter backdrop-blur-lg hidden md:flex justify-between items-center gap-4 shadow-sm shadow-gray-300 dark:shadow-gray-800 fixed z-10 transition-all duration-500'
+        className="w-full h-[70px] px-8 bg-[rgba(255,255,255,0.8)] dark:bg-[rgba(0,0,0,0.8)] backdrop-filter backdrop-blur-lg hidden md:flex justify-between items-center gap-4 shadow-sm shadow-gray-300 dark:shadow-gray-800 fixed z-10 transition-all duration-500"
         style={{ top: top }}
       >
         <PageTitle />
         <NavbarLinks />
 
-
         <ToggleThemeButton theme={theme} toggleTheme={toggleTheme} />
       </div>
 
@@ -53,7 +53,7 @@ const Header = () => {
 
       {/* SideMenu For Mobile Screen */}
       <MobileNavbar setShowSidebar={setShowSidebar} showSidebar={showSidebar} />
-    </Fragment >
+    </Fragment>
   );
 };
 

diff --git a/next/components/Layout.jsx b/next/components/Layout.jsx
@@ -1,16 +1,16 @@
 // import Social from './Social';
-import { Header } from './Header';
+import { Header } from "./Header";
 
 const Layout = ({ children }) => {
-    return (
-        <div className="flex h-screen bg-gray-100 dark:bg-gray-800">
-            <div className="w-1/5 p-8 bg-white dark:bg-gray-900">
-                <Header />
-                {/* <Social /> */}
-            </div>
-            <div className="flex-1 p-8">{children}</div>
-        </div>
-    );
+  return (
+    <div className="flex h-screen bg-gray-100 dark:bg-gray-800">
+      <div className="w-1/5 p-8 bg-white dark:bg-gray-900">
+        <Header />
+        {/* <Social /> */}
+      </div>
+      <div className="flex-1 p-8">{children}</div>
+    </div>
+  );
 };
 
 export default Layout;
diff --git a/next/components/NavbarLinks.jsx b/next/components/NavbarLinks.jsx
@@ -3,34 +3,33 @@ import Link from "next/link";
 import { sections } from "@/data/sections";
 
 export const MobileNavbarLinks = () => (
-    <div className='p-3 flex flex-col gap-3'>
-        {sections.map((section) => (
-            <Link
-                className='text-lg p-2 hover:text-primary hover:dark:text-darkPrimary'
-                href={section.link}
-                key={section.name}
-            >
-                {section.name}
-            </Link>
-        ))}
-    </div >
-
+  <div className="p-3 flex flex-col gap-3">
+    {sections.map((section) => (
+      <Link
+        className="text-lg p-2 hover:text-primary hover:dark:text-darkPrimary"
+        href={section.link}
+        key={section.name}
+      >
+        {section.name}
+      </Link>
+    ))}
+  </div>
 );
 
 const NavbarLinks = () => (
-    <div className='h-full flex gap-4'>
-        {sections.map((section) => (
-            <Link
-                className={"hover:text-primary hover:dark:text-darkPrimary"}
-                href={section.link}
-                key={section.name}
-            >
-                <div className='h-full pb-1 hover:pb-0 px-2 flex items-center hover:border-b-4  border-primary dark:border-darkPrimary transition-all'>
-                    {section.name}
-                </div>
-            </Link>
-        ))}
-    </div>
+  <div className="h-full flex gap-4">
+    {sections.map((section) => (
+      <Link
+        className={"hover:text-primary hover:dark:text-darkPrimary"}
+        href={section.link}
+        key={section.name}
+      >
+        <div className="h-full pb-1 hover:pb-0 px-2 flex items-center hover:border-b-4  border-primary dark:border-darkPrimary transition-all">
+          {section.name}
+        </div>
+      </Link>
+    ))}
+  </div>
 );
 
 export default NavbarLinks;
diff --git a/next/components/PageTitle.jsx b/next/components/PageTitle.jsx
@@ -1,8 +1,11 @@
-
 const PageTitle = ({ showSidebar, setShowSidebar }) => (
-    <div className='flex items-center gap-2 text-primary dark:text-darkPrimary'>
-        <p><a href="#"><span className='text-lg font-bold'>Amr Abed</span></a></p>
-    </div>
+  <div className="flex items-center gap-2 text-primary dark:text-darkPrimary">
+    <p>
+      <a href="#">
+        <span className="text-lg font-bold">Amr Abed</span>
+      </a>
+    </p>
+  </div>
 );
 
-export default PageTitle
+export default PageTitle;
diff --git a/next/components/ScrollToTopButton.jsx b/next/components/ScrollToTopButton.jsx
@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react';
-import { FaArrowUp } from 'react-icons/fa';
+import { useEffect, useState } from "react";
+import { FaArrowUp } from "react-icons/fa";
 
 const ScrollToTopButton = () => {
   const [isVisible, setIsVisible] = useState(false);
@@ -15,13 +15,13 @@ const ScrollToTopButton = () => {
   const scrollToTop = () => {
     window.scrollTo({
       top: 0,
-      behavior: 'smooth',
+      behavior: "smooth",
     });
   };
 
   useEffect(() => {
-    window.addEventListener('scroll', toggleVisibility);
-    return () => window.removeEventListener('scroll', toggleVisibility);
+    window.addEventListener("scroll", toggleVisibility);
+    return () => window.removeEventListener("scroll", toggleVisibility);
   }, []);
 
   return (

diff --git a/next/components/Section.jsx b/next/components/Section.jsx
@@ -1,46 +1,46 @@
 "use client";
-import React, { Fragment, useState, useEffect, useRef } from "react";
 
+import React, { Fragment, useEffect, useRef, useState } from "react";
 
 const Section = ({ id, title, children }) => {
-    const [isVisible, setIsVisible] = useState(false);
-    const dataRef = useRef();
-    const itemRef = useRef();
-
-    useEffect(() => {
-        const getScreenWidth = () =>
-            window.innerWidth ||
-            document.documentElement.clientWidth ||
-            document.body.clientWidth;
-
-        const observer = new IntersectionObserver(
-            ([entry]) => {
-                setIsVisible(entry.isIntersecting);
-            },
-            {
-                rootMargin: `${getScreenWidth() <= 700 ? "-100px" : "-250px"}`,
-            }
-        );
-
-        observer.observe(dataRef.current);
-
-        if (isVisible) {
-            itemRef.current.classList.add("pop-up-child");
-        } else {
-            itemRef.current.classList.remove("pop-up-child");
-        }
-    }, [isVisible]);
-
-    return (
-        <Fragment>
-            <section id={id} className='section' ref={dataRef}>
-                <h2 className='section-heading'>{title}</h2>
-                <div className='pop-down-child section-body' ref={itemRef}>
-                    {children}
-                </div>
-            </section>
-        </Fragment>
+  const [isVisible, setIsVisible] = useState(false);
+  const dataRef = useRef();
+  const itemRef = useRef();
+
+  useEffect(() => {
+    const getScreenWidth = () =>
+      window.innerWidth ||
+      document.documentElement.clientWidth ||
+      document.body.clientWidth;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.isIntersecting);
+      },
+      {
+        rootMargin: `${getScreenWidth() <= 700 ? "-100px" : "-250px"}`,
+      },
     );
+
+    observer.observe(dataRef.current);
+
+    if (isVisible) {
+      itemRef.current.classList.add("pop-up-child");
+    } else {
+      itemRef.current.classList.remove("pop-up-child");
+    }
+  }, [isVisible]);
+
+  return (
+    <Fragment>
+      <section id={id} className="section" ref={dataRef}>
+        <h2 className="section-heading">{title}</h2>
+        <div className="pop-down-child section-body" ref={itemRef}>
+          {children}
+        </div>
+      </section>
+    </Fragment>
+  );
 };
 
 export default Section;
diff --git a/next/components/Social.jsx b/next/components/Social.jsx
@@ -1,21 +1,26 @@
-import React, { Fragment } from "react";
 import Link from "next/link";
+import React, { Fragment } from "react";
 
 import { profiles } from "@/data/profiles";
 
 const SocialMedia = () => (
   <Fragment>
     <div className="flex justify-center">
-      <div className='fixed bottom-10 flex flex-row gap-4 z-10'>
+      <div className="fixed bottom-10 flex flex-row gap-4 z-10">
         {profiles.map((profile) => (
-          <Link className='w-fit' href={profile.link} key={profile.name} target="_blank" rel="noreferrer">
+          <Link
+            className="w-fit"
+            href={profile.link}
+            key={profile.name}
+            target="_blank"
+            rel="noreferrer"
+          >
             <div className="p-2 rounded-full text-xl text-white bg-black">
               {profile.icon}
             </div>
           </Link>
         ))}
       </div>
-
     </div>
   </Fragment>
 );

diff --git a/next/components/ToggleThemeButton.jsx b/next/components/ToggleThemeButton.jsx
@@ -1,16 +1,15 @@
 import React from "react";
-import { FaSun, FaMoon } from "react-icons/fa";
-
+import { FaMoon, FaSun } from "react-icons/fa";
 
 const ToggleThemeButton = ({ theme, toggleTheme }) => (
-    <div className='flex items-center gap-4'>
-        <button
-            className='text-primary dark:text-darkPrimary text-2xl font-semibold hover:scale-110'
-            onClick={toggleTheme}
-        >
-            {theme === "dark" ? <FaSun /> : <FaMoon />}
-        </button>
-    </div>
+  <div className="flex items-center gap-4">
+    <button
+      className="text-primary dark:text-darkPrimary text-2xl font-semibold hover:scale-110"
+      onClick={toggleTheme}
+    >
+      {theme === "dark" ? <FaSun /> : <FaMoon />}
+    </button>
+  </div>
 );
 
-export default ToggleThemeButton;
+export default ToggleThemeButton;