feat: GitHub Pages web demo (#483)

* feat: GitHub Pages web demo * docs: point to hosted example * Update .github/workflows/web-demo.yml Co-authored-by: Daniel McNab <[email protected]> * build: comment updates * docs: update * ci: switch to official gh-pages action --------- Co-authored-by: Daniel McNab <[email protected]>
linebender · Mar 1, 2024 · 5d30f52 · 5d30f52
1 parent ba24b81
commit 5d30f52
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 2 deletions.
diff --git a/.github/workflows/web-demo.yml b/.github/workflows/web-demo.yml
@@ -0,0 +1,70 @@
+name: Web Demo Update
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  release-web:
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: install stable toolchain
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: wasm32-unknown-unknown
+
+      - name: install wasm-bindgen
+        uses: jetli/[email protected]
+        with:
+          version: 'latest'
+
+      - name: build (wasm)
+        run: cargo build -p with_winit --bin with_winit_bin --release --target wasm32-unknown-unknown
+        env:
+          RUSTFLAGS: '--cfg=web_sys_unstable_apis'
+
+      - name: package wasm
+        run: |
+          mkdir public
+          wasm-bindgen --target web --out-dir public target/wasm32-unknown-unknown/release/with_winit_bin.wasm --no-typescript
+          cat << EOF > public/index.html
+            <html>
+              <title>Vello Web Demo</title>
+              <meta content=no-cache http-equiv=Cache-control>
+              <meta content=-1 http-equiv=Expires>
+              <script type=module>import initSync from"/vello/with_winit_bin.js";initSync(`/vello/with_winit_bin_bg.wasm`);</script>
+              <link as=fetch crossorigin href=/vello/with_winit_bin_bg.wasm rel=preload type=application/wasm>
+              <link crossorigin href=/vello/with_winit_bin.js rel=modulepreload>
+              </head>
+              <body>
+                <style>
+                  body {
+                    margin: 0;
+                    padding: 0;
+                  }
+                </style>
+              </body>
+            </html>
+          EOF
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './public'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/README.md b/README.md
@@ -88,7 +88,7 @@ Other platforms are more tricky, and may require special building/running proced
 Because Vello relies heavily on compute shaders, we rely on the emerging WebGPU standard to run on the web.
 Until browser support becomes widespread, it will probably be necessary to use development browser versions (e.g. Chrome Canary) and explicitly enable WebGPU.
 
-The following command builds and runs a web version of the [winit demo](#winit). 
+The following command builds and runs a web version of the [winit demo](#winit).
 This uses [`cargo-run-wasm`](https://github.com/rukai/cargo-run-wasm) to build the example for web, and host a local server for it
 
 ```shell
@@ -99,7 +99,9 @@ rustup target add wasm32-unknown-unknown
 cargo run_wasm -p with_winit --bin with_winit_bin
 ```
 
-> [!WARNING]  
+There is also a web demo [available here](https://linebender.github.io/vello) on supporting web browsers.
+
+> [!WARNING]
 > The web is not currently a primary target for Vello, and WebGPU implementations are incomplete, so you might run into issues running this example.
 
 ### Android