From 3c0998125e35d950ea02b1e28f414d84853e32da Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Sat, 21 Sep 2024 16:47:53 +0200
Subject: [PATCH] more docs

---
 book/src/learn/animation.md           |  6 +++++-
 book/src/learn/async.md               |  3 +--
 book/src/learn/built_in_components.md |  4 ++--
 book/src/learn/router.md              | 18 +++++++++---------
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/book/src/learn/animation.md b/book/src/learn/animation.md
index 7062f966a..f41770809 100644
--- a/book/src/learn/animation.md
+++ b/book/src/learn/animation.md
@@ -57,4 +57,8 @@ fn app() -> Element {
         background: "{color.read().as_string()}",
     })
 }
-```
\ No newline at end of file
+```
+
+### Other examples
+
+- [animation.rs](https://github.com/marc2332/freya/blob/main/examples/animation.rs)
diff --git a/book/src/learn/async.md b/book/src/learn/async.md
index 03c5d71df..72e4e3001 100644
--- a/book/src/learn/async.md
+++ b/book/src/learn/async.md
@@ -2,11 +2,10 @@
 
 You may run asynchronous code through the different APIs Dioxus provide. You can use other libraries such as tokio to spawn tasks but it's not always the recommended approach as these will not work with the lifecycling of the components.
 
-You can use these different APIs:
 
 ### `spawn`
 
-Simple function to spawn an async task, this is primarily targeted for custom hooks or when you wanted to run some async code dinamically from an event listener.
+Simple function to spawn an **async task**, this is primarily targeted for custom hooks or when you wanted to run some async code dinamically from an event listener.
 
 Important to know: Tasks spawned with `spawn` will be cancelled when the component their were created is dropped. If you want to have an async tasks not attached to the component you may use `spawn_forever`.
 
diff --git a/book/src/learn/built_in_components.md b/book/src/learn/built_in_components.md
index 161c6de81..7ef89e19f 100644
--- a/book/src/learn/built_in_components.md
+++ b/book/src/learn/built_in_components.md
@@ -1,8 +1,8 @@
 # Built-in Components
 
-Freya comes with a set of styled and functional components you may use to develop faster. Some examples as `Button`, `Switch`, `Scrollview`, etc.
+Freya comes with a set of styled and functional components you may use to develop faster. Some examples are `Button`, `Switch`, `Scrollview`, etc.
 
-You can find more about them in [their docs](https://docs.rs/freya-components). 
+You can find more about them in the [API Reference](https://docs.rs/freya-components). 
 
 Example:
 ```rs
diff --git a/book/src/learn/router.md b/book/src/learn/router.md
index bf2e417c6..86bb6f92c 100644
--- a/book/src/learn/router.md
+++ b/book/src/learn/router.md
@@ -5,14 +5,15 @@ Freya supports the official [Dioxus Router](https://docs.rs/dioxus-router/latest
 Example:
 ```rs
 fn app() -> Element {
+    /// We place the router renderer in the root component
     rsx!(Router::<Route> {})
 }
 
-/// Declare your Routes tree in an enum
-/// Every route must have a component with the same name
-/// So for example, `Home` needs to have a `fn Home(...` component
-/// the `Routable` macro will pick it up automatically 
-/// so it must be in the scope.
+// Declare your Routes tree as an enum
+// Every route must have a component with the same name
+// So for example, `Home` needs to have a `fn Home(...` component
+// the `Routable` macro will pick it up automatically 
+// so it must be in the scope.
 #[derive(Routable, Clone, PartialEq)]
 #[rustfmt::skip]
 pub enum Route {
@@ -26,7 +27,9 @@ pub enum Route {
     PageNotFound { }, // Handle 404 routes.
 }
 
-#[allow(non_snake_case)]
+// This component is used as container for the router (as it was marked with `#[layout(AppSidebar)]`), which means
+// That we can render something here that will be rendered no matter what route you are in
+// Useful for navigation bars.
 fn AppSidebar() -> Element {
     rsx!(
         Body {
@@ -55,7 +58,6 @@ fn AppSidebar() -> Element {
     )
 }
 
-#[allow(non_snake_case)]
 #[component]
 fn Home() -> Element {
     rsx!(
@@ -65,7 +67,6 @@ fn Home() -> Element {
     )
 }
 
-#[allow(non_snake_case)]
 #[component]
 fn Other() -> Element {
     rsx!(
@@ -75,7 +76,6 @@ fn Other() -> Element {
     )
 }
 
-#[allow(non_snake_case)]
 #[component]
 fn PageNotFound() -> Element {
     rsx!(