Update Docs CI with mdbook translation support (#516)

* Update Docs CI with mdbook translation support #514

* install mdbook with --rev

docs/guide/src/en/describing_ui/component_children.md

@@ -3,13 +3,13 @@
 In some cases, you may wish to create a component that acts as a container for some other content, without the component needing to know what that content is. To achieve this, create a prop of type `Element`:
 
 ```rust
-{{#include ../../examples/component_element_props.rs:Clickable}}
+{{#include ../../../examples/component_element_props.rs:Clickable}}
 ```
 
 Then, when rendering the component, you can pass in the output of `cx.render(rsx!(...))`:
 
 ```rust
-{{#include ../../examples/component_element_props.rs:Clickable_usage}}
+{{#include ../../../examples/component_element_props.rs:Clickable_usage}}
 ```
 
 > Note: Since `Element<'a>` is a borrowed prop, there will be no memoization.
@@ -21,11 +21,11 @@ Then, when rendering the component, you can pass in the output of `cx.render(rsx
 Rather than passing the RSX through a regular prop, you may wish to accept children similarly to how elements can have children. The "magic" `children` prop lets you achieve this:
 
 ```rust
-{{#include ../../examples/component_children.rs:Clickable}}
+{{#include ../../../examples/component_children.rs:Clickable}}
 ```
 
 This makes using the component much simpler: simply put the RSX inside the `{}` brackets – and there is no need for a `render` call or another macro!
 
 ```rust
-{{#include ../../examples/component_children.rs:Clickable_usage}}
+{{#include ../../../examples/component_children.rs:Clickable_usage}}
 ```

docs/guide/src/en/describing_ui/component_props.md

@@ -20,12 +20,12 @@ There are 2 flavors of Props structs:
 Owned Props are very simple – they don't borrow anything. Example:
 
 ```rust
-{{#include ../../examples/component_owned_props.rs:Likes}}
+{{#include ../../../examples/component_owned_props.rs:Likes}}
 ```
 
 You can then pass prop values to the component the same way you would pass attributes to an element:
 ```rust
-{{#include ../../examples/component_owned_props.rs:App}}
+{{#include ../../../examples/component_owned_props.rs:App}}
 ```
 
 ![Screenshot: Likes component](./images/component_owned_props_screenshot.png)
@@ -37,13 +37,13 @@ Owning props works well if your props are easy to copy around – like a single
 Rust allows for something more efficient – borrowing the String as a `&str` – this is what Borrowed Props are for!
 
 ```rust
-{{#include ../../examples/component_borrowed_props.rs:TitleCard}}
+{{#include ../../../examples/component_borrowed_props.rs:TitleCard}}
 ```
 
 We can then use the component like this:
 
 ```rust
-{{#include ../../examples/component_borrowed_props.rs:App}}
+{{#include ../../../examples/component_borrowed_props.rs:App}}
 ```
 ![Screenshot: TitleCard component](./images/component_borrowed_props_screenshot.png)
 
@@ -57,13 +57,13 @@ The `#[derive(Props)]` macro has some features that let you customize the behavi
 You can create optional fields by using the `Option<…>` type for a field:
 
 ```rust
-{{#include ../../examples/component_props_options.rs:OptionalProps}}
+{{#include ../../../examples/component_props_options.rs:OptionalProps}}
 ```
 
 Then, you can choose to either provide them or not:
 
 ```rust
-{{#include ../../examples/component_props_options.rs:OptionalProps_usage}}
+{{#include ../../../examples/component_props_options.rs:OptionalProps_usage}}
 ```
 
 ### Explicitly Required `Option`s
@@ -71,13 +71,13 @@ Then, you can choose to either provide them or not:
 If you want to explicitly require an `Option`, and not an optional prop, you can annotate it with `#[props(!optional)]`:
 
 ```rust
-{{#include ../../examples/component_props_options.rs:ExplicitOption}}
+{{#include ../../../examples/component_props_options.rs:ExplicitOption}}
 ```
 
 Then, you have to explicitly pass either `Some("str")` or `None`:
 
 ```rust
-{{#include ../../examples/component_props_options.rs:ExplicitOption_usage}}
+{{#include ../../../examples/component_props_options.rs:ExplicitOption_usage}}
 ```
 
 ### Default Props
@@ -85,13 +85,13 @@ Then, you have to explicitly pass either `Some("str")` or `None`:
 You can use `#[props(default = 42)]` to make a field optional and specify its default value:
 
 ```rust
-{{#include ../../examples/component_props_options.rs:DefaultComponent}}
+{{#include ../../../examples/component_props_options.rs:DefaultComponent}}
 ```
 
 Then, similarly to optional props, you don't have to provide it:
 
 ```rust
-{{#include ../../examples/component_props_options.rs:DefaultComponent_usage}}
+{{#include ../../../examples/component_props_options.rs:DefaultComponent_usage}}
 ```
 
 ### Automatic Conversion with `.into`
@@ -99,13 +99,13 @@ Then, similarly to optional props, you don't have to provide it:
 It is common for Rust functions to accept `impl Into<SomeType>` rather than just `SomeType` to support a wider range of parameters. If you want similar functionality with props, you can use `#[props(into)]`. For example, you could add it on a `String` prop – and `&str` will also be automatically accepted, as it can be converted into `String`:
 
 ```rust
-{{#include ../../examples/component_props_options.rs:IntoComponent}}
+{{#include ../../../examples/component_props_options.rs:IntoComponent}}
 ```
 
 Then, you can use it so:
 
 ```rust
-{{#include ../../examples/component_props_options.rs:IntoComponent_usage}}
+{{#include ../../../examples/component_props_options.rs:IntoComponent_usage}}
 ```
 
 ## The `inline_props` macro

docs/guide/src/en/describing_ui/components.md

@@ -5,7 +5,7 @@ Just like you wouldn't want to write a complex program in a single, long, `main`
 A component is a Rust function, named in UpperCammelCase, that takes a `Scope` parameter and returns an `Element` describing the UI it wants to render. In fact, our `App` function is a component!
 
 ```rust
-{{#include ../../examples/hello_world_desktop.rs:component}}
+{{#include ../../../examples/hello_world_desktop.rs:component}}
 ```
 
 > You'll probably want to add `#![allow(non_snake_case)]` to the top of your crate to avoid warnings about the function name
@@ -13,13 +13,13 @@ A component is a Rust function, named in UpperCammelCase, that takes a `Scope` p
 A Component is responsible for some rendering task – typically, rendering an isolated part of the user interface. For example, you could have an `About` component that renders a short description of Dioxus Labs:
 
 ```rust
-{{#include ../../examples/components.rs:About}}
+{{#include ../../../examples/components.rs:About}}
 ```
 
 Then, you can render your component in another component, similarly to how elements are rendered:
 
 ```rust
-{{#include ../../examples/components.rs:App}}
+{{#include ../../../examples/components.rs:App}}
 ```
 
 ![Screenshot containing the About component twice](./images/screenshot_about_component.png)

docs/guide/src/en/describing_ui/index.md

@@ -5,7 +5,7 @@ Dioxus is a *declarative* framework. This means that instead of telling Dioxus w
 You have already seen a simple example or RSX syntax in the "hello world" application:
 
 ```rust
-{{#include ../../examples/hello_world_desktop.rs:component}}
+{{#include ../../../examples/hello_world_desktop.rs:component}}
 ```
 
 Here, we use the `rsx!` macro to *declare* that we want a `div` element, containing the text `"Hello, world!"`. Dioxus takes the RSX and constructs a UI from it.
@@ -15,7 +15,7 @@ Here, we use the `rsx!` macro to *declare* that we want a `div` element, contain
 RSX is very similar to HTML in that it describes elements with attributes and children. Here's an empty `div` element in RSX, as well as the resulting HTML:
 
 ```rust
-{{#include ../../examples/rsx_overview.rs:empty}}
+{{#include ../../../examples/rsx_overview.rs:empty}}
 ```
 ```html
 <div></div>
@@ -23,10 +23,10 @@ RSX is very similar to HTML in that it describes elements with attributes and ch
 
 ### Children
 
-To add children to an element, put them inside the `{}` brackets. They can be either other elements, or text. For example, you could have an `ol` (ordered list) element, containing 3 `li` (list item) elements, each of which contains some text: 
+To add children to an element, put them inside the `{}` brackets. They can be either other elements, or text. For example, you could have an `ol` (ordered list) element, containing 3 `li` (list item) elements, each of which contains some text:
 
 ```rust
-{{#include ../../examples/rsx_overview.rs:children}}
+{{#include ../../../examples/rsx_overview.rs:children}}
 ```
 ```html
 <ol>
@@ -43,7 +43,7 @@ You can also "group" elements by wrapping them in `Fragment {}`. This will not c
 > Note: you can also render multiple elements at the top level of `rsx!` and they will be automatically grouped – no need for an explicit `Fragment {}` there.
 
 ```rust
-{{#include ../../examples/rsx_overview.rs:fragments}}
+{{#include ../../../examples/rsx_overview.rs:fragments}}
 ```
 
 ```html
@@ -58,7 +58,7 @@ You can also "group" elements by wrapping them in `Fragment {}`. This will not c
 
 Attributes are also specified inside the `{}` brackets, using the `name: value` syntax. You can provide the value as a literal in the RSX:
 ```rust
-{{#include ../../examples/rsx_overview.rs:attributes}}
+{{#include ../../../examples/rsx_overview.rs:attributes}}
 ```
 ```html
 <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="primary_button" autofocus="true">Log In</a>
@@ -71,7 +71,7 @@ Attributes are also specified inside the `{}` brackets, using the `name: value`
 Dioxus has a pre-configured set of attributes that you can use. RSX is validated at compile time to make sure you didn't specify an invalid attribute. If you want to override this behavior with a custom attribute name, specify the attribute in quotes:
 
 ```rust
-{{#include ../../examples/rsx_overview.rs:custom_attributes}}
+{{#include ../../../examples/rsx_overview.rs:custom_attributes}}
 ```
 ```html
 <b customAttribute="value">
@@ -84,7 +84,7 @@ Dioxus has a pre-configured set of attributes that you can use. RSX is validated
 Similarly to how you can [format](https://doc.rust-lang.org/rust-by-example/hello/print/fmt.html) Rust strings, you can also interpolate in RSX text. Use `{variable}` to Display the value of a variable in a string, or `{variable:?}` to use the Debug representation:
 
 ```rust
-{{#include ../../examples/rsx_overview.rs:formatting}}
+{{#include ../../../examples/rsx_overview.rs:formatting}}
 ```
 ```html
 
@@ -99,7 +99,7 @@ Similarly to how you can [format](https://doc.rust-lang.org/rust-by-example/hell
 You can include arbitrary Rust expressions within RSX, but you must escape them in `[]` brackets:
 
 ```rust
-{{#include ../../examples/rsx_overview.rs:expression}}
+{{#include ../../../examples/rsx_overview.rs:expression}}
 ```
 ```html
 <span>DIOXUS</span>

docs/guide/src/en/describing_ui/special_attributes.md

@@ -10,7 +10,7 @@ For example, shipping a markdown-to-Dioxus converter might significantly bloat y
 
 
 ```rust
-{{#include ../../examples/dangerous_inner_html.rs:dangerous_inner_html}}
+{{#include ../../../examples/dangerous_inner_html.rs:dangerous_inner_html}}
 ```
 
 > Note! This attribute is called "dangerous_inner_html" because it is **dangerous** to pass it data you don't trust. If you're not careful, you can easily expose [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks to your users.
@@ -25,7 +25,7 @@ Most attributes, when rendered, will be rendered exactly as the input you provid
 So this RSX wouldn't actually render the `hidden` attribute:
 
 ```rust
-{{#include ../../examples/boolean_attribute.rs:boolean_attribute}}
+{{#include ../../../examples/boolean_attribute.rs:boolean_attribute}}
 ```
 ```html
 <div>hello</div>