Skip to content

feat: Community lab media page #4694

feat: Community lab media page

feat: Community lab media page #4694

Workflow file for this run

# 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