-
Notifications
You must be signed in to change notification settings - Fork 1
170 lines (145 loc) · 6.61 KB
/
unlighthouse.yaml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
name: Unlighthouse
on:
push:
branches: main
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
strategy:
matrix:
node-version: [20]
steps:
- name: Create initial comment
uses: marocchino/[email protected]
if: github.ref != 'refs/heads/main'
with:
header: ${{ env.COMMENT_ID }}
message: |
⚡️ Lighthouse report
- name: Set variables based on trigger
run: |
if [[ ${{ github.ref == 'refs/heads/main' }} == true ]]; then
echo "CLOUDFLARE_BRANCH=main" >> $GITHUB_ENV
echo "CLOUDFLARE_URL=https://${{ env.CLOUDFLARE_PROJECT }}.pages.dev" >> $GITHUB_ENV
else
echo "CLOUDFLARE_BRANCH=pull-${{ github.event.pull_request.number }}" >> $GITHUB_ENV
echo "CLOUDFLARE_URL=https://pull-${{ github.event.pull_request.number }}.${{ env.CLOUDFLARE_PROJECT }}.pages.dev" >> $GITHUB_ENV
fi
- name: Checkout repository
uses: actions/[email protected]
- name: Setup pnpm
uses: pnpm/[email protected]
with:
version: latest
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/[email protected]
with:
node-version: ${{ matrix.node-version }}
cache: 'pnpm'
- name: Retrieve Vercel Preview URL
uses: zentered/[email protected]
id: vercel_preview_url
env:
VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
with:
vercel_project_id: ${{ vars.VERCEL_PROJECT_ID }}
- name: Await Vercel Deployment
uses: UnlyEd/[email protected]
env:
VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
with:
deployment-url: ${{ steps.vercel_preview_url.outputs.preview_url }}
timeout: 360
- name: Install Dependencies
run: pnpm install -g @unlighthouse/cli puppeteer
- name: Run Unlighthouse
run: |
unlighthouse-ci \
--site "${{ github.ref == 'refs/heads/main' && 'https://hellob.art' || steps.vercel_preview_url.outputs.preview_url }}" \
--reporter jsonExpanded \
--build-static
- name: Upload report to Cloudflare pages
uses: cloudflare/[email protected]
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/[email protected]
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 getColor = score => score >= 0.9 ? '4c1' : score >= 0.5 ? 'ffa400' : 'eb0f00';
const score = res => `${getEmoji(res)} ${formatScore(res)}`;
const reportUrl = `${{ env.CLOUDFLARE_URL }}`;
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);
core.setOutput("score", `${Math.round(result.summary.score * 100)}`);
core.setOutput("scoreColor", getColor(result.summary.score));
- name: Update comment with result
uses: marocchino/[email protected]
if: github.ref != 'refs/heads/main'
with:
header: ${{ env.COMMENT_ID }}
message: ${{ steps.create_result_content.outputs.comment }}
- name: Create Lighthouse Score badge
uses: schneegans/[email protected]
if: github.ref == 'refs/heads/main'
with:
auth: ${{ secrets.GIST_SECRET }}
gistID: 795a3d6af5b0db5754cf7279898c3c16
filename: hellob.art-unlighthouse.json
namedLogo: Lighthouse
label: lighthouse
message: ${{ steps.create_result_content.outputs.score }}
color: ${{ steps.create_result_content.outputs.scoreColor }}
- name: Update comment on failure
uses: marocchino/[email protected]
if: failure() && github.ref != 'refs/heads/main'
with:
header: ${{ env.COMMENT_ID }}
message: |
⚡️ Lighthouse report failed
See deployment for any errors
- name: Update comment on cancel
uses: marocchino/[email protected]
if: cancelled() && github.ref != 'refs/heads/main'
with:
header: ${{ env.COMMENT_ID }}
message: |
⚡️ Lighthouse report cancelled