Refactor CI workflow and improve code quality

.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"
+  }
 }

.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

.prettierignore

@@ -0,0 +1,6 @@
+node_modules
+.next
+out
+dist
+package-lock.json
+yarn.lock

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "arrowParens": "avoid"
+}

.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"
+  }
+}

README.md

@@ -1,2 +1 @@
 # NextJs + Tailwind(Preline) Starter Template
-

app/components/landing_page/Hero.tsx

@@ -1,79 +1,79 @@
-import React from 'react'
+import React from 'react';
 
 const Hero = () => {
   return (
-<>
-  {/* Hero */}
-  <div className="relative overflow-hidden before:absolute before:top-0 before:start-1/2 before:bg-[url('https://preline.co/assets/svg/examples/squared-bg-element.svg')] dark:before:bg-[url('https://preline.co/assets/svg/examples-dark/squared-bg-element.svg')] before:bg-no-repeat before:bg-top before:size-full before:-z-[1] before:transform before:-translate-x-1/2">
-    <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10">
-      {/* Announcement Banner */}
-      <div className="flex justify-center">
-        <a
-          className="inline-flex items-center gap-x-2 bg-white border border-gray-200 text-xs text-gray-600 p-2 px-3 rounded-full transition hover:border-gray-300 focus:outline-none focus:border-gray-300 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:hover:border-neutral-600 dark:focus:border-neutral-600"
-          href="#"
-        >
-          Document Your Project
-          <span className="flex items-center gap-x-1">
-            <span className="border-s border-gray-200 text-blue-600 ps-2 dark:text-blue-500 dark:border-neutral-700">
-              Explore
-            </span>
-            <svg
-              className="shrink-0 size-4 text-blue-600"
-              xmlns="http://www.w3.org/2000/svg"
-              width={24}
-              height={24}
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth={2}
-              strokeLinecap="round"
-              strokeLinejoin="round"
+    <>
+      {/* Hero */}
+      <div className="relative overflow-hidden before:absolute before:top-0 before:start-1/2 before:bg-[url('https://preline.co/assets/svg/examples/squared-bg-element.svg')] dark:before:bg-[url('https://preline.co/assets/svg/examples-dark/squared-bg-element.svg')] before:bg-no-repeat before:bg-top before:size-full before:-z-[1] before:transform before:-translate-x-1/2">
+        <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10">
+          {/* Announcement Banner */}
+          <div className="flex justify-center">
+            <a
+              className="inline-flex items-center gap-x-2 bg-white border border-gray-200 text-xs text-gray-600 p-2 px-3 rounded-full transition hover:border-gray-300 focus:outline-none focus:border-gray-300 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:hover:border-neutral-600 dark:focus:border-neutral-600"
+              href="#"
             >
-              <path d="m9 18 6-6-6-6" />
-            </svg>
-          </span>
-        </a>
-      </div>
-      {/* End Announcement Banner */}
-      {/* Title */}
-      <div className="mt-5 max-w-xl text-center mx-auto">
-        <h1 className="block font-bold text-gray-800 text-4xl md:text-5xl lg:text-6xl dark:text-neutral-200">
-          Building Stuff
-        </h1>
-      </div>
-      {/* End Title */}
-      <div className="mt-5 max-w-3xl text-center mx-auto">
-        <p className="text-lg text-gray-600 dark:text-neutral-400">
-          ChrisDevCode builds stuff that matters, and makes sense, we think ...
-        </p>
-      </div>
-      {/* Buttons */}
-      <div className="mt-8 gap-3 flex justify-center">
-        <a
-          className="inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-tl from-blue-600 to-violet-600 hover:from-violet-600 hover:to-blue-600 focus:outline-none focus:from-violet-600 focus:to-blue-600 border border-transparent text-white text-sm font-medium rounded-full py-3 px-4"
+              Document Your Project
+              <span className="flex items-center gap-x-1">
+                <span className="border-s border-gray-200 text-blue-600 ps-2 dark:text-blue-500 dark:border-neutral-700">
+                  Explore
+                </span>
+                <svg
+                  className="shrink-0 size-4 text-blue-600"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width={24}
+                  height={24}
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="m9 18 6-6-6-6" />
+                </svg>
+              </span>
+            </a>
+          </div>
+          {/* End Announcement Banner */}
+          {/* Title */}
+          <div className="mt-5 max-w-xl text-center mx-auto">
+            <h1 className="block font-bold text-gray-800 text-4xl md:text-5xl lg:text-6xl dark:text-neutral-200">
+              Building Stuff
+            </h1>
+          </div>
+          {/* End Title */}
+          <div className="mt-5 max-w-3xl text-center mx-auto">
+            <p className="text-lg text-gray-600 dark:text-neutral-400">
+              ChrisDevCode builds stuff that matters, and makes sense, we think
+              ...
+            </p>
+          </div>
+          {/* Buttons */}
+          <div className="mt-8 gap-3 flex justify-center">
+            <a
+              className="inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-tl from-blue-600 to-violet-600 hover:from-violet-600 hover:to-blue-600 focus:outline-none focus:from-violet-600 focus:to-blue-600 border border-transparent text-white text-sm font-medium rounded-full py-3 px-4"
               href="https://github.com/achingachris/nextjs-tailwind-starter"
-              target='_blank'
-        >
-          <svg
-            className="shrink-0 size-4"
-            xmlns="http://www.w3.org/2000/svg"
-            width={16}
-            height={16}
-            fill="currentColor"
-            viewBox="0 0 16 16"
-          >
-            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
-          </svg>
-          Clone Me To Start
-        </a>
+              target="_blank"
+            >
+              <svg
+                className="shrink-0 size-4"
+                xmlns="http://www.w3.org/2000/svg"
+                width={16}
+                height={16}
+                fill="currentColor"
+                viewBox="0 0 16 16"
+              >
+                <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+              </svg>
+              Clone Me To Start
+            </a>
+          </div>
+          {/* End Buttons */}
+        </div>
       </div>
-      {/* End Buttons */}
-    </div>
-  </div>
-  {/* End Hero */}
-</>
-
-  )
-}
+      {/* End Hero */}
+    </>
+  );
+};
 
-export default Hero
+export default Hero;

app/globals.css

@@ -22,4 +22,4 @@ body {
 
 main {
   min-height: 70vh;
-}
+}

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({
     <html lang="en">
       <body>
         <Header />
-        <main>
-        {children}
-        </main>
+        <main>{children}</main>
         <Footer />
       </body>
       <PrelineScript />

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 (

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;
-}
+}