Update Docs CI with mdbook translation support (#516)

* Update Docs CI with mdbook translation support #514

* install mdbook with --rev

.github/workflows/docs.yml

@@ -15,10 +15,16 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
+      # NOTE: Comment out when https://github.com/rust-lang/mdBook/pull/1306 is merged and released
+      # - name: Setup mdBook
+      #   uses: peaceiris/actions-mdbook@v1
+      #   with:
+      #     mdbook-version: "0.4.10"
+
+      # NOTE: Delete when the previous one is enabled
       - name: Setup mdBook
-        uses: peaceiris/actions-mdbook@v1
-        with:
-          mdbook-version: "0.4.10"
+        run: |
+          cargo install mdbook --git https://github.com/Ruin0x11/mdBook.git --branch localization --rev e74fdb1
 
       - name: Build
         run: cd docs &&

docs/guide/book.toml

@@ -34,5 +34,5 @@ boost-paragraph = 1
 expand = true
 heading-split-level = 2
 
-[output.html.redirect]
-"/format/config.html" = "configuration/index.html"
+# [output.html.redirect]
+# "/format/config.html" = "configuration/index.html"

docs/guide/src/en/__unused/event_javascript.rs

@@ -4,7 +4,7 @@
 Instead of passing a closure, you can also pass a string to event handlers – this lets you use JavaScript (if your renderer can execute JavaScript):
 
 ```rust
-{{#include ../../examples/event_javascript.rs:rsx}}
+{{#include ../../../examples/event_javascript.rs:rsx}}
 ```
 
 

docs/guide/src/en/async/spawn.md

@@ -3,7 +3,7 @@
 The `use_future` and `use_coroutine` hooks are useful if you want to unconditionally spawn the future. Sometimes, though, you'll want to only spawn a future in response to an event, such as a mouse click. For example, suppose you need to send a request when the user clicks a "log in" button. For this, you can use `cx.spawn`:
 
 ```rust
-{{#include ../../examples/spawn.rs:spawn}}
+{{#include ../../../examples/spawn.rs:spawn}}
 ```
 
 > Note: `spawn` will always spawn a *new* future. You most likely don't want to call it on every render.
@@ -15,7 +15,7 @@ However, since you'll typically need a way to update the value of a hook, you ca
 To make this a bit less verbose, Dioxus exports the `to_owned!` macro which will create a binding as shown above, which can be quite helpful when dealing with many values.
 
 ```rust
-{{#include ../../examples/spawn.rs:to_owned_macro}}
+{{#include ../../../examples/spawn.rs:to_owned_macro}}
 ```
 
 Calling `spawn` will give you a `JoinHandle` which lets you cancel or pause the future.
@@ -25,5 +25,5 @@ Calling `spawn` will give you a `JoinHandle` which lets you cancel or pause the
 Sometimes, you might want to spawn a background task that needs multiple threads or talk to hardware that might block your app code. In these cases, we can directly spawn a Tokio task from our future. For Dioxus-Desktop, your task will be spawned onto Tokio's Multithreaded runtime:
 
 ```rust
-{{#include ../../examples/spawn.rs:tokio}}
+{{#include ../../../examples/spawn.rs:tokio}}
 ```

docs/guide/src/en/async/use_future.md

@@ -5,7 +5,7 @@
 For example, we can make an API request inside `use_future`:
 
 ```rust
-{{#include ../../examples/use_future.rs:use_future}}
+{{#include ../../../examples/use_future.rs:use_future}}
 ```
 
 The code inside `use_future` will be submitted to the Dioxus scheduler once the component has rendered.
@@ -15,7 +15,7 @@ We can use `.value()` to get the result of the future. On the first run, since t
 We can then render that result:
 
 ```rust
-{{#include ../../examples/use_future.rs:render}}
+{{#include ../../../examples/use_future.rs:render}}
 ```
 
 
@@ -29,5 +29,5 @@ Often, you will need to run the future again every time some value (e.g. a prop)
 
 
 ```rust
-{{#include ../../examples/use_future.rs:dependency}}
+{{#include ../../../examples/use_future.rs:dependency}}
 ```

docs/guide/src/en/best_practices/antipatterns.md

@@ -9,15 +9,15 @@ Fragments don't mount a physical element to the DOM immediately, so Dioxus must
 Only Component and Fragment nodes are susceptible to this issue. Dioxus mitigates this with components by providing an API for registering shared state without the Context Provider pattern.
 
 ```rust
-{{#include ../../examples/anti_patterns.rs:nested_fragments}}
+{{#include ../../../examples/anti_patterns.rs:nested_fragments}}
 ```
 
 ## Incorrect Iterator Keys
 
 As described in the conditional rendering chapter, list items must have unique keys that are associated with the same items across renders. This helps Dioxus associate state with the contained components, and ensures good diffing performance. Do not omit keys, unless you know that the list is static and will never change.
 
 ```rust
-{{#include ../../examples/anti_patterns.rs:iter_keys}}
+{{#include ../../../examples/anti_patterns.rs:iter_keys}}
 ```
 
 ## Avoid Interior Mutability in Props

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,55 +57,55 @@ 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
 
 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
 
 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`
 
 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,21 +5,21 @@ 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
 
 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,18 +15,18 @@ 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>
 ```
 
 ### 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>

docs/guide/src/en/getting_started/desktop.md

@@ -41,5 +41,5 @@ cargo add dioxus --features desktop
 Edit your `main.rs`:
 
 ```rust
-{{#include ../../examples/hello_world_desktop.rs:all}}
+{{#include ../../../examples/hello_world_desktop.rs:all}}
 ```

docs/guide/src/en/getting_started/tui.md

@@ -21,10 +21,10 @@ cd demo
 cargo add dioxus --features tui
 ```
 
-Then, edit your `main.rs` with the basic template. 
+Then, edit your `main.rs` with the basic template.
 
 ```rust
-{{#include ../../examples/hello_world_tui.rs}}
+{{#include ../../../examples/hello_world_tui.rs}}
 ```
 
 To run our app:
@@ -36,7 +36,7 @@ cargo run
 Press "ctrl-c" to close the app. To switch from "ctrl-c" to  just "q" to quit you can launch the app with a configuration to disable the default quit and use the root TuiContext to quit on your own.
 
 ```rust
-{{#include ../../examples/hello_world_tui_no_ctrl_c.rs}}
+{{#include ../../../examples/hello_world_tui_no_ctrl_c.rs}}
 ```
 
 ## Notes

docs/guide/src/en/getting_started/web.md

@@ -61,7 +61,7 @@ Add an `index.html` for Trunk to use. Make sure your "mount point" element has a
 
 Edit your `main.rs`:
 ```rust
-{{#include ../../examples/hello_world_web.rs}}
+{{#include ../../../examples/hello_world_web.rs}}
 ```
 
 

docs/guide/src/en/interactivity/custom_hooks.md

@@ -9,7 +9,7 @@ To avoid repetition, you can encapsulate business logic based on existing hooks
 For example, if many components need to access an `AppSettings` struct, you can create a "shortcut" hook:
 
 ```rust
-{{#include ../../examples/hooks_composed.rs:wrap_context}}
+{{#include ../../../examples/hooks_composed.rs:wrap_context}}
 ```
 
 ## Custom Hook Logic