ci: add pull request previews

Addresses SRGSSR/pillarbox-web#196 by introducing pull request previews using
`rossjrw/pr-preview-action`. This new workflow enables us to review both visual and functional
changes before merging.

The preview functionality work in the following manner:

1. **Triggering a Preview**: Whenever a pull request is either opened, re-opened, or updated, the
   project undergoes a build process. The contents of the `dist` directory are copied
   under `pr-preview/pr-${github.ref}` located in the `gh-pages` branch.

2. **Cleaning Up**: Once a pull request is closed, the corresponding preview folder (specific to the
   closed pull request) is deleted.

Additional workflow updates include:

- The `JamesIves/github-pages-deploy-action` has been updated from version 3 to version 4. This
  update introduces the following configurations to this action:
  - `force: false`: This disables force push to the deployment branch.
  - `clean-exclude: pr-preview/`: This prevents the deletion of PR previews when the main branch is
    deployed.

.github/workflows/github-page.yml

@@ -11,12 +11,12 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node.js environment
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           always-auth: true
           registry-url: https://npm.pkg.github.com/
           scope: '@srgssr'
@@ -35,8 +35,10 @@ jobs:
           npm run build
 
       - name: Deploy GitHub Page 🚀
-        uses: JamesIves/github-pages-deploy-action@releases/v3
+        uses: JamesIves/github-pages-deploy-action@releases/v4
         with:
+          branch: gh-pages
+          folder: dist
+          force: false
+          clean-exclude: pr-preview/
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          BRANCH: gh-pages
-          FOLDER: dist

.github/workflows/preview.yml

@@ -0,0 +1,48 @@
+name: Deploy PR previews
+
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - closed
+
+concurrency: preview-${{ github.ref }}
+
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          always-auth: true
+          registry-url: https://npm.pkg.github.com/
+          scope: '@srgssr'
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Install dependencies
+        if: github.event.action != 'closed'
+        env:
+          CI: true
+        run: |
+          npm pkg delete scripts.prepare
+          npm ci
+
+      - name: Run build
+        if: github.event.action != 'closed'
+        run: |
+          npm run build
+
+      - name: Deploy preview
+        uses: rossjrw/pr-preview-action@v1
+        with:
+          source-dir: dist
+          preview-branch: gh-pages
+          umbrella-dir: pr-preview

.github/workflows/quality.yml

@@ -12,12 +12,12 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node.js environment
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           always-auth: true
           registry-url: https://npm.pkg.github.com/
           scope: '@srgssr'