Add lighthouse to build workflow

.github/workflows/build-push.yml

@@ -8,6 +8,10 @@ on:
 env:
     REPO_OWNER: "nginx"
     REPO_NAME: "documentation"
+    FRONT_DOOR_USERNAME: ${{ secrets.FRONT_DOOR_USERNAME }}
+    FRONT_DOOR_PASSWORD: ${{ secrets.FRONT_DOOR_PASSWORD }}
+    GITHUB_PR_NUMBER: ${{ github.event.pull_request.number }}
+    MAIN_REPORT_ARTIFACT_NAME: "lighthouse-reports-main"  
 
 jobs:
     deploy-example-site:
@@ -24,4 +28,97 @@ jobs:
         auto_deploy_env: "prod"
       secrets:
         AZURE_CREDENTIALS: ${{secrets.AZURE_CREDENTIALS_DOCS}}
-        AZURE_KEY_VAULT: ${{secrets.AZURE_KEY_VAULT_DOCS}}
+        AZURE_KEY_VAULT: ${{secrets.AZURE_KEY_VAULT_DOCS}}
+    lighthouseci:
+      if: github.event.pull_request
+      needs: deploy-example-site
+      runs-on: ubuntu-22.04
+      steps:
+        - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+          with:
+            ref: ${{ github.event.workflow_run.head_branch }}
+        - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+          with:
+            node-version: 22
+        - name: Installing packages
+          run: cd performance && npm ci
+        - name: Generating lighthouse reports for PR...
+          env: 
+            REPORT_NAME: "pr"
+          run: | 
+              node performance/lighthouse-script.js
+        - name: Retrieve the latest artifact ID for lighthouse report main
+          uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.0.0
+          id: fetch-artifact-id
+          with: 
+            script: |
+              const { owner, repo } = context.issue;
+              const response = await github.rest.actions.listArtifactsForRepo({
+                owner,
+                repo,
+              });
+
+              const artifactName = process.env.MAIN_REPORT_ARTIFACT_NAME;
+              const filteredArtifacts = response.data.artifacts.filter(a => a.name === artifactName);
+
+              if(filteredArtifacts.length === 0) {
+                return core.setFailed(`Error: Not able to find artifact with name ${artifactName}`);
+              }
+
+              const latestArtifact = filteredArtifacts.sort((a, b) => new Date(b.created_at) - new Date(a.created_at))[0];
+              console.log(`Success! Found the latest artifact with name ${artifactName}, with artifact id ${latestArtifact.id} | workflow id ${latestArtifact.workflow_run.id}`);
+
+              const download = await github.rest.actions.downloadArtifact({
+                owner: owner,
+                repo: repo,
+                artifact_id: latestArtifact.id,
+                archive_format: 'zip',
+              });
+
+              const fs = require('fs');
+              fs.writeFileSync('./artifact-lighthouse-report-main.zip', Buffer.from(download.data));
+
+            result-encoding: string
+        - name: Unzip the artifact
+          run: |
+            unzip ./artifact-lighthouse-report-main.zip
+            ls -al
+        - name: Move the main report artifact to same directory as pr report
+          run: |
+            mv main-report.json ./lighthouse-reports
+        - name: Compare the artifacts for negative differences in performance
+          continue-on-error: true
+          run: |
+              FIELDS=("performance" "accessibility") 
+              TOLERANCE=0.05
+              FLOOR_VALUE=0.90
+              for FIELD in "${FIELDS[@]}"; do
+                  PR_VALUE=$(cat lighthouse-reports/pr-report.json | jq -r ".categories.$FIELD.score")
+                  MAIN_VALUE=$(cat lighthouse-reports/main-report.json | jq -r ".categories.$FIELD.score")
+                  echo "$FIELD: PR - $PR_VALUE | Main - $MAIN_VALUE"
+
+                  if (( $(echo "$PR_VALUE < $FLOOR_VALUE" | bc -l) )); then
+                      echo "Error: $FIELD score in PR ($PR_VALUE) is less than accepted value ($FLOOR_VALUE)"
+                      exit 1
+                  fi
+
+                  if [ $FIELD = "performance" ]; then  
+                    LOWER_BOUND=$(echo "$MAIN_VALUE - $TOLERANCE" | bc)
+                    UPPER_BOUND=$(echo "$MAIN_VALUE + $TOLERANCE" | bc)
+                    if (( $(echo "$PR_VALUE < $LOWER_BOUND" | bc -l) || $(echo "$PR_VALUE > $UPPER_BOUND" | bc -l) )); then
+                        echo "Error: $FIELD score in PR ($PR_VALUE) is less than in MAIN ($MAIN_VALUE)"
+                        exit 1
+                    fi
+                  else
+                    if (( $(echo "$PR_VALUE < $MAIN_VALUE" | bc -l) )); then
+                      echo "Error: $FIELD score in PR ($PR_VALUE) is less than in MAIN ($MAIN_VALUE)"
+                      exit 1
+                    fi
+                  fi
+              done
+        - uses: actions/upload-artifact@6f51ac03b9356f520e9adb1b1b7802705f340c2b # v4.5.0
+          if: ${{ !cancelled() }}
+          with:
+              name: lighthouse-reports-pr
+              path: lighthouse-reports/pr-report.json
+              retention-days: 3

