Add PR preview deployments (#5131)

This adds preview deployments that will deploy a version of
egui_demo_app for each pull request, making things easier to review /
test.

Some notes on security:
The preview deployment is split in two workflows, preview_build and
preview_deploy.
`preview_build` runs on pull_request, so it won't have any access to the
repositories secrets, so it is safe to
build / execute untrusted code.
`preview_deploy` has access to the repositories secrets (so it can push
to the pr preview repo) but won't run
any untrusted code (it will just extract the build artifact and push it
to the pages branch where it will
automatically be deployed).

To set this up, a DEPLOY_KEY secret needs to be added, which allows the
action to push the compiled artifacts into this repository:
https://github.com/egui-pr-preview/pr
The deploy key is the private key part of a key generated via
ssh-keygen. The public key is set as a deploy key in that repo.
I have created the repo on a separate github org, so it won't be
directly associated with emil or egui in case someone pushes something
naughty.

I have set this up in my fork of egui to show how this works:
- I created a PR: lucasmerlin#2
- The code will be compiled and pushed to the egui-pr-preview/pr repo
and deployed via github pages
- The bot leaves a comment on the pr with a link to the preview
- The preview is available at
https://egui-pr-preview.github.io/pr/2-pr-preview-demo/
(It's unfortunately only available a couple seconds after the bot writes
the comment, because the pages deployment action is run independently on
the other repository)
- Once the PR is merged / closed the preview will be cleaned up
(unfortunately the empty folder will remain, it seems like it's not
possible to remove that via the JamesIves/github-pages-deploy-action
action I use, but I don't think that it's a big issue)

I'll leave the PR in draft until the DEPLOY_KEY is set up

.github/workflows/preview_build.yml

@@ -0,0 +1,52 @@
+# This action builds and deploys egui_demo_app on each pull request created
+# Security notes:
+# The preview deployment is split in two workflows, preview_build and preview_deploy.
+# `preview_build` runs on pull_request, so it won't have any access to the repositories secrets, so it is safe to
+# build / execute untrusted code.
+# `preview_deploy` has access to the repositories secrets (so it can push to the pr preview repo) but won't run
+# any untrusted code (it will just extract the build artifact and push it to the pages branch where it will
+# automatically be deployed).
+
+name: Preview Build
+
+on:
+  - pull_request
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: rustup toolchain install stable --profile minimal --target wasm32-unknown-unknown
+      - uses: Swatinem/rust-cache@v2
+        with:
+          prefix-key: "pr-preview-"
+
+      - name: "Install wasmopt / binaryen"
+        run: |
+          sudo apt-get update && sudo apt-get install binaryen
+
+      - run: |
+          scripts/build_demo_web.sh --release
+
+      - name: Remove gitignore file
+        # We need to remove the .gitignore, otherwise the deploy via git will not include the js and wasm files
+        run: |
+          rm -rf web_demo/.gitignore
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: web_demo
+          path: web_demo
+
+      - name: Generate meta.json
+        env:
+          PR_NUMBER: ${{ github.event.number }}
+          PR_BRANCH: ${{ github.head_ref }}
+        run: |
+          echo "{\"pr_number\": \"$PR_NUMBER\", \"pr_branch\": \"$PR_BRANCH\"}" > meta.json
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: meta.json
+          path: meta.json

.github/workflows/preview_cleanup.yml

@@ -0,0 +1,31 @@
+name: Preview Cleanup
+
+permissions:
+  contents: write
+
+on:
+  pull_request_target:
+    types:
+      - closed
+
+jobs:
+  cleanup:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - run: mkdir -p empty_dir
+      - name: Url slug variable
+        run: |
+          echo "URL_SLUG=${{ github.event.pull_request.number }}-${{ github.event.pull_request.head.ref }}" >> $GITHUB_ENV
+      - name: Deploy
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: empty_dir
+          repository-name: egui-pr-preview/pr
+          branch: 'main'
+          clean: true
+          target-folder: ${{ env.URL_SLUG }}
+          ssh-key: ${{ secrets.DEPLOY_KEY }}
+          commit-message: "Remove preview for PR ${{ env.URL_SLUG }}"
+          single-commit: true

.github/workflows/preview_deploy.yml

@@ -0,0 +1,68 @@
+name: Preview Deploy
+
+permissions:
+  contents: write
+  pull-requests: write
+
+on:
+  workflow_run:
+    workflows:
+      - "Preview Build"
+    types:
+      - completed
+
+# Since we use single_commit and force on the deploy action, only one deploy action can run at a time.
+# Should this create a bottleneck we might have to set single_commit and force to false which should allow
+# for the deployments to run in parallel.
+concurrency:
+  group: preview_deploy
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: 'Download build artifact'
+        uses: actions/download-artifact@v4
+        with:
+          name: web_demo
+          path: web_demo_artifact
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          run-id: ${{ github.event.workflow_run.id }}
+      - name: 'Download build meta'
+        uses: actions/download-artifact@v4
+        with:
+          name: meta.json
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          run-id: ${{ github.event.workflow_run.id }}
+
+      - name: Parse meta.json
+        run: |
+          echo "PR_NUMBER=$(jq -r .pr_number meta.json)" >> $GITHUB_ENV
+          echo "PR_BRANCH=$(jq -r .pr_branch meta.json)" >> $GITHUB_ENV
+
+      - name: Url slug variable
+        run: |
+          echo "URL_SLUG=${{ env.PR_NUMBER }}-${{ env.PR_BRANCH }}" >> $GITHUB_ENV
+
+      - name: Deploy
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: web_demo_artifact
+          repository-name: egui-pr-preview/pr
+          branch: 'main'
+          clean: true
+          target-folder: ${{ env.URL_SLUG }}
+          ssh-key: ${{ secrets.DEPLOY_KEY }}
+          commit-message: "Update preview for PR ${{ env.URL_SLUG }}"
+          single-commit: true
+
+      - name: Comment PR
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          message: |
+            Preview available at https://egui-pr-preview.github.io/pr/${{ env.URL_SLUG }}
+            Note that it might take a couple seconds for the update to show up after the preview_build workflow has completed.
+          pr_number: ${{ env.PR_NUMBER }}
+          comment_tag: 'egui-preview'

web_demo/index.html

@@ -119,7 +119,7 @@
     </script>
 
     <!-- this is the JS generated by the `wasm-bindgen` CLI tool -->
-    <script src="egui_demo_app.js"></script>
+    <script src="./egui_demo_app.js"></script>
 
     <script>
         // We'll defer our execution until the wasm is ready to go.