Skip to content

Commit

Permalink
[add] improve Lighthouse report action
Browse files Browse the repository at this point in the history
  • Loading branch information
@rvalitov
rvalitov committed Dec 5, 2024
1 parent e39b787 commit bbb1f29
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 103 deletions.
1 change: 1 addition & 0 deletions .github/workflows/hugo.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ jobs:
uses: actions/configure-pages@v4
- name: Install Node.js dependencies
run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
- run: npm run build --if-present
- name: Build with Hugo
working-directory: ./src
env:
Expand Down
132 changes: 32 additions & 100 deletions .github/workflows/lighthouse.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ jobs:
submodules: recursive
- name: Install Node.js dependencies
run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
- run: npm run build --if-present
- name: Build with Hugo
working-directory: ./src
env:
Expand All @@ -56,110 +57,41 @@ jobs:
run: hugo server &
# Wait till the server warms up
- run: sleep 15
- run: mkdir -p ${{ github.workspace }}/tmp/desktop
- run: mkdir -p ${{ github.workspace }}/tmp/mobile
- name: Lighthouse Desktop
uses: foo-software/lighthouse-check-action@v12.0.1
id: lighthouseDesktop
with:
device: 'desktop'
locale: 'en'
tag: "desktop"
prCommentEnabled: false
prCommentSaveOld: true
gitAuthor: ${{ github.actor }}
gitBranch: ${{ github.ref }}
gitHubAccessToken: ${{ secrets.GITHUB_TOKEN }}
outputDirectory: ${{ github.workspace }}/tmp/desktop
# see https://github.com/GoogleChrome/lighthouse/blob/master/docs/configuration.md
# and https://github.com/GoogleChrome/lighthouse/blob/main/core/config/default-config.js
overridesJsonFile: ./lighthouse-overrides.json
sha: ${{ github.sha }}
urls: 'http://localhost:1313/'
- name: Lighthouse Mobile
uses: foo-software/lighthouse-check-action@v12.0.1
id: lighthouseMobile
with:
device: 'mobile'
locale: 'en'
tag: "mobile"
prCommentEnabled: false
prCommentSaveOld: true
gitAuthor: ${{ github.actor }}
gitBranch: ${{ github.ref }}
gitHubAccessToken: ${{ secrets.GITHUB_TOKEN }}
outputDirectory: ${{ github.workspace }}/tmp/mobile
# see https://github.com/GoogleChrome/lighthouse/blob/master/docs/configuration.md
# and https://github.com/GoogleChrome/lighthouse/blob/main/core/config/default-config.js
overridesJsonFile: ./lighthouse-overrides.json
sha: ${{ github.sha }}
urls: 'http://localhost:1313/'
- name: Upload mobile report
id: lighthouseMobileReport
uses: actions/upload-artifact@master
with:
name: Lighthouse-mobile-report
path: ${{ github.workspace }}/tmp/mobile
- name: Upload desktop report
id: lighthouseDesktopReport
- name: Run Lighthouse Desktop
run: npm run lighthouse-desktop
- name: Run Lighthouse Mobile
run: npm run lighthouse-mobile
- name: Make Lighthouse Mobile Report Screenshot
run: npm run screenshot:mobile
- name: Make Lighthouse Desktop Report Screenshot
run: npm run screenshot:desktop
- name: Upload Lighthouse Report
id: lighthouseUploadReport
uses: actions/upload-artifact@master
with:
name: Lighthouse-desktop-report
path: ${{ github.workspace }}/tmp/desktop
- name: Parse Mobile Scores
id: mobileScores
uses: actions/github-script@v7
name: Lighthouse-report
path: |
desktop.report.html
desktop.report.json
mobile.report.html
mobile.report.json
- name: Upload files to Imgbb
id: upload-files-imgbb
uses: McCzarny/upload-image@v1.2.5
with:
script: |
try {
const fs = require('fs')
const jsonString = fs.readFileSync("${{ github.workspace }}/tmp/mobile/results.json")
var score = JSON.parse(jsonString)
console.log(score[0].scores)
} catch(err) {
core.error("Error while reading or parsing the JSON")
core.setFailed(err)
}
- name: Parse Desktop Scores
id: desktopScores
uses: actions/github-script@v7
with:
script: |
try {
const fs = require('fs')
const jsonString = fs.readFileSync("${{ github.workspace }}/tmp/desktop/results.json")
var score = JSON.parse(jsonString)
core.setOutput('scores', score[0].scores)
} catch(err) {
core.error("Error while reading or parsing the JSON")
core.setFailed(err)
}
- name: Publish the reports
path: |
mobile.jpg
desktop.jpg
uploadMethod: imgbb
apiKey: '${{ secrets.IMGBB_API_KEY }}'
- name: Publish info
uses: peter-evans/create-or-update-comment@v4
with:
issue-number: ${{ github.event.pull_request.number }}
body: |
### Lighthouse Reports
| Mode | Accessibility | Best Practicies | Performance | SEO | Report |
|----|----|----|----|----|----|
| Mobile | ${{ steps.mobileScores.outputs.scores.accessibility }} | ${{ steps.mobileScores.outputs.scores.bestPractices }} | ${{ steps.mobileScores.outputs.scores.performance }} | ${{ steps.mobileScores.outputs.scores.seo }} | [Mobile.zip](${{ steps.lighthouseMobileReport.outputs.artifact-url }}) |
| Desktop | ${{ steps.desktopScores.outputs.scores.accessibility }} | ${{ steps.desktopScores.outputs.scores.bestPractices }} | ${{ steps.desktopScores.outputs.scores.performance }} | ${{ steps.desktopScores.outputs.scores.seo }} | [Desktop.zip](${{ steps.lighthouseDesktopReport.outputs.artifact-url }}) |
- name: Verify Lighthouse Desktop Results
uses: foo-software/lighthouse-check-status-action@v3.0.1
with:
lighthouseCheckResults: ${{ steps.lighthouseDesktop.outputs.lighthouseCheckResults }}
minAccessibilityScore: "80"
minBestPracticesScore: "80"
minPerformanceScore: "40"
minProgressiveWebAppScore: "0"
minSeoScore: "70"
- name: Verify Lighthouse Mobile Results
uses: foo-software/lighthouse-check-status-action@v3.0.1
with:
lighthouseCheckResults: ${{ steps.lighthouseMobile.outputs.lighthouseCheckResults }}
minAccessibilityScore: "80"
minBestPracticesScore: "80"
minPerformanceScore: "40"
minProgressiveWebAppScore: "0"
minSeoScore: "70"
### Lighthouse Report
| Mobile | Desktop |
|----|----|
| ![Lighthouse Mobile Report Score](${{steps.upload-files-imgbb.outputs.url[0]}}) | ![Lighthouse Desktop Report Score](${{steps.upload-files-imgbb.outputs.url[1]}}) |
[Download report ZIP](${{ steps.lighthouseUploadReport.outputs.artifact-url }})
2 changes: 2 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ coverage
# Lighthouse reports
*.report.json
*.report.html
desktop.jpg
mobile.jpg

