From a32af213597166317da94b848a37aa3016b87616 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Sun, 22 Oct 2023 16:03:07 -0500 Subject: [PATCH 01/38] add lighthouse preview --- .github/workflows/lighthouse.yml | 109 +++++++++++++++++++++++++++++++ .lighthouserc.json | 16 +++++ scripts/lighthouse/index.js | 28 ++++++++ 3 files changed, 153 insertions(+) create mode 100644 .github/workflows/lighthouse.yml create mode 100644 .lighthouserc.json create mode 100644 scripts/lighthouse/index.js diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml new file mode 100644 index 0000000000000..b7e44b5bceac5 --- /dev/null +++ b/.github/workflows/lighthouse.yml @@ -0,0 +1,109 @@ +# Security Notes +# This workflow uses `pull_request_target`, so will run against all PRs automatically (without approval), be careful with allowing any user-provided code to be run here +# Only selected Actions are allowed within this repository. Please refer to (https://github.com/nodejs/nodejs.org/settings/actions) +# for the full list of available actions. If you want to add a new one, please reach out a maintainer with Admin permissions. +# REVIEWERS, please always double-check security practices before merging a PR that contains Workflow changes!! +# AUTHORS, please only use actions with explicit SHA references, and avoid using `@master` or `@main` references or `@version` tags. +# MERGE QUEUE NOTE: This Workflow does not run on `merge_group` trigger, as this Workflow is not required for Merge Queue's +# The main purpose of this Workflow is to decorate the Pull Request with important information for a Pull Request +# On a merge queue the Pull Request already got approved! + +name: Lighthoouse + +on: + push: + branches: + - main + pull_request_target: + branches: + - main + types: + - labeled + merge_group: + # testing + workflow_dispatch: + +defaults: + run: + # This ensures that the working directory is the root of the repository + working-directory: ./ + +permissions: + contents: read + actions: read + # This permission is required by `thollander/actions-comment-pull-request` + # This permission is required by `MishaKav/jest-coverage-comment` + pull-requests: write + +jobs: + lighthouse-ci: + # We want to skip our lighthouse analysis on Dependabot PRs + if: startsWith(github.event.pull_request.head.ref, 'dependabot/') == false + + name: Lighthouse Report + runs-on: ubuntu-latest + + steps: + - name: Git Checkout + uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0 + with: + # Since we checkout the HEAD of the current Branch, if the Pull Request comes from a Fork + # we want to clone the fork's repository instead of the base repository + # this allows us to have the correct history tree of the perspective of the Pull Request's branch + # If the Workflow is running on `merge_group` or `push` events it fallsback to the base repository + repository: ${{ github.event.pull_request.head.repo.full_name || github.repository }} + # We checkout the branch itself instead of a specific SHA (Commit) as we want to ensure that this Workflow + # is always running with the latest `ref` (changes) of the Pull Request's branh + # If the Workflow is running on `merge_group` or `push` events it fallsback to `github.ref` which will often be `main` + # or the merge_group `ref` + ref: ${{ github.event.pull_request.head.ref || github.ref }} + # The Chromatic (@chromaui/action) Action requires a full history of the current branch in order to be able to compare + # previous changes and previous commits and determine which Storybooks should be tested against and what should be built + fetch-depth: 0 + + - name: Add comment to PR + # Signal that a lighthouse run is about to start + uses: thollander/actions-comment-pull-request@d61db783da9abefc3437960d0cce08552c7c004f # v2.4.2 + with: + message: | + > Running Lighthouse audit... + comment_tag: 'LH Audit' + + - name: Capture Vercel preview URL + # Get the vercel preview url + id: vercel_preview_url + uses: aaimio/vercel-preview-url-action@b82a318e4c1eac7ef38ed1b241677a81db08494b # v2.2.0 + with: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + - uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 #v 3.5.3 + + - name: Audit preview URL with Lighthouse + # Conduct the lighthouse audit + id: lighthouse_audit + uses: treosh/lighthouse-ci-action@03becbfc543944dd6e7534f7ff768abb8a296826 # v10.1.0 + with: + configPath: './lighthouserc.json' + urls: | + ${{ steps.vercel_preview_url.outputs.vercel_preview_url }} + uploadArtifacts: true + + - name: Format lighthouse score + # Transform the audit results into a single, friendlier output + id: format_lighthouse_score + uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 # v6.4.1 + env: + LIGHTHOUSE_RESULT: ${{ steps.lighthouse_audit.outputs.manifest }}[0].summary + LIGHTHOUSE_LINKS: ${{ steps.lighthouse_audit.outputs.links }} + with: + # this is commonjs for now. ESM/MJS syntax might work but I don't want to set type:module globally yet + script: | + const script = require('./scripts/lighthouse/index.js') + script({core}) + + - name: Add comment to PR + # Replace the previous message with our formatted lighthouse results + uses: thollander/actions-comment-pull-request@d61db783da9abefc3437960d0cce08552c7c004f # v2.4.2 + with: + comment_tag: 'LH Audit' + message: | + > ${{ steps.format_lighthouse_score.outputs.comment }} diff --git a/.lighthouserc.json b/.lighthouserc.json new file mode 100644 index 0000000000000..5608a46a1edaf --- /dev/null +++ b/.lighthouserc.json @@ -0,0 +1,16 @@ +{ + "ci": { + "collect": { + "numberOfRuns": 1, + "settings": { + "preset": "desktop" + } + }, + "upload": { + "target": "temporary-public-storage" + }, + "assert": { + "preset": "lighthouse:recommended" + } + } +} diff --git a/scripts/lighthouse/index.js b/scripts/lighthouse/index.js new file mode 100644 index 0000000000000..54583175023f7 --- /dev/null +++ b/scripts/lighthouse/index.js @@ -0,0 +1,28 @@ +/* global core */ + +const result = process.env.LIGHTHOUSE_RESULT; +const links = process.env.LIGHTHOUSE_LINKS[0]; + +const formatResult = res => Math.round(res * 100); +Object.keys(result).forEach(key => (result[key] = formatResult(result[key]))); + +const score = res => (res >= 90 ? '🟢' : res >= 50 ? '🟠' : '🔴'); + +const comment = [ + `⚡️ [Lighthouse report](${Object.values( + links + )}) for the changes in this PR:`, + '| Category | Score |', + '| --- | --- |', + `| ${score(result.performance)} Performance | ${result.performance} |`, + `| ${score(result.accessibility)} Accessibility | ${result.accessibility} |`, + `| ${score(result['best-practices'])} Best practices | ${ + result['best-practices'] + } |`, + `| ${score(result.seo)} SEO | ${result.seo} |`, + `| ${score(result.pwa)} PWA | ${result.pwa} |`, + ' ', + `*Lighthouse ran on [${Object.keys(links)}](${Object.keys(links)[0]})*`, +].join('\n'); + +core.setOutput('comment', comment); From b634add3f0e5106dcb0f6253ba824e5ab2bec250 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Sun, 22 Oct 2023 16:08:00 -0500 Subject: [PATCH 02/38] add more than one url --- .lighthouserc.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.lighthouserc.json b/.lighthouserc.json index 5608a46a1edaf..33fe403af2036 100644 --- a/.lighthouserc.json +++ b/.lighthouserc.json @@ -4,7 +4,8 @@ "numberOfRuns": 1, "settings": { "preset": "desktop" - } + }, + "url": ["http://localhost:3000", "http://localhost:3000/download"] }, "upload": { "target": "temporary-public-storage" From 67723fa73a4d6f96456069e6b45454f843dc0520 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 00:20:12 -0500 Subject: [PATCH 03/38] remove unneeded step --- .github/workflows/lighthouse.yml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index b7e44b5bceac5..9cdbe4cad0847 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -8,7 +8,7 @@ # The main purpose of this Workflow is to decorate the Pull Request with important information for a Pull Request # On a merge queue the Pull Request already got approved! -name: Lighthoouse +name: Lighthouse on: push: @@ -75,7 +75,6 @@ jobs: uses: aaimio/vercel-preview-url-action@b82a318e4c1eac7ef38ed1b241677a81db08494b # v2.2.0 with: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - - uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 #v 3.5.3 - name: Audit preview URL with Lighthouse # Conduct the lighthouse audit From 8c09fc31f5f3007dcfb5ca2a74bbfe77f4cb5003 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 00:59:46 -0500 Subject: [PATCH 04/38] use other vercel action --- .github/workflows/lighthouse.yml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 9cdbe4cad0847..01ff9811f6002 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -69,12 +69,12 @@ jobs: > Running Lighthouse audit... comment_tag: 'LH Audit' - - name: Capture Vercel preview URL - # Get the vercel preview url + - name: Capture Vercel Preview + uses: patrickedqvist/wait-for-vercel-preview@dca4940010f36d2d44caa487087a09b57939b24a # v1.3.1 id: vercel_preview_url - uses: aaimio/vercel-preview-url-action@b82a318e4c1eac7ef38ed1b241677a81db08494b # v2.2.0 with: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + token: ${{ secrets.GITHUB_TOKEN }} + max_timeout: 60 - name: Audit preview URL with Lighthouse # Conduct the lighthouse audit @@ -83,7 +83,7 @@ jobs: with: configPath: './lighthouserc.json' urls: | - ${{ steps.vercel_preview_url.outputs.vercel_preview_url }} + ${{ steps.vercel_preview_url.outputs.url }} uploadArtifacts: true - name: Format lighthouse score From 34f6231edb85b005dc4fb17af0eec5da947dcc27 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 01:04:15 -0500 Subject: [PATCH 05/38] remove unnecessary condition --- .github/workflows/lighthouse.yml | 2 -- 1 file changed, 2 deletions(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 01ff9811f6002..29ed8457ec114 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -20,8 +20,6 @@ on: types: - labeled merge_group: - # testing - workflow_dispatch: defaults: run: From 7cce200263e3e149466a7d06fc4f31f2c6a177ee Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 01:09:47 -0500 Subject: [PATCH 06/38] checkout forked branch again --- .github/workflows/lighthouse.yml | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 29ed8457ec114..98fc683baeb4c 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -74,6 +74,14 @@ jobs: token: ${{ secrets.GITHUB_TOKEN }} max_timeout: 60 + - name: Git Checkout + uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0 + with: + # By default Git Checkout on `pull-request-target` will checkout + # the `default` branch of the Pull Request. We want to checkout + # the actual branch of the Pull Request. + ref: ${{ github.event.pull_request.head.ref }} + - name: Audit preview URL with Lighthouse # Conduct the lighthouse audit id: lighthouse_audit From a26dc588099e144c26286fdf7c1ffe961518d266 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 01:14:15 -0500 Subject: [PATCH 07/38] increase vercel timeout --- .github/workflows/lighthouse.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 98fc683baeb4c..61bc0637f3247 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -72,7 +72,7 @@ jobs: id: vercel_preview_url with: token: ${{ secrets.GITHUB_TOKEN }} - max_timeout: 60 + max_timeout: 90 - name: Git Checkout uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0 From 8a5351094ad3c697b94bf3383bc1e1a27fb0da3e Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 01:28:37 -0500 Subject: [PATCH 08/38] use correct filename --- .github/workflows/lighthouse.yml | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 61bc0637f3247..1e15e4e8b3ea6 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -5,8 +5,6 @@ # REVIEWERS, please always double-check security practices before merging a PR that contains Workflow changes!! # AUTHORS, please only use actions with explicit SHA references, and avoid using `@master` or `@main` references or `@version` tags. # MERGE QUEUE NOTE: This Workflow does not run on `merge_group` trigger, as this Workflow is not required for Merge Queue's -# The main purpose of this Workflow is to decorate the Pull Request with important information for a Pull Request -# On a merge queue the Pull Request already got approved! name: Lighthouse @@ -55,9 +53,6 @@ jobs: # If the Workflow is running on `merge_group` or `push` events it fallsback to `github.ref` which will often be `main` # or the merge_group `ref` ref: ${{ github.event.pull_request.head.ref || github.ref }} - # The Chromatic (@chromaui/action) Action requires a full history of the current branch in order to be able to compare - # previous changes and previous commits and determine which Storybooks should be tested against and what should be built - fetch-depth: 0 - name: Add comment to PR # Signal that a lighthouse run is about to start @@ -87,7 +82,7 @@ jobs: id: lighthouse_audit uses: treosh/lighthouse-ci-action@03becbfc543944dd6e7534f7ff768abb8a296826 # v10.1.0 with: - configPath: './lighthouserc.json' + configPath: './.lighthouserc.json' urls: | ${{ steps.vercel_preview_url.outputs.url }} uploadArtifacts: true From 5432a7fb71294fa1051775ebe982032d97c90da0 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 01:35:29 -0500 Subject: [PATCH 09/38] update pull-request comment --- .github/workflows/lighthouse.yml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 1e15e4e8b3ea6..a1aeacba5423c 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -27,8 +27,7 @@ defaults: permissions: contents: read actions: read - # This permission is required by `thollander/actions-comment-pull-request` - # This permission is required by `MishaKav/jest-coverage-comment` + # todo document pull-requests: write jobs: From a03f8baa252db34ea8631eff170e7bd96893eadc Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 01:58:13 -0500 Subject: [PATCH 10/38] tun assertions --- .lighthouserc.json | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/.lighthouserc.json b/.lighthouserc.json index 33fe403af2036..b3b9e7ce4c998 100644 --- a/.lighthouserc.json +++ b/.lighthouserc.json @@ -11,7 +11,12 @@ "target": "temporary-public-storage" }, "assert": { - "preset": "lighthouse:recommended" + "assertions": { + "categories:performance": ["warn", { "minScore": 0.9 }], + "categories:accessibility": ["warn", { "minScore": 0.9 }], + "categories:best-practices": ["warn", { "minScore": 0.9 }], + "categories:seo": ["warn", { "minScore": 0.9 }] + } } } } From e450844294745614522578b560d7a45fea79a948 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 01:59:05 -0500 Subject: [PATCH 11/38] add more than one url a different way --- .github/workflows/lighthouse.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index a1aeacba5423c..ad6d291176de4 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -84,6 +84,7 @@ jobs: configPath: './.lighthouserc.json' urls: | ${{ steps.vercel_preview_url.outputs.url }} + ${{ steps.vercel_preview_url.outputs.url }}/download uploadArtifacts: true - name: Format lighthouse score From d81847c99964c9cab4dec1051d5d8960e977e1be Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 02:07:15 -0500 Subject: [PATCH 12/38] format lighthouse output --- .github/workflows/lighthouse.yml | 2 +- scripts/lighthouse/index.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index ad6d291176de4..fcee0a5729d15 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -92,7 +92,7 @@ jobs: id: format_lighthouse_score uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 # v6.4.1 env: - LIGHTHOUSE_RESULT: ${{ steps.lighthouse_audit.outputs.manifest }}[0].summary + LIGHTHOUSE_RESULT: ${{ steps.lighthouse_audit.outputs.manifest[0].summary }} LIGHTHOUSE_LINKS: ${{ steps.lighthouse_audit.outputs.links }} with: # this is commonjs for now. ESM/MJS syntax might work but I don't want to set type:module globally yet diff --git a/scripts/lighthouse/index.js b/scripts/lighthouse/index.js index 54583175023f7..1c4f64c23ebbe 100644 --- a/scripts/lighthouse/index.js +++ b/scripts/lighthouse/index.js @@ -20,7 +20,6 @@ const comment = [ result['best-practices'] } |`, `| ${score(result.seo)} SEO | ${result.seo} |`, - `| ${score(result.pwa)} PWA | ${result.pwa} |`, ' ', `*Lighthouse ran on [${Object.keys(links)}](${Object.keys(links)[0]})*`, ].join('\n'); From 885e46cc99840eb94a84de96a0b587c1078b840c Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 02:09:37 -0500 Subject: [PATCH 13/38] fix typo --- .github/workflows/lighthouse.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index fcee0a5729d15..a135064991c96 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -48,7 +48,7 @@ jobs: # If the Workflow is running on `merge_group` or `push` events it fallsback to the base repository repository: ${{ github.event.pull_request.head.repo.full_name || github.repository }} # We checkout the branch itself instead of a specific SHA (Commit) as we want to ensure that this Workflow - # is always running with the latest `ref` (changes) of the Pull Request's branh + # is always running with the latest `ref` (changes) of the Pull Request's branch # If the Workflow is running on `merge_group` or `push` events it fallsback to `github.ref` which will often be `main` # or the merge_group `ref` ref: ${{ github.event.pull_request.head.ref || github.ref }} From 369c73ad07514d83462f1b1902b8c81a2a32cd74 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 02:16:58 -0500 Subject: [PATCH 14/38] set locale in urls --- .github/workflows/lighthouse.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index a135064991c96..b9a881e0d9abb 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -83,8 +83,8 @@ jobs: with: configPath: './.lighthouserc.json' urls: | - ${{ steps.vercel_preview_url.outputs.url }} - ${{ steps.vercel_preview_url.outputs.url }}/download + ${{ steps.vercel_preview_url.outputs.url }}/en + ${{ steps.vercel_preview_url.outputs.url }}/en/download uploadArtifacts: true - name: Format lighthouse score From 4a1647e6fefb6cedf58a4e4a2a8ad921c85cc82d Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 02:17:44 -0500 Subject: [PATCH 15/38] remove unused config --- .lighthouserc.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.lighthouserc.json b/.lighthouserc.json index b3b9e7ce4c998..498558b4c1a42 100644 --- a/.lighthouserc.json +++ b/.lighthouserc.json @@ -4,8 +4,7 @@ "numberOfRuns": 1, "settings": { "preset": "desktop" - }, - "url": ["http://localhost:3000", "http://localhost:3000/download"] + } }, "upload": { "target": "temporary-public-storage" From f1e9033906cd5e1bfa7f5b3c1404f99d095178ec Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 07:42:12 -0500 Subject: [PATCH 16/38] format result --- .github/workflows/lighthouse.yml | 3 +-- scripts/lighthouse/index.js | 38 ++++++++++++++------------------ 2 files changed, 17 insertions(+), 24 deletions(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index b9a881e0d9abb..ddf78fe6085f9 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -92,8 +92,7 @@ jobs: id: format_lighthouse_score uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 # v6.4.1 env: - LIGHTHOUSE_RESULT: ${{ steps.lighthouse_audit.outputs.manifest[0].summary }} - LIGHTHOUSE_LINKS: ${{ steps.lighthouse_audit.outputs.links }} + LIGHTHOUSE_RESULT: ${{ steps.lighthouse_audit.outputs.manifest }} with: # this is commonjs for now. ESM/MJS syntax might work but I don't want to set type:module globally yet script: | diff --git a/scripts/lighthouse/index.js b/scripts/lighthouse/index.js index 1c4f64c23ebbe..bdc59679983cb 100644 --- a/scripts/lighthouse/index.js +++ b/scripts/lighthouse/index.js @@ -1,27 +1,21 @@ /* global core */ -const result = process.env.LIGHTHOUSE_RESULT; -const links = process.env.LIGHTHOUSE_LINKS[0]; +const formatScore = res => Math.round(res * 100); -const formatResult = res => Math.round(res * 100); -Object.keys(result).forEach(key => (result[key] = formatResult(result[key]))); +// this will be the shape of https://github.com/treosh/lighthouse-ci-action#manifest +const results = JSON.parse(process.env.LIGHTHOUSE_RESULT); -const score = res => (res >= 90 ? '🟢' : res >= 50 ? '🟠' : '🔴'); +const formattedResults = results + .map(({ url, summary }) => { + return `Lighthouse results for ${url} + Category | Score + --- | --- + Performance | ${formatScore(summary.performance)} + Accessibility | ${formatScore(summary.accessibility)} + Best practices | ${formatScore(summary['best-practices'])} + SEO | ${formatScore(summary.seo)} + `; + }) + .join('\n\n'); -const comment = [ - `⚡️ [Lighthouse report](${Object.values( - links - )}) for the changes in this PR:`, - '| Category | Score |', - '| --- | --- |', - `| ${score(result.performance)} Performance | ${result.performance} |`, - `| ${score(result.accessibility)} Accessibility | ${result.accessibility} |`, - `| ${score(result['best-practices'])} Best practices | ${ - result['best-practices'] - } |`, - `| ${score(result.seo)} SEO | ${result.seo} |`, - ' ', - `*Lighthouse ran on [${Object.keys(links)}](${Object.keys(links)[0]})*`, -].join('\n'); - -core.setOutput('comment', comment); +core.setOutput('comment', formattedResults); From 4e8549ea049d7b9d13fef6496157aebd720174ea Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 07:45:00 -0500 Subject: [PATCH 17/38] use same comment on final result --- .github/workflows/lighthouse.yml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index ddf78fe6085f9..63c4ef7273fe9 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -53,7 +53,7 @@ jobs: # or the merge_group `ref` ref: ${{ github.event.pull_request.head.ref || github.ref }} - - name: Add comment to PR + - name: Add Comment to PR # Signal that a lighthouse run is about to start uses: thollander/actions-comment-pull-request@d61db783da9abefc3437960d0cce08552c7c004f # v2.4.2 with: @@ -76,7 +76,7 @@ jobs: # the actual branch of the Pull Request. ref: ${{ github.event.pull_request.head.ref }} - - name: Audit preview URL with Lighthouse + - name: Audit Preview URL with Lighthouse # Conduct the lighthouse audit id: lighthouse_audit uses: treosh/lighthouse-ci-action@03becbfc543944dd6e7534f7ff768abb8a296826 # v10.1.0 @@ -87,7 +87,7 @@ jobs: ${{ steps.vercel_preview_url.outputs.url }}/en/download uploadArtifacts: true - - name: Format lighthouse score + - name: Format Lighthouse Score # Transform the audit results into a single, friendlier output id: format_lighthouse_score uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 # v6.4.1 @@ -99,10 +99,10 @@ jobs: const script = require('./scripts/lighthouse/index.js') script({core}) - - name: Add comment to PR + - name: Add Comment to PR # Replace the previous message with our formatted lighthouse results uses: thollander/actions-comment-pull-request@d61db783da9abefc3437960d0cce08552c7c004f # v2.4.2 with: - comment_tag: 'LH Audit' + comment_tag: 'lighthouse_audit' message: | > ${{ steps.format_lighthouse_score.outputs.comment }} From ee3c0da2e6bf70bb18ef02076d5ad3787f29182c Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 07:51:04 -0500 Subject: [PATCH 18/38] make valid cjs module --- scripts/lighthouse/index.js | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/scripts/lighthouse/index.js b/scripts/lighthouse/index.js index bdc59679983cb..50694a7f04f9a 100644 --- a/scripts/lighthouse/index.js +++ b/scripts/lighthouse/index.js @@ -1,21 +1,21 @@ -/* global core */ - const formatScore = res => Math.round(res * 100); -// this will be the shape of https://github.com/treosh/lighthouse-ci-action#manifest -const results = JSON.parse(process.env.LIGHTHOUSE_RESULT); +module.exports = ({ core }) => { + // this will be the shape of https://github.com/treosh/lighthouse-ci-action#manifest + const results = JSON.parse(process.env.LIGHTHOUSE_RESULT); -const formattedResults = results - .map(({ url, summary }) => { - return `Lighthouse results for ${url} - Category | Score - --- | --- - Performance | ${formatScore(summary.performance)} - Accessibility | ${formatScore(summary.accessibility)} - Best practices | ${formatScore(summary['best-practices'])} - SEO | ${formatScore(summary.seo)} - `; - }) - .join('\n\n'); + const formattedResults = results + .map(({ url, summary }) => { + return `Lighthouse results for ${url} + Category | Score + --- | --- + Performance | ${formatScore(summary.performance)} + Accessibility | ${formatScore(summary.accessibility)} + Best practices | ${formatScore(summary['best-practices'])} + SEO | ${formatScore(summary.seo)} + `; + }) + .join('\n\n'); -core.setOutput('comment', formattedResults); + core.setOutput('comment', formattedResults); +}; From 4b232d349573542454805290bc5b7fb7483f0b54 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 07:51:49 -0500 Subject: [PATCH 19/38] comment todo --- .github/workflows/lighthouse.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 63c4ef7273fe9..07d464e39f99f 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -94,7 +94,7 @@ jobs: env: LIGHTHOUSE_RESULT: ${{ steps.lighthouse_audit.outputs.manifest }} with: - # this is commonjs for now. ESM/MJS syntax might work but I don't want to set type:module globally yet + # todo: this is commonjs for now. ESM/MJS syntax might work but I don't want to set type:module globally yet script: | const script = require('./scripts/lighthouse/index.js') script({core}) From dda14db50a0fa39998f369573f8af8c016b6deb7 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 08:36:34 -0500 Subject: [PATCH 20/38] formatting scores --- .github/workflows/lighthouse.yml | 4 ++-- scripts/lighthouse/index.js | 21 +++++++++++++-------- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 07d464e39f99f..1b7ab28d2ab29 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -58,8 +58,8 @@ jobs: uses: thollander/actions-comment-pull-request@d61db783da9abefc3437960d0cce08552c7c004f # v2.4.2 with: message: | - > Running Lighthouse audit... - comment_tag: 'LH Audit' + Running Lighthouse audit... + comment_tag: 'lighthouse_audit' - name: Capture Vercel Preview uses: patrickedqvist/wait-for-vercel-preview@dca4940010f36d2d44caa487087a09b57939b24a # v1.3.1 diff --git a/scripts/lighthouse/index.js b/scripts/lighthouse/index.js index 50694a7f04f9a..8bfd5b643a0b9 100644 --- a/scripts/lighthouse/index.js +++ b/scripts/lighthouse/index.js @@ -1,4 +1,9 @@ -const formatScore = res => Math.round(res * 100); +const stoplight = res => (res >= 90 ? '🟢' : res >= 75 ? '🟠' : '🔴'); +const normalizeScore = res => Math.round(res * 100); +const formatScore = res => { + const normalizedScore = normalizeScore(res); + return `${stoplight(normalizedScore)} ${normalizedScore}`; +}; module.exports = ({ core }) => { // this will be the shape of https://github.com/treosh/lighthouse-ci-action#manifest @@ -7,13 +12,13 @@ module.exports = ({ core }) => { const formattedResults = results .map(({ url, summary }) => { return `Lighthouse results for ${url} - Category | Score - --- | --- - Performance | ${formatScore(summary.performance)} - Accessibility | ${formatScore(summary.accessibility)} - Best practices | ${formatScore(summary['best-practices'])} - SEO | ${formatScore(summary.seo)} - `; +Category | Score +--- | --- +Performance | ${formatScore(summary.performance)} +Accessibility | ${formatScore(summary.accessibility)} +Best practices | ${formatScore(summary['best-practices'])} +SEO | ${formatScore(summary.seo)} +`; }) .join('\n\n'); From aea8a2ab63cdd394478dd8dc319d4530257a76bc Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 08:37:28 -0500 Subject: [PATCH 21/38] revert longer timeout --- .github/workflows/lighthouse.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 1b7ab28d2ab29..ad060e88a940e 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -66,7 +66,7 @@ jobs: id: vercel_preview_url with: token: ${{ secrets.GITHUB_TOKEN }} - max_timeout: 90 + max_timeout: 60 - name: Git Checkout uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0 From dbf1d49cd4991431bfec9d929cef7b02629054a1 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 08:47:34 -0500 Subject: [PATCH 22/38] formatting --- .github/workflows/lighthouse.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index ad060e88a940e..814e281ed314b 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -105,4 +105,4 @@ jobs: with: comment_tag: 'lighthouse_audit' message: | - > ${{ steps.format_lighthouse_score.outputs.comment }} + ${{ steps.format_lighthouse_score.outputs.comment }} From 90dc82f4f8d3668b4837f63ff4065a8e2724655f Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 08:49:49 -0500 Subject: [PATCH 23/38] increase vercel timeout afterall --- .github/workflows/lighthouse.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 814e281ed314b..96dd8ed6b50a8 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -66,7 +66,7 @@ jobs: id: vercel_preview_url with: token: ${{ secrets.GITHUB_TOKEN }} - max_timeout: 60 + max_timeout: 90 - name: Git Checkout uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0 From 45a7fa91bbfb56cae5322b906a8b1c5bf9c54d91 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 08:58:11 -0500 Subject: [PATCH 24/38] add more comment --- .github/workflows/lighthouse.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 96dd8ed6b50a8..1665c4b23570f 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -94,7 +94,7 @@ jobs: env: LIGHTHOUSE_RESULT: ${{ steps.lighthouse_audit.outputs.manifest }} with: - # todo: this is commonjs for now. ESM/MJS syntax might work but I don't want to set type:module globally yet + # todo: this is commonjs for now. ESM/MJS syntax might work but I don't want to set type:module globally yet. Maybe Claudio will know if there are side-effects to doing that. script: | const script = require('./scripts/lighthouse/index.js') script({core}) From db8b02a0b652da95cc9c686b7693ef79901e96d2 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 16:00:17 -0500 Subject: [PATCH 25/38] change to ESM --- .github/workflows/lighthouse.yml | 5 ++--- package.json | 1 + scripts/lighthouse/index.mjs | 26 ++++++++++++++++++++++++++ 3 files changed, 29 insertions(+), 3 deletions(-) create mode 100644 scripts/lighthouse/index.mjs diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 1665c4b23570f..efda78c0976c8 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -94,10 +94,9 @@ jobs: env: LIGHTHOUSE_RESULT: ${{ steps.lighthouse_audit.outputs.manifest }} with: - # todo: this is commonjs for now. ESM/MJS syntax might work but I don't want to set type:module globally yet. Maybe Claudio will know if there are side-effects to doing that. script: | - const script = require('./scripts/lighthouse/index.js') - script({core}) + const { format } = await import('./scripts/lighthouse/index.mjs') + await format({core}) - name: Add Comment to PR # Replace the previous message with our formatted lighthouse results diff --git a/package.json b/package.json index 52e29279a2b44..42fc7876ab1a2 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "version": "1.0.0", "description": "Nodejs.org Website", "homepage": "https://nodejs.org", + "type": "module", "repository": { "type": "git", "url": "git+https://github.com/nodejs/nodejs.org.git" diff --git a/scripts/lighthouse/index.mjs b/scripts/lighthouse/index.mjs new file mode 100644 index 0000000000000..814ab38de713c --- /dev/null +++ b/scripts/lighthouse/index.mjs @@ -0,0 +1,26 @@ +const stoplight = res => (res >= 90 ? '🟢' : res >= 75 ? '🟠' : '🔴'); +const normalizeScore = res => Math.round(res * 100); +const formatScore = res => { + const normalizedScore = normalizeScore(res); + return `${stoplight(normalizedScore)} ${normalizedScore}`; +}; + +export const format = ({ core }) => { + // this will be the shape of https://github.com/treosh/lighthouse-ci-action#manifest + const results = JSON.parse(process.env.LIGHTHOUSE_RESULT); + + const formattedResults = results + .map(({ url, summary }) => { + return `Lighthouse results for ${url} +Category | Score +--- | --- +Performance | ${formatScore(summary.performance)} +Accessibility | ${formatScore(summary.accessibility)} +Best practices | ${formatScore(summary['best-practices'])} +SEO | ${formatScore(summary.seo)} +`; + }) + .join('\n\n'); + + core.setOutput('comment', formattedResults); +}; From 4928135ce1b97962b1794c28f858280f5963f31e Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 16:03:53 -0500 Subject: [PATCH 26/38] add /en/about page --- .github/workflows/lighthouse.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index efda78c0976c8..19dc84b8bb332 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -85,6 +85,7 @@ jobs: urls: | ${{ steps.vercel_preview_url.outputs.url }}/en ${{ steps.vercel_preview_url.outputs.url }}/en/download + ${{ steps.vercel_preview_url.outputs.url }}/en/about uploadArtifacts: true - name: Format Lighthouse Score From aaa56c92a3ee8acd4a04b057a32fa13373e81adb Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 16:10:58 -0500 Subject: [PATCH 27/38] Revert "change to ESM" This reverts commit db8b02a0b652da95cc9c686b7693ef79901e96d2. --- .github/workflows/lighthouse.yml | 5 +++-- package.json | 1 - scripts/lighthouse/index.mjs | 26 -------------------------- 3 files changed, 3 insertions(+), 29 deletions(-) delete mode 100644 scripts/lighthouse/index.mjs diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 19dc84b8bb332..7b881837bae4b 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -95,9 +95,10 @@ jobs: env: LIGHTHOUSE_RESULT: ${{ steps.lighthouse_audit.outputs.manifest }} with: + # todo: this is commonjs for now. ESM/MJS syntax might work but I don't want to set type:module globally yet. Maybe Claudio will know if there are side-effects to doing that. script: | - const { format } = await import('./scripts/lighthouse/index.mjs') - await format({core}) + const script = require('./scripts/lighthouse/index.js') + script({core}) - name: Add Comment to PR # Replace the previous message with our formatted lighthouse results diff --git a/package.json b/package.json index 42fc7876ab1a2..52e29279a2b44 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,6 @@ "version": "1.0.0", "description": "Nodejs.org Website", "homepage": "https://nodejs.org", - "type": "module", "repository": { "type": "git", "url": "git+https://github.com/nodejs/nodejs.org.git" diff --git a/scripts/lighthouse/index.mjs b/scripts/lighthouse/index.mjs deleted file mode 100644 index 814ab38de713c..0000000000000 --- a/scripts/lighthouse/index.mjs +++ /dev/null @@ -1,26 +0,0 @@ -const stoplight = res => (res >= 90 ? '🟢' : res >= 75 ? '🟠' : '🔴'); -const normalizeScore = res => Math.round(res * 100); -const formatScore = res => { - const normalizedScore = normalizeScore(res); - return `${stoplight(normalizedScore)} ${normalizedScore}`; -}; - -export const format = ({ core }) => { - // this will be the shape of https://github.com/treosh/lighthouse-ci-action#manifest - const results = JSON.parse(process.env.LIGHTHOUSE_RESULT); - - const formattedResults = results - .map(({ url, summary }) => { - return `Lighthouse results for ${url} -Category | Score ---- | --- -Performance | ${formatScore(summary.performance)} -Accessibility | ${formatScore(summary.accessibility)} -Best practices | ${formatScore(summary['best-practices'])} -SEO | ${formatScore(summary.seo)} -`; - }) - .join('\n\n'); - - core.setOutput('comment', formattedResults); -}; From 9ae78a9fd15fa772b601675d58c22ab11812aeee Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 17:14:31 -0500 Subject: [PATCH 28/38] add previous releases page --- .github/workflows/lighthouse.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 7b881837bae4b..d985689b9a254 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -84,8 +84,9 @@ jobs: configPath: './.lighthouserc.json' urls: | ${{ steps.vercel_preview_url.outputs.url }}/en - ${{ steps.vercel_preview_url.outputs.url }}/en/download ${{ steps.vercel_preview_url.outputs.url }}/en/about + ${{ steps.vercel_preview_url.outputs.url }}/en/about/previous-releases + ${{ steps.vercel_preview_url.outputs.url }}/en/download uploadArtifacts: true - name: Format Lighthouse Score From 25e75336d324d6508354aa38ff808e6cbdcbb0f8 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 19:24:53 -0500 Subject: [PATCH 29/38] condensed output --- .github/workflows/lighthouse.yml | 3 ++- scripts/lighthouse/index.js | 40 +++++++++++++++++++++----------- 2 files changed, 29 insertions(+), 14 deletions(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index d985689b9a254..f1fc8bd508da3 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -95,8 +95,9 @@ jobs: uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 # v6.4.1 env: LIGHTHOUSE_RESULT: ${{ steps.lighthouse_audit.outputs.manifest }} + LIGHTHOUSE_LINKS: ${{ steps.lighthouse_audit.outputs.links }} + VERCEL_PREVIEW_URL: ${{ steps.vercel_preview_url.outputs.url }} with: - # todo: this is commonjs for now. ESM/MJS syntax might work but I don't want to set type:module globally yet. Maybe Claudio will know if there are side-effects to doing that. script: | const script = require('./scripts/lighthouse/index.js') script({core}) diff --git a/scripts/lighthouse/index.js b/scripts/lighthouse/index.js index 8bfd5b643a0b9..ac5974cfb0c48 100644 --- a/scripts/lighthouse/index.js +++ b/scripts/lighthouse/index.js @@ -5,22 +5,36 @@ const formatScore = res => { return `${stoplight(normalizedScore)} ${normalizedScore}`; }; +/** + * core is in scope from https://github.com/actions/github-script + * This is a CJS formatted file because using ESM here requires setting `type: module` in the package.json and that broke out site capabilities + */ module.exports = ({ core }) => { // this will be the shape of https://github.com/treosh/lighthouse-ci-action#manifest const results = JSON.parse(process.env.LIGHTHOUSE_RESULT); - const formattedResults = results - .map(({ url, summary }) => { - return `Lighthouse results for ${url} -Category | Score ---- | --- -Performance | ${formatScore(summary.performance)} -Accessibility | ${formatScore(summary.accessibility)} -Best practices | ${formatScore(summary['best-practices'])} -SEO | ${formatScore(summary.seo)} -`; - }) - .join('\n\n'); + // this will be the shape of https://github.com/treosh/lighthouse-ci-action#links + const links = JSON.parse(process.env.LIGHTHOUSE_LINKS); - core.setOutput('comment', formattedResults); + // start creating our markdown table + const header = [ + 'Lighthouse Results', + 'URL | Performance | Accessibility | Best Practices | SEO | Report', + '| - | - | - | - | - | - |', + ]; + + // map over each url result, formatting and linking to the output + const urlResults = results.map(({ url, summary }) => { + return `[${url.replace( + process.env.VERCEL_PREVIEW_URL, + '' + )}](${url}) | ${formatScore(summary.performance)} | ${formatScore( + summary.accessibility + )} | ${formatScore(summary['best-practices'])} | ${formatScore( + summary.seo + )} | [🔗](${links[url]})`; + }); + + const finalResults = [...header, ...urlResults].join('\n'); + core.setOutput('comment', finalResults); }; From 31cd8b50a9e3d64da8caa7a438840d2b0fe28286 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 19:26:21 -0500 Subject: [PATCH 30/38] add blog --- .github/workflows/lighthouse.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index f1fc8bd508da3..9295b4fd433c2 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -87,6 +87,7 @@ jobs: ${{ steps.vercel_preview_url.outputs.url }}/en/about ${{ steps.vercel_preview_url.outputs.url }}/en/about/previous-releases ${{ steps.vercel_preview_url.outputs.url }}/en/download + ${{ steps.vercel_preview_url.outputs.url }}/en/blog uploadArtifacts: true - name: Format Lighthouse Score From 128c688732e99e31abaa7b7f14487b805b0535e4 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 22:25:01 -0500 Subject: [PATCH 31/38] cleanup --- .github/workflows/lighthouse.yml | 11 +++++++++-- scripts/lighthouse/index.js | 2 +- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 9295b4fd433c2..2098879acae61 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -17,7 +17,6 @@ on: - main types: - labeled - merge_group: defaults: run: @@ -27,7 +26,7 @@ defaults: permissions: contents: read actions: read - # todo document + # This permission is required by `thollander/actions-comment-pull-request` pull-requests: write jobs: @@ -59,6 +58,7 @@ jobs: with: message: | Running Lighthouse audit... + # Used later to edit the existing comment comment_tag: 'lighthouse_audit' - name: Capture Vercel Preview @@ -81,7 +81,9 @@ jobs: id: lighthouse_audit uses: treosh/lighthouse-ci-action@03becbfc543944dd6e7534f7ff768abb8a296826 # v10.1.0 with: + # Defines the settings and assertions to audit configPath: './.lighthouserc.json' + # These URLS capture homepage metrics, and critical pages / site functionality. urls: | ${{ steps.vercel_preview_url.outputs.url }}/en ${{ steps.vercel_preview_url.outputs.url }}/en/about @@ -95,10 +97,14 @@ jobs: id: format_lighthouse_score uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 # v6.4.1 env: + # using env as input to our script + # see https://github.com/actions/github-script#use-env-as-input LIGHTHOUSE_RESULT: ${{ steps.lighthouse_audit.outputs.manifest }} LIGHTHOUSE_LINKS: ${{ steps.lighthouse_audit.outputs.links }} VERCEL_PREVIEW_URL: ${{ steps.vercel_preview_url.outputs.url }} with: + # Run as a separate file so we do not have to inline all of our formatting logic. + # See https://github.com/actions/github-script#run-a-separate-file for more info. script: | const script = require('./scripts/lighthouse/index.js') script({core}) @@ -107,6 +113,7 @@ jobs: # Replace the previous message with our formatted lighthouse results uses: thollander/actions-comment-pull-request@d61db783da9abefc3437960d0cce08552c7c004f # v2.4.2 with: + # Reference the previously created comment comment_tag: 'lighthouse_audit' message: | ${{ steps.format_lighthouse_score.outputs.comment }} diff --git a/scripts/lighthouse/index.js b/scripts/lighthouse/index.js index ac5974cfb0c48..a62d01d3d614c 100644 --- a/scripts/lighthouse/index.js +++ b/scripts/lighthouse/index.js @@ -6,7 +6,7 @@ const formatScore = res => { }; /** - * core is in scope from https://github.com/actions/github-script + * `core` is in scope from https://github.com/actions/github-script * This is a CJS formatted file because using ESM here requires setting `type: module` in the package.json and that broke out site capabilities */ module.exports = ({ core }) => { From dd57898c278ebb52adbc7e00b6d5d920e4a3faab Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 22:32:12 -0500 Subject: [PATCH 32/38] do not run on push --- .github/workflows/lighthouse.yml | 3 --- 1 file changed, 3 deletions(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 2098879acae61..894e2e429bacf 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -9,9 +9,6 @@ name: Lighthouse on: - push: - branches: - - main pull_request_target: branches: - main From 73129736fbbdc4715c43b6b44e925f641b02a16c Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 23:00:32 -0500 Subject: [PATCH 33/38] simplify comment, trigger change --- .github/workflows/lighthouse.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 894e2e429bacf..d0aafb7320a56 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -80,7 +80,7 @@ jobs: with: # Defines the settings and assertions to audit configPath: './.lighthouserc.json' - # These URLS capture homepage metrics, and critical pages / site functionality. + # These URLS capture critical pages / site functionality. urls: | ${{ steps.vercel_preview_url.outputs.url }}/en ${{ steps.vercel_preview_url.outputs.url }}/en/about From 354764a8ac9d3d27cf642dd124ee585853c9caa3 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 23:15:56 -0500 Subject: [PATCH 34/38] troubleshoot why links output is empty --- .github/workflows/lighthouse.yml | 3 ++- .lighthouserc.json | 3 --- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index d0aafb7320a56..6ed243ef1de7a 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -87,7 +87,8 @@ jobs: ${{ steps.vercel_preview_url.outputs.url }}/en/about/previous-releases ${{ steps.vercel_preview_url.outputs.url }}/en/download ${{ steps.vercel_preview_url.outputs.url }}/en/blog - uploadArtifacts: true + uploadArtifacts: true # save results as a action artifacts + temporaryPublicStorage: true # upload lighthouse report to the temporary storage - name: Format Lighthouse Score # Transform the audit results into a single, friendlier output diff --git a/.lighthouserc.json b/.lighthouserc.json index 498558b4c1a42..eb1c22031ae30 100644 --- a/.lighthouserc.json +++ b/.lighthouserc.json @@ -6,9 +6,6 @@ "preset": "desktop" } }, - "upload": { - "target": "temporary-public-storage" - }, "assert": { "assertions": { "categories:performance": ["warn", { "minScore": 0.9 }], From 544cc7eab9b063c274151167c8af0d3af0ef7e8f Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Tue, 24 Oct 2023 23:17:45 -0500 Subject: [PATCH 35/38] testing lighthouse --- .github/workflows/lighthouse.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 6ed243ef1de7a..b8edeeab4b79d 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -63,7 +63,7 @@ jobs: id: vercel_preview_url with: token: ${{ secrets.GITHUB_TOKEN }} - max_timeout: 90 + max_timeout: 60 - name: Git Checkout uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 # v4.1.0 From 41f9cd3731289f5348e74bac814e6bef05a4e96e Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Thu, 26 Oct 2023 18:24:12 -0500 Subject: [PATCH 36/38] chore: simplify code, add tests --- .github/workflows/lighthouse.yml | 4 +- scripts/lighthouse/__tests__/index.test.mjs | 69 +++++++++++++++++++++ scripts/lighthouse/{index.js => index.mjs} | 26 +++++--- 3 files changed, 89 insertions(+), 10 deletions(-) create mode 100644 scripts/lighthouse/__tests__/index.test.mjs rename scripts/lighthouse/{index.js => index.mjs} (58%) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index b8edeeab4b79d..25943e43e6aa4 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -104,8 +104,8 @@ jobs: # Run as a separate file so we do not have to inline all of our formatting logic. # See https://github.com/actions/github-script#run-a-separate-file for more info. script: | - const script = require('./scripts/lighthouse/index.js') - script({core}) + const { formatResults } = await import('${{github.workspace}}/scripts/lighthouse/index.mjs') + await formatResults({core}) - name: Add Comment to PR # Replace the previous message with our formatted lighthouse results diff --git a/scripts/lighthouse/__tests__/index.test.mjs b/scripts/lighthouse/__tests__/index.test.mjs new file mode 100644 index 0000000000000..d472be30490ba --- /dev/null +++ b/scripts/lighthouse/__tests__/index.test.mjs @@ -0,0 +1,69 @@ +import { formatLighthouseResults } from '..'; + +describe('formatLighthouseResults', () => { + const MOCK_VERCEL_PREVIEW_URL = `https://some.vercel.preview.url`; + + const MOCK_LIGHTHOUSE_RESULT = `[ + { + "url": "${MOCK_VERCEL_PREVIEW_URL}/en", + "isRepresentativeRun": true, + "summary": { "performance": 0.99, "accessibility": 0.98, "best-practices": 1, "seo": 0.96, "pwa": 0.71 } + }, + { + "url": "${MOCK_VERCEL_PREVIEW_URL}/en/download", + "isRepresentativeRun": true, + "summary": { "performance": 0.49, "accessibility": 0.75, "best-practices": 1, "seo": 0.90, "pwa": 0.71 } + } + ]`; + + const MOCK_LIGHTHOUSE_LINKS = `{ + "${MOCK_VERCEL_PREVIEW_URL}/en": "fake.url/to/result/1", + "${MOCK_VERCEL_PREVIEW_URL}/en/download" : "fake.url/to/result/2" + }`; + + let mockCore, originalEnv; + + beforeEach(() => { + mockCore = { setOutput: jest.fn() }; + originalEnv = process.env; + process.env = { + ...process.env, + LIGHTHOUSE_RESULT: MOCK_LIGHTHOUSE_RESULT, + LIGHTHOUSE_LINKS: MOCK_LIGHTHOUSE_LINKS, + VERCEL_PREVIEW_URL: MOCK_VERCEL_PREVIEW_URL, + }; + }); + + afterEach(() => { + process.env = originalEnv; + }); + + it('formats preview urls correctly', () => { + formatLighthouseResults({ core: mockCore }); + + const expectations = [ + expect.stringContaining(`[/en](${MOCK_VERCEL_PREVIEW_URL}/en)`), + expect.stringContaining( + `[/en/download](${MOCK_VERCEL_PREVIEW_URL}/en/download)` + ), + ]; + + expectations.forEach(expectation => { + expect(mockCore.setOutput).toBeCalledWith('comment', expectation); + }); + }); + + it('formats stoplight colors correctly', () => { + formatLighthouseResults({ core: mockCore }); + + const expectations = [ + expect.stringContaining(`🟢 90`), + expect.stringContaining(`🟠 75`), + expect.stringContaining(`🔴 49`), + ]; + + expectations.forEach(expectation => { + expect(mockCore.setOutput).toBeCalledWith('comment', expectation); + }); + }); +}); diff --git a/scripts/lighthouse/index.js b/scripts/lighthouse/index.mjs similarity index 58% rename from scripts/lighthouse/index.js rename to scripts/lighthouse/index.mjs index a62d01d3d614c..df25285d162b8 100644 --- a/scripts/lighthouse/index.js +++ b/scripts/lighthouse/index.mjs @@ -1,3 +1,5 @@ +'use strict'; + const stoplight = res => (res >= 90 ? '🟢' : res >= 75 ? '🟠' : '🔴'); const normalizeScore = res => Math.round(res * 100); const formatScore = res => { @@ -7,9 +9,8 @@ const formatScore = res => { /** * `core` is in scope from https://github.com/actions/github-script - * This is a CJS formatted file because using ESM here requires setting `type: module` in the package.json and that broke out site capabilities */ -module.exports = ({ core }) => { +export const formatLighthouseResults = ({ core }) => { // this will be the shape of https://github.com/treosh/lighthouse-ci-action#manifest const results = JSON.parse(process.env.LIGHTHOUSE_RESULT); @@ -25,16 +26,25 @@ module.exports = ({ core }) => { // map over each url result, formatting and linking to the output const urlResults = results.map(({ url, summary }) => { - return `[${url.replace( + // make the tested link as a markdown link, without the long-generated host + const shortPreviewLink = `[${url.replace( process.env.VERCEL_PREVIEW_URL, '' - )}](${url}) | ${formatScore(summary.performance)} | ${formatScore( - summary.accessibility - )} | ${formatScore(summary['best-practices'])} | ${formatScore( - summary.seo - )} | [🔗](${links[url]})`; + )}](${url})`; + + // make each formatted score from our lighthouse properties + const performanceScore = formatScore(summary.performance); + const accessibilityScore = formatScore(summary.accessibility); + const bestPracticesScore = formatScore(summary['best-practices']); + const seoScore = formatScore(summary.seo); + + // create the markdown table row + return `${shortPreviewLink} | ${performanceScore} | ${accessibilityScore} | ${bestPracticesScore} | ${seoScore} | [🔗](${links[url]})`; }); + // join the header and the rows together const finalResults = [...header, ...urlResults].join('\n'); + + // return our output to the github action core.setOutput('comment', finalResults); }; From 2d31e5973842bd11bb8cd273b3c09f7214112623 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Thu, 26 Oct 2023 18:52:00 -0500 Subject: [PATCH 37/38] use renamed function --- .github/workflows/lighthouse.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml index 25943e43e6aa4..0609e37e7565a 100644 --- a/.github/workflows/lighthouse.yml +++ b/.github/workflows/lighthouse.yml @@ -104,8 +104,8 @@ jobs: # Run as a separate file so we do not have to inline all of our formatting logic. # See https://github.com/actions/github-script#run-a-separate-file for more info. script: | - const { formatResults } = await import('${{github.workspace}}/scripts/lighthouse/index.mjs') - await formatResults({core}) + const { formatLighthouseResults } = await import('${{github.workspace}}/scripts/lighthouse/index.mjs') + await formatLighthouseResults({core}) - name: Add Comment to PR # Replace the previous message with our formatted lighthouse results From 389fc114b2744fe3212ac28a49d02a2a920ee12d Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Thu, 26 Oct 2023 18:57:13 -0500 Subject: [PATCH 38/38] fix typo --- .github/workflows/build.yml | 2 +- .github/workflows/lint-and-tests.yml | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 38d36af982af3..dd30b2fd744a9 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -68,7 +68,7 @@ jobs: # If the Workflow is running on `merge_group` or `push` events it fallsback to the base repository repository: ${{ github.event.pull_request.head.repo.full_name || github.repository }} # We checkout the branch itself instead of a specific SHA (Commit) as we want to ensure that this Workflow - # is always running with the latest `ref` (changes) of the Pull Request's branh + # is always running with the latest `ref` (changes) of the Pull Request's branch # If the Workflow is running on `merge_group` or `push` events it fallsback to `github.ref` which will often be `main` # or the merge_group `ref` ref: ${{ github.event.pull_request.head.ref || github.ref }} diff --git a/.github/workflows/lint-and-tests.yml b/.github/workflows/lint-and-tests.yml index 69c7a62416173..5dc9f40e9b9d0 100644 --- a/.github/workflows/lint-and-tests.yml +++ b/.github/workflows/lint-and-tests.yml @@ -69,7 +69,7 @@ jobs: # If the Workflow is running on `merge_group` or `push` events it fallsback to the base repository repository: ${{ github.event.pull_request.head.repo.full_name || github.repository }} # We checkout the branch itself instead of a specific SHA (Commit) as we want to ensure that this Workflow - # is always running with the latest `ref` (changes) of the Pull Request's branh + # is always running with the latest `ref` (changes) of the Pull Request's branch # If the Workflow is running on `merge_group` or `push` events it fallsback to `github.ref` which will often be `main` # or the merge_group `ref` ref: ${{ github.event.pull_request.head.ref || github.ref }} @@ -179,7 +179,7 @@ jobs: # If the Workflow is running on `merge_group` or `push` events it fallsback to the base repository repository: ${{ github.event.pull_request.head.repo.full_name || github.repository }} # We checkout the branch itself instead of a specific SHA (Commit) as we want to ensure that this Workflow - # is always running with the latest `ref` (changes) of the Pull Request's branh + # is always running with the latest `ref` (changes) of the Pull Request's branch # If the Workflow is running on `merge_group` or `push` events it fallsback to `github.ref` which will often be `main` # or the merge_group `ref` ref: ${{ github.event.pull_request.head.ref || github.ref }}