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>
This commit is contained in:
Evan Almloff 2024-07-25 23:58:00 +02:00 committed by GitHub
parent bd58a92441
commit c6a2e5b6c8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
31 changed files with 379 additions and 374 deletions

340
Cargo.lock generated

File diff suppressed because it is too large Load diff

View file

@ -6,7 +6,7 @@
use dioxus::prelude::*; use dioxus::prelude::*;
use std::{collections::VecDeque, fmt::Debug, rc::Rc}; 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() { fn main() {
launch(app); launch(app);
@ -26,7 +26,7 @@ fn app() -> Element {
}; };
rsx! { rsx! {
link { rel: "stylesheet", href: STYLE } head::Link { rel: "stylesheet", href: STYLE }
div { id: "container", div { id: "container",
// focusing is necessary to catch keyboard events // focusing is necessary to catch keyboard events
div { id: "receiver", tabindex: 0, div { id: "receiver", tabindex: 0,

View file

@ -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;
}

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -11,8 +11,7 @@ use dioxus::prelude::*;
static ASSET_PATH: &str = "examples/assets/logo.png"; static ASSET_PATH: &str = "examples/assets/logo.png";
#[cfg(feature = "collect-assets")] #[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() { fn main() {
launch(app); launch(app);

View file

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

View file

@ -14,25 +14,22 @@ fn main() {
.launch(app) .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 { fn app() -> Element {
let mut files = use_signal(Files::new); let mut files = use_signal(Files::new);
rsx! { rsx! {
head::Link {
rel: "stylesheet",
href: asset!("./examples/assets/fileexplorer.css")
}
div { 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 { header {
i { class: "material-icons icon-menu", "menu" } i { class: "material-icons icon-menu", "menu" }
h1 { "Files: " {files.read().current()} } h1 { "Files: " {files.read().current()} }
span { } span { }
i { class: "material-icons", onclick: move |_| files.write().go_up(), "logout" } i { class: "material-icons", onclick: move |_| files.write().go_up(), "logout" }
} }
style { "{_STYLE}" }
main { main {
for (dir_id, path) in files.read().path_names.iter().enumerate() { for (dir_id, path) in files.read().path_names.iter().enumerate() {
{ {

View file

@ -8,7 +8,7 @@ use std::sync::Arc;
use dioxus::prelude::*; use dioxus::prelude::*;
use dioxus::{html::HasFileData, prelude::dioxus_elements::FileEngine}; 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() { fn main() {
launch(app); launch(app);
@ -43,7 +43,7 @@ fn app() -> Element {
}; };
rsx! { rsx! {
link { rel: "stylesheet", href: STYLE } head::Link { rel: "stylesheet", href: STYLE }
h1 { "File Upload Example" } h1 { "File Upload Example" }
p { "Drop a .txt, .rs, or .js file here to read it" } p { "Drop a .txt, .rs, or .js file here to read it" }

View file

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

View file

@ -7,7 +7,7 @@
use dioxus::prelude::*; 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 COUNT: GlobalSignal<i32> = Signal::global(|| 0);
static DOUBLED_COUNT: GlobalMemo<i32> = Signal::global_memo(|| COUNT() * 2); static DOUBLED_COUNT: GlobalMemo<i32> = Signal::global_memo(|| COUNT() * 2);
@ -18,7 +18,7 @@ fn main() {
fn app() -> Element { fn app() -> Element {
rsx! { rsx! {
link { rel: "stylesheet", href: STYLE } head::Link { rel: "stylesheet", href: STYLE }
Increment {} Increment {}
Decrement {} Decrement {}
Reset {} Reset {}

View file

@ -36,7 +36,7 @@ fn app() -> Element {
}); });
rsx! { 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: "container",
div { class: "columns", div { class: "columns",
div { class: "column", div { class: "column",

View file

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

View file

@ -20,6 +20,10 @@ fn app() -> Element {
_ = use_global_shortcut("cmd+g", move || show_overlay.toggle()); _ = use_global_shortcut("cmd+g", move || show_overlay.toggle());
rsx! { rsx! {
head::Link {
rel: "stylesheet",
href: asset!("./examples/assets/overlay.css"),
}
if show_overlay() { if show_overlay() {
div { div {
width: "100%", width: "100%",
@ -41,28 +45,7 @@ fn app() -> Element {
} }
fn make_config() -> dioxus::desktop::Config { 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 { fn make_window() -> WindowBuilder {

View file

@ -9,26 +9,7 @@ use std::rc::Rc;
use dioxus::{html::geometry::euclid::Rect, prelude::*}; use dioxus::{html::geometry::euclid::Rect, prelude::*};
fn main() { 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 { fn app() -> Element {
@ -47,6 +28,7 @@ fn app() -> Element {
}; };
rsx!( rsx!(
head::Link { rel: "stylesheet", href: asset!("./examples/assets/read_size.css") }
div { div {
width: "50%", width: "50%",
height: "50%", height: "50%",

View file

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

View file

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

View file

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

View file

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

View file

@ -19,7 +19,7 @@ fn app() -> Element {
let current_weather = use_resource(move || async move { get_weather(&country()).await }); let current_weather = use_resource(move || async move { get_weather(&country()).await });
rsx! { 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: "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-center justify-center flex-row",
div { class: "flex items-start justify-center flex-row", div { class: "flex items-start justify-center flex-row",

View file

@ -26,7 +26,7 @@ fn main() {
fn app() -> Element { fn app() -> Element {
rsx!( 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 {} Header {}
div { class: "container mx-auto", div { class: "container mx-auto",
div { class: "grid grid-cols-5", div { class: "grid grid-cols-5",

View file

@ -118,94 +118,3 @@ harness = false
name = "check_eval" name = "check_eval"
path = "headless_tests/eval.rs" path = "headless_tests/eval.rs"
harness = false 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

View file

@ -1,3 +1,5 @@
use std::{io::Write as _, path::PathBuf};
fn check_gnu() { fn check_gnu() {
// WARN about wry support on windows gnu targets. GNU windows targets don't work well in wry currently // 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() 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") 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() { fn main() {
check_gnu(); 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"#;

View file

@ -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;
}

View file

@ -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] #[component]
fn Homepage(story: ReadOnlySignal<PreviewState>) -> Element { fn Homepage(story: ReadOnlySignal<PreviewState>) -> Element {
rsx! { rsx! {
style { head::Link { rel: "stylesheet", href: asset!("./assets/hackernews.css") }
{STYLE}
}
div { display: "flex", flex_direction: "row", width: "100%", div { display: "flex", flex_direction: "row", width: "100%",
div { div {
width: "50%", width: "50%",

View file

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