feat: more PWA support and lh audit workflow

.github/workflows/build.yml

@@ -10,55 +10,62 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
-      - name: Configure Pages
-        id: pages
-        uses: actions/configure-pages@v3
+      # - name: Configure Pages
+      #   id: pages
+      #   uses: actions/configure-pages@v3
       - name: Setup
         uses: ./.github/actions/setup
       - name: Build
         run: pnpm build
       - name: Run linters
         run: pnpm lint
+
       # - name: Run unit tests
       #   run: pnpm test:unit
       # - name: Run e2e tests
       #   run: pnpm test:e2e
-      - name: Move output of Website SSR
-        run: |
-          mkdir -p out
-          mv apps/website-ssr/out out/website-ssr
-          mv out apps/website-ssr/
-      - name: Run Lighthouse tests on Website SSR
-        run: |
-          cd apps/website-ssr
-          lhci autorun --config=lighthouse.config.js
-        env:
-          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
-      - name: Move output of website
-        run: |
-          mkdir -p out
-          mv apps/website/out out${{ steps.pages.outputs.base_path }}
-          mv out apps/website/
-      - name: Run Lighthouse tests on website
-        run: |
-          cd apps/website
-          lhci autorun --config=lighthouse.config.js
-        env:
-          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
-      - name: Upload website
-        uses: actions/upload-artifact@v3
-        with:
-          name: website
-          path: apps/website/out${{ steps.pages.outputs.base_path }}
-          retention-days: 1
-      - name: Upload e2e test reports
-        uses: actions/upload-artifact@v3
-        if: ${{ always() }}
-        with:
-          name: e2e-reports
-          path: |
-            apps/website-ssr/e2e-report/
-            apps/website-ssr/e2e-results/
-            apps/website/e2e-report/
-            apps/website/e2e-results/
-          retention-days: 7
+
+      # - name: Move output of Website SSR
+      #   run: |
+      #     mkdir -p out
+      #     mv apps/website-ssr/out out/website-ssr
+      #     mv out apps/website-ssr/
+
+      # - name: Run Lighthouse tests on Website SSR
+      #   run: |
+      #     cd apps/website-ssr
+      #     lhci autorun --config=lighthouse.config.js
+      #   env:
+      #     LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
+
+      # - name: Move output of website
+      #   run: |
+      #     mkdir -p out
+      #     mv apps/website/out out${{ steps.pages.outputs.base_path }}
+      #     mv out apps/website/
+
+      # - name: Run Lighthouse tests on website
+      #   run: |
+      #     cd apps/website
+      #     lhci autorun --config=lighthouse.config.js
+      #   env:
+      #     LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
+
+      # - name: Upload website
+      #   uses: actions/upload-artifact@v3
+      #   with:
+      #     name: website
+      #     path: apps/website/out${{ steps.pages.outputs.base_path }}
+      #     retention-days: 1
+
+      # - name: Upload e2e test reports
+      #   uses: actions/upload-artifact@v3
+      #   if: ${{ always() }}
+      #   with:
+      #     name: e2e-reports
+      #     path: |
+      #       apps/website-ssr/e2e-report/
+      #       apps/website-ssr/e2e-results/
+      #       apps/website/e2e-report/
+      #       apps/website/e2e-results/
+      #     retention-days: 7

.github/workflows/run-lighthouse-on-vercel-preview.yml

@@ -0,0 +1,71 @@
+name: Vercel Preview URL Lighthouse Audit
+
+on:
+  issue_comment:
+    types: [edited]
+
+jobs:
+  generate_lighthouse_audit:
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    steps:
+      - name: Add comment to PR
+        id: loading_comment_to_pr
+        uses: marocchino/sticky-pull-request-comment@v1
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          number: ${{ github.event.issue.number }}
+          header: lighthouse
+          message: |
+            Running Lighthouse audit...
+      - name: Capture Vercel preview URL
+        id: vercel_preview_url
+        uses: aaron-binary/[email protected]
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - uses: actions/checkout@v2
+      - name: Audit preview URL with Lighthouse
+        id: lighthouse_audit
+        uses: treosh/lighthouse-ci-action@v3
+        with:
+          urls: |
+            ${{ steps.vercel_preview_url.outputs.vercel_preview_url }}
+          uploadArtifacts: true
+          temporaryPublicStorage: true
+      - name: Format lighthouse score
+        id: format_lighthouse_score
+        uses: actions/github-script@v3
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            const result = ${{ steps.lighthouse_audit.outputs.manifest }}[0].summary
+            const links = ${{ steps.lighthouse_audit.outputs.links }}
+
+            const formatResult = (res) => Math.round((res * 100))
+            Object.keys(result).forEach(key => result[key] = formatResult(result[key]))
+
+            const score = res => res >= 90 ? '🟢' : res >= 50 ? '🟠' : '🔴'
+
+            const comment = [
+                `⚡️ [Lighthouse report](${Object.values(links)[0]}) for the changes in this PR:`,
+                '| Category | Score |',
+                '| --- | --- |',
+                `| ${score(result.performance)} Performance | ${result.performance} |`,
+                `| ${score(result.accessibility)} Accessibility | ${result.accessibility} |`,
+                `| ${score(result['best-practices'])} Best practices | ${result['best-practices']} |`,
+                `| ${score(result.seo)} SEO | ${result.seo} |`,
+                `| ${score(result.pwa)} PWA | ${result.pwa} |`,
+                ' ',
+                `*Lighthouse ran on [${Object.keys(links)[0]}](${Object.keys(links)[0]})*`
+            ].join('\n')
+
+             core.setOutput("comment", comment);
+      - name: Add comment to PR
+        id: comment_to_pr
+        uses: marocchino/sticky-pull-request-comment@v1
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          number: ${{ github.event.issue.number }}
+          header: lighthouse
+          message: |
+            ${{ steps.format_lighthouse_score.outputs.comment }}

.gitignore

@@ -14,3 +14,11 @@ storybook-static/
 .env.*
 !.env.example
 .eslintcache
+
+# PWA files
+**/public/sw.js
+**/public/workbox-*.js
+**/public/worker-*.js
+**/public/sw.js.map
+**/public/workbox-*.js.map
+**/public/worker-*.js.map

apps/website-ssr/public/manifest.json

@@ -0,0 +1,38 @@
+{
+  "theme_color": "#f69435",
+  "background_color": "#f69435",
+  "display": "standalone",
+  "scope": "/",
+  "start_url": "/",
+  "name": "Turbo Monorepo",
+  "short_name": "Turbo Monorepo",
+  "description": "Turbo Monorepo Template",
+  "icons": [
+    {
+      "src": "/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "maskable_icon_x48.png",
+      "sizes": "48x48",
+      "type": "image/x-icon",
+      "purpose": "maskable"
+    }
+  ]
+}

apps/website-ssr/public/site.webmanifest

@@ -0,0 +1,11 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}