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 =
+static ASSET_PATH: &str = asset!("examples/assets/logo.png".format(ImageType::Avif));
-    manganis::mg!(image("examples/assets/logo.png").format(ImageType::Avif)).path();
 
 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()
+    dioxus::desktop::Config::default().with_window(make_window())
-        .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(),
-        )
 }
 
 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()
+    launch(app);
-        .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);
 }
 
 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",

packages/desktop/Cargo.toml

@@ -118,94 +118,3 @@ harness = false
 name = "check_eval"
 path = "headless_tests/eval.rs"
 harness = false
-
-# Most of the examples live in the workspace. We include some here so that docs.rs can scrape our examples for better inline docs
-[[example]]
-name = "video_stream"
-path = "../../examples/video_stream.rs"
-doc-scrape-examples = true
-
-[[example]]
-name = "suspense"
-path = "../../examples/suspense.rs"
-doc-scrape-examples = true
-
-[[example]]
-name = "calculator_mutable"
-path = "../../examples/calculator_mutable.rs"
-doc-scrape-examples = true
-
-[[example]]
-name = "custom_html"
-path = "../../examples/custom_html.rs"
-doc-scrape-examples = true
-
-[[example]]
-name = "custom_menu"
-path = "../../examples/custom_menu.rs"
-doc-scrape-examples = true
-
-[[example]]
-name = "errors"
-path = "../../examples/errors.rs"
-doc-scrape-examples = true
-
-[[example]]
-name = "file_explorer"
-path = "../../examples/file_explorer.rs"
-doc-scrape-examples = true
-
-[[example]]
-name = "future"
-path = "../../examples/future.rs"
-doc-scrape-examples = true
-
-[[example]]
-name = "hydration"
-path = "../../examples/hydration.rs"
-doc-scrape-examples = true
-
-[[example]]
-name = "multiwindow"
-path = "../../examples/multiwindow.rs"
-doc-scrape-examples = true
-
-[[example]]
-name = "overlay"
-path = "../../examples/overlay.rs"
-doc-scrape-examples = true
-
-[[example]]
-name = "popup"
-path = "../../examples/popup.rs"
-doc-scrape-examples = true
-
-[[example]]
-name = "read_size"
-path = "../../examples/read_size.rs"
-doc-scrape-examples = true
-
-[[example]]
-name = "shortcut"
-path = "../../examples/shortcut.rs"
-doc-scrape-examples = true
-
-[[example]]
-name = "streams"
-path = "../../examples/streams.rs"
-doc-scrape-examples = true
-
-[[example]]
-name = "window_event"
-path = "../../examples/window_event.rs"
-doc-scrape-examples = true
-
-[[example]]
-name = "window_focus"
-path = "../../examples/window_focus.rs"
-doc-scrape-examples = true
-
-[[example]]
-name = "window_zoom"
-path = "../../examples/window_zoom.rs"
-doc-scrape-examples = true

packages/desktop/build.rs

