rankrunners-dev/next-cochise
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: migrate utils to ts and setup prettier

Browse Source
This commit is contained in:
RizqiSyahrendra 2025-02-02 11:19:04 +07:00
parent 6be0d6306b
commit f1e5eb7159
15 changed files with 176 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.prettierrc Normal file
View File

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

16
.vscode/settings.json vendored Normal file
View File

@ -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"
}

1
eslint.config.mjs
View File

@ -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"
},
},
];

106
package-lock.json generated
View File

@ -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",

5
package.json
View File

@ -37,8 +37,11 @@
"@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"
}
}
}

8
src/app/layout.tsx
View File

@ -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 { headerChangeOnScroll } from "@/utils/changeHeaderOnScroll"
import { parallaxMouseMovement, parallaxScroll } from "@/utils/parallax";
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"

4
src/app/page.tsx
View File

@ -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 Homepage from "../components/Homepage"
import Footer from "../components/Footer";
import Homepage from "../components/Homepage";
import { slickMultipages } from "../data/menu";
export default function Home() {

5
src/utils/addScroll.js → src/utils/addScroll.ts
View File

@ -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}`)

8
src/utils/changeHeaderOnScroll.js → src/utils/changeHeaderOnScroll.ts
View File

@ -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.add("small-height", "body-scrolled");
mainNav?.classList.remove("transparent");
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.remove("small-height", "body-scrolled");
mainNav?.classList.add("transparent");
mainNav?.classList.remove("small-height", "body-scrolled");
if (navLogoWrapLogo) navLogoWrapLogo.classList.remove("small-height");
if (lightAfterScroll) lightAfterScroll.classList.add("dark");
}

1
src/utils/initWow.js → src/utils/initWow.ts
View File

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

1
src/utils/menuToggle.js → src/utils/menuToggle.ts
View File

@ -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");

1
src/utils/parallax.js → src/utils/parallax.ts
View File

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

24
src/utils/scrollToElement.js
View File

@ -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" });
}
});
}
});
};

24
src/utils/scrollToElement.ts Normal file
View File

@ -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" });
}
});
}
});
};

1
src/utils/toggleMobileMenu.js → src/utils/toggleMobileMenu.ts
View File

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