T44d Web · Gallery builds for wasm32: one story per section by URL, themed by the host

The gallery's entry runs natively or, on wasm32, from a wasm_bindgen start
through gpui_web, single-threaded with WebGL2 fallback. ?page, ?story and
?theme choose what shows; an unknown one fails in the page and the log.
set_theme switches the mode later. Pictures load from ELY_GALLERY_ASSETS.
scripts/stories.py writes examples/gallery/stories.json from the pages.

examples/gallery/pages/messaging/calls.rs

@@ -1,5 +1,3 @@
-use std::{path::Path, time::Instant};
-
 use ely_gpui_component::{
     buttons::Button,
     data_display::Avatar,
@@ -10,10 +8,11 @@ use ely_gpui_component::{
     theme::{ActiveTheme, TextSize},
 };
 use gpui::{App, Entity, IntoElement, ParentElement, SharedString, Styled, Window, div, px};
+use web_time::Instant;
 
 use crate::{
     probe::probe,
-    ui::{change, keep, section},
+    ui::{change, keep, picture, section},
 };
 
 const ROOM: &str = asset!("atrium-olive.jpg");
@@ -126,7 +125,7 @@ pub fn grid(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
     let tile = |key: &'static str, name: &'static str| ParticipantTile::new(key, name, CAMERA);
     let you = tile("messaging-tile-you", "You").muted(!now.mic);
     let you = match now.camera {
-        true => you.frame(Path::new(ROOM)),
+        true => you.frame(picture(ROOM)),
         false => you,
     };
     section(
@@ -138,7 +137,7 @@ pub fn grid(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
         "messaging-grid",
         div().w(px(640.)).child(
             VideoCallGrid::new("messaging-grid")
-                .child(tile("messaging-tile-ana", "Ana Lima").frame(Path::new(STAIR)).speaking(true))
+                .child(tile("messaging-tile-ana", "Ana Lima").frame(picture(STAIR)).speaking(true))
                 .child(tile("messaging-tile-ben", "Ben Ito").muted(true))
                 .child(you)
                 .child(tile("messaging-tile-chloe", "Chloé Martin"))
@@ -152,7 +151,7 @@ pub fn share(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
     let sharing = state.read(cx).share;
     let tile = |key: &'static str, name: &'static str| ParticipantTile::new(key, name, CAMERA);
     let view = ScreenShareView::new("messaging-share", "Ana Lima", 16.0 / 10.0)
-        .frame(Path::new(SCREEN))
+        .frame(picture(SCREEN))
         .child(tile("messaging-strip-ben", "Ben Ito").muted(true))
         .child(tile("messaging-strip-chloe", "Chloé Martin").speaking(true));
     let view = match sharing {

examples/gallery/pages/messaging/mod.rs

@@ -15,7 +15,7 @@ mod pickers;
 use super::Page;
 use crate::{
     probe::probe,
-    script::Step,
+    step::Step,
     ui::{change, keep, section},
 };
 

examples/gallery/pages/messaging/pickers.rs

@@ -1,5 +1,3 @@
-use std::path::Path;
-
 use ely_gpui_component::{
     messaging::{ChatMessage, Gif, GifPicker, Gifs, Sticker, StickerPack, StickerPicker},
     primitives::Image,
@@ -12,7 +10,7 @@ use jiff::{civil::date, tz::TimeZone};
 
 use crate::{
     probe::probe,
-    ui::{keep, section, set, specimen, specimens},
+    ui::{keep, picture, section, set, specimen, specimens},
 };
 
 const ATRIUM: [(&str, &str, &str); 4] = [
@@ -60,7 +58,7 @@ const GIFS: [(&str, &str, &str, f32); 4] = [
 fn pack(name: &str, stickers: [(&'static str, &'static str, &'static str); 4]) -> StickerPack {
     StickerPack::new(
         name.to_string(),
-        stickers.map(|(key, title, file)| Sticker::new(key, title, Path::new(file))),
+        stickers.map(|(key, title, file)| Sticker::new(key, title, picture(file))),
     )
 }
 
@@ -101,7 +99,7 @@ pub fn stickers(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
                         ElementId::from("messaging-sticker-picture"),
                         key.to_string(),
                     ),
-                    Path::new(*file),
+                    picture(*file),
                 )
                 .fit(ObjectFit::Contain)
                 .size_full(),
@@ -146,7 +144,7 @@ fn found(words: &str) -> Vec<Gif> {
     let words = words.to_lowercase();
     GIFS.iter()
         .filter(|(_, title, _, _)| title.to_lowercase().contains(&words))
-        .map(|(key, title, file, ratio)| Gif::new(*key, *title, Path::new(*file), *ratio))
+        .map(|(key, title, file, ratio)| Gif::new(*key, *title, picture(*file), *ratio))
         .collect()
 }
 
@@ -163,7 +161,7 @@ pub fn gifs(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
             div().w(px(200.)).h(px(200. / ratio)).child(
                 Image::new(
                     (ElementId::from("messaging-gif-picture"), key.to_string()),
-                    Path::new(*file),
+                    picture(*file),
                 )
                 .size_full()
                 .rounded(round),