ZacharyZhang-NY/Ely-GPUI-Components
1
1 Fork 0
Code Issues Pull Requests Actions 11 Packages Projects Releases Wiki Activity

T48k Docs · WebAssembly: pictures land in <out>/assets/, the HTTP client is the web's; table words stay whole and long titles hyphenate

Browse Source
This commit is contained in:
ZacharyZhang-NY committed 2026-10-01 13:30:33 -04:00
1 parent 16e001ec00
commit 2b2f284ed9
2 files changed
+5 -3
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/docs/webassembly.md
+2 -2
View File
@@ -20,11 +20,11 @@ The gallery's [web entry](https://github.com/ZacharyZhang-NY/Ely-GPUI-Components
| `#[wasm_bindgen(start)]` on the entry | The browser runs it when the module loads. |
| `gpui_platform::web_init()` | Sends panics and logs to the browser console. |
| `WebPlatform::new_with_backend_and_font_fallback(false, WebBackendPreference::Auto, CanvasFontFallback::EmojiAndCjk)` | One thread, since a static site gets no cross-origin isolation; WebGPU where the browser has it, WebGL2 where it does not; the browser lends fonts for emoji and CJK alone. |
| `Application::with_platform(platform)` | Then `with_http_client(Arc::new(platform.fetch_http_client()))`, `with_assets(Assets)` and `run`, as on the desktop. |
| `Application::with_platform(platform)` | Then `with_http_client(Arc::new(platform.fetch_http_client()))`, which fetches pictures by address, and `with_assets(Assets)` and `run`, as on the desktop. |
## Build the gallery
`ELY_GALLERY_ASSETS=<address>/ scripts/web.sh <out>` builds the gallery with the `web` profile, runs `wasm-bindgen` and `wasm-opt -Oz`, and copies its page and pictures beside it. It needs the `wasm-bindgen` CLI at the version in `Cargo.lock` and binaryen's `wasm-opt`, and it fails when the wasm passes Cloudflare's 25 MiB. `ELY_GALLERY_ASSETS` is the address the pictures are served from, ending in `/`: GPUI reads no files in a browser.
`ELY_GALLERY_ASSETS=<address>/ scripts/web.sh <out>` builds the gallery with the `web` profile, runs `wasm-bindgen` and `wasm-opt -Oz`, and copies its page beside it and its pictures into `<out>/assets/`. It needs the `wasm-bindgen` CLI at the version in `Cargo.lock` and binaryen's `wasm-opt`, and it fails when the wasm passes Cloudflare's 25 MiB. `ELY_GALLERY_ASSETS` is the address `<out>/assets/` is served from, ending in `/`: GPUI reads no files in a browser.
The gallery opens at `?page=<slug>&story=<title or slug>&theme=light|dark`. A story needs its page.
frontend/src/styles.css
+3 -1
View File
@@ -174,7 +174,7 @@ img.shot { display: block; max-width: 100%; height: auto; }
.docs-rail a:hover, .doc-toc a:hover, .docs-rail a[aria-current="page"] { color: var(--fg); }
.docs-rail a[aria-current="page"] { font-weight: 500; }
.doc { padding: 96px 0 128px; min-width: 0; }
.doc h1 { font-size: clamp(36px, 4vw, 56px); line-height: 1.05; font-weight: 800; letter-spacing: -0.035em; margin-bottom: 40px; }
.doc h1 { font-size: clamp(36px, 4vw, 56px); line-height: 1.05; font-weight: 800; letter-spacing: -0.035em; margin-bottom: 40px; hyphens: auto; overflow-wrap: break-word; }
.prose { font-size: 17px; line-height: 30px; overflow-wrap: anywhere; }
.prose p, .prose li { color: color-mix(in srgb, var(--fg) 82%, var(--bg)); }
.prose p { margin: 0 0 20px; }
@@ -188,6 +188,8 @@ img.shot { display: block; max-width: 100%; height: auto; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-top: 1px solid var(--line); }
.prose th { font-weight: 600; }
.prose td { color: color-mix(in srgb, var(--fg) 82%, var(--bg)); }
.prose th, .prose td { overflow-wrap: break-word; }
.prose td code { overflow-wrap: anywhere; }
.code { position: relative; margin: 28px 0; background: var(--code); border-radius: 12px; }
.code figcaption { padding: 14px 88px 0 20px; font: 400 12px/18px var(--mono); color: var(--faint); overflow-wrap: anywhere; }
.code pre { margin: 0; padding: 16px 20px 20px; overflow-x: auto; }