From 52af1cb9a3f32b32697f45bdda4a0fab12b80ff3 Mon Sep 17 00:00:00 2001 From: ca Date: Wed, 11 Dec 2024 13:31:45 +0300 Subject: [PATCH 1/3] refactor: remove test step from CI workflow and update project name in package.json --- .github/workflows/nextjs-ci.yml | 3 --- package.json | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/.github/workflows/nextjs-ci.yml b/.github/workflows/nextjs-ci.yml index ab27cea..fa47b04 100644 --- a/.github/workflows/nextjs-ci.yml +++ b/.github/workflows/nextjs-ci.yml @@ -28,8 +28,5 @@ jobs: - name: Run Linter run: npm run lint - - name: Run Tests - run: npm test - - name: Build Application run: npm run build diff --git a/package.json b/package.json index 35cf854..a9a968d 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "chrisdevcode-web", + "name": "chrisdevcode-next-", "version": "0.1.0", "private": true, "scripts": { From b8ed749fb4d1b0dd42f399ec2b14d9abf9e8ea4a Mon Sep 17 00:00:00 2001 From: ca Date: Wed, 11 Dec 2024 13:39:26 +0300 Subject: [PATCH 2/3] refactor: update README, add Prettier and ESLint configurations, and clean up code formatting --- .eslintrc.json | 12 +- .prettierignore | 6 + .prettierrc | 8 ++ README.md | 1 - app/components/landing_page/Hero.tsx | 144 ++++++++++----------- app/globals.css | 2 +- app/layout.tsx | 14 +- app/page.tsx | 2 +- lib/PrelineScript.tsx | 12 +- package-lock.json | 117 ++++++++++++++++- package.json | 6 +- public/site.webmanifest | 36 +++--- tailwind.config.ts | 16 +-- ui/Footer.tsx | 184 +++++++++++++-------------- ui/Header.tsx | 172 ++++++++++++------------- 15 files changed, 433 insertions(+), 299 deletions(-) create mode 100644 .prettierignore create mode 100644 .prettierrc diff --git a/.eslintrc.json b/.eslintrc.json index 3722418..de7f9fc 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,13 @@ { - "extends": ["next/core-web-vitals", "next/typescript"] + "extends": [ + "next/core-web-vitals", + "next/typescript", + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:prettier/recommended" + ], + "plugins": ["@typescript-eslint"], + "rules": { + "prettier/prettier": "error" + } } diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..93e27a3 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,6 @@ +node_modules +.next +out +dist +package-lock.json +yarn.lock diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..f8e0382 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "semi": true, + "singleQuote": true, + "printWidth": 80, + "tabWidth": 2, + "trailingComma": "all", + "arrowParens": "avoid" +} diff --git a/README.md b/README.md index 1a9ab28..63d2d5f 100644 --- a/README.md +++ b/README.md @@ -1,2 +1 @@ # NextJs + Tailwind(Preline) Starter Template - diff --git a/app/components/landing_page/Hero.tsx b/app/components/landing_page/Hero.tsx index 8e03a1c..596cb6f 100644 --- a/app/components/landing_page/Hero.tsx +++ b/app/components/landing_page/Hero.tsx @@ -1,79 +1,79 @@ -import React from 'react' +import React from 'react'; const Hero = () => { return ( -<> - {/* Hero */} -
-
- {/* Announcement Banner */} -
- - Document Your Project - - - Explore - - + {/* Hero */} +
+
+ {/* Announcement Banner */} + - {/* End Announcement Banner */} - {/* Title */} -
-

- Building Stuff -

-
- {/* End Title */} -
-

- ChrisDevCode builds stuff that matters, and makes sense, we think ... -

-
- {/* Buttons */} - + {/* End Announcement Banner */} + {/* Title */} +
+

+ Building Stuff +

+
+ {/* End Title */} +
+

+ ChrisDevCode builds stuff that matters, and makes sense, we think + ... +

+
+ {/* Buttons */} +
+ - - - - Clone Me To Start - + target="_blank" + > + + + + Clone Me To Start + +
+ {/* End Buttons */} +
- {/* End Buttons */} -
-
- {/* End Hero */} - - - ) -} + {/* End Hero */} + + ); +}; -export default Hero \ No newline at end of file +export default Hero; diff --git a/app/globals.css b/app/globals.css index 118ce84..fbcad0d 100644 --- a/app/globals.css +++ b/app/globals.css @@ -22,4 +22,4 @@ body { main { min-height: 70vh; -} \ No newline at end of file +} diff --git a/app/layout.tsx b/app/layout.tsx index 7e3de2b..becf91f 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,9 +1,9 @@ -import type { Metadata } from "next"; -import "./globals.css"; -import PrelineScript from "../lib/PrelineScript"; +import type { Metadata } from 'next'; +import './globals.css'; +import PrelineScript from '../lib/PrelineScript'; -import Header from "../ui/Header"; -import Footer from "../ui/Footer"; +import Header from '../ui/Header'; +import Footer from '../ui/Footer'; const baseURL = 'https://chrisdevcode.co.ke'; const defaultTitle = 'ChrisDevCode'; @@ -129,9 +129,7 @@ export default function RootLayout({
-
- {children} -
+
{children}
diff --git a/app/page.tsx b/app/page.tsx index 17f2f81..7c2e8fe 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,4 +1,4 @@ -import Hero from "./components/landing_page/Hero"; +import Hero from './components/landing_page/Hero'; export default function Home() { return ( diff --git a/lib/PrelineScript.tsx b/lib/PrelineScript.tsx index dc9cc4e..7230e22 100644 --- a/lib/PrelineScript.tsx +++ b/lib/PrelineScript.tsx @@ -1,9 +1,9 @@ -"use client"; +'use client'; -import { usePathname } from "next/navigation"; -import { useEffect } from "react"; +import { usePathname } from 'next/navigation'; +import { useEffect } from 'react'; -import { IStaticMethods } from "preline/preline"; +import { IStaticMethods } from 'preline/preline'; declare global { interface Window { HSStaticMethods: IStaticMethods; @@ -15,7 +15,7 @@ export default function PrelineScript() { useEffect(() => { const loadPreline = async () => { - await import("preline/preline"); + await import('preline/preline'); window.HSStaticMethods.autoInit(); }; @@ -24,4 +24,4 @@ export default function PrelineScript() { }, [path]); return null; -} \ No newline at end of file +} diff --git a/package-lock.json b/package-lock.json index 0aac34a..834e2ec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "chrisdevcode-web", + "name": "chrisdevcode-next-", "version": "0.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "chrisdevcode-web", + "name": "chrisdevcode-next-", "version": "0.1.0", "dependencies": { "next": "15.0.4", @@ -19,7 +19,10 @@ "@types/react-dom": "^19", "eslint": "^8", "eslint-config-next": "15.0.4", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-prettier": "^5.2.1", "postcss": "^8", + "prettier": "^3.4.2", "tailwindcss": "^3.4.1", "typescript": "^5" } @@ -812,6 +815,19 @@ "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, + "license": "MIT", + "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", @@ -2224,6 +2240,19 @@ } } }, + "node_modules/eslint-config-prettier": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz", + "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==", + "dev": true, + "license": "MIT", + "bin": { + "eslint-config-prettier": "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", @@ -2437,6 +2466,37 @@ "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9" } }, + "node_modules/eslint-plugin-prettier": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz", + "integrity": "sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==", + "dev": true, + "license": "MIT", + "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.2", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.2.tgz", @@ -2625,6 +2685,13 @@ "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, + "license": "Apache-2.0" + }, "node_modules/fast-glob": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz", @@ -4478,6 +4545,35 @@ "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, + "license": "MIT", + "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, + "license": "MIT", + "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", @@ -5267,6 +5363,23 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/synckit": { + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.2.tgz", + "integrity": "sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==", + "dev": true, + "license": "MIT", + "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.16", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.16.tgz", diff --git a/package.json b/package.json index a9a968d..1d989e8 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "dev": "next dev --turbopack", "build": "next build", "start": "next start", - "lint": "next lint" + "lint": "next lint", + "format": "prettier --write ." }, "dependencies": { "next": "15.0.4", @@ -20,7 +21,10 @@ "@types/react-dom": "^19", "eslint": "^8", "eslint-config-next": "15.0.4", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-prettier": "^5.2.1", "postcss": "^8", + "prettier": "^3.4.2", "tailwindcss": "^3.4.1", "typescript": "^5" } diff --git a/public/site.webmanifest b/public/site.webmanifest index 901bd0c..fa99de7 100644 --- a/public/site.webmanifest +++ b/public/site.webmanifest @@ -1,19 +1,19 @@ { - "name": "", - "short_name": "", - "icons": [ - { - "src": "/android-chrome-192x192.png", - "sizes": "192x192", - "type": "image/png" - }, - { - "src": "/android-chrome-512x512.png", - "sizes": "512x512", - "type": "image/png" - } - ], - "theme_color": "#ffffff", - "background_color": "#ffffff", - "display": "standalone" -} \ No newline at end of file + "name": "", + "short_name": "", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/tailwind.config.ts b/tailwind.config.ts index f21e310..a4ce54a 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,22 +1,20 @@ /* eslint-disable @typescript-eslint/no-require-imports */ -import type { Config } from "tailwindcss"; +import type { Config } from 'tailwindcss'; export default { content: [ './node_modules/preline/preline.js', - "./pages/**/*.{js,ts,jsx,tsx,mdx}", - "./components/**/*.{js,ts,jsx,tsx,mdx}", - "./app/**/*.{js,ts,jsx,tsx,mdx}", + './pages/**/*.{js,ts,jsx,tsx,mdx}', + './components/**/*.{js,ts,jsx,tsx,mdx}', + './app/**/*.{js,ts,jsx,tsx,mdx}', ], theme: { extend: { colors: { - background: "var(--background)", - foreground: "var(--foreground)", + background: 'var(--background)', + foreground: 'var(--foreground)', }, }, }, - plugins: [ - require('preline/plugin'), - ], + plugins: [require('preline/plugin')], } satisfies Config; diff --git a/ui/Footer.tsx b/ui/Footer.tsx index e667e28..e94003c 100644 --- a/ui/Footer.tsx +++ b/ui/Footer.tsx @@ -1,105 +1,103 @@ - const Footer = () => { - // get current year - const year = new Date().getFullYear() + const year = new Date().getFullYear(); return ( - - ) -} + {/* End Grid */} +
+ ); +}; -export default Footer \ No newline at end of file +export default Footer; diff --git a/ui/Header.tsx b/ui/Header.tsx index 75d7e0a..e11fa5a 100644 --- a/ui/Header.tsx +++ b/ui/Header.tsx @@ -1,99 +1,99 @@ -import React from 'react' -import Link from 'next/link' +import React from 'react'; +import Link from 'next/link'; const Header = () => { return ( -
-
-
-
- - Home - - {/* +
+ + Home + + {/* Hit Us Up */} - - Repo - + + Repo + +
-
- - - ) -} + + + ); +}; -export default Header \ No newline at end of file +export default Header; From b4cfc76f3fa515548bc0659320e819c7e3d4dad2 Mon Sep 17 00:00:00 2001 From: ca Date: Wed, 11 Dec 2024 13:44:01 +0300 Subject: [PATCH 3/3] chore: add VSCode settings for Prettier formatting and enable format on save --- .vscode/settings.json | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..45ffd61 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,10 @@ +{ + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true, + "[typescript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[javascript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + } +}