refactor: use better loading and titles

.github/workflows/unlighthouse.yaml

@@ -15,6 +15,9 @@ jobs:
       COMMENT_ID: unlighthouse-node${{matrix.node-version}}
       PORT: 8000
       CLOUDFLARE_PROJECT: omnidash-unlighthouse
+      WEBSITE_URL: https://omnidash.io
+      BADGE_FILE: omnidash.io-unlighthouse.json
+      BADGE_GIST: b948b29508e19955106a1037d2a615e6
     strategy:
       matrix:
         node-version: [20]
@@ -25,18 +28,19 @@ jobs:
         with:
           header: ${{ env.COMMENT_ID }}
           message: |
-            ⚡️ Lighthouse report
+            ## 🔄 **Unlighthouse report in progress** 🗼
 
-            ![loading](https://github.com/bartvdbraak/hellob.art/assets/3996360/0e00b3fc-d5f9-490b-9aa7-07cb4b59f85f)
+            <div align="center"></br></br><img src="https://github.com/bartvdbraak/omnidash/assets/3996360/f994f62a-6a85-450b-bb4d-927a56542e33"></div>
 
       - name: Set variables based on trigger
+        id: set_variables
         run: |
           if [[ ${{ github.ref == 'refs/heads/main' }} == true ]]; then
-            echo "CLOUDFLARE_BRANCH=main" >> $GITHUB_ENV
-            echo "CLOUDFLARE_URL=https://${{ env.CLOUDFLARE_PROJECT }}.pages.dev" >> $GITHUB_ENV
+            echo "CLOUDFLARE_BRANCH=main" >> $GITHUB_OUTPUT
+            echo "CLOUDFLARE_URL=https://${{ env.CLOUDFLARE_PROJECT }}.pages.dev" >> $GITHUB_OUTPUT
           else
-            echo "CLOUDFLARE_BRANCH=pull-${{ github.event.pull_request.number }}" >> $GITHUB_ENV
-            echo "CLOUDFLARE_URL=https://pull-${{ github.event.pull_request.number }}.${{ env.CLOUDFLARE_PROJECT }}.pages.dev" >> $GITHUB_ENV
+            echo "CLOUDFLARE_BRANCH=pull-${{ github.event.pull_request.number }}" >> $GITHUB_OUTPUT
+            echo "CLOUDFLARE_URL=https://pull-${{ github.event.pull_request.number }}.${{ env.CLOUDFLARE_PROJECT }}.pages.dev" >> $GITHUB_OUTPUT
           fi
 
       - name: Checkout repository
@@ -75,7 +79,7 @@ jobs:
       - name: Run Unlighthouse
         run: |
           unlighthouse-ci \
-            --site "${{ github.ref == 'refs/heads/main' && 'https://omnidash.io' || steps.vercel_preview_url.outputs.preview_url }}" \
+            --site "${{ github.ref == 'refs/heads/main' && env.WEBSITE_URL || steps.vercel_preview_url.outputs.preview_url }}" \
             --reporter jsonExpanded \
             --build-static
 
@@ -83,7 +87,7 @@ jobs:
         uses: cloudflare/wrangler-action@v3.4.1
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          command: pages deploy .unlighthouse --project-name="${{ env.CLOUDFLARE_PROJECT }}" --branch=${{ env.CLOUDFLARE_BRANCH }}
+          command: pages deploy .unlighthouse --project-name="${{ env.CLOUDFLARE_PROJECT }}" --branch=${{ steps.set_variables.outputs.CLOUDFLARE_BRANCH }}
 
       - name: Create result content
         id: create_result_content
@@ -101,10 +105,10 @@ jobs:
 
             const score = res => `${getEmoji(res)} ${formatScore(res)}`;
 
-            const reportUrl = `${{ env.CLOUDFLARE_URL }}`;
+            const reportUrl = `${{ steps.set_variables.outputs.CLOUDFLARE_URL }}`;
 
             const comment = [
-                `⚡️ Lighthouse report for the changes in this PR:`,
+                `## ✅ **Unlighthouse report** 🗼`,
                 '| Category | Score |',
                 '| --- | --- |',
                 `| Performance | ${score(result.summary.categories.performance.averageScore)} |`,
@@ -144,8 +148,8 @@ jobs:
         if: github.ref == 'refs/heads/main'
         with:
           auth: ${{ secrets.GIST_SECRET }}
-          gistID: 795a3d6af5b0db5754cf7279898c3c16
-          filename: omnidash.io-unlighthouse.json
+          gistID: ${{ env.BADGE_GIST }}
+          filename: ${{ env.BADGE_FILE }}
           namedLogo: Lighthouse
           label: lighthouse
           message: ${{ steps.create_result_content.outputs.score }}
@@ -157,9 +161,9 @@ jobs:
         with:
           header: ${{ env.COMMENT_ID }}
           message: |
-            ⚡️ Lighthouse report failed
+            ## ❌ **Unlighthouse report failed** 🗼
 
-            See deployment for any errors
+            <div align="center"></br></br><img src="https://github.com/bartvdbraak/omnidash/assets/3996360/cc1c6fb9-f9be-4a69-9666-655d6733abeb"></div>
 
       - name: Update comment on cancel
         uses: marocchino/sticky-pull-request-comment@v2.9.0
@@ -167,4 +171,6 @@ jobs:
         with:
           header: ${{ env.COMMENT_ID }}
           message: |
-            ⚡️ Lighthouse report cancelled
+            ## 🛑 **Unlighthouse report was cancelled** 🗼
+
+            <div align="center"></br></br><img src="https://github.com/bartvdbraak/omnidash/assets/3996360/cc1c6fb9-f9be-4a69-9666-655d6733abeb"></div>