Configure Prettier for code quality and add to CI

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "prettier"]
 }

.github/workflows/nextjs.yml

@@ -28,6 +28,9 @@ jobs:
   # Build job
   build:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        job: ["prettier", "build"]
 
     env:
       NEXT_PUBLIC_CONTENTFUL_SPACE_ID: ${{ secrets.NEXT_PUBLIC_CONTENTFUL_SPACE_ID }}
@@ -86,12 +89,17 @@ jobs:
             ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
       - name: Install dependencies
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Check formatting
+        run: npx prettier --check .
+        if: matrix.job == 'prettier'
       - name: Build with Next.js
         run: ${{ steps.detect-package-manager.outputs.runner }} next build
+        if: matrix.job == 'build'
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
           path: ./out
+        if: matrix.job == 'build'
 
   # Deployment job
   deploy:

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "trailingComma": "all",
+  "printWidth": 80
+}

README.md

@@ -18,19 +18,22 @@ bun dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-## Depolyment
+## Deployment
 
-This site will be deployed on to Github Pages as a static site.
+This site will be deployed on to Github Pages as a static site. To do a local build of the site, run:
+
+```bash
+pnpm build
+```
 
 ## Testing
 
 This site will be tested using Playwright and Jest.
 
-## Learn More
+## Code Quality
 
-To learn more about Next.js, take a look at the following resources:
+To ensure code quality, this site will use ESLint and Prettier. To format project code locally, run:
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+```bash
+pnpm format
+```

next.config.mjs

@@ -2,6 +2,9 @@
 const nextConfig = {
   assetPrefix: process.env.NEXT_PUBLIC_BASE_PATH,
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
+  eslint: {
+    dirs: ["src"],
+  },
   experimental: {
     esmExternals: true,
   },

package.json

@@ -5,12 +5,13 @@
   "author": "Adam J. Arling <aarling@gmail.com>",
   "license": "MIT",
   "scripts": {
-    "dev": "next dev",
     "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
+    "deploy": "gh-pages -d out",
+    "dev": "next dev",
     "export": "next export",
-    "deploy": "gh-pages -d out"
+    "format": "prettier --write .",
+    "lint": "next lint",
+    "start": "next start"
   },
   "dependencies": {
     "@contentful/rich-text-react-renderer": "^15.21.2",
@@ -34,8 +35,10 @@
     "@types/react-dom": "^18.3.0",
     "eslint": "^9.3.0",
     "eslint-config-next": "14.2.3",
+    "eslint-config-prettier": "^9.1.0",
     "gh-pages": "^6.1.1",
     "postcss": "^8.4.38",
+    "prettier": "^3.2.5",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5"
   }

src/components/faq.tsx

@@ -13,8 +13,10 @@ import useGetContentfulData from "@/hooks/use-get-contentful-data";
 export default function FaqList() {
   const data = useGetContentfulData("faq");
 
+  const foo = "asdf";
+
   return (
-    <div className="">
+    <div>
       <div className="mx-auto max-w-4xl divide-y divide-foreground/10">
         <dl className="mt-10 space-y-6 divide-y divide-foreground/10">
           {data &&

src/lib/content-management-batch-api-helpers.ts

@@ -18,7 +18,7 @@ async function batchHelper() {
     entries.items.map((entry) =>
       client.entry.unpublish({
         entryId: entry.sys.id,
-      })
-    )
+      }),
+    ),
   );
 }

src/lib/get-contentful.ts

@@ -33,7 +33,7 @@ function getContentfulManagement() {
           // We are only managing the "hyku" environment with this client
           environmentId: "hyku",
         },
-      }
+      },
     );
   }