docs: getting stated guides

.vscode/spellright.dict

@@ -68,3 +68,4 @@ contentful
 Jank
 noderef
 reborrow
+VirtualDoms

docs/reference/src/desktop/index.md

@@ -1,5 +1,46 @@
 # Desktop
 
+One of Dioxus' killer features is the ability to quickly build a native desktop app that looks and feels the same across platforms. 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.
+
+Dioxus Desktop is built off Tauri. 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. The next major release of Dioxus-Desktop will include components and hooks for notifications, global shortcuts, menubar, etc.
+
+
+## Getting Set up
+
+Getting Set up with Dioxus-Desktop is quite easy. 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 `desktop` feature:
+
+```shell
+$ cargo add dioxus --features desktop
+```
+
+Edit your `main.rs`:
+
+```rust
+// main.rs
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::desktop::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    cx.render(rsx!{
+        div {
+            "hello world!"
+        }
+    })
+}
+```
+
+
+To configure the webview, menubar, and other important desktop-specific features, checkout out some of the launch configuration in the [API reference](https://docs.rs/dioxus-desktop/).
 
 ## Future Steps
 

docs/reference/src/mobile/index.md

@@ -1,4 +1,78 @@
-# Mobile
+# Getting started: mobile
+
+
+Dioxus is unique in that it actually supports mobile. However, support is very young and you might need to dip down into some of the primitives until better supported is ready.
+
+Currently, only iOS is supported through us, however you *can* add android support by following the same instructions below, but using the `android` guide in `cargo-mobile`.
+
+Also, Dioxus Desktop and Dioxus Mobile share the same codebase, and dioxus-mobile currently just re-exports dioxus-desktop.
+
+## Getting Set up
+
+Getting set up with mobile can but 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 moble 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
+// main.rs
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::mobile::launch(app);
+}
+
+fn app(cx: Scope) -> Element {
+    cx.render(rsx!{
+        div {
+            "hello world!"
+        }
+    })
+}
+```
+
+To configure the webview, menubar, and other important desktop-specific features, checkout out some of the launch configuration in the [API reference](https://docs.rs/dioxus-mobile/).
+
 ## Future Steps
 
 Make sure to read the [Dioxus Guide](https://dioxuslabs.com/guide) if you already haven't!

docs/reference/src/mobile/intro.md

@@ -1,4 +0,0 @@
-# Mobile
-## Future Steps
-
-Make sure to read the [Dioxus Guide](https://dioxuslabs.com/guide) if you already haven't!

docs/reference/src/ssr/index.md

@@ -1,4 +1,102 @@
-# SSR
+# Getting Stated: Server-Side-Rendering
+
+The Dioxus VirtualDom can be rendered to a string by traversing the Element Tree. This is implemented in the `ssr` crate where your Dioxus app can be directly rendered to HTML to be served by a web server.
+
+
+
+## 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 `desktop` 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 dioxus tokio --features full
+$ cargo add axum
+```
+
+Your dependencies should look roughly like this:
+
+```toml
+[dependencies]
+axum = "0.4.3"
+dioxus = { version = "*", features = ["ssr"] }
+tokio = { version = "1.15.0", features = ["full"] }
+```
+
+
+Now, setup 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)))
+        .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.
+
 ## Future Steps
 
 Make sure to read the [Dioxus Guide](https://dioxuslabs.com/guide) if you already haven't!

docs/reference/src/ssr/intro.md

@@ -1,4 +0,0 @@
-# SSR
-## Future Steps
-
-Make sure to read the [Dioxus Guide](https://dioxuslabs.com/guide) if you already haven't!

docs/reference/src/tui/index.md

@@ -1 +1,67 @@
 # TUI
+
+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.
+
+
+[TUI Support](https://github.com/DioxusLabs/rink/raw/master/examples/example.png)
+
+
+## Getting Set up
+
+
+To tinker with TUI support, start by making a new package and adding our TUI package from git.
+
+```shell
+$ cargo new --bin demo
+$ cd demo
+$ cargo add dioxus
+$ cargo add rink --git https://github.com/DioxusLabs/rink.git
+```
+
+
+
+Then, edit your `main.rs` with the basic template. 
+
+```rust
+//  main
+use dioxus::prelude::*;
+
+fn main() {
+    let mut dom = VirtualDom::new(app);
+    dom.rebuild();
+
+    rink::render_vdom(&mut dom).unwrap();
+}
+
+fn app(cx: Scope) -> Element {
+    cx.render(rsx! {
+        div {
+            width: "100%",
+            height: "10px",
+            background_color: "red",
+            justify_content: "center",
+            align_items: "center",
+
+            "Hello world!"
+        }
+    })
+}
+```
+
+To run our app:
+
+```shell
+$ cargo run
+```
+
+Press "q" to close the app (yes, this is hardcoded, we are working on handlers to expose this in your code.)
+
+## 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.
+
+## Future Steps
+
+Make sure to read the [Dioxus Guide](https://dioxuslabs.com/guide) if you already haven't!

docs/reference/src/tui/intro.md

@@ -1,4 +0,0 @@
-# TUI
-## Future Steps
-
-Make sure to read the [Dioxus Guide](https://dioxuslabs.com/guide) if you already haven't!

docs/reference/src/web/intro.md

@@ -1,109 +0,0 @@
-# Getting Started: Dioxus for Web
-
-[*"Pack your things, we're going on an adventure!"*](https://trunkrs.dev)
-
-Dioxus is well supported for the web through WebAssembly. 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.
-
-Building Dioxus apps for the web requires much less configuration than our JavaScript counterparts.
-
-## 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.
-
-Currently, trunk projects can only build the root binary (ie the `main.rs`). To build a new Dioxus compatible project, this should get you up and running.
-
-First, [install trunk](https://trunkrs.dev/#install):
-```shell
-$ cargo install trunk
-```
-
-Make sure the `wasm32-unknown-unknown` target is installed:
-```shell
-$ rustup target add wasm32-unknown-uknown
-```
-
-Create a new project:
-
-```shell
-$ cargo new --bin demo
-$ cd demo
-```
-
-Add Dioxus with the `web` features:
-
-```
-$ cargo add dioxus --features web
-```
-
-Add an `index.html` for Trunk to use. Make sure your "mount point" element has an ID of "main" (this can be configured later):
-
-```html
-<html>
-  <head>
-    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
-  </head>
-  <body>
-    <div id="main"> </div>
-  </body>
-</html>
-```
-
-Edit your `main.rs`:
-```rust
-// main.rs
-
-use dioxus::prelude::*;
-
-fn main() {
-    dioxus::web::launch(app);
-}
-
-fn app(cx: Scope) -> Element {
-    cx.render(rsx!{
-        div { "hello, wasm!" }
-    })
-}
-```
-
-
-And to serve our app:
-
-```shell
-trunk serve
-```
-
-To build our app and publish it to Github:
-
-- Make sure Github Pages is set up for your repo
-- Build your app with `trunk build --release`
-- Move your generated HTML/CSS/JS/Wasm from `dist` into the folder configured for Github Pages
-- Add and commit with git
-- Push to Github
-
-That's it!
-
-## Future Build Tool
-
-We are currently working on our own build tool called [Dioxus Studio](http://github.com/dioxusLabs/studio) which will support:
-- an interactive TUI
-- on-the-fly reconfiguration
-- hot CSS reloading
-- two-way data binding between browser and source code
-- an interpreter for `rsx!` 
-- ability to publish to github/netlify/vercel
-- bundling for iOS/Desktop/etc
-
-## Features
-
-Currently, the web supports:
-
-- Pre-rendering/Hydration
-
-## Events
-
-The regular events in the `html` crate work just fine in the web.
-
-
-## Future Steps
-
-Make sure to read the [Dioxus Guide](https://dioxuslabs.com/guide) if you already haven't!