Check the code in the guide (#380)

* check the code in the asset, component, and backend guide

* check remaining guide sections

Author: ealmloff

Cargo.lock

@@ -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" }
@@ -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]
@@ -169,5 +171,7 @@ doc_test = [
     "http",
     "rand",
     "server",
-    "dioxus/fullstack"
+    "dioxus/fullstack",
+    "dioxus-cli-config",
+    "dep:rusqlite"
 ]

Cargo.toml

@@ -0,0 +1 @@
+

assets/icon.png

@@ -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.
@@ -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.