pr-lighthouse.yml

name: pr-lighthouse

on:
  pull_request:

permissions:
  checks: write
  pull-requests: write

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - run: |
          npm install
          npm run build
      
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_VIRTUAL_NATSUMATSURI }}
          channelId: live
          projectId: virtual-natsumatsuri

  lighthouse:
    needs: deploy
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Lighthouse CI
        uses: treosh/lighthouse-ci-action@v10
        id: lighthouse
        with:
          uploadArtifacts: true
          temporaryPublicStorage: true
          urls: https://virtual-natsumatsuri.web.app/

      - name: Get Comment Body
        uses: actions/github-script@v5
        id: get-comment-body
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          script: |
            const results = ${{ steps.lighthouse.outputs.manifest }}
            const links = ${{ steps.lighthouse.outputs.links }}
            const mark = (value) => {
            if (value >= 0.9) {
                return '🟢';
            } else if (value >= 0.5) {
                return '🟡';
            } else {
                return '🔴';
            }
            };
            const body = `
            # Lighthouse Report
            | URL | Performance | Accessibility | Best Practices | SEO | PWA | Details |
            | --- | ----------- | ------------- | -------------- | --- | --- | ------- |
            ${results.map((result) => `| ${result.url} | ${mark(result.summary.performance)}${Math.trunc(result.summary.performance * 100)} | ${mark(result.summary.accessibility)}${Math.trunc(result.summary.accessibility * 100)} | ${mark(result.summary['best-practices'])}${Math.trunc(result.summary['best-practices'] * 100)} | ${mark(result.summary.seo)}${Math.trunc(result.summary.seo * 100)} | ${mark(result.summary.pwa)}${Math.trunc(result.summary.pwa * 100)} | :pencil: [result](${links[result.url]}) |`).join('\n')}
            `;
            core.setOutput("body", body)

      - name: Find Comment
        uses: peter-evans/find-comment@v2
        if: success() && github.event.number
        id: fc
        with:
          issue-number: ${{ github.event.number }}

      - name: Create Comment
        uses: peter-evans/create-or-update-comment@v2
        if: success() && github.event.number && steps.fc.outputs.comment-id == 0
        with:
          issue-number: ${{ github.event.number }}
          body: ${{ steps.get-comment-body.outputs.body }}

      - name: Update Comment
        uses: peter-evans/create-or-update-comment@v2
        if: success() && github.event.number && steps.fc.outputs.comment-id != '0'
        with:
          issue-number: ${{ github.event.number }}
          comment-id: ${{ steps.fc.outputs.comment-id }}
          body: |
            **Visualizer Report**
            - You can view the results [here](${{ steps.deployment.outputs.page_url }}).
          edit-mode: replace