ci(pr): validate code changes in pull requests (#194)

* ci(pr): validate code changes in pull requests

.github/actions/build-docs/action.yml

@@ -0,0 +1,20 @@
+name: Build Docs
+description: Build docs pages inside /docs directory
+
+runs:
+    using: 'composite'
+    steps:
+        - name: Install dependencies
+          run: pnpm install
+          shell: bash
+          working-directory: docs
+
+        - name: Build with Next.js
+          run: pnpm next build
+          shell: bash
+          working-directory: docs
+
+        - name: Export static HTML with Next.js
+          run: pnpm next export
+          shell: bash
+          working-directory: docs

.github/actions/build-example/action.yml

@@ -0,0 +1,15 @@
+name: Build Example
+description: Build example page inside /example directory, this is used for validation
+
+runs:
+    using: 'composite'
+    steps:
+        - name: Install dependencies
+          run: pnpm install
+          shell: bash
+          working-directory: example
+
+        - name: Build with Next.js
+          run: pnpm next build
+          shell: bash
+          working-directory: example

.github/actions/lint/action.yml

@@ -0,0 +1,13 @@
+name: Lint codebase
+description: Run eslint to lint codebase and ensure code quality
+
+runs:
+    using: 'composite'
+    steps:
+        - name: Install dependencies
+          run: pnpm install
+          shell: bash
+
+        - name: Run eslint
+          run: pnpm lint
+          shell: bash

.github/workflows/check.yml

@@ -0,0 +1,17 @@
+name: Validate merge requests
+
+on:
+    pull_request:
+        branches:
+            - main
+
+jobs:
+    validate:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+            - uses: ./.github/actions/pnpm-setup
+            - uses: ./.github/actions/lint
+            - uses: ./.github/actions/build-example
+            - uses: ./.github/actions/build-docs

.github/workflows/nextjs.yml

@@ -9,7 +9,8 @@ name: Deploy Next.js site to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ['main']
+    branches:
+      - main
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:

.npmrc

@@ -0,0 +1,2 @@
+shared-workspace-lockfile = true
+auto-install-peers = true

docs/package.json

@@ -9,7 +9,6 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@next/font": "^13.4.12",
     "@types/node": "18.11.9",
     "@types/react": "18.0.25",
     "@types/react-dom": "18.0.9",

docs/pages/_app.tsx

@@ -1,8 +1,8 @@
 import "../styles/normalize.css";
 import "../styles/globals.css";
 
-import { Open_Sans } from "@next/font/google";
 import type { AppProps } from "next/app";
+import { Open_Sans } from "next/font/google";
 
 import Layout from "../components/Layout";
 

example/package.json

@@ -9,7 +9,6 @@
     "deploy": "sst deploy"
   },
   "dependencies": {
-    "@next/font": "13.4.12",
     "dayjs": "^1.11.9",
     "gray-matter": "^4.0.3",
     "next": "13.4.12",

example/pages/font-next-font.js

@@ -1,4 +1,4 @@
-import { MuseoModerno } from "@next/font/google";
+import { MuseoModerno } from "next/font/google";
 
 import Layout from "../components/layout";
 
@@ -11,7 +11,7 @@ export default function Page() {
   return (
     <Layout>
       <article>
-        <h1>Font — @next/font</h1>
+        <h1>Font — next/font</h1>
         <p>
           <b>Test 1:</b>
         </p>

example/pages/index.js

@@ -68,7 +68,7 @@ export default function Home({}) {
         <br />
         <Link href={`/font-css-font`}>Font — CSS Font</Link>
         <br />
-        <Link href={`/font-next-font`}>Font — @next/font</Link>
+        <Link href={`/font-next-font`}>Font — next/font</Link>
         <br />
         <Link href={`/page-does-not-exist`}>404 Page not found</Link>
         <br />

package.json

@@ -22,6 +22,7 @@
     "eslint": "^8.47.0"
   },
   "engines": {
-    "node": ">=16"
+    "node": ">=16",
+    "pnpm": ">=8"
   }
 }