Setting up the workflow to run checks for linting and formatting and running the npm run format command to add the linting and formatting changes

.github/workflows/deploy.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: "18"
 
       - name: Install dependencies
         run: npm install

.github/workflows/lint-and-format.yml

@@ -0,0 +1,23 @@
+name: Lint and Format
+
+on: [push, pull_request]
+
+jobs:
+  lint-and-format:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run ESLint
+        run: npx eslint .
+
+      - name: Check Prettier formatting
+        run: npm run format:check

.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+build
+coverage

.prettierrc

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

README.md

@@ -1,4 +1,3 @@
-
 <h1 align="center" style="bold">Tek Talent Africa Community Site</h1>
 
 <p align="center">
@@ -40,17 +39,17 @@
 
 ## 🧰 Tech Stack
 
-| Tech | Description |
-|------|-------------|
-| **React** | Frontend library for UI development |
-| **TypeScript** | Typed JavaScript for better maintainability |
-| **Tailwind CSS** | Utility-first, responsive styling |
-| **Shadcn/UI** | Accessible, modern UI components |
-| **React Router** | Routing with `HashRouter` support |
-| **React Query** | Asynchronous data handling |
-| **Gray Matter** | Markdown frontmatter parsing |
-| **React Markdown** | Markdown content renderer |
-| **Lucide Icons** | Clean and beautiful SVG icons |
+| Tech               | Description                                 |
+| ------------------ | ------------------------------------------- |
+| **React**          | Frontend library for UI development         |
+| **TypeScript**     | Typed JavaScript for better maintainability |
+| **Tailwind CSS**   | Utility-first, responsive styling           |
+| **Shadcn/UI**      | Accessible, modern UI components            |
+| **React Router**   | Routing with `HashRouter` support           |
+| **React Query**    | Asynchronous data handling                  |
+| **Gray Matter**    | Markdown frontmatter parsing                |
+| **React Markdown** | Markdown content renderer                   |
+| **Lucide Icons**   | Clean and beautiful SVG icons               |
 
 ---
 
@@ -166,6 +165,7 @@ The site is designed for **GitHub Pages** using `HashRouter` to handle routing.
 ### 🛠 Build & Deploy Steps
 
 1. **Build the Project**:
+
    ```bash
    npm run build
    ```
@@ -181,7 +181,7 @@ name: Deploy to GitHub Pages
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
   build-and-deploy:

components.json

@@ -17,4 +17,4 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   }
-}
+}

content/blog/test-of-the-blog.md

@@ -7,20 +7,27 @@ author: "Author"
 image: "public/uploads/tektalentlogo.png"
 category: "Technology"
 ---
+
 ## Overview
+
 Our blog system is built using a static markdown-based approach, which provides several benefits including:
+
 - Fast loading times
 - Easy content management
 - Version control friendly
 - SEO optimized
 
 ## Content Structure
+
 Each blog post consists of two main parts:
+
 1. Frontmatter (Metadata)
 2. Content (Markdown)
 
 ### Frontmatter
+
 The frontmatter contains essential metadata about the blog post:
+
 - title: The main title of the post
 - date: Publication date
 - description: A brief summary of the post
@@ -30,7 +37,9 @@ The frontmatter contains essential metadata about the blog post:
 - slug: URL-friendly identifier
 
 ### Content
+
 The main content is written in Markdown format, which supports:
+
 - Headers
 - Lists
 - Links
@@ -39,13 +48,16 @@ The main content is written in Markdown format, which supports:
 - And more...
 
 ## Technical Implementation
+
 The system uses:
+
 - TypeScript for type safety
 - Gray-matter for parsing markdown files
 - Static file generation for optimal performance
 
 ## How to Create a New Post
+
 1. Create a new markdown file
 2. Add frontmatter with required metadata
 3. Write content in markdown format
-4. Save the file in the appropriate directory
+4. Save the file in the appropriate directory

eslint.config.js

@@ -3,11 +3,16 @@ import globals from "globals";
 import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
 import tseslint from "typescript-eslint";
+import prettier from "eslint-config-prettier";
 
-export default tseslint.config(
-  { ignores: ["dist"] },
+export default [
+  {
+    ignores: ["dist"],
+  },
+  js.configs.recommended,
+  ...tseslint.configs.recommended, // <-- FIX: spread this array
+  prettier,
   {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
     files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
@@ -19,11 +24,11 @@ export default tseslint.config(
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      "react-refresh/only-export-components": [
-        "warn",
-        { allowConstantExport: true },
-      ],
       "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-empty-object-type": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-require-imports": "off",
+      "react-refresh/only-export-components": "off",
     },
-  }
-);
+  },
+];

index.html

@@ -1,28 +1,35 @@
-
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <base href="/tektalentafrica.github.io/" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Tek Talent Africa - Community Site</title>
-    <meta name="description" content="Tek Talent Africa Community site - Empowering innovation through collaboration, creativity, and community engagement." />
+    <meta
+      name="description"
+      content="Tek Talent Africa Community site - Empowering innovation through collaboration, creativity, and community engagement."
+    />
     <meta property="og:title" content="Tek Talent Africa - Community Site" />
-    <meta property="og:description" content="A vibrant tech community that connects individuals, shares knowledge and drives technological advancements together." />
+    <meta
+      property="og:description"
+      content="A vibrant tech community that connects individuals, shares knowledge and drives technological advancements together."
+    />
     <meta property="og:type" content="website" />
-    
+
     <!-- The script to create client side routing to github pages -->
     <script type="text/javascript">
-      (function(l) {
-        if (l.search[1] === '/' ) {
-          var decoded = l.search.slice(1).split('&').map(function(s) { 
-            return s.replace(/~and~/g, '&')
-          }).join('?');
-          window.history.replaceState(null, null,
-              l.pathname.slice(0, -1) + decoded + l.hash
-          );
+      (function (l) {
+        if (l.search[1] === "/") {
+          var decoded = l.search
+            .slice(1)
+            .split("&")
+            .map(function (s) {
+              return s.replace(/~and~/g, "&");
+            })
+            .join("?");
+          window.history.replaceState(null, null, l.pathname.slice(0, -1) + decoded + l.hash);
         }
-      }(window.location))
+      })(window.location);
     </script>
   </head>
 

package.json

@@ -11,7 +11,9 @@
     "lint": "eslint .",
     "preview": "vite preview",
     "predeploy": "npm run build",
-    "deploy": "gh-pages -d dist"
+    "deploy": "gh-pages -d dist",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
@@ -76,11 +78,13 @@
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.9.0",
+    "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
     "gh-pages": "^6.3.0",
     "globals": "^15.9.0",
     "postcss": "^8.4.47",
+    "prettier": "^3.5.3",
     "tailwindcss": "^3.4.11",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.1",