lighthouse.yml

# Don't change the name, it's used in lighthouse-pr-comment.yml
# to detect the end of this workflow
name: lighthouse

on:
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm ci
      - run: npm run build:dev

      - uses: treosh/lighthouse-ci-action@v9
        id: lighthouse_audit
        with:
          # Check sample pages from the main layouts, see "url" key in the config file.
          #
          # Note from lighthouse-ci docs:
          # URLs will have their port replaced with the port of the local server that
          # Lighthouse CI starts for you. This allows you to write URLs without worrying
          # about the chosen temporary port.
          configPath: './.lighthouserc.json'
          temporaryPublicStorage: true

      # Based on
      # https://github.com/OskarAhl/Lighthouse-github-action-comment/blob/main/.github/workflows/
      - uses: actions/github-script@v6
        id: format_lighthouse_score
        env:
          MANIFEST: ${{ steps.lighthouse_audit.outputs.manifest }}
          LINKS: ${{ steps.lighthouse_audit.outputs.links }}
          PR: ${{ github.event.number }}
        with:
          script: |
            const manifest = JSON.parse(process.env.MANIFEST)
            const links = JSON.parse(process.env.LINKS)
            const pr = process.env.PR

            console.log('Raw output:\n', manifest, '\n', links)

            const formatResult = (res) => Math.round((res * 100))
            const score = res => res >= 90 ? '🟢' : res >= 50 ? '🟠' : '🔴'

            manifest
              .forEach(result => Object.keys(result.summary)
                .forEach(metric => result.summary[metric] = formatResult(result.summary[metric]))
              )

            const home_page = manifest.find(result => new URL(result.url).pathname === '/')
            const other_pages = manifest.filter(result => new URL(result.url).pathname !== '/')

            let comment = [
                `### ⚡ Lighthouse report for the home page 🏠`,
                '| Category | Score |',
                '| --- | --: |',
                `| ${score(home_page.summary.performance)} Performance | ${home_page.summary.performance} |`,
                `| ${score(home_page.summary.accessibility)} Accessibility | ${home_page.summary.accessibility} |`,
                `| ${score(home_page.summary['best-practices'])} Best practices | ${home_page.summary['best-practices']} |`,
                `| ${score(home_page.summary.seo)} SEO | ${home_page.summary.seo} |`,
                ' ',
                `[See the full report...](${links[home_page.url]})`,
                ' ',
                `#### Other pages`,
                ...other_pages.map(result => {
                  const pathname = new URL(result.url).pathname

                  return `* [${pathname}](${links[result.url]}) \
                          [${score(result.summary.performance)}](## "Performance") ${result.summary.performance} \
                          [${score(result.summary.accessibility)}](## "Accessibility") ${result.summary.accessibility} \
                          [${score(result.summary['best-practices'])}](## "Best practices") ${result.summary['best-practices']} \
                          [${score(result.summary.seo)}](## "SEO") ${result.summary.seo}`
                })
            ].join('\n')

            const errors = [home_page, ...other_pages].reduce((acc, p) => {
                const pageErrors = ['accessibility', 'best-practices', 'seo']
                    .map(c => ({ pathname: new URL(p.url).pathname, category: c, score: p.summary[c] }))
                    .filter(res => res.score !== 100)

                return [...acc, ...pageErrors]
            }, [])

            if (errors.length > 0) {
                const warning = [
                    `⚠️ @${{ github.event.pull_request.user.login }} your PR decreased Lighthouse scores! ⚠️`,
                    ...errors.map(e => `* ⚠️  \`${e.pathname}\` ${e.category} down to **${e.score}**`)
                ].join('\n')

                comment = `${warning}\n\n${comment}`
                core.setFailed('Lighthouse scores decreased because of this PR')
            }
            const fs = require('fs')
            fs.writeFileSync(`lighthouse-pr-comment-${pr}.txt`, comment)

      - uses: actions/upload-artifact@v3
        if: always()
        with:
          name: lighthouse-pr-comment
          path: lighthouse-pr-comment-${{ github.event.number }}.txt
          # Don't need the full default retention of 90 days.
          retention-days: 3