Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minor guide fixes #385

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions Cargo.lock

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 5 additions & 1 deletion Cargo.toml
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ dioxus = { version = "0.6.0", features = ["router"] }
dioxus-web = { version = "0.6.0", features = ["hydrate"], optional = true }
dioxus-ssr = { version = "0.6.0", optional = true }
dioxus-desktop = { version = "0.6.0", optional = true }
dioxus-cli-config = { version = "0.6.0", optional = true }
dioxus-liveview = { version = "0.6.0", features = ["axum"], optional = true }

dioxus-material-icons = { git = "https://github.com/jkelleyrtp/dioxus-material-icons", branch = "jk/git-rev" }
Expand Down Expand Up @@ -57,6 +58,7 @@ dioxus-sdk = { version = "0.6.0", optional = true }
tower-http = { version = "0.5.0", optional = true, features = ["timeout"] }
tracing = "0.1.40"
rand = { version = "0.8.5", optional = true }
rusqlite = { version = "0.32.1", optional = true }
askama_escape = { version = "0.10.3", optional = true }

[build-dependencies]
Expand Down Expand Up @@ -169,5 +171,7 @@ doc_test = [
"http",
"rand",
"server",
"dioxus/fullstack"
"dioxus/fullstack",
"dioxus-cli-config",
"dep:rusqlite"
]
Binary file added assets/icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions docs-src/0.4/en/router/lib.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

29 changes: 6 additions & 23 deletions docs-src/0.6/src/guide/assets.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,18 +29,13 @@ The bare-bones template already includes a base `main.css` in the `assets` folde
To include the CSS in our app, we can use the `asset!()` macro. This macro ensures the asset will be included in the final app bundle.

```rust
static CSS: Asset = asset!("/assets/main.css");
{{#include src/doc_examples/guide_assets.rs:css_asset}}
```

We also need to load the asset into our app using the `document::Stylesheet` component. This component is equivalent to the `<link>` HTML element but also ensures the CSS will be pre-loaded during server-side-rendering.

```rust
fn App() -> Element {
rsx! {
document::Stylesheet { href: CSS }
// rest of the app
}
}
{{#include src/doc_examples/guide_assets.rs:css_stylesheet}}
```

Unlike Rust's `include_str!()` macro, the `asset!()` macro does not actually include the *contents* of the asset in our final executable. Instead, it generates a unique path so that the asset can be loaded at runtime. This is ideal for web apps where assets are loaded in parallel through different HTTP requests.
Expand All @@ -63,39 +58,27 @@ In Dioxus, you can include images in two ways:
When including assets with a URL, simply fill the `src` attribute of `img {}`. Note that when the app is offline, URL-based images won't download.

```rust
rsx! {
// ...
div {
img { src: "https://images.dog.ceo/breeds/pitbull/dog-3981540_1280.jpg" }
}
// ...
}
{{#include src/doc_examples/guide_assets.rs:url_image}}
```

For static images, you can use the same `asset!()` macro that we used to include the app's CSS.

```rust
static ICON: Asset = asset!("/assets/icon.png");

rsx! {
img { src: ICON }
}
{{#include src/doc_examples/guide_assets.rs:asset_image}}
```

## Optimizations

By default, the `asset!()` macro will lightly optimize CSS, JavaScript, JSON, and images. The name of the asset will also be modified to include a content hash.

```rust
// would output main-j1238nask123.css
asset!("/assets/main.css").to_string()
{{#include src/doc_examples/guide_assets.rs:asset_optimization}}
```

You can optimize assets even further, with an optional `Options` struct. For example, `dx` can automatically convert `.png` images to a more optimized `.avif` format:

```rust
// outputs image-j1238jd2.avif
asset!("/assets/image.png", ImageAssetOptions::new().with_avif())
{{#include src/doc_examples/guide_assets.rs:image_asset_expansion}}
```
For many apps, asset optimization is the most effective way of improving load times. As developers, we frequently overlook the size of images and accidentally make our sites load slower.

Expand Down
Loading
Loading