Use head elements and new manganis syntax in examples (#2688)

* use head elements and new manganis syntax in examples
* only enable desktop workspace example scraping during a dioxus release

---------

Co-authored-by: Jonathan Kelley <jkelleyrtp@gmail.com>

examples/all_events.rs

@@ -6,7 +6,7 @@
 use dioxus::prelude::*;
 use std::{collections::VecDeque, fmt::Debug, rc::Rc};
 
-const STYLE: &str = asset!(file("./examples/assets/events.css"));
+const STYLE: &str = asset!("./examples/assets/events.css");
 
 fn main() {
     launch(app);
@@ -26,7 +26,7 @@ fn app() -> Element {
     };
 
     rsx! {
-        link { rel: "stylesheet", href: STYLE }
+        head::Link { rel: "stylesheet", href: STYLE }
         div { id: "container",
             // focusing is necessary to catch keyboard events
             div { id: "receiver", tabindex: 0,

examples/assets/overlay.css

@@ -0,0 +1,13 @@
+html, body {
+    height: 100px;
+    margin: 0;
+    overscroll-behavior-y: none;
+    overscroll-behavior-x: none;
+    overflow: hidden;
+}
+#main, #bodywrap {
+    height: 100%;
+    margin: 0;
+    overscroll-behavior-x: none;
+    overscroll-behavior-y: none;
+}

examples/assets/read_size.css

@@ -0,0 +1,9 @@
+html, body {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+}
+#main {
+    height: 100%;
+    width: 100%;
+}

examples/calculator.rs

@@ -12,7 +12,7 @@ use dioxus::events::*;
 use dioxus::html::input_data::keyboard_types::Key;
 use dioxus::prelude::*;
 
-const STYLE: &str = asset!(file("./examples/assets/calculator.css"));
+const STYLE: &str = asset!("./examples/assets/calculator.css");
 
 fn main() {
     LaunchBuilder::desktop()
@@ -54,7 +54,7 @@ fn app() -> Element {
     };
 
     rsx! {
-        link { rel: "stylesheet", href: STYLE }
+        head::Link { rel: "stylesheet", href: STYLE }
         div { id: "wrapper",
             div { class: "app",
                 div { class: "calculator", tabindex: "0", onkeydown: handle_key_down_event,

examples/calculator_mutable.rs

@@ -25,13 +25,11 @@ fn main() {
         .launch(app);
 }
 
-const STYLE: &str = include_str!("./assets/calculator.css");
-
 fn app() -> Element {
     let mut state = use_signal(Calculator::new);
 
     rsx! {
-        style { {STYLE} }
+        head::Link { rel: "stylesheet", href: asset!("./examples/assets/calculator.css") }
         div { id: "wrapper",
             div { class: "app",
                 div {

examples/clock.rs

@@ -5,7 +5,7 @@
 
 use dioxus::prelude::*;
 
-const STYLE: &str = asset!(file("./examples/assets/clock.css"));
+const STYLE: &str = asset!("./examples/assets/clock.css");
 
 fn main() {
     launch_desktop(app);
@@ -38,7 +38,7 @@ fn app() -> Element {
     );
 
     rsx! {
-        link { rel: "stylesheet", href: STYLE }
+        head::Link { rel: "stylesheet", href: STYLE }
         div { id: "app",
             div { id: "title", "Carpe diem 🎉" }
             div { id: "clock-display", "{time}" }

examples/control_focus.rs

@@ -6,7 +6,7 @@
 use dioxus::prelude::*;
 use std::rc::Rc;
 
-const STYLE: &str = asset!(file("./examples/assets/roulette.css"));
+const STYLE: &str = asset!("./examples/assets/roulette.css");
 
 fn main() {
     launch_desktop(app);
@@ -38,7 +38,7 @@ fn app() -> Element {
     });
 
     rsx! {
-        link { rel: "stylesheet", href: STYLE }
+        head::Link { rel: "stylesheet", href: STYLE }
         h1 { "Input Roulette" }
         button { onclick: move |_| running.toggle(), "Toggle roulette" }
         div { id: "roulette-grid",

examples/counters.rs

@@ -2,7 +2,7 @@
 
 use dioxus::prelude::*;
 
-const STYLE: &str = asset!(file("./examples/assets/counter.css"));
+const STYLE: &str = asset!("./examples/assets/counter.css");
 
 fn main() {
     launch(app);
@@ -16,7 +16,7 @@ fn app() -> Element {
     let sum = use_memo(move || counters.read().iter().copied().sum::<i32>());
 
     rsx! {
-        link { rel: "stylesheet", href: STYLE }
+        head::Link { rel: "stylesheet", href: STYLE }
 
         div { id: "controls",
             button { onclick: move |_| counters.write().push(0), "Add counter" }

examples/crm.rs

@@ -11,8 +11,6 @@
 
 use dioxus::prelude::*;
 
-const STYLE: &str = asset!(file("./examples/assets/crm.css"));
-
 fn main() {
     LaunchBuilder::new()
         .with_cfg(desktop!({
@@ -22,13 +20,13 @@ fn main() {
         }))
         .launch(|| {
             rsx! {
-                link {
+                head::Link {
                     rel: "stylesheet",
-                    href: "https://unpkg.com/purecss@2.0.6/build/pure-min.css",
+                    href: asset!("https://unpkg.com/purecss@2.0.6/build/pure-min.css"), 
                     integrity: "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5",
                     crossorigin: "anonymous"
                 }
-                link { rel: "stylesheet", href: STYLE }
+                head::Link { rel: "stylesheet", href: asset!("./examples/assets/crm.css") }
                 h1 { "Dioxus CRM Example" }
                 Router::<Route> {}
             }

examples/custom_assets.rs

@@ -11,8 +11,7 @@ use dioxus::prelude::*;
 static ASSET_PATH: &str = "examples/assets/logo.png";
 
 #[cfg(feature = "collect-assets")]
-static ASSET_PATH: &str =
-    manganis::mg!(image("examples/assets/logo.png").format(ImageType::Avif)).path();
+static ASSET_PATH: &str = asset!("examples/assets/logo.png".format(ImageType::Avif));
 
 fn main() {
     launch(app);

examples/dynamic_asset.rs

@@ -7,7 +7,7 @@
 use dioxus::desktop::{use_asset_handler, wry::http::Response};
 use dioxus::prelude::*;
 
-const STYLE: &str = asset!(file("./examples/assets/custom_assets.css"));
+const STYLE: &str = asset!("./examples/assets/custom_assets.css");
 
 fn main() {
     launch_desktop(app);
@@ -24,7 +24,7 @@ fn app() -> Element {
     });
 
     rsx! {
-        link { rel: "stylesheet", href: STYLE }
+        head::Link { rel: "stylesheet", href: STYLE }
         h1 { "Dynamic Assets" }
         img { src: "/logos/logo.png" }
     }

examples/file_explorer.rs

@@ -14,25 +14,22 @@ fn main() {
         .launch(app)
 }
 
-#[cfg(not(feature = "collect-assets"))]
-const _STYLE: &str = include_str!("../examples/assets/fileexplorer.css");
-
-#[cfg(feature = "collect-assets")]
-const _STYLE: &str = manganis::mg!(file("./examples/assets/fileexplorer.css"));
-
 fn app() -> Element {
     let mut files = use_signal(Files::new);
 
     rsx! {
+        head::Link {
+            rel: "stylesheet",
+            href: asset!("./examples/assets/fileexplorer.css")
+        }
         div {
-            link { href:"https://fonts.googleapis.com/icon?family=Material+Icons", rel:"stylesheet" }
+            head::Link { href: "https://fonts.googleapis.com/icon?family=Material+Icons", rel: "stylesheet" }
             header {
                 i { class: "material-icons icon-menu", "menu" }
                 h1 { "Files: " {files.read().current()} }
                 span { }
                 i { class: "material-icons", onclick: move |_| files.write().go_up(), "logout" }
             }
-            style { "{_STYLE}" }
             main {
                 for (dir_id, path) in files.read().path_names.iter().enumerate() {
                     {

examples/file_upload.rs

@@ -8,7 +8,7 @@ use std::sync::Arc;
 use dioxus::prelude::*;
 use dioxus::{html::HasFileData, prelude::dioxus_elements::FileEngine};
 
-const STYLE: &str = asset!(file("./examples/assets/file_upload.css"));
+const STYLE: &str = asset!("./examples/assets/file_upload.css");
 
 fn main() {
     launch(app);
@@ -43,7 +43,7 @@ fn app() -> Element {
     };
 
     rsx! {
-        link { rel: "stylesheet", href: STYLE }
+        head::Link { rel: "stylesheet", href: STYLE }
 
         h1 { "File Upload Example" }
         p { "Drop a .txt, .rs, or .js file here to read it" }

examples/flat_router.rs

@@ -9,12 +9,12 @@
 
 use dioxus::prelude::*;
 
-const STYLE: &str = asset!(file("./examples/assets/flat_router.css"));
+const STYLE: &str = asset!("./examples/assets/flat_router.css");
 
 fn main() {
     launch(|| {
         rsx! {
-            link { rel: "stylesheet", href: STYLE }
+            head::Link { rel: "stylesheet", href: STYLE }
             Router::<Route> {}
         }
     })

examples/global.rs

@@ -7,7 +7,7 @@
 
 use dioxus::prelude::*;
 
-const STYLE: &str = asset!(file("./examples/assets/counter.css"));
+const STYLE: &str = asset!("./examples/assets/counter.css");
 
 static COUNT: GlobalSignal<i32> = Signal::global(|| 0);
 static DOUBLED_COUNT: GlobalMemo<i32> = Signal::global_memo(|| COUNT() * 2);
@@ -18,7 +18,7 @@ fn main() {
 
 fn app() -> Element {
     rsx! {
-        link { rel: "stylesheet", href: STYLE }
+        head::Link { rel: "stylesheet", href: STYLE }
         Increment {}
         Decrement {}
         Reset {}

examples/image_generator_openai.rs

@@ -36,7 +36,7 @@ fn app() -> Element {
     });
 
     rsx! {
-        head { link { rel: "stylesheet", href: "https://unpkg.com/bulma@0.9.0/css/bulma.min.css" } }
+        head::Link { rel: "stylesheet", href: "https://unpkg.com/bulma@0.9.0/css/bulma.min.css" }
         div { class: "container",
             div { class: "columns",
                 div { class: "column",

examples/link.rs

@@ -8,7 +8,7 @@
 
 use dioxus::prelude::*;
 
-const STYLE: &str = asset!(file("./examples/assets/links.css"));
+const STYLE: &str = asset!("./examples/assets/links.css");
 
 fn main() {
     launch(app);
@@ -16,7 +16,7 @@ fn main() {
 
 fn app() -> Element {
     rsx! (
-        link { rel: "stylesheet", href: STYLE }
+        head::Link { rel: "stylesheet", href: STYLE }
         Router::<Route> {}
     )
 }

examples/overlay.rs

@@ -20,6 +20,10 @@ fn app() -> Element {
     _ = use_global_shortcut("cmd+g", move || show_overlay.toggle());
 
     rsx! {
+        head::Link {
+            rel: "stylesheet",
+            href: asset!("./examples/assets/overlay.css"),
+        }
         if show_overlay() {
             div {
                 width: "100%",
@@ -41,28 +45,7 @@ fn app() -> Element {
 }
 
 fn make_config() -> dioxus::desktop::Config {
-    dioxus::desktop::Config::default()
-        .with_window(make_window())
-        .with_custom_head(
-            r#"
-<style type="text/css">
-    html, body {
-        height: 100px;
-        margin: 0;
-        overscroll-behavior-y: none;
-        overscroll-behavior-x: none;
-        overflow: hidden;
-    }
-    #main, #bodywrap {
-        height: 100%;
-        margin: 0;
-        overscroll-behavior-x: none;
-        overscroll-behavior-y: none;
-    }
-</style>
-"#
-            .to_owned(),
-        )
+    dioxus::desktop::Config::default().with_window(make_window())
 }
 
 fn make_window() -> WindowBuilder {

examples/read_size.rs

@@ -9,26 +9,7 @@ use std::rc::Rc;
 use dioxus::{html::geometry::euclid::Rect, prelude::*};
 
 fn main() {
-    LaunchBuilder::desktop()
-        .with_cfg(
-            dioxus::desktop::Config::default().with_custom_head(
-                r#"
-<style type="text/css">
-    html, body {
-        height: 100%;
-        width: 100%;
-        margin: 0;
-    }
-    #main {
-        height: 100%;
-        width: 100%;
-    }
-</style>
-"#
-                .to_owned(),
-            ),
-        )
-        .launch(app);
+    launch(app);
 }
 
 fn app() -> Element {
@@ -47,6 +28,7 @@ fn app() -> Element {
     };
 
     rsx!(
+        head::Link { rel: "stylesheet", href: asset!("./examples/assets/read_size.css") }
         div {
             width: "50%",
             height: "50%",

examples/reducer.rs

@@ -7,7 +7,7 @@
 
 use dioxus::prelude::*;
 
-const STYLE: &str = asset!(file("./examples/assets/radio.css"));
+const STYLE: &str = asset!("./examples/assets/radio.css");
 
 fn main() {
     launch(app);
@@ -17,7 +17,7 @@ fn app() -> Element {
     let mut state = use_signal(|| PlayerState { is_playing: false });
 
     rsx!(
-        link { rel: "stylesheet", href: STYLE }
+        head::Link { rel: "stylesheet", href: STYLE }
         h1 {"Select an option"}
 
         // Add some cute animations if the radio is playing!

examples/router.rs

@@ -8,12 +8,12 @@
 
 use dioxus::prelude::*;
 
-const STYLE: &str = asset!(file("./examples/assets/router.css"));
+const STYLE: &str = asset!("./examples/assets/router.css");
 
 fn main() {
     launch(|| {
         rsx! {
-            link { rel: "stylesheet", href: STYLE }
+            head::Link { rel: "stylesheet", href: STYLE }
             Router::<Route> {}
         }
     });

examples/tailwind/src/main.rs

@@ -2,7 +2,7 @@
 
 use dioxus::prelude::*;
 
-const _STYLE: &str = manganis::mg!(file("public/tailwind.css"));
+const _STYLE: &str = asset!("public/tailwind.css");
 
 fn main() {
     launch(app);

examples/todomvc.rs

@@ -3,7 +3,7 @@
 use dioxus::prelude::*;
 use std::collections::HashMap;
 
-const STYLE: &str = asset!(file("./examples/assets/todomvc.css"));
+const STYLE: &str = asset!("./examples/assets/todomvc.css");
 
 fn main() {
     launch(app);
@@ -65,7 +65,7 @@ fn app() -> Element {
     };
 
     rsx! {
-        link { rel: "stylesheet", href: STYLE }
+        head::Link { rel: "stylesheet", href: STYLE }
         section { class: "todoapp",
             TodoHeader { todos }
             section { class: "main",

examples/weather_app.rs

@@ -19,7 +19,7 @@ fn app() -> Element {
     let current_weather = use_resource(move || async move { get_weather(&country()).await });
 
     rsx! {
-        link { rel: "stylesheet", href: "https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css" }
+        head::Link { rel: "stylesheet", href: "https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css" }
         div { class: "mx-auto p-4 bg-gray-100 h-screen flex justify-center",
             div { class: "flex items-center justify-center flex-row",
                 div { class: "flex items-start justify-center flex-row",

examples/window_event.rs

@@ -26,7 +26,7 @@ fn main() {
 
 fn app() -> Element {
     rsx!(
-        link { href: "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css", rel: "stylesheet" }
+        head::Link { href: "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css", rel: "stylesheet" }
         Header {}
         div { class: "container mx-auto",
             div { class: "grid grid-cols-5",