diff --git a/.github/dependabot.yml b/.github/dependabot.yml index d1f0d08..406baea 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -4,3 +4,7 @@ updates: directory: "/" schedule: interval: "daily" + - package-ecosystem: "github-actions" + directory: "/" + schedule: + interval: "weekly" diff --git a/.github/workflows/lighthouse-report.yaml b/.github/workflows/lighthouse-report.yaml new file mode 100644 index 0000000..2427a0a --- /dev/null +++ b/.github/workflows/lighthouse-report.yaml @@ -0,0 +1,130 @@ +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: + unlighthouse: + 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 + + - name: Build Unlighthouse report + run: | + unlighthouse-ci \ + --router-prefix "${{ github.event.repository.name }}/${{ env.BRANCH_NAME }}" \ + --site "${{ steps.vercel_preview_url.outputs.preview_url }}" \ + --reporter jsonExpanded \ + --build-static + + - 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 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://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/${{ env.BRANCH_NAME }}`; + + 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)} |`, + '', + '*Lighthouse scores for individual routes:*', + '', + '| Path | Performance | Accessibility | Best practices | SEO |', + '| --- | --- | --- | --- | --- |', + `${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)} |`).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/check.yaml b/.github/workflows/lint-deps-check.yaml similarity index 94% rename from .github/workflows/check.yaml rename to .github/workflows/lint-deps-check.yaml index d023901..ac91874 100644 --- a/.github/workflows/check.yaml +++ b/.github/workflows/lint-deps-check.yaml @@ -1,4 +1,4 @@ -name: Checks +name: Linting and Dependency Check on: push: diff --git a/.gitignore b/.gitignore index 8f322f0..2d9b881 100644 --- a/.gitignore +++ b/.gitignore @@ -33,3 +33,6 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +# unlighthouse +.unlighthouse diff --git a/vercel.json b/vercel.json new file mode 100644 index 0000000..e686f30 --- /dev/null +++ b/vercel.json @@ -0,0 +1,7 @@ +{ + "git": { + "deploymentEnabled": { + "gh-pages": false + } + } +}