feat: integrate lighthouse-ci

.github/workflows/lighthouse-ci.yml

@@ -0,0 +1,128 @@
+name: Lighthouse CI
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+  push:
+    branches: [main]
+
+jobs:
+  lighthouse:
+    name: Lighthouse Performance Audit
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      pull-requests: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install just
+        uses: extractions/setup-just@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build project
+        run: just build-local
+
+      - name: Ensure jq is installed
+        run: sudo apt-get update && sudo apt-get install -y jq
+
+      - name: Run Lighthouse CI
+        id: lighthouse
+        run: npx @lhci/cli@0.14.x autorun --config=./lighthouserc.json
+
+      - name: Parse Lighthouse Results
+        id: parse
+        if: always()
+        run: |
+          REPORT_DIR=".lighthouseci"
+          MANIFEST="$REPORT_DIR/manifest.json"
+
+          if [ -f "$MANIFEST" ]; then
+            PERF_SCORE=$(jq '[.[].summary.performance] | (add / length * 100) | floor' "$MANIFEST")
+            A11Y_SCORE=$(jq '[.[].summary.accessibility] | (add / length * 100) | floor' "$MANIFEST")
+            BP_SCORE=$(jq '[.[].summary["best-practices"]] | (add / length * 100) | floor' "$MANIFEST")
+            SEO_SCORE=$(jq '[.[].summary.seo] | (add / length * 100) | floor' "$MANIFEST")
+
+            REPORT_URL=$(jq -r '.[0].links.publicUrl // "Not Available"' "$MANIFEST")
+
+            echo "PERF_SCORE=$PERF_SCORE" >> $GITHUB_OUTPUT
+            echo "A11Y_SCORE=$A11Y_SCORE" >> $GITHUB_OUTPUT
+            echo "BP_SCORE=$BP_SCORE" >> $GITHUB_OUTPUT
+            echo "SEO_SCORE=$SEO_SCORE" >> $GITHUB_OUTPUT
+            echo "REPORT_URL=$REPORT_URL" >> $GITHUB_OUTPUT
+          else
+            echo "PERF_SCORE=N/A" >> $GITHUB_OUTPUT
+            echo "A11Y_SCORE=N/A" >> $GITHUB_OUTPUT
+            echo "BP_SCORE=N/A" >> $GITHUB_OUTPUT
+            echo "SEO_SCORE=N/A" >> $GITHUB_OUTPUT
+            echo "REPORT_URL=Not Available" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Get Score Emoji
+        id: emoji
+        if: always()
+        run: |
+          get_emoji() {
+            score=$1
+            if [ "$score" = "N/A" ]; then
+              echo "⚪"
+            elif [ "$score" -ge 90 ]; then
+              echo "🟢"
+            elif [ "$score" -ge 50 ]; then
+              echo "🟠"
+            else
+              echo "🔴"
+            fi
+          }
+
+          echo "PERF_EMOJI=$(get_emoji '${{ steps.parse.outputs.PERF_SCORE }}')" >> $GITHUB_OUTPUT
+          echo "A11Y_EMOJI=$(get_emoji '${{ steps.parse.outputs.A11Y_SCORE }}')" >> $GITHUB_OUTPUT
+          echo "BP_EMOJI=$(get_emoji '${{ steps.parse.outputs.BP_SCORE }}')" >> $GITHUB_OUTPUT
+          echo "SEO_EMOJI=$(get_emoji '${{ steps.parse.outputs.SEO_SCORE }}')" >> $GITHUB_OUTPUT
+
+      - name: Comment on PR
+        if: github.event_name == 'pull_request'
+        uses: thollander/actions-comment-pull-request@v3
+        with:
+          message: |
+            ## ⚡ Lighthouse Performance Report
+
+            | Category | Score | Status |
+            |----------|-------|--------|
+            | Performance | **${{ steps.parse.outputs.PERF_SCORE }}** | ${{ steps.emoji.outputs.PERF_EMOJI }} |
+            | Accessibility | **${{ steps.parse.outputs.A11Y_SCORE }}** | ${{ steps.emoji.outputs.A11Y_EMOJI }} |
+            | Best Practices | **${{ steps.parse.outputs.BP_SCORE }}** | ${{ steps.emoji.outputs.BP_EMOJI }} |
+            | SEO | **${{ steps.parse.outputs.SEO_SCORE }}** | ${{ steps.emoji.outputs.SEO_EMOJI }} |
+
+            ### Score Legend
+            - 🟢 90–100: Excellent
+            - 🟠 50–89: Needs Improvement
+            - 🔴 0–49: Poor
+
+            > [View Full Lighthouse Report](${{ steps.parse.outputs.REPORT_URL }})
+
+            _This audit ensures PRs do not negatively impact performance or accessibility._
+          comment-tag: lighthouse-report
+          mode: recreate
+          pr-number: ${{ github.event.pull_request.number }}
+
+      - name: Upload Lighthouse Reports
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: lighthouse-reports
+          path: .lighthouseci/
+          retention-days: 30

.gitignore

@@ -16,3 +16,6 @@ node_modules/
 
 # tilt
 tilt_config.json
+
+# Lighthouse CI
+.lighthouseci/

lighthouserc.json

@@ -0,0 +1,69 @@
+{
+    "ci": {
+        "collect": {
+            "staticDistDir": "./dist",
+            "numberOfRuns": 3,
+            "url": [
+                "http://localhost"
+            ],
+            "settings": {
+                "preset": "desktop",
+                "onlyCategories": [
+                    "performance",
+                    "accessibility",
+                    "best-practices",
+                    "seo"
+                ]
+            }
+        },
+        "assert": {
+            "assertions": {
+                "categories:performance": [
+                    "error",
+                    {
+                        "minScore": 0.8
+                    }
+                ],
+                "categories:accessibility": [
+                    "error",
+                    {
+                        "minScore": 0.8
+                    }
+                ],
+                "categories:best-practices": [
+                    "warn",
+                    {
+                        "minScore": 0.8
+                    }
+                ],
+                "categories:seo": [
+                    "warn",
+                    {
+                        "minScore": 0.8
+                    }
+                ],
+                "largest-contentful-paint": [
+                    "warn",
+                    {
+                        "maxNumericValue": 4000
+                    }
+                ],
+                "cumulative-layout-shift": [
+                    "error",
+                    {
+                        "maxNumericValue": 0.1
+                    }
+                ],
+                "total-blocking-time": [
+                    "warn",
+                    {
+                        "maxNumericValue": 400
+                    }
+                ]
+            }
+        },
+        "upload": {
+            "target": "temporary-public-storage"
+        }
+    }
+}