feat: migrate utils to ts and setup prettier

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "printWidth": 80,
+  "trailingComma": "es5",
+  "tabWidth": 2
+}

.vscode/settings.json

@@ -0,0 +1,16 @@
+{
+  "editor.formatOnSave": true,
+  // The number of spaces a tab is equal to. This setting is overridden
+  // based on the file contents when `editor.detectIndentation` is true.
+  "editor.tabSize": 2,
+  // Insert spaces when pressing Tab. This setting is overriden
+  // based on the file contents when `editor.detectIndentation` is true.
+  "editor.insertSpaces": true,
+  // When opening a file, `editor.tabSize` and `editor.insertSpaces`
+  // will be detected based on the file contents. Set to false to keep
+  // the values you've explicitly set, above.
+  "editor.detectIndentation": false,
+  "prettier.useTabs": false,
+  "prettier.configPath": ".prettierrc",
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

eslint.config.mjs

@@ -15,6 +15,7 @@ const eslintConfig = [
     rules: {
       "@typescript-eslint/no-unused-vars": "warn",
       "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/ban-ts-comment": "off"
     },
   },
 ];

package-lock.json

@@ -36,7 +36,10 @@
         "@types/react-modal-video": "^1.2.3",
         "eslint": "^9",
         "eslint-config-next": "15.1.6",
+        "eslint-config-prettier": "^10.0.1",
+        "eslint-plugin-prettier": "^5.2.3",
         "postcss": "^8",
+        "prettier": "^3.4.2",
         "tailwindcss": "^3.4.1",
         "typescript": "^5"
       }
@@ -546,6 +549,18 @@
         "node": ">=14"
       }
     },
+    "node_modules/@pkgr/core": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
+      "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -2078,6 +2093,18 @@
         }
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.0.1.tgz",
+      "integrity": "sha512-lZBts941cyJyeaooiKxAtzoPHTN+GbQTJFAIdQbRhA4/8whaAraEh47Whw/ZFfrjNSnlAxqfm9i0XVAEkULjCw==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "build/bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
     "node_modules/eslint-import-resolver-node": {
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
@@ -2278,6 +2305,36 @@
         "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9"
       }
     },
+    "node_modules/eslint-plugin-prettier": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.3.tgz",
+      "integrity": "sha512-qJ+y0FfCp/mQYQ/vWQ3s7eUlFEL4PyKfAJxsnYTJ4YT73nsJBWqmEpFryxV9OeUiqmsTsYJ5Y+KDNaeP31wrRw==",
+      "dev": true,
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.0",
+        "synckit": "^0.9.1"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-plugin-prettier"
+      },
+      "peerDependencies": {
+        "@types/eslint": ">=8.0.0",
+        "eslint": ">=8.0.0",
+        "eslint-config-prettier": "*",
+        "prettier": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/eslint": {
+          "optional": true
+        },
+        "eslint-config-prettier": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/eslint-plugin-react": {
       "version": "7.37.4",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.4.tgz",
@@ -2459,6 +2516,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true
+    },
     "node_modules/fast-glob": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
@@ -4398,6 +4461,33 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
+      "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -5312,6 +5402,22 @@
         "node": ">= 4.7.0"
       }
     },
+    "node_modules/synckit": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.2.tgz",
+      "integrity": "sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==",
+      "dev": true,
+      "dependencies": {
+        "@pkgr/core": "^0.1.0",
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.17",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",

package.json

@@ -37,7 +37,10 @@
     "@types/react-modal-video": "^1.2.3",
     "eslint": "^9",
     "eslint-config-next": "15.1.6",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.3",
     "postcss": "^8",
+    "prettier": "^3.4.2",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }

src/app/layout.tsx

@@ -2,8 +2,8 @@
 import { usePathname } from "next/navigation";
 import { useEffect } from "react";
 import { init_wow } from "@/utils/initWow";
-import { parallaxMouseMovement, parallaxScroll } from "@/utils/parallax"
+import { parallaxMouseMovement, parallaxScroll } from "@/utils/parallax";
-import { headerChangeOnScroll } from "@/utils/changeHeaderOnScroll"
+import { headerChangeOnScroll } from "@/utils/changeHeaderOnScroll";
 import "swiper/css";
 import "jarallax/dist/jarallax.min.css";
 import "swiper/css/effect-fade";
@@ -36,9 +36,11 @@ export default function RootLayout({
       window.removeEventListener("scroll", headerChangeOnScroll);
     };
   }, [path]);
