test: integrate pr ci

.github/workflows/pr-lighthouse.yml → .github/workflows/pr.yml

@@ -1,11 +1,13 @@
-name: pr-lighthouse
+name: pr-visualizer
 
 on:
   pull_request:
 
 permissions:
-  checks: write
   pull-requests: write
+  contents: read
+  pages: write
+  id-token: write
 
 jobs:
   deploy:
@@ -63,27 +65,87 @@ jobs:
             ${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)
+            
+  visualizer:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install and Build
+        run: |
+          npm install
+          npm run build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./dist/visualizer/
 
-      - name: Find Comment
+      - name: Deploy to GitHub Pages
+        uses: actions/deploy-pages@v4
+        id: deployment
+        with:
+          branch: ${{ github.head_ref }}
+
+      - name: Find existing comment
         uses: peter-evans/find-comment@v2
-        if: success() && github.event.number
         id: fc
         with:
           issue-number: ${{ github.event.number }}
-          includes-comment: "# Lighthouse Report"
+          body-includes: '# Visualizer Report'
 
-      - name: Create Comment
+      - 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 }}
+          body: |
+            # Visualizer Report
+            You can view the results [here](${{ steps.deployment.outputs.page_url }}).
 
-      - name: Update Comment
+      - 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: ${{ steps.get-comment-body.outputs.body }}
+          body: |
+            # Visualizer Report
+            You can view the results [here](${{ steps.deployment.outputs.page_url }}).
           edit-mode: replace
+
+  comment:
+    needs: [lighthouse, visualizer]
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Find existing comment
+        uses: peter-evans/find-comment@v2
+        id: fc
+        with:
+          issue-number: ${{ github.event.number }}
+          body-includes: '# Visualizer Report'
+
+      - 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 }}
+            # Visualizer Report
+            You can view the results [here](${{ steps.deployment.outputs.page_url }}).
+
+      - 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: |
+            ${{ steps.get-comment-body.outputs.body }}
+            # Visualizer Report
+            You can view the results [here](${{ steps.deployment.outputs.page_url }}).
+          edit-mode: replace