diff --git a/.github/scripts/lighthouse-report.js b/.github/scripts/lighthouse-report.js
new file mode 100644
index 0000000..167ed36
--- /dev/null
+++ b/.github/scripts/lighthouse-report.js
@@ -0,0 +1,69 @@
+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**
+
+
+
+ | Metric |
+ ⚡ PR Branch |
+ 📦 Main Branch |
+
+
+ | Performance |
+ ${pr.performance} |
+ ${main.performance} |
+
+
+ | Accessibility |
+ ${pr.accessibility} |
+ ${main.accessibility} |
+
+
+ | Best Practices |
+ ${pr.bestPractices} |
+ ${main.bestPractices} |
+
+
+ | SEO |
+ ${pr.seo} |
+ ${main.seo} |
+
+
+`;
+
+
+fs.writeFileSync('lighthouse-comment.md', md);
+console.log('✅ Comment written to lighthouse-comment.md');
diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml
index c8927df..01b1b06 100644
--- a/.github/workflows/lighthouse.yml
+++ b/.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 }}
\ No newline at end of file
+ token: ${{ secrets.GITHUB_TOKEN }}
+ issue-number: ${{ github.event.pull_request.number }}
+ body-path: lighthouse-comment.md