Updates i18n page to embed example

Dioxus.toml

@@ -23,7 +23,7 @@ base_path = "."
 
 [web.watcher]
 
-watch_path = ["src"]
+watch_path = ["docs-src", "src"]
 index_on_404 = true
 
 # include `assets` in web platform

README.md

@@ -22,7 +22,7 @@ With [dioxus] installed, you can use it to build and serve the documentation on
 dx serve --example spa --features web
 ```
 
-this will start a local server that will be available on [localhost](http://localhost:3000) and will automatically build and re-build the documentation when it changes.
+this will start a local server that will be available on [localhost](http://localhost:8080) and will automatically build and re-build the documentation when it changes.
 
 ## Contributing
 Want to help out? Check out our [The "Contributing" document][contributing]

docs-src/0.4/en/cookbook/integrations/index.md

@@ -1,3 +1,4 @@
 This section of the guide provides getting started guides for common tools used with Dioxus.
 
 - [Logging](./logging.md)
+- [Internationalization](./internationalization.md)

docs-src/0.4/en/cookbook/integrations/internationalization.md

@@ -2,4 +2,8 @@
 
 If you application supports multiple languages, the [Dioxus-std](https://github.com/DioxusLabs/dioxus-std) crate contains helpers to make working with translations in your application easier.
 
-A full example is available [here](https://github.com/DioxusLabs/dioxus-std/blob/master/examples/i18n/src/main.rs)
+## The full code for internationalization
+
+```rust
+{{#include src/doc_examples/i18n.rs}}
+```

src/doc_examples/i18n.rs

@@ -0,0 +1,67 @@
+use dioxus::prelude::*;
+use dioxus_std::i18n::*;
+use dioxus_std::translate;
+use std::str::FromStr;
+
+fn main() {
+    dioxus_web::launch(app);
+}
+
+static EN_US: &str = r#"{
+    "id": "en-US",
+    "texts": {
+        "messages": {
+            "hello_world": "Hello World!"
+        },
+        "messages.hello": "Hello {name}"
+    }
+}"#;
+static ES_ES: &str = r#"{
+    "id": "es-ES",
+    "texts": {
+        "messages": {
+            "hello_world": "Hola Mundo!"
+        },
+        "messages.hello": "Hola {name}"
+    }
+}"#;
+
+#[allow(non_snake_case)]
+fn Body(cx: Scope) -> Element {
+    let i18 = use_i18(cx);
+
+    let change_to_english = move |_| i18.set_language("en-US".parse().unwrap());
+    let change_to_spanish = move |_| i18.set_language("es-ES".parse().unwrap());
+
+    render!(
+        button {
+            onclick: change_to_english,
+            label {
+                "English"
+            }
+        }
+        button {
+            onclick: change_to_spanish,
+            label {
+                "Spanish"
+            }
+        }
+        p { translate!(i18, "messages.hello_world") }
+        p { translate!(i18, "messages.hello", name: "Dioxus")  }
+    )
+}
+
+fn app(cx: Scope) -> Element {
+    use_init_i18n(
+        cx,
+        "en-US".parse().unwrap(),
+        "en-US".parse().unwrap(),
+        || {
+            let en_us = Language::from_str(EN_US).unwrap();
+            let es_es = Language::from_str(ES_ES).unwrap();
+            vec![en_us, es_es]
+        },
+    );
+
+    render!(Body {})
+}