Internationalization: move guide to en folder and preserve its history. (#494)

* chore: move guide to en folder

* docs: add english as language

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

@@ -0,0 +1,45 @@
+# Desktop Application
+
+Build a standalone native desktop app that looks and feels the same across operating systems.
+
+Apps built with Dioxus are typically <5mb in size and use existing system resources, so they won't hog extreme amounts of RAM or memory.
+
+Examples:
+- [File explorer](https://github.com/DioxusLabs/example-projects/blob/master/file-explorer)
+- [WiFi scanner](https://github.com/DioxusLabs/example-projects/blob/master/wifi-scanner)
+
+[![File ExplorerExample](https://raw.githubusercontent.com/DioxusLabs/example-projects/master/file-explorer/image.png)](https://github.com/DioxusLabs/example-projects/tree/master/file-explorer)
+
+## Support
+
+The desktop is a powerful target for Dioxus, but is currently limited in capability when compared to the Web platform. Currently, desktop apps are rendered with the platform's WebView library, but your Rust code is running natively on a native thread. This means that browser APIs are *not* available, so rendering WebGL, Canvas, etc is not as easy as the Web. However, native system APIs *are* accessible, so streaming, WebSockets, filesystem, etc are all viable APIs. In the future, we plan to move to a custom webrenderer-based DOM renderer with WGPU integrations.
+
+Dioxus Desktop is built off [Tauri](https://tauri.app/). Right now there aren't any Dioxus abstractions over keyboard shortcuts, menubar, handling, etc, so you'll want to leverage Tauri – mostly [Wry](http://github.com/tauri-apps/wry/) and [Tao](http://github.com/tauri-apps/tao)) directly.
+
+## Creating a Project
+
+Create a new crate:
+
+```shell
+cargo new --bin demo
+cd demo
+```
+
+Add Dioxus with the `desktop` feature (this will edit `Cargo.toml`):
+
+```shell
+cargo add dioxus --features desktop
+```
+
+> If your system does not provide the `libappindicator3` library, like Debian/bullseye, you can enable the replacement `ayatana` with an additional flag:
+>
+>```shell
+># On Debian/bullseye use:
+>cargo add dioxus --features desktop --features ayatana
+>```
+
+Edit your `main.rs`:
+
+```rust
+{{#include ../../examples/hello_world_desktop.rs:all}}
+```

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

@@ -0,0 +1,25 @@
+# Setting Up Hot Reload
+
+1. Hot reloading allows much faster iteration times inside of rsx calls by interperting them and streaming the edits.
+2. It is useful when changing the styling/layout of a program, but will not help with changing the logic of a program.
+3. Currently the cli only implements hot reloading for the web renderer.
+
+# Setup
+Install [dioxus-cli](https://github.com/DioxusLabs/cli).
+Enable the hot-reload feature on dioxus:
+```toml
+dioxus = { version = "*", features = ["web", "hot-reload"] }
+```
+
+# Usage
+1. run:
+```
+dioxus serve --hot-reload
+```
+2. change some code within a rsx macro
+3. open your localhost in a browser
+4. save and watch the style change without recompiling
+
+# Limitations
+1. The interperter can only use expressions that existed on the last full recompile. If you introduce a new variable or expression to the rsx call, it will trigger a full recompile to capture the expression.
+2. Components and Iterators can contain abritary rust code, and will trigger a full recompile when changed.

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

@@ -0,0 +1,74 @@
+# Getting Started
+
+This section will help you set up your Dioxus project!
+
+## Prerequisites
+
+### An Editor
+
+Dioxus integrates very well with the [Rust-Analyzer LSP plugin](https://rust-analyzer.github.io) which will provide appropriate syntax highlighting, code navigation, folding, and more.
+
+### Rust
+
+Head over to [https://rust-lang.org](http://rust-lang.org) and install the Rust compiler.
+
+We strongly recommend going through the [official Rust book](https://doc.rust-lang.org/book/ch01-00-getting-started.html) _completely_. However, our hope is that a Dioxus app can serve as a great first Rust project. With Dioxus, you'll learn about:
+
+- Error handling
+- Structs, Functions, Enums
+- Closures
+- Macros
+
+We've put a lot of care into making Dioxus syntax familiar and easy to understand, so you won't need deep knowledge on async, lifetimes, or smart pointers until you really start building complex Dioxus apps.
+
+### Platform-Specific Dependencies
+
+#### Windows
+
+Windows Desktop apps depend on WebView2 – a library which should be installed in all modern Windows distributions. If you have Edge installed, then Dioxus will work fine. If you *don't* have Webview2, [then you can install it through Microsoft](https://developer.microsoft.com/en-us/microsoft-edge/webview2/). MS provides 3 options:
+
+1. A tiny "evergreen" *bootstrapper* which will fetch an installer from Microsoft's CDN
+2. A tiny *installer* which will fetch Webview2 from Microsoft's CDN
+3. A statically linked version of Webview2 in your final binary for offline users
+
+For development purposes, use Option 1.
+
+#### Linux
+
+Webview Linux apps require WebkitGtk. When distributing, this can be part of your dependency tree in your `.rpm` or `.deb`. However, it's very likely that your users will already have WebkitGtk.
+
+```bash
+sudo apt install libwebkit2gtk-4.0-dev libgtk-3-dev libappindicator3-dev
+```
+
+When using Debian/bullseye `libappindicator3-dev` is no longer available but replaced by `libayatana-appindicator3-dev`.
+
+```bash
+# on Debian/bullseye use:
+sudo apt install libwebkit2gtk-4.0-dev libgtk-3-dev libayatana-appindicator3-dev
+```
+
+If you run into issues, make sure you have all the basics installed, as outlined in the [Tauri docs](https://tauri.studio/v1/guides/getting-started/prerequisites#setting-up-linux).
+
+
+#### MacOS
+
+Currently – everything for macOS is built right in! However, you might run into an issue if you're using nightly Rust due to some permissions issues in our Tao dependency (which have been resolved but not published).
+
+### Suggested Cargo Extensions
+
+If you want to keep your traditional `npm install XXX` workflow for adding packages, you might want to install `cargo-edit` and a few other fun `cargo` extensions:
+
+- [cargo-expand](https://github.com/dtolnay/cargo-expand) for expanding macro calls
+- [cargo tree](https://doc.rust-lang.org/cargo/commands/cargo-tree.html) – an integrated cargo command that lets you inspect your dependency tree
+
+
+## Setup Guides
+
+Dioxus supports multiple platforms. Depending on what you want, the setup is a bit different.
+
+- [Web](web.md): running in the browser using WASM
+- [Server Side Rendering](ssr.md): render Dioxus HTML as text
+- [Desktop](desktop.md): a standalone app using webview
+- [Mobile](mobile.md)
+- [Terminal UI](tui.md): terminal text-based graphic interface

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

@@ -0,0 +1,74 @@
+# Mobile App
+
+Build a mobile app with Dioxus!
+
+Example: [Todo App](https://github.com/DioxusLabs/example-projects/blob/master/ios_demo)
+
+## Support
+Mobile is currently the least-supported renderer target for Dioxus. Mobile apps are rendered with the platform's WebView, meaning that animations, transparency, and native widgets are not currently achievable.
+
+In addition, iOS is the only supported Mobile Platform. It is possible to get Dioxus running on Android and rendered with WebView, but the Rust windowing library that Dioxus uses – tao – does not currently support Android.
+
+Mobile support is currently best suited for CRUD-style apps, ideally for internal teams who need to develop quickly but don't care much about animations or native widgets.
+
+## Getting Set up
+
+Getting set up with mobile can be quite challenging. The tooling here isn't great (yet) and might take some hacking around to get things working. macOS M1 is broadly unexplored and might not work for you.
+
+We're going to be using `cargo-mobile` to build for mobile. First, install it:
+
+```shell
+cargo install --git https://github.com/BrainiumLLC/cargo-mobile
+```
+
+And then initialize your app for the right platform. Use the `winit` template for now. Right now, there's no "Dioxus" template in cargo-mobile.
+
+```shell
+cargo mobile init 
+```
+
+We're going to completely clear out the `dependencies` it generates for us, swapping out `winit` with `dioxus-mobile`.
+
+```toml
+
+[package]
+name = "dioxus-ios-demo"
+version = "0.1.0"
+authors = ["Jonathan Kelley <jkelleyrtp@gmail.com>"]
+edition = "2018"
+
+
+# leave the `lib` declaration
+[lib]
+crate-type = ["staticlib", "cdylib", "rlib"]
+
+
+# leave the binary it generates for us
+[[bin]]
+name = "dioxus-ios-demo-desktop"
+path = "gen/bin/desktop.rs"
+
+# clear all the dependencies
+[dependencies]
+mobile-entry-point = "0.1.0"
+dioxus = { version = "*", features = ["mobile"] }
+simple_logger = "*"
+```
+
+Edit your `lib.rs`:
+
+```rust
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::mobile::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    cx.render(rsx!{
+        div {
+            "hello world!"
+        }
+    })
+}
+```

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

@@ -0,0 +1,109 @@
+# Server-Side Rendering
+
+The Dioxus VirtualDom can be rendered server-side.
+
+[Example: Dioxus DocSite](https://github.com/dioxusLabs/docsite)
+
+## Multithreaded Support
+
+The Dioxus VirtualDom, sadly, is not currently `Send`. Internally, we use quite a bit of interior mutability which is not thread-safe. This means you can't easily use Dioxus with most web frameworks like Tide, Rocket, Axum, etc.
+
+To solve this, you'll want to spawn a VirtualDom on its own thread and communicate with it via channels.
+
+When working with web frameworks that require `Send`, it is possible to render a VirtualDom immediately to a String – but you cannot hold the VirtualDom across an await point. For retained-state SSR (essentially LiveView), you'll need to create a pool of VirtualDoms.
+
+
+## Setup
+
+If you just want to render `rsx!` or a VirtualDom to HTML, check out the API docs. It's pretty simple:
+
+```rust
+// We can render VirtualDoms
+let mut vdom = VirtualDom::new(app);
+let _ = vdom.rebuild();
+println!("{}", dioxus::ssr::render_vdom(&vdom));
+
+// Or we can render rsx! calls directly
+println!( "{}", dioxus::ssr::render_lazy(rsx! { h1 { "Hello, world!" } } );
+```
+
+However, for this guide, we're going to show how to use Dioxus SSR with `Axum`.
+
+Make sure you have Rust and Cargo installed, and then create a new project:
+
+```shell
+cargo new --bin demo
+cd app
+```
+
+Add Dioxus with the `ssr` feature:
+
+```shell
+cargo add dioxus --features ssr
+```
+
+Next, add all the Axum dependencies. This will be different if you're using a different Web Framework
+
+```
+cargo add tokio --features full
+cargo add axum
+```
+
+Your dependencies should look roughly like this:
+
+```toml
+[dependencies]
+axum = "0.4.5"
+dioxus = { version = "*", features = ["ssr"] }
+tokio = { version = "1.15.0", features = ["full"] }
+```
+
+Now, set up your Axum app to respond on an endpoint.
+
+```rust
+use axum::{response::Html, routing::get, Router};
+use dioxus::prelude::*;
+
+#[tokio::main]
+async fn main() {
+    let addr = std::net::SocketAddr::from(([127, 0, 0, 1], 3000));
+    println!("listening on http://{}", addr);
+
+    axum::Server::bind(&addr)
+        .serve(
+            Router::new()
+                .route("/", get(app_endpoint))
+                .into_make_service(),
+        )
+        .await
+        .unwrap();
+}
+```
+
+And then add our endpoint. We can either render `rsx!` directly:
+
+```rust
+async fn app_endpoint() -> Html<String> {
+    Html(dioxus::ssr::render_lazy(rsx! {
+            h1 { "hello world!" }
+    }))
+}
+```
+
+Or we can render VirtualDoms.
+
+```rust
+async fn app_endpoint() -> Html<String> {
+    fn app(cx: Scope) -> Element {
+        cx.render(rsx!(h1 { "hello world" }))
+    }
+    let mut app = VirtualDom::new(app);
+    let _ = app.rebuild();
+
+    Html(dioxus::ssr::render_vdom(&app))
+}
+```
+
+And that's it!
+
+> You might notice that you cannot hold the VirtualDom across an await point. Dioxus is currently not ThreadSafe, so it _must_ remain on the thread it started. We are working on loosening this requirement.

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

@@ -0,0 +1,46 @@
+# Terminal UI
+
+You can build a text-based interface that will run in the terminal using Dioxus.
+
+![Hello World screenshot](https://github.com/DioxusLabs/rink/raw/master/examples/example.png)
+
+> Note: this book was written with HTML-based platforms in mind. You might be able to follow along with TUI, but you'll have to adapt a bit.
+
+## Support
+
+TUI support is currently quite experimental. Even the project name will change. But, if you're willing to venture into the realm of the unknown, this guide will get you started.
+
+## Getting Set up
+
+
+Start by making a new package and adding our TUI feature.
+
+```shell
+cargo new --bin demo
+cd demo
+cargo add dioxus --features tui
+```
+
+Then, edit your `main.rs` with the basic template. 
+
+```rust
+{{#include ../../examples/hello_world_tui.rs}}
+```
+
+To run our app:
+
+```shell
+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}}
+```
+
+## Notes
+
+- Our TUI package uses flexbox for layout
+- 1px is one character lineheight. Your regular CSS px does not translate.
+- If your app panics, your terminal is wrecked. This will be fixed eventually.

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

@@ -0,0 +1,72 @@
+# Web
+
+Build single-page applications that run in the browser with Dioxus. To run on the Web, your app must be compiled to WebAssembly and depend on the `dioxus` crate with the `web` feature enabled.
+
+A build of Dioxus for the web will be roughly equivalent to the size of a React build (70kb vs 65kb), but will load significantly faster due to [WebAssembly's StreamingCompile](https://hacks.mozilla.org/2018/01/making-webassembly-even-faster-firefoxs-new-streaming-and-tiering-compiler/) option.
+
+Examples:
+- [TodoMVC](https://github.com/DioxusLabs/example-projects/tree/master/todomvc)
+- [ECommerce](https://github.com/DioxusLabs/example-projects/tree/master/ecommerce-site)
+
+[![TodoMVC example](https://github.com/DioxusLabs/example-projects/raw/master/todomvc/example.png)](https://github.com/DioxusLabs/example-projects/blob/master/todomvc)
+
+> Note: Because of the limitations of Wasm, not every crate will work with your web apps, so you'll need to make sure that your crates work without native system calls (timers, IO, etc).
+
+## Support
+
+The Web is the best-supported target platform for Dioxus.
+
+## Tooling
+
+To develop your Dioxus app for the web, you'll need a tool to build and serve your assets. We recommend using [trunk](https://trunkrs.dev) which includes a build system, Wasm optimization, a dev server, and support for SASS/CSS:
+
+```shell
+cargo install trunk
+```
+
+Make sure the `wasm32-unknown-unknown` target is installed:
+```shell
+rustup target add wasm32-unknown-unknown
+```
+
+## Creating a Project
+
+Create a new crate:
+
+```shell
+cargo new --bin demo
+cd demo
+```
+
+Add Dioxus as a dependency with the `web` feature:
+
+```bash
+cargo add dioxus --features web
+```
+
+Add an `index.html` for Trunk to use. Make sure your "mount point" element has an ID of "main":
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  </head>
+  <body>
+    <div id="main"> </div>
+  </body>
+</html>
+```
+
+Edit your `main.rs`:
+```rust
+{{#include ../../examples/hello_world_web.rs}}
+```
+
+
+And to serve our app:
+
+```bash
+trunk serve
+```