progressing

versioned_docs/version-0.0.7/index.md

@@ -0,0 +1,48 @@
+---
+title: Introduction
+slug: /
+---
+
+On a cargo project run
+```bash
+cargo add osui
+```
+
+## Simple app
+```rust title='src/main.rs'
+use osui::prelude::*;
+
+fn main() {
+    launch!(app());
+}
+
+fn app() -> Element {
+    rsx! {
+        text { "Hello, World!" }
+    }
+}
+```
+
+## A slightly more advanced app (counter)
+```rust title='src/main.rs'
+use osui::prelude::*;
+
+fn main() {
+    launch!(app());
+}
+
+fn app() -> Element {
+    rsx! {
+        // Create a button with a on_click handler
+        button { on_click: Handler::new(move |btn: &mut Button, _, document| {
+            if let Some(count) = document.get_element_by_id::<DataHolder<u32>>("count") {
+                count.data += 1;
+                btn.children.set_text(&count.data.to_string());
+            }
+        }), "0" }
+
+        // Store the data (in this case count)
+        data_holder as u32 { id: "count" }
+    }
+}
+```

versioned_docs/version-0.0.7/references/rsx.md

@@ -0,0 +1,82 @@
+---
+title: RSX
+---
+
+This macro is the recommended way to describe a ui, it is a div that holds multiple elements
+```rust
+fn app() -> Element {
+    rsx! {
+        button { "click me" }
+        text { "This is some text" }
+    }
+}
+```
+
+> :::info `rsx!` is really just a div, so you can just do something like
+> ```rust
+> rsx! {
+>     id: "root", class: "root",
+>
+>     button { "click me" }
+>     text { "This is some text" }
+> }
+> ```
+
+## Child values
+If you want to add more children to values then just simply express it like a `rsx!`
+```rust
+fn app() -> Element {
+    let x = 69;
+    rsx! {
+        div {
+            text { "the number is {x}, Nice!" }
+        }
+    }
+}
+```
+
+## Formatted text
+```rust
+fn app() -> Element {
+    let x = 69;
+    rsx! {
+        text { "the number is {x}, Nice!" }
+    }
+}
+```
+> :::info You can also do expressions after the string
+```rust
+text { "the number is {}, Nice!", x }
+```
+
+## For loops
+```rust
+fn app() -> Element {
+    rsx! {
+        for (i in 0..5) { // () are required
+            text { "{i}" }
+        }
+    }
+}
+```
+
+## Attribute
+You can change the element's struct fields by just providing some attributes before the children
+```rust
+fn app() -> Element {
+    rsx! {
+        text { class: "my_text" }
+    }
+}
+```
+
+## Type assignment
+In special elements like `data_holder` You can specify what `type` the element holds. It would act like `my_fn::<Type>()`
+```rust
+fn app() -> Element {
+    rsx! {
+        // assign the type u32
+        data_holder as u32 { id: "count" }
+    }
+}
+```