Add lighthouse to build workflow (#400)

* Workflow: Add lighthouse to build

* Lighthouse: Move to performance folder

* Lighthouse: Add readme

Author: lamATnginx

.github/workflows/build-push.yml

@@ -8,6 +8,9 @@ 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 }}  
 
 jobs:
     deploy-example-site:
@@ -24,4 +27,49 @@ 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: call-docs-build-push
+      runs-on: ubuntu-22.04
+      steps:
+        - uses: actions/checkout@v5
+          with:
+            ref: ${{ github.event.workflow_run.head_branch }}
+        - uses: actions/setup-node@v5
+          with:
+            node-version: 18
+        - name: Installing packages
+          run: npm ci
+        - name: Generating lighthouse reports for PR and main...
+          run: | 
+              node performance/lighthouse-script.js
+        - name: Compare the artifacts for negative differences in performance
+          continue-on-error: true
+          run: |
+              FIELDS=("performance" "accessibility") 
+              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 [ $FIELD = "performance" ]; then  
+                    LOWER_BOUND=$(echo "$MAIN_VALUE - 0.05" | bc)
+                    UPPER_BOUND=$(echo "$MAIN_VALUE + 0.05" | 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@v4
+          if: ${{ !cancelled() }}
+          with:
+              name: lighthouse-reports
+              path: lighthouse-reports/
+              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 PR_NUMBER = process.env.GITHUB_PR_NUMBER;
+const environments = [
+  {
+    title: 'pr',
+    url: `https://frontdoor-test-docs.nginx.com/previews/docs/${PR_NUMBER}/`,
+  },
+  {
+    title: 'main',
+    url: 'https://docs.nginx.com/',
+  },
+];
+const OUTPUT_DIR = './lighthouse-reports';
+
+const signIntoFrontDoor = async (browser, env) => {
+  const page = await browser.newPage();
+  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();
+};
+
+const runLighthouse = 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);
+};
+
+(async () => {
+  const browser = await puppeteer.launch({
+    args: [`--remote-debugging-port=${PORT}`],
+    headless: true,
+  });
+  if (!fs.existsSync(OUTPUT_DIR)) {
+    fs.mkdirSync(OUTPUT_DIR);
+  }
+
+  for (const env of environments) {
+    if (env['title'] === 'pr') {
+      await signIntoFrontDoor(browser, env);
+    }
+    await runLighthouse(env);
+  }
+
+  await browser.close();
+})();