+
   useEffect(() => {
     if (typeof window !== "undefined") {
       // Import the script only on the client side
+      // @ts-ignore
       import("bootstrap/dist/js/bootstrap.esm").then(() => {
         // Module is imported, you can access any exported functionality if
       });
@@ -46,7 +48,7 @@ export default function RootLayout({
   }, []);
 
   return (
-    <html lang="en" className="no-mobile no-touch ">
+    <html lang="en" className="no-mobile no-touch">
       <head>
         <link
           href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap"

src/app/page.tsx

@@ -1,8 +1,8 @@
 import Image from "next/image";
 import Header from "../components/Header";
 import Hero from "../components/Hero";
-import Footer from "../components/Footer"
+import Footer from "../components/Footer";
-import Homepage from "../components/Homepage"
+import Homepage from "../components/Homepage";
 import { slickMultipages } from "../data/menu";
 
 export default function Home() {

src/utils/addScroll.ts

@@ -4,18 +4,19 @@ const addScrollspy = (
   activeClass = "active"
 ) => {
   var section = document.querySelectorAll(".scrollSpysection");
-  // console.log(section);
 
   var sections = {};
   var i = 0;
 
   Array.prototype.forEach.call(section, function (e) {
+    // @ts-ignore
     sections[e.id] = e.offsetTop;
   });
   var scrollPosition =
     document.documentElement.scrollTop || document.body.scrollTop;
 
-  for (i in sections) {
+  for (let i in sections) {
+    // @ts-ignore
     if (sections[i] <= scrollPosition) {
       document
         .querySelector(linksContainer + ` .${activeClass}`)

src/utils/changeHeaderOnScroll.ts

@@ -3,13 +3,13 @@ export const headerChangeOnScroll = () => {
   var navLogoWrapLogo = document.querySelector(".nav-logo-wrap .logo");
   var lightAfterScroll = document.querySelector(".light-after-scroll");
   if (window.scrollY > 0) {
-    mainNav.classList.remove("transparent");
+    mainNav?.classList.remove("transparent");
-    mainNav.classList.add("small-height", "body-scrolled");
+    mainNav?.classList.add("small-height", "body-scrolled");
     if (navLogoWrapLogo) navLogoWrapLogo.classList.add("small-height");
     if (lightAfterScroll) lightAfterScroll.classList.remove("dark");
   } else if (window.scrollY === 0) {
-    mainNav.classList.add("transparent");
+    mainNav?.classList.add("transparent");
-    mainNav.classList.remove("small-height", "body-scrolled");
+    mainNav?.classList.remove("small-height", "body-scrolled");
     if (navLogoWrapLogo) navLogoWrapLogo.classList.remove("small-height");
     if (lightAfterScroll) lightAfterScroll.classList.add("dark");
   }

src/utils/initWow.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-require-imports */
 
+// @ts-nocheck
 export function init_wow() {
   const { WOW } = require("wowjs");
   setTimeout(() => {

src/utils/menuToggle.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 export function init_classic_menu_resize() {
   var mobile_nav = document.querySelector(".mobile-nav");
   var desktop_nav = document.querySelector(".desktop-nav");

src/utils/parallax.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import Rellax from "rellax";
 
 export const parallaxMouseMovement = () => {

src/utils/scrollToElement.js

@@ -1,24 +0,0 @@
-export const scrollToElement = () => {
-    document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
-      if (
-        anchor.href &&
-        anchor.href != "#" &&
-        !anchor.hasAttribute("data-bs-toggle")
-      ) {
-        //   console.log(anchor.href);
-        anchor.addEventListener("click", (e) => {
-          e.preventDefault();
-          console.log("clicle");
-          const id = anchor.href.split("#")[1];
-          const element = document.getElementById(id);
-          if (element) {
-            const yOffset = +70; // Adjust this offset as per your layout
-            const y =
-              element.getBoundingClientRect().top + window.pageYOffset + yOffset;
-            window.scrollTo({ top: y, behavior: "smooth" });
-          }
-        });
-      }
-    });
-  };
-  

src/utils/scrollToElement.ts

@@ -0,0 +1,24 @@
+// @ts-nocheck
+export const scrollToElement = () => {
+  document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
+    if (
+      anchor.href &&
+      anchor.href != "#" &&
+      !anchor.hasAttribute("data-bs-toggle")
+    ) {
+      //   console.log(anchor.href);
+      anchor.addEventListener("click", (e) => {
+        e.preventDefault();
+        console.log("clicle");
+        const id = anchor.href.split("#")[1];
+        const element = document.getElementById(id);
+        if (element) {
+          const yOffset = +70; // Adjust this offset as per your layout
+          const y =
+            element.getBoundingClientRect().top + window.pageYOffset + yOffset;
+          window.scrollTo({ top: y, behavior: "smooth" });
+        }
+      });
+    }
+  });
+};

src/utils/toggleMobileMenu.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 export const toggleMobileMenu = () => {
   var mobile_nav = document.querySelector(".mobile-nav");
   var desktop_nav = document.querySelector(".desktop-nav");