From b0261454a377803016c59dfc8b30c9a61fea8633 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9B=B7=E7=94=B5=E8=8A=BD=E8=A1=A3?= Date: Thu, 1 Oct 2026 13:30:33 -0400 Subject: [PATCH] =?UTF-8?q?T48k=20Docs=20=C2=B7=20WebAssembly:=20pictures?= =?UTF-8?q?=20land=20in=20/assets/,=20the=20HTTP=20client=20is=20the?= =?UTF-8?q?=20web's;=20table=20words=20stay=20whole=20and=20long=20titles?= =?UTF-8?q?=20hyphenate?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/docs/webassembly.md | 4 ++-- frontend/src/styles.css | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/frontend/src/docs/webassembly.md b/frontend/src/docs/webassembly.md index 0252a3d..838be0c 100644 --- a/frontend/src/docs/webassembly.md +++ b/frontend/src/docs/webassembly.md @@ -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=
/ scripts/web.sh ` 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=
/ scripts/web.sh ` builds the gallery with the `web` profile, runs `wasm-bindgen` and `wasm-opt -Oz`, and copies its page beside it and its pictures into `/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 `/assets/` is served from, ending in `/`: GPUI reads no files in a browser. The gallery opens at `?page=&story=&theme=light|dark`. A story needs its page. diff --git a/frontend/src/styles.css b/frontend/src/styles.css index dc89dc8..e40fdd3 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -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; }