# Hugo stats
hugo_stats.json
Expand Down
8 changes: 5 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,18 @@
"jshint": "jshint .",
"json": "jsonlint -q ./*.json",
"package": "npx npm-package-json-lint .",
"compile": "npx cpy ./node_modules/uikit/dist/css/uikit.min.css ./src/assets --flat && npx cpy ./node_modules/uikit/dist/js/uikit.min.js ./src/assets --flat && cd ./src && hugo --minify --environment production",
"build": "npx cpy ./node_modules/uikit/dist/css/uikit.min.css ./src/assets --flat && npx cpy ./node_modules/uikit/dist/js/uikit.min.js ./src/assets --flat && cd ./src && hugo --minify --environment production",
"start-server": "cd ./src && hugo server --environment production",
"lighthouse-desktop": "npx lighthouse http://localhost:1313/ --no-enable-error-reporting --output=html --output=json --config-path=./lr-desktop-config.js",
"lighthouse-mobile": "npx lighthouse http://localhost:1313/ --no-enable-error-reporting --output=html --output=json --config-path=./lr-mobile-config.js",
"lighthouse-desktop": "npx lighthouse http://localhost:1313/ --no-enable-error-reporting --output-path=./desktop --output=html --output=json --config-path=./lr-desktop-config.js",
"lighthouse-mobile": "npx lighthouse http://localhost:1313/ --no-enable-error-reporting --output-path=./mobile --output=html --output=json --config-path=./lr-mobile-config.js",
"markdownlint": "markdownlint --config .markdownlint.json \"src/**/*.md\" \"*.md\"",
"markdown": "remark . --frail",
"markdown:fix": "remark . --frail --output",
"jest": "jest",
"coverage": "jest --coverage",
"screenshot": "pageres ./src/public/index.html 320x568 568x320 360x780 780x360 375x812 812x375 390x844 844x390 430x932 932x430 768x1024 1024x768 810x1080 1080x810 834x1112 1112x834 1024x1366 1366x1024 1440x900 2304x1440 1280x800 1366x768 2560x1440 1920x1080 3200x1800 2048x1152 --overwrite --format=jpg --crop --filename=\"<%= size %>\"",
"screenshot:mobile": "pageres ./mobile.report.html 800x1000 --overwrite --format=jpg --crop --filename=\"mobile\"",
"screenshot:desktop": "pageres ./desktop.report.html 800x1000 --overwrite --format=jpg --crop --filename=\"desktop\"",
"stylelint": "stylelint -f verbose \"src/**/*.css\"",
"stylelint:fix": "stylelint \"src/**/*.css\" --fix",
"test": "npm run lint && npm run stylelint && npm run markdown && npm run markdownlint && npm run package && npm run json && npm run jest"
Expand Down

0 comments on commit bbb1f29

Please sign in to comment.