@@ -1,3 +1,5 @@
+use std::{io::Write as _, path::PathBuf};
+
 fn check_gnu() {
     // WARN about wry support on windows gnu targets. GNU windows targets don't work well in wry currently
     if std::env::var("CARGO_CFG_WINDOWS").is_ok()
@@ -6,8 +8,126 @@ fn check_gnu() {
     {
         println!("cargo:warning=GNU windows targets have some limitations within Wry. Using the MSVC windows toolchain is recommended. If you would like to use continue using GNU, you can read https://github.com/wravery/webview2-rs#cross-compilation and disable this warning by adding the gnu feature to dioxus-desktop in your Cargo.toml")
     }
+
+    // To prepare for a release, we add extra examples to desktop for doc scraping and copy assets from the workspace to make those examples compile
+    if option_env!("DIOXUS_RELEASE").is_some() {
+        // Append EXAMPLES_TOML to the cargo.toml
+        let cargo_toml = std::fs::OpenOptions::new()
+            .append(true)
+            .open("Cargo.toml")
+            .unwrap();
+        let mut write = std::io::BufWriter::new(cargo_toml);
+        write.write_all(EXAMPLES_TOML.as_bytes()).unwrap();
+
+        // Copy the assets from the workspace to the examples directory
+        let crate_dir = PathBuf::from(std::env::var("CARGO_MANIFEST_DIR").unwrap());
+        let workspace_dir = crate_dir.parent().unwrap().parent().unwrap();
+        let workspace_assets_dir = workspace_dir.join("examples").join("assets");
+        let desktop_assets_dir = PathBuf::from("examples").join("assets");
+        std::fs::create_dir_all(&desktop_assets_dir).unwrap();
+        // move all files from the workspace assets dir to the desktop assets dir
+        for entry in std::fs::read_dir(workspace_assets_dir).unwrap() {
+            let entry = entry.unwrap();
+            let path = entry.path();
+            if path.is_file() {
+                std::fs::copy(&path, desktop_assets_dir.join(path.file_name().unwrap())).unwrap();
+            }
+        }
+    }
 }
 
 fn main() {
     check_gnu();
 }
+
+const EXAMPLES_TOML: &str = r#"
+# Most of the examples live in the workspace. We include some here so that docs.rs can scrape our examples for better inline docs
+[[example]]
+name = "video_stream"
+path = "../../examples/video_stream.rs"
+doc-scrape-examples = true
+
+[[example]]
+name = "suspense"
+path = "../../examples/suspense.rs"
+doc-scrape-examples = true
+
+[[example]]
+name = "calculator_mutable"
+path = "../../examples/calculator_mutable.rs"
+doc-scrape-examples = true
+
+[[example]]
+name = "custom_html"
+path = "../../examples/custom_html.rs"
+doc-scrape-examples = true
+
+[[example]]
+name = "custom_menu"
+path = "../../examples/custom_menu.rs"
+doc-scrape-examples = true
+
+[[example]]
+name = "errors"
+path = "../../examples/errors.rs"
+doc-scrape-examples = true
+
+[[example]]
+name = "file_explorer"
+path = "../../examples/file_explorer.rs"
+doc-scrape-examples = true
+
+[[example]]
+name = "future"
+path = "../../examples/future.rs"
+doc-scrape-examples = true
+
+[[example]]
+name = "hydration"
+path = "../../examples/hydration.rs"
+doc-scrape-examples = true
+
+[[example]]
+name = "multiwindow"
+path = "../../examples/multiwindow.rs"
+doc-scrape-examples = true
+
+[[example]]
+name = "overlay"
+path = "../../examples/overlay.rs"
+doc-scrape-examples = true
+
+[[example]]
+name = "popup"
+path = "../../examples/popup.rs"
+doc-scrape-examples = true
+
+[[example]]
+name = "read_size"
+path = "../../examples/read_size.rs"
+doc-scrape-examples = true
+
+[[example]]
+name = "shortcut"
+path = "../../examples/shortcut.rs"
+doc-scrape-examples = true
+
+[[example]]
+name = "streams"
+path = "../../examples/streams.rs"
+doc-scrape-examples = true
+
+[[example]]
+name = "window_event"
+path = "../../examples/window_event.rs"
+doc-scrape-examples = true
+
+[[example]]
+name = "window_focus"
+path = "../../examples/window_focus.rs"
+doc-scrape-examples = true
+
+[[example]]
+name = "window_zoom"
+path = "../../examples/window_zoom.rs"
+doc-scrape-examples = true"#;

packages/fullstack/examples/hackernews/assets/hackernews.css

@@ -0,0 +1,17 @@
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+.spinner {
+    width: 10px;
+    height: 10px;
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #3498db;
+    border-radius: 50%;
+    animation: spin 2s linear infinite;
+}

packages/fullstack/examples/hackernews/src/main.rs

@@ -33,30 +33,10 @@ pub fn App() -> Element {
     }
 }
 
-const STYLE: &str = r#"@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-}
-.spinner {
-    width: 10px;
-    height: 10px;
-    border: 4px solid #f3f3f3;
-    border-top: 4px solid #3498db;
-    border-radius: 50%;
-    animation: spin 2s linear infinite;
-}"#;
-
 #[component]
 fn Homepage(story: ReadOnlySignal<PreviewState>) -> Element {
     rsx! {
-        style {
+        head::Link { rel: "stylesheet", href: asset!("./assets/hackernews.css") }
-            {STYLE}
-        }
         div { display: "flex", flex_direction: "row", width: "100%",
             div {
                 width: "50%",

packages/html/src/document/head.rs

@@ -245,7 +245,7 @@ impl ScriptProps {
 ///     rsx! {
 ///         // You can use the Script component to render a script tag into the head of the page
 ///         Script {
-///             src: manganis::mg!(file("./assets/script.js")),
+///             src: asset!("./assets/script.js"),
 ///         }
 ///     }
 /// }
@@ -435,7 +435,7 @@ impl LinkProps {
 ///         // You can use the meta component to render a meta tag into the head of the page
 ///         // This meta tag will redirect the user to the dioxuslabs homepage in 10 seconds
 ///         head::Link {
-///             href: manganis::mg!(file("./assets/style.css")),
+///             href: asset!("./assets/style.css"),
 ///             rel: "stylesheet",
 ///         }
 ///     }