Merge pull request #15 from togglebyte/dev

section on `with`

Author: togglebyte

src/SUMMARY.md

@@ -14,6 +14,7 @@
     - [Loops](./templates/loops.md)
     - [If / Else](./templates/if-else.md)
     - [Switch / Case](./templates/switch-case.md)
+    - [With](./templates/with.md)
     - [Functions](./templates/functions.md)
         - [Custom functions](./templates/functions/custom.md)
     - [Elements](./templates/elements.md)
@@ -35,3 +36,5 @@
         - [container](./templates/elements/container.md)
 - [Inputs and other components](./anathema-extras.md)
     - [Input](./anathema-extras/input.md)
+- [Recipes](./recipes.md)
+    - [Routing](./recipes/routing.md)

src/recipes.md

@@ -0,0 +1,18 @@
+# Recipes
+
+* Themeing
+* Async
+* [Routing](./recipes/routing.md)
+
+```rust,ignore
+#[derive(State)]
+struct MyState {
+    value: Value<bool>,
+}
+```
+
+```aml
+border
+    vstack
+        text "Hello world"
+```

src/recipes/routing.md

@@ -0,0 +1,20 @@
+# Routing
+
+Routing can be done with a combination of state and `switch`.
+
+TODO
+THIS IS UNFINISHED
+
+```rust,ignore
+struct Router;
+
+impl Component for Router {
+    State = String;
+    Message = String;
+}
+```
+
+```aml
+text "hello"
+    span "sausage"
+```

src/templates/with.md

@@ -0,0 +1,22 @@
+# With
+
+A `with` makes it possible to scope an expression for nodes
+
+## Example
+
+```
+let THEME = [
+    { fg: "red", bool: true },
+    { fg: "green", bool: false },
+    { fg: "blue", bool: true },
+];
+
+
+border
+    with theme as colors[state.some_count % 2 == 0]
+        // Refering to `theme` instead of repeating `colors[state.some_count % 2 == 0]`
+        
+        text [foreground: theme.fg] "hello "
+            span [bold: theme.bold] "world"
+
+```