mirror of
https://github.com/storytold/vectorcraft.git
synced 2026-10-24 09:46:59 -06:00
Ahmed Moussa
3c85f3f9e3
Desktop builds made with CRAFT_FONTS_DIR now load craft-fonts' 12 Arabic families into the document font database. Noto Sans Arabic comes first and is the fallback for Arabic text. Cairo, Tajawal, Almarai, IBM Plex Sans Arabic, Noto Kufi Arabic, Amiri, Alexandria, Fustat, Reem Kufi, Aref Ruqaa and Gulzar can be picked by name from the font menus. The web build doesn't embed these fonts because they would make the wasm too large. It fetches them from beside the wasm instead: - crates/text/web-fonts.txt lists each face as startup or background. - build.rs turns that list into vectorcraft_text::WEB_FONTS, with each face's URL (fonts/<sha16>/<file>) and SRI hash taken from the craft-fonts manifest. - packaging/web/copy-fonts.sh, a Trunk post_build hook, copies the font files and their OFL licences there. - apps/vectorcraft-web/src/fonts.rs fetches Noto Sans Arabic before the app starts, so Arabic text never shows as boxes. It loads the other faces in the background and logs `web font …` for any that fail. Because fonts can now arrive after startup, the Type tool's layout cache also checks the font database's generation, so text lays out again when new fonts arrive. _headers and .htaccess serve fonts/* as font/ttf and cache it as immutable. packaging/web/README.md and docs/development.md explain the fonts folder, and ROADMAP.md lists the Arabic typefaces under Type. Also adds Ahmed Moussa to contributors/people.toml. Signed-off-by: Ahmed Moussa <moussa.ahmed95@gmail.com>
103 lines
5.0 KiB
Markdown
103 lines
5.0 KiB
Markdown
# Hosting VectorCraft for the web
|
|
|
|
`vectorcraft-web-<version>.zip` (from the GitHub release, or `packaging/web/package.sh`) holds a
|
|
static site in `vectorcraft-web-<version>/`:
|
|
|
|
| File | What it is |
|
|
|---|---|
|
|
| `index.html` | The page. It loads everything through relative URLs. |
|
|
| `vectorcraft-web-<hash>.js` | wasm-bindgen glue (generated, ES module) |
|
|
| `vectorcraft-web-<hash>_bg.wasm` | The app, about 13 MB, or 5 MB with compression |
|
|
| `_headers`, `.htaccess` | Sample header rules for Netlify/Cloudflare Pages and Apache |
|
|
|
|
There is no server-side code. Upload the folder's contents anywhere that serves static files.
|
|
|
|
## Any path works
|
|
|
|
All URLs in `index.html` are relative (`public_url = "./"` in `apps/vectorcraft-web/Trunk.toml`),
|
|
so the site works at a domain root (`https://example.com/`), under a prefix
|
|
(`https://example.com/tools/vectorcraft/`) and from a CDN bucket. The asset names carry a content
|
|
hash, so they can be cached forever. Only `index.html` needs revalidation.
|
|
|
|
## Required server settings
|
|
|
|
- **MIME type:** serve `.wasm` as `application/wasm`. Browsers refuse to stream-compile it under
|
|
any other type, and the app then loads slowly or not at all. Serve `.js` as `text/javascript`.
|
|
Most hosts already do both. For nginx, check that `mime.types` has `application/wasm wasm;`.
|
|
- **Compression:** turn on gzip or Brotli for `.wasm`, `.js` and `.html`. That takes the
|
|
download from about 13 MB to about 5 MB. You can also precompress (`brotli -k *.wasm`) and let
|
|
the server send `Content-Encoding: br`.
|
|
- **Caching:** `Cache-Control: public, max-age=31536000, immutable` on the hashed `.wasm` and
|
|
`.js` files, and `no-cache` on `index.html`.
|
|
- **HTTPS:** WebGPU (and the clipboard) only work in a secure context, which means `https://`
|
|
or `http://localhost`. Over plain HTTP elsewhere, the app falls back to WebGL2.
|
|
- **No special isolation headers:** VectorCraft doesn't use `SharedArrayBuffer`, so it doesn't
|
|
need `Cross-Origin-Opener-Policy` or `Cross-Origin-Embedder-Policy`. If your site already sends
|
|
COEP `require-corp`, also send `Cross-Origin-Resource-Policy: same-origin` (or `cross-origin`
|
|
when the files live on a CDN) on the app's files.
|
|
|
|
nginx example:
|
|
|
|
```nginx
|
|
location /vectorcraft/ {
|
|
types { application/wasm wasm; text/javascript js; text/html html; }
|
|
gzip on;
|
|
gzip_types application/wasm text/javascript text/html;
|
|
location ~* \.(wasm|js)$ { add_header Cache-Control "public, max-age=31536000, immutable"; }
|
|
location ~* index\.html$ { add_header Cache-Control "no-cache"; }
|
|
}
|
|
```
|
|
|
|
Local test: `python3 -m http.server 8765` inside the folder, then open http://localhost:8765/.
|
|
|
|
## Fonts folder
|
|
|
|
Builds made with craft-fonts (`CRAFT_FONTS_DIR`, all releases) have a `fonts/` folder beside the
|
|
wasm: the Arabic fonts the app fetches instead of embedding (about 8 MB, each next to its OFL
|
|
licence). Serve it with the rest of the site. Noto Sans Arabic is fetched before the app starts;
|
|
the other families load in the background and appear in the font menus as they arrive.
|
|
|
|
- Serve `.ttf` as `font/ttf` (the browser checks each file's SHA-256, so a wrong type or a
|
|
rewritten file makes the app skip that font and log `web font …` in the console).
|
|
- The folder names are the files' SHA-256 prefixes, so `fonts/*` can be cached forever
|
|
(`Cache-Control: public, max-age=31536000, immutable`); `_headers` and `.htaccess` do this.
|
|
- Without the folder the app still runs, but Arabic text shows as boxes.
|
|
|
|
## Embedding in a page (iframe)
|
|
|
|
```html
|
|
<iframe
|
|
src="https://example.com/vectorcraft/"
|
|
title="VectorCraft vector illustration app"
|
|
style="width: 100%; height: 720px; border: 0;"
|
|
allow="fullscreen; clipboard-read; clipboard-write"
|
|
allowfullscreen>
|
|
</iframe>
|
|
```
|
|
|
|
- The app fills the iframe and follows its size, so size the iframe and not the app.
|
|
- Keyboard shortcuts go to the iframe after the user clicks into it, as with any embedded app.
|
|
- **Cross-origin embeds** work. Preferences are kept in the iframe's `localStorage`. Browsers
|
|
that partition or block third-party storage may forget them between visits, and the app
|
|
then starts with defaults.
|
|
- **Sandboxed iframes** need at least
|
|
`sandbox="allow-scripts allow-same-origin allow-downloads allow-popups"`. Without
|
|
`allow-same-origin` there's no storage. Without `allow-downloads`, Save and Export (browser
|
|
downloads) are blocked.
|
|
- Don't send `X-Frame-Options: DENY` or a `frame-ancestors` CSP that excludes the embedding page.
|
|
|
|
## Renderer selection and fallback flags
|
|
|
|
VectorCraft renders with wgpu. It uses **WebGPU** when the browser has it and falls back to
|
|
**WebGL2** on its own. URL query flags override this, and they work on the iframe `src` too:
|
|
|
|
| Flag | Effect |
|
|
|---|---|
|
|
| *(none)* | WebGPU if available, otherwise WebGL2 |
|
|
| `?webgl` | Force the WebGL2 backend (useful when a WebGPU driver misbehaves) |
|
|
| `?cpu` | Force the CPU canvas path (slowest, most compatible) |
|
|
|
|
For example: `<iframe src="https://example.com/vectorcraft/?webgl" ...>`.
|
|
|
|
A browser with neither WebGPU nor WebGL2 gets a message in place of the app.
|