feat: Added Updated lighthouse integration

.github/scripts/lighthouse-report.js

@@ -0,0 +1,70 @@
+const fs = require('fs');
+const path = require('path');
+
+const dir = '.lighthouseci';
+const files = fs.readdirSync(dir).filter(file => file.endsWith('.report.json'));
+
+if (files.length < 2) {
+  console.error('❌ Not enough Lighthouse reports found.');
+  process.exit(1);
+}
+
+let mainReport = '';
+let prReport = '';
+
+for (const file of files) {
+  const json = JSON.parse(fs.readFileSync(path.join(dir, file), 'utf8'));
+  const url = json.finalUrl;
+
+  if (url.includes('3000')) mainReport = json;
+  else if (url.includes('3001')) prReport = json;
+}
+
+function extract(report) {
+  return {
+    performance: report.categories.performance.score * 100,
+    accessibility: report.categories.accessibility.score * 100,
+    bestPractices: report.categories['best-practices'].score * 100,
+    seo: report.categories.seo.score * 100,
+  };
+}
+
+const main = extract(mainReport);
+const pr = extract(prReport);
+
+const md = `
+**🔍 Lighthouse Scores**
+
+<table>
+  <tr>
+    <th>Metric</th>
+    <th>⚡ PR Branch</th>
+    <th>📦 Main Branch</th>
+  </tr>
+  <tr>
+    <td>Performance</td>
+    <td>${pr.performance}</td>
+    <td>${main.performance}</td>
+  </tr>
+  <tr>
+    <td>Accessibility</td>
+    <td>${pr.accessibility}</td>
+    <td>${main.accessibility}</td>
+  </tr>
+  <tr>
+    <td>Best Practices</td>
+    <td>${pr.bestPractices}</td>
+    <td>${main.bestPractices}</td>
+  </tr>
+  <tr>
+    <td>SEO</td>
+    <td>${pr.seo}</td>
+    <td>${main.seo}</td>
+  </tr>
+</table>
+`;
+
+
+fs.writeFileSync('lighthouse-comment.md', md);
+console.log('✅ Comment written to lighthouse-comment.md');
+

.github/workflows/lighthouse.yml

@@ -9,40 +9,47 @@ jobs:
   lighthouse:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout PR branch
-        uses: actions/checkout@v4
+      - uses: actions/checkout@v4
 
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
           node-version: 18
 
-      - name: Install static server
-        run: npm install -g serve
+      - run: npm install -g serve
 
-      - name: Serve PR branch (background on port 3001)
+      - name: Serve PR branch (port 3001)
         run: |
           serve . -l 3001 &
           sleep 5
+
       - name: Checkout main branch into separate folder
         run: |
           git fetch origin main
           git worktree add main-branch origin/main
-      - name: Serve Main branch (background on port 3000)
+
+      - name: Serve Main branch (port 3000)
         run: |
           cd main-branch
           serve . -l 3000 &
           cd ..
           sleep 5
 
-      - name: Create output directory for Lighthouse
-        run: mkdir -p ${{ github.workspace }}/tmp/artifacts
+      - name: Run Lighthouse audits
+        uses: treosh/lighthouse-ci-action@v12
+        with:
+          urls: |
+            http://localhost:3000/
+            http://localhost:3001/
+          uploadArtifacts: true
+          temporaryPublicStorage: true
+
+      - name: Parse reports and generate comment
+        run: node .github/scripts/lighthouse-report.js
 
-      - name: Run Lighthouse audit for both PR and Main
-        uses: foo-software/lighthouse-check-action@master
+      - name: Comment on PR with Lighthouse scores
+        uses: peter-evans/create-or-update-comment@v4
         with:
-          gitAuthor: ${{ github.actor }}
-          gitBranch: ${{ github.head_ref }}
-          outputDirectory: ${{ github.workspace }}/tmp/artifacts
-          urls: 'http://localhost:3000/?branch=main,http://localhost:3001/?branch=pr'
-          sha: ${{ github.sha }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body-path: lighthouse-comment.md