DioxusLabs · jkelleyrtp · Jul 11, 2022 · Jun 23, 2022 · Jun 24, 2022 · Jul 7, 2022
diff --git a/README.md b/README.md
@@ -34,8 +34,6 @@
   </a>
 </div>
 
-
-
 <div align="center">
   <h3>
     <a href="https://dioxuslabs.com"> Website </a>
@@ -45,10 +43,11 @@
     <a href="https://dioxuslabs.com/guide"> Guide </a>
     <span> | </span>
     <a href="https://github.com/DioxusLabs/dioxus/blob/master/notes/README/ZH_CN.md"> 中文 </a>
+    <span> | </span>
+    <a href="https://github.com/DioxusLabs/dioxus/blob/master/translations/pt-br/README.md"> PT-BR </a>
   </h3>
 </div>
 
-
 <br/>
 
 Dioxus is a portable, performant, and ergonomic framework for building cross-platform user interfaces in Rust.
@@ -70,6 +69,7 @@ Dioxus can be used to deliver webapps, desktop apps, static sites, mobile apps,
 If you know React, then you already know Dioxus.
 
 ### Unique features:
+
 - Desktop apps running natively (no Electron!) in less than 10 lines of code.
 - Incredibly ergonomic and powerful state management.
 - Comprehensive inline documentation - hover and guides for all HTML elements, listeners, and events.
@@ -89,14 +89,12 @@ If you know React, then you already know Dioxus.
     <tr>
 </table>
 
