From 2c918ef6efb58940be189e078519c19e4bda44e8 Mon Sep 17 00:00:00 2001 From: Bart van der Braak Date: Sun, 11 Jun 2023 19:53:31 +0200 Subject: [PATCH] refactor: Entire rebuild based on PR trigger --- .github/workflows/lighthouse-report.yaml | 127 +++++++++++++++++++++++ .github/workflows/seo-reports.yaml | 118 --------------------- 2 files changed, 127 insertions(+), 118 deletions(-) create mode 100644 .github/workflows/lighthouse-report.yaml delete mode 100644 .github/workflows/seo-reports.yaml diff --git a/.github/workflows/lighthouse-report.yaml b/.github/workflows/lighthouse-report.yaml new file mode 100644 index 0000000..262ee56 --- /dev/null +++ b/.github/workflows/lighthouse-report.yaml @@ -0,0 +1,127 @@ +name: Lighthouse report + +on: + pull_request: + +permissions: + contents: write + pages: write + id-token: write + pull-requests: write + +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + build-deploy: + environment: + name: github-pages + url: https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/${{ env.BRANCH_NAME }} + env: + BRANCH_NAME: ${{ github.head_ref || github.ref_name }} + runs-on: ubuntu-latest + steps: + - name: Sticky Comment on Pull Request + uses: marocchino/sticky-pull-request-comment@v2.6.2 + with: + header: unlighthouse + message: | + Running Lighthouse audit... + + - name: Check out + uses: actions/checkout@v3.5.3 + + - name: Set up Node.js + uses: actions/setup-node@v3.6.0 + with: + node-version: 18 + + - name: Install Dependencies + run: yarn global add @unlighthouse/cli puppeteer + + - name: vercel-preview-url + uses: zentered/vercel-preview-url@v1.1.9 + id: vercel_preview_url + env: + VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} + with: + vercel_project_id: ${{ vars.VERCEL_PROJECT_ID }} + + - uses: UnlyEd/github-action-await-vercel@v1.2.39 + id: await-vercel + env: + VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} + with: + deployment-url: ${{ steps.vercel_preview_url.outputs.preview_url }} + timeout: 30 + poll-interval: 1 + + - name: Build Unlighthouse report + run: | + unlighthouse-ci \ + --site "${{ steps.vercel_preview_url.outputs.preview_url }}" \ + --build-static \ + --router-prefix "${{ github.event.repository.name }}/${{ env.BRANCH_NAME }}" + + - name: Deploy report to GitHub pages + uses: peaceiris/actions-gh-pages@v3.9.3 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: ./.unlighthouse + destination_dir: ${{ env.BRANCH_NAME }} + + - name: Format lighthouse score + id: format_lighthouse_score + 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 score = res => res >= 90 ? '🟢' : res >= 50 ? '🟠' : '🔴'; + + const reportUrl = `https://${process.env.GITHUB_REPOSITORY_OWNER}.github.io/${process.env.GITHUB_EVENT.repository.name}/${process.env.BRANCH_NAME}`; + + const comment = [ + `⚡️ Lighthouse report for the changes in this PR:`, + '| Category | Score |', + '| --- | --- |', + `| Performance | ${score(result.summary.categories.performance.averageScore * 100)} |`, + `| Accessibility | ${score(result.summary.categories.accessibility.averageScore * 100)} |`, + `| Best practices | ${score(result.summary.categories['best-practices'].averageScore * 100)} |`, + `| SEO | ${score(result.summary.categories.seo.averageScore * 100)} |`, + ' ', + '*Lighthouse scores for individual routes:*', + '', + '| Path | Performance | Accessibility | Best practices | SEO |', + '| --- | --- | --- | --- | --- |', + `${result.routes.map(route => `| ${route.path} | ${score(route.categories.performance.score * 100)} | ${score(route.categories.accessibility.score * 100)} | ${score(route.categories['best-practices'].score * 100)} | ${score(route.categories.seo.score * 100)} |`).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}).`, + ' ', + 'Learn more about the Lighthouse metrics:', + '- [Largest Contentful Paint](https://web.dev/lighthouse-largest-contentful-paint/)', + '- [Cumulative Layout Shift](https://web.dev/cls/)', + '- [First Contentful Paint](https://web.dev/first-contentful-paint/)', + '- [Total Blocking Time](https://web.dev/lighthouse-total-blocking-time/)', + '- [Max Potential First Input Delay](https://web.dev/lighthouse-max-potential-fid/)', + '- [Time to Interactive](https://web.dev/interactive/)', + ].join('\n'); + + core.setOutput("comment", comment); + + - name: Sticky Comment on Pull Request with result + uses: marocchino/sticky-pull-request-comment@v2.6.2 + with: + header: unlighthouse + message: | + ${{ steps.format_lighthouse_score.outputs.comment }} diff --git a/.github/workflows/seo-reports.yaml b/.github/workflows/seo-reports.yaml deleted file mode 100644 index 95862f8..0000000 --- a/.github/workflows/seo-reports.yaml +++ /dev/null @@ -1,118 +0,0 @@ -name: Unlighthouse SEO Reports - -on: - deployment_status - -permissions: - contents: read - pages: write - id-token: write - -concurrency: - group: "pages" - cancel-in-progress: false - -jobs: - build-deploy: - - if: github.event.deployment_status.state == 'success' && (github.event.deployment_status.environment == 'Production' || github.event.deployment_status.environment == 'Preview') - - environment: - name: github-pages - url: https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/${{ steps.git-branch.outputs.SOURCE_REF }} - - runs-on: ubuntu-latest - steps: - - name: Check out - uses: actions/checkout@v3 - - - name: Set up Node.js - uses: actions/setup-node@v3 - with: - node-version: 20 - - - name: Install Dependencies - run: yarn global add @unlighthouse/cli puppeteer - - - name: Get Deployment Source Branch Name - id: git-branch - run: | - git fetch --all - git branch -a --contains ${{ github.event.deployment.ref }} - source_branches="$(git branch -a --contains ${{ github.event.deployment.ref }})" - result=$(echo "$source_branches" | tail -n1 | sed 's/^[ \t]*//') - echo "Remote source of deployment: ${result}" - echo "Local git ref of deployment: ${result#remotes/origin/*}" - echo "SOURCE_REF=${result#remotes/origin/*}" >> "$GITHUB_OUTPUT" - - - name: Build Unlighthouse report - run: | - unlighthouse-ci \ - --site "${{ github.event.deployment_status.target_url }}" \ - --build-static \ - --router-prefix "${{ github.event.repository.name }}/${{ steps.git-branch.outputs.SOURCE_REF }}" - - - name: Deploy - uses: peaceiris/actions-gh-pages@v3 - with: - deploy_key: ${{ secrets.GH_PAGES_DEPLOY_PRIVATE_KEY }} - publish_dir: ./.unlighthouse - destination_dir: ${{ steps.git-branch.outputs.SOURCE_REF }} - - - name: Calculate Average Score - id: calculate-score - run: | - average=$(jq -r '[.[] | .score] | add / length' ./.unlighthouse/ci-result.json) - echo "average_score=${average}" >> "$GITHUB_OUTPUT" - - - name: Create Markdown Table - id: create-table - env: - md_file_path: './.unlighthouse/table.md' - run: | - echo "## Unlighthouse Results" > $md_file_path - echo "" >> $md_file_path - echo "Overall score: **${{ steps.calculate-score.outputs.average_score }}**" >> $md_file_path - echo "" >> $md_file_path - echo "Path | Score" >> $md_file_path - echo "-----|------" >> $md_file_path - cat ./.unlighthouse/ci-result.json | jq -r '.[] | [.path, .score] | @tsv' | sed 's/\t/ | /g' >> $md_file_path - echo "" >> $md_file_path - echo "[View the full report](https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/${{ steps.git-branch.outputs.SOURCE_REF }})" >> $md_file_path - echo "md_file_path=${md_file_path}" >> "$GITHUB_OUTPUT" - - - run: | - echo GITHUB_ACTION: $GITHUB_ACTION - echo GITHUB_WORKFLOW: $GITHUB_WORKFLOW - echo GITHUB_EVENT_NAME: $GITHUB_EVENT_NAME - echo GITHUB_EVENT_PATH: $GITHUB_EVENT_PATH - cat $GITHUB_EVENT_PATH - - - name: Comment on Pull Request - uses: actions/github-script@v6 - with: - script: | - const fs = require('fs'); - const tablePath = fs.readFileSync('${{ steps.create-table.outputs.md_file_path }}', 'utf8'); - github.rest.issues.createComment({ - issue_number: context.issue.number, - owner: context.repo.owner, - repo: context.repo.repo, - body: tablePath - }); - - - name: Comment on issue - id: create_comment - uses: actions/github-script@v6 - with: - github-token: ${{secrets.GH_PAGES_TOKEN}} - script: | - const fs = require('fs'); - const tablePath = fs.readFileSync('${{ steps.create-table.outputs.table_path }}', 'utf8'); - - github.rest.issues.createComment({ - issue_number: context.issue.number, - owner: context.repo.owner, - repo: context.repo.repo, - body: tablePath - })