hellob.art/.github/workflows/unlighthouse.yaml

135 lines
5 KiB
YAML

name: Unlighthouse
on: [pull_request]
permissions:
pull-requests: write
jobs:
unlighthouse:
runs-on: ubuntu-latest
env:
COMMENT_ID: unlighthouse-node${{matrix.node-version}}
PORT: 8000
CLOUDFLARE_PROJECT: hellobart-unlighthouse
CLOUDFLARE_BRANCH: pull-${{ github.event.pull_request.number }}
strategy:
matrix:
node-version: [18]
steps:
- name: Create initial comment
uses: marocchino/sticky-pull-request-comment@v2.7.0
with:
header: ${{ env.COMMENT_ID }}
message: |
⚡️ Lighthouse report
![loading](https://github.com/bartvdbraak/hellob.art/assets/3996360/0e00b3fc-d5f9-490b-9aa7-07cb4b59f85f)
- name: Checkout repository
uses: actions/checkout@v3.5.3
- name: Setup pnpm
uses: pnpm/action-setup@v2.4.0
with:
version: latest
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v3.8.1
with:
node-version: ${{ matrix.node-version }}
cache: 'pnpm'
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Build production
run: pnpm run build
- name: Start Preview and Get Preview URL
run: |
pnpm run preview --port ${{ env.PORT }} & echo $! > preview_pid
- name: Install Dependencies
run: pnpm add -g @unlighthouse/cli puppeteer
- name: Run Unlighthouse
run: |
unlighthouse-ci \
--site "http://localhost:${{ env.PORT }}" \
--reporter jsonExpanded \
--build-static
- name: Upload report to Cloudflare pages
uses: cloudflare/wrangler-action@2.0.0
with:
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
command: pages deploy .unlighthouse --project-name="${{ env.CLOUDFLARE_PROJECT }}" --branch=${{ env.CLOUDFLARE_BRANCH }}
- name: Create result content
id: create_result_content
uses: actions/github-script@v6.4.1
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
script: |
const fs = require('fs');
const result = JSON.parse(fs.readFileSync('.unlighthouse/ci-result.json', 'utf8'));
const formatScore = score => `${Math.round(score * 100)} (${score})`;
const getEmoji = score => score >= 0.9 ? '🟢' : score >= 0.5 ? '🟠' : '🔴';
const score = res => `${getEmoji(res)} ${formatScore(res)}`;
const reportUrl = `https://${{ env.CLOUDFLARE_BRANCH }}.${{ env.CLOUDFLARE_PROJECT }}.pages.dev`;
const comment = [
`⚡️ Lighthouse report for the changes in this PR:`,
'| Category | Score |',
'| --- | --- |',
`| Performance | ${score(result.summary.categories.performance.averageScore)} |`,
`| Accessibility | ${score(result.summary.categories.accessibility.averageScore)} |`,
`| Best practices | ${score(result.summary.categories['best-practices'].averageScore)} |`,
`| SEO | ${score(result.summary.categories.seo.averageScore)} |`,
`| *Overall* | ${score(result.summary.score)} |`,
'',
'*Lighthouse scores for individual routes:*',
'',
'| Path | Performance | Accessibility | Best practices | SEO | Overall |',
'| --- | --- | --- | --- | --- | --- |',
`${result.routes.map(route => `| ${route.path} | ${score(route.categories.performance.score)} | ${score(route.categories.accessibility.score)} | ${score(route.categories['best-practices'].score)} | ${score(route.categories.seo.score)} | ${score(route.score)} |`).join('\n')}`,
'',
'*Lighthouse metrics:*',
'',
'| Metric | Average Value |',
'| --- | --- |',
`${Object.entries(result.summary.metrics).map(([metric, { averageNumericValue }]) => `| ${metric} | ${averageNumericValue} |`).join('\n')}`,
'',
`View the full Lighthouse report [here](${reportUrl}).`,
].join('\n');
core.setOutput("comment", comment);
- name: Update comment with result
uses: marocchino/sticky-pull-request-comment@v2.7.0
with:
header: ${{ env.COMMENT_ID }}
message: ${{ steps.create_result_content.outputs.comment }}
- name: Update comment on failure
uses: marocchino/sticky-pull-request-comment@v2.7.0
if: ${{ failure() }}
with:
header: ${{ env.COMMENT_ID }}
message: |
⚡️ Lighthouse report failed
See deployment for any errors
- name: Update comment on cancel
uses: marocchino/sticky-pull-request-comment@v2.7.0
if: ${{ cancelled() }}
with:
header: ${{ env.COMMENT_ID }}
message: |
⚡️ Lighthouse report cancelled