.github/workflows/lighthouse.yml

@@ -0,0 +1,48 @@
+name: Update lighthouse report artifact for main branch
+
+on: 
+  push:
+    branches: 
+      - main
+  workflow_dispatch:
+
+env:
+  OWNER: nginxinc
+  REPO: nginx-hugo-theme
+  FRONT_DOOR_USERNAME: ${{ secrets.FRONT_DOOR_USERNAME }}
+  FRONT_DOOR_PASSWORD: ${{ secrets.FRONT_DOOR_PASSWORD }}
+jobs:
+  generate-lighthouse-report:
+    runs-on: ubuntu-22.04
+    steps:
+        - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+          with:
+            ref: ${{ github.event.workflow_run.head_branch }}
+        - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+          with:
+            node-version: 18
+        - name: Installing packages
+          run: cd performance && npm ci
+        - name: Get PR number being merged
+          env: 
+            PAGE: 1
+            PER_PAGE: 10
+          run: |
+            RESPONSE=$(curl -L \
+              -X GET \
+              -H "Accept: application/vnd.github+json" \
+              -H "X-GitHub-Api-Version: 2022-11-28" \
+              -s "https://api.github.com/repos/${{ env.OWNER }}/${{ env.REPO }}/pulls?state=closed&direction=desc&page=${{ env.PAGE }}&per_page=${{ env.PER_PAGE }}")
+            LATEST_PR_NUMBER=$(echo "$RESPONSE" | jq -r '.[] | select(.merged_at != null) | .number' | head -1)
+            echo "GITHUB_PR_NUMBER=$LATEST_PR_NUMBER" >> $GITHUB_ENV
+        - name: Generating lighthouse reports for main...
+          env: 
+            REPORT_NAME: "main"
+            GITHUB_PR_NUMBER: ${{ env.GITHUB_PR_NUMBER }}
+          run: |
+            node performance/lighthouse-script.js
+        - uses: actions/upload-artifact@6f51ac03b9356f520e9adb1b1b7802705f340c2b # v4.5.0
+          with:
+            name: lighthouse-reports-main
+            path: lighthouse-reports/main-report.json
+            retention-days: 30

.gitignore

@@ -37,3 +37,6 @@ exampleSite/hugo
 
 # Biome
 biome.rb
+
+# Local Lighthouse artifacts
+*/lighthouse-reports

performance/README.md

@@ -0,0 +1,3 @@
+### Important Information
+
+This folder is only to be run in the CI/CD system. Should not be ran locally!

performance/lighthouse-script.js

@@ -0,0 +1,57 @@
+const puppeteer = require('puppeteer');
+const fs = require('fs');
+
+const PORT = 8041;
+const REPORT_NAME = process.env.REPORT_NAME;
+const PR_NUMBER = process.env.GITHUB_PR_NUMBER;
+const OUTPUT_DIR = './lighthouse-reports';
+
+const signIntoFrontDoor = async (browser, env) => {
+  const page = await browser.newPage();
+  try {
+    await page.authenticate({
+      username: process.env.FRONT_DOOR_USERNAME,
+      password: process.env.FRONT_DOOR_PASSWORD,
+    });
+    await page.goto(env['url']);
+    await page.waitForSelector('.grid-container');
+    console.log('Logged in...');
+    await page.close();
+  } catch (error) {
+    console.log('Unable to log in or not needed...', error);
+  }
+};
+
+const generateLighthouseReport = async (env) => {
+  const OUTPUT_FILE = `${env['title']}-report.json`;
+  const lighthouse = (await import('lighthouse')).default;
+  console.log(`Running Lighthouse for ${env['title']}...`);
+  const result = await lighthouse(env['url'], { port: PORT });
+  fs.writeFileSync(`${OUTPUT_DIR}/${OUTPUT_FILE}`, result.report);
+  console.log(`Generated report for ${env['title']}...`);
+};
+
+const launchBrowser = async () => {
+  return await puppeteer.launch({
+    args: [`--remote-debugging-port=${PORT}`],
+    headless: true,
+  });
+};
+
+(async () => {
+  const browser = await launchBrowser();
+  if (!fs.existsSync(OUTPUT_DIR)) {
+    fs.mkdirSync(OUTPUT_DIR);
+  }
+
+  const environment = {
+    title: `${REPORT_NAME}`,
+    url: `https://frontdoor-test-docs.nginx.com/previews/nginx-hugo-theme/${PR_NUMBER}/`,
+  };
+
+  console.log(`Running on ${environment.url}...`);
+  await signIntoFrontDoor(browser, environment);
+  await generateLighthouseReport(environment);
+
+  browser.close();
+})();