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