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/media/images.rs

@@ -1,5 +1,3 @@
-use std::path::{Path, PathBuf};
-
 use ely_gpui_component::{
     media::{ImageThumbnail, ImageViewer},
     overlays::{Lightbox, Slide},
@@ -8,56 +6,21 @@ use gpui::{App, IntoElement, ParentElement, SharedString, Styled, Window, div, p
 
 use crate::{
     probe::probe,
-    ui::{keep, row, section, set},
+    ui::{keep, picture, resource, row, section, set},
 };
 
 /// The gallery's pictures: a file, its width over height, a caption, and a corner label.
 const PICTURES: [(&str, f32, &str, &str); 5] = [
+    (asset!("atrium.jpg"), 1.5, "An atrium, noon", ""),
+    (asset!("dunes.jpg"), 1.5, "Dunes at first light", ""),
     (
-        concat!(
-            env!("CARGO_MANIFEST_DIR"),
-            "/examples/gallery/assets/atrium.jpg"
-        ),
-        1.5,
-        "An atrium, noon",
-        "",
-    ),
-    (
-        concat!(
-            env!("CARGO_MANIFEST_DIR"),
-            "/examples/gallery/assets/dunes.jpg"
-        ),
-        1.5,
-        "Dunes at first light",
-        "",
-    ),
-    (
-        concat!(
-            env!("CARGO_MANIFEST_DIR"),
-            "/examples/gallery/assets/atrium-olive.jpg"
-        ),
+        asset!("atrium-olive.jpg"),
         1.5,
         "An olive tree by the stair",
         "HDR",
     ),
-    (
-        concat!(
-            env!("CARGO_MANIFEST_DIR"),
-            "/examples/gallery/assets/dunes-grass.jpg"
-        ),
-        1.5,
-        "Grass on the ridge",
-        "",
-    ),
-    (
-        concat!(
-            env!("CARGO_MANIFEST_DIR"),
-            "/examples/gallery/assets/dunes-square.jpg"
-        ),
-        1.0,
-        "The long shadow",
-        "+2",
-    ),
+    (asset!("dunes-grass.jpg"), 1.5, "Grass on the ridge", ""),
+    (asset!("dunes-square.jpg"), 1.0, "The long shadow", "+2"),
 ];
 
 pub fn viewer(cx: &mut App) -> impl IntoElement + use<> {
@@ -68,7 +31,7 @@ pub fn viewer(cx: &mut App) -> impl IntoElement + use<> {
     )
     .child(probe(
         "media-viewer",
-        div().w(px(640.)).h(px(440.)).child(ImageViewer::new("media-viewer", PathBuf::from(PICTURES[0].0))),
+        div().w(px(640.)).h(px(440.)).child(ImageViewer::new("media-viewer", resource(PICTURES[0].0))),
     ))
 }
 
@@ -83,7 +46,7 @@ pub fn thumbnails(window: &mut Window, cx: &mut App) -> impl IntoElement + use<>
             let (open, mark) = (shown.clone(), opened.clone());
             let thumb = ImageThumbnail::new(
                 SharedString::from(format!("media-thumb-{ix}")),
-                Path::new(*path),
+                picture(*path),
                 *ratio,
             )
             .selected(ix == last)
@@ -102,7 +65,7 @@ pub fn thumbnails(window: &mut Window, cx: &mut App) -> impl IntoElement + use<>
         let (step, close) = (shown.clone(), shown.clone());
         Lightbox::new(
             "media-lightbox",
-            PICTURES.map(|(path, _, caption, _)| Slide::new(Path::new(path), caption)),
+            PICTURES.map(|(path, _, caption, _)| Slide::new(picture(path), caption)),
             at,
             move |_, cx| set(&close, None, cx),
         )