-
 ## Example Projects:
 
 | File Navigator (Desktop)                                                                                                                                                        | WiFi scanner (Desktop)                                                                                                                                                                 | TodoMVC (All platforms)                                                                                                                                                 | E-commerce w/ Tailwind (SSR/LiveView)                                                                                                                                                 |
 | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | [![File Explorer](https://github.com/DioxusLabs/example-projects/raw/master/file-explorer/image.png)](https://github.com/DioxusLabs/example-projects/blob/master/file-explorer) | [![Wifi Scanner Demo](https://github.com/DioxusLabs/example-projects/raw/master/wifi-scanner/demo_small.png)](https://github.com/DioxusLabs/example-projects/blob/master/wifi-scanner) | [![TodoMVC example](https://github.com/DioxusLabs/example-projects/raw/master/todomvc/example.png)](https://github.com/DioxusLabs/example-projects/blob/master/todomvc) | [![E-commerce Example](https://github.com/DioxusLabs/example-projects/raw/master/ecommerce-site/demo.png)](https://github.com/DioxusLabs/example-projects/blob/master/ecommerce-site) |
 
-
 See the [awesome-dioxus](https://github.com/DioxusLabs/awesome-dioxus) page for a curated list of content in the Dioxus Ecosystem.
 
 ## Why Dioxus and why Rust?
@@ -105,7 +103,7 @@ TypeScript is a fantastic addition to JavaScript, but it's still fundamentally J
 
 By using Rust, we gain:
 
-- Static types for *every* library
+- Static types for _every_ library
 - Immutability by default
 - A simple and intuitive module system
 - Integrated documentation (`go to source` _actually goes to source_)
@@ -127,6 +125,7 @@ Specifically, Dioxus provides us many other assurances:
 And much more. Dioxus makes Rust apps just as fast to write as React apps, but affords more robustness, giving your frontend team greater confidence in making big changes in shorter time.
 
 ## Why NOT Dioxus?
+
 You shouldn't use Dioxus if:
 
 - You don't like the React Hooks approach to frontend
@@ -135,6 +134,7 @@ You shouldn't use Dioxus if:
 - You need a Send+Sync UI solution (Dioxus is not currently thread-safe)
 
 ## Comparison with other Rust UI frameworks
+
 Dioxus primarily emphasizes **developer experience** and **familiarity with React principles**.
 
 - [Yew](https://github.com/yewstack/yew): prefers the elm pattern instead, no borrowed props, supports SSR (no hydration), no direct desktop/mobile support.
@@ -143,7 +143,6 @@ Dioxus primarily emphasizes **developer experience** and **familiarity with Reac
 - [Dominator](https://github.com/Pauan/rust-dominator): Signal-based zero-cost alternative, less emphasis on community and docs.
 - [Azul](https://azul.rs): Fully native HTML/CSS renderer for desktop applications, no support for web/ssr
 
-
 ## Parity with React & Roadmap
 
 Dioxus is heavily inspired by React, but we want your transition to feel like an upgrade. Dioxus is _most_ of the way there, but missing a few key features. These include:
@@ -174,7 +173,7 @@ Want to jump in and help build the future of Rust frontend? There's plenty of pl
 
 This project is licensed under the [MIT license].
 
-[MIT license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT
+[mit license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT
 
 ### Contribution
 

diff --git a/docs/.gitignore → docs/guide/.gitignore b/docs/.gitignore → docs/guide/.gitignore
diff --git a/docs/guide/book.toml b/docs/guide/book.toml
@@ -7,6 +7,11 @@ language = "en"
 [language.en]
 name = "English"
 
+[language.pt-br]
+name = "Português Brasileiro"
+title = "Documentação do Dioxus"
+description = "Introdução ao Dioxus, um framework portátil, de alto desempenho e ergonômico para criar interfaces de usuário multiplataforma em Rust."
+
 [rust]
 edition = "2018"
 

diff --git a/docs/guide/src/en/SUMMARY.md b/docs/guide/src/en/SUMMARY.md
@@ -33,11 +33,11 @@
   - [Desktop](publishing/desktop.md)
   - [Web](publishing/web.md)
 
------------
+---
 
 - [Custom Renderer](custom_renderer/index.md)
 
------------
+---
 
 [Roadmap](roadmap.md)
 [Contributing](contributing.md)
diff --git a/docs/guide/src/en/__unused/advanced-guides/rsx.md b/docs/guide/src/en/__unused/advanced-guides/rsx.md
@@ -0,0 +1,63 @@
+# VNodes with RSX, HTML, and NodeFactory
+
+Many modern frameworks provide a domain-specific-language for declaring user-interfaces. In the case of React, this language extension is called JSX and must be handled through additional dependencies and pre/post processors to transform your source code. With Rust, we can simply provide a procedural macro in the Dioxus dependency itself that mimics the JSX language.
+
+With Dioxus, we actually ship two different macros – a macro that mimics JSX (the `html!` macro) and a macro that mimics Rust's native nested-struct syntax (the `rsx!` macro). These macros simply transform their inputs into NodeFactory calls.
+
+For instance, this html! call:
+```rust
+html!(<div> "hello world" </div>)
+```
+becomes this NodeFactory call:
+```rust
+|f| f.element(
+    dioxus_elements::div, // tag
+    [], // listeners
+    [], // attributes
+    [f.static_text("hello world")], // children
+    None // key
+)
+```
+The NodeFactory API is fairly ergonomic, making it a viable option to use directly. The NodeFactory API is also compile-time correct and has incredible syntax highlighting support. We use what Rust calls a "unit type" – the `dioxus_elements::div` and associated methods to ensure that a `div` can only have attributes associated with `div`s. This lets us tack on relevant documentation, autocomplete support, and jump-to-definition for methods and attributes.
+
+![Compile time correct syntax](../images/compiletimecorrect.png)
+
+## html! macro
+
+The html! macro supports a limited subset of the html standard. Rust's macro parsing tools are somewhat limited, so all text between tags _must be quoted_.
+
+However, writing HTML by hand is a bit tedious – IDE tools for Rust don't support linting/autocomplete/syntax highlighting. We suggest using RSX – it's more natural for Rust programs and _does_ integrate well with Rust IDE tools.
+
+```rust
+let name = "jane";
+let pending = false;
+let count = 10;
+
+dioxus::ssr::render_lazy(html! {
+    <div>
+        <p> "Hello, {name}!" </p>
+        <p> "Status: {pending}!" </p>
+        <p> "Count {count}!" </p>
+    </div>
+});
+```
+
+## rsx! macro
+
+The rsx! macro is a VNode builder macro designed especially for Rust programs. Writing these should feel very natural, much like assembling a struct. VSCode also supports these with code folding, bracket-tabbing, bracket highlighting, section selecting, inline documentation, GOTO definition, and refactoring support.
+
+When helpful, the Dioxus VSCode extension provides a way of converting a selection of HTML directly to RSX, so you can import templates from the web directly into your existing app.
+
+It's also a bit easier on the eyes than HTML.
+
+```rust
+dioxus::ssr::render_lazy(rsx! {
+    div {
+        p {"Hello, {name}!"}
+        p {"Status: {pending}!"}
+        p {"Count {count}!"}
+    }
+});
+```
+
+In the next section, we'll cover the `rsx!` macro in more depth.