Feat: some docs

docs/posts/01-hello-world.md

@@ -9,8 +9,8 @@ struct MyProps {
 }
 
 fn Example(ctx: Context<MyProps>) -> VNode {
-    ctx.render(html! { 
-        <div> "Hello {ctx.props().name}!" </div> 
+    ctx.render(html! {
+        <div> "Hello {ctx.name}!" </div>
     })
 }
 ```

docs/posts/02-utilites.md

@@ -35,7 +35,7 @@ struct ExampleProps {
 fn Example(ctx: &mut Context<ExampleProps>) -> VNode {
     let ExampleProps {
         name, pending, count
-    } = ctx.props();
+    } = ctx.props;
 
     rsx! {
         <div>

docs/posts/03-vnode-macros.md

@@ -4,10 +4,12 @@ Dioxus comes preloaded with two macros for creating VNodes.
 
 ## html! macro
 
-The html! macro supports the html standard. This macro will happily accept a copy-paste from something like tailwind builder. Writing this one by hand is a bit tedious and doesn't come with much help from Rust IDE tools.
+The html! macro supports a limited subset of the html standard. This macro will happily accept a copy-paste from something like tailwind builder. However, writing HTML by hand is a bit tedious - IDE tools for Rust don't support linting/autocomplete/syntax highlighting. RSX is much more natural for Rust programs and _does_ integrate well with Rust IDE tools.
 
 There is also limited support for dynamic handlers, but it will function similarly to JSX.
 
+You'll want to write RSX where you can, and in a future release we'll have a tool that automatically converts HTML to RSX.
+
 ```rust
 #[fc]
 fn Example(ctx: Context, name: &str, pending: bool, count: i32 ) -> VNode {
@@ -23,9 +25,9 @@ fn Example(ctx: Context, name: &str, pending: bool, count: i32 ) -> VNode {
 
 ## rsx! macro
 
-The rsx! macro is a VNode builder macro designed especially for Rust. Writing these should feel very natural, much like assembling a struct. VSCode also supports these with code folding, bracket-tabbing, bracket highlighting, and section selecting.
+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, and section selecting.
 
-The Dioxus VSCode extension provides a function to convert a selection of html! template and turn it into rsx!, so you'll never need to transcribe templates by hand.
+The Dioxus VSCode extension will eventually provide a macro to convert a selection of html! template and turn it into rsx!, so you'll never need to transcribe templates by hand.
 
 It's also a bit easier on the eyes 🙂.
 
@@ -51,30 +53,55 @@ Each element takes a comma-separated list of expressions to build the node. Roug
 - `CustomTag {}` adds a new child component
 - `{expr}` pastes the `expr` tokens literally. They must be IntoCtx<Vnode> to work properly
 
-Lists must include commas, much like how struct definitions work.
+Commas are entirely optional, but might be useful to delineate between elements and attributes.
+
+The `render` function provides an **extremely efficient** allocator for VNodes and text, so try not to use the `format!` macro in your components. Rust's default `ToString` methods pass through the global allocator, but all text in components is allocated inside a manually-managed Bump arena.
 
 ```rust
 static Example: FC<()> = |ctx| {
 
+    let text = "example";
+
     ctx.render(rsx!{
         div {
             h1 { "Example" },
+
+            // fstring interpolation
+            "{text}"
+
             p {
-                // Props
+                // Attributes
                 tag: "type",
+
+                // Anything that implements display can be an attribute
                 abc: 123,
                 enabled: true,
-                class: "big small wide short",
+
+                // attributes also supports interpolation
+                // `class` is not a restricted keyword unlike JS and ClassName
+                class: "big small wide short {text}",
+
+                // bool-based classnames
+                classes: [("big", true), ("small", false)]
+
+                // Bool-based props
+                // *must* be in the tuple form, cannot enter as a variable
+                tag: ("type", false)
+
+                tag: {"these tokens are placed directly"}
 
                 // Children
                 a { "abcder" },
 
-                // Children with props
-                h2 { "whatsup", class: "abc-123" },
+                // Children with attributes
+                h2 { "hello", class: "abc-123" },
 
                 // Child components
                 CustomComponent { a: 123, b: 456, key: "1" },
 
+                // Child components with paths
+                crate::components::CustomComponent { a: 123, b: 456, key: "1" },
+
                 // Iterators
                 { 0..3.map(|i| rsx!{ h1 {"{:i}"} }) },
 
@@ -82,7 +109,34 @@ static Example: FC<()> = |ctx| {
                 { rsx! { div { } } },
                 { html! { <div> </div> } },
 
-                // Any expression that is Into<VNode>
+                // Matching
+                // Requires rendering the nodes first.
+                // rsx! is lazy, and the underlying closures cannot have the same type
+                // Rendering produces the VNode type
+                {match rand::gen_range::<i32>(1..3) {
+                    1 => rsx!(in ctx, h1 { "big" })
+                    2 => rsx!(in ctx, h2 { "medium" })
+                    _ => rsx!(in ctx, h3 { "small" })
+                }}
+
+                // Optionals
+                {true.and_then(|f| rsx!{ h1 {"Conditional Rendering"} })}
+
+                // Bool options
+                {(rsx!{ h1 {"Conditional Rendering"}, true)}
+
+                // Child nodes
+                // Returns &[VNode]
+                {ctx.children()}
+
+                // Duplicating nodes
+                // Clones the nodes by reference, so they are literally identical
+                {{
+                    let node = rsx!(in ctx, h1{ "TopNode" });
+                    (0..10).map(|_| node.clone())
+                }}
+
+                // Any expression that is `IntoVNode`
                 {expr}
             }
         }

docs/website/homepage/ex1.md

@@ -0,0 +1,56 @@
+# A Simple Component
+
+```rust
+#[derive(PartialEq, Properties)]
+struct Props { name: &'static str }
+
+static HelloMessage: FC<Props> = |ctx| {
+    ctx.render(rsx!{
+        div { "Hello {ctx.props.name}" }
+    })
+}
+```
+
+# Any syntax you like
+
+Choose from a close-to-html syntax or the standard rsx! syntax
+
+```rust
+static HelloMessage: FC<()> = |ctx| {
+    ctx.render(html!{
+        <div> Hello World! </div>
+    })
+}
+```
+
+# A Stateful Component
+
+Store state with hooks!
+
+```rust
+enum LightState {
+    Green
+    Yellow,
+    Red,
+}
+static HelloMessage: FC<()> = |ctx| {
+    let (color, set_color) = use_state(ctx, || LightState::Green);
+
+    let title = match color {
+        Green => "Green means go",
+        Yellow => "Yellow means slow down",
+        Red => "Red means stop",
+    };
+
+    ctx.render(rsx!{
+        h1 {"{title}"}
+        button { "tick"
+            onclick: move |_| set_color(match color {
+                Green => Yellow,
+                Yellow => Red,
+                Red => Green,
+            })
+        }
+    })
+}
+```