Fix some formatting issues

Bare-Bones/README.md

@@ -2,6 +2,14 @@
 
 Your new bare-bones project includes minimal organization with a single `main.rs` file and a few assets.
 
+```
+project/
+├─ assets/ # Any assets that are used by the app should be placed here
+├─ src/
+│  ├─ main.rs # main.rs is the entry point to your application and currently contains all components for the app
+├─ Cargo.toml # The Cargo.toml file defines the dependencies and feature flags for your project
+```
+
 {% if is_tailwind -%}
 ### Tailwind
 1. Install npm: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm

Bare-Bones/src/main.rs

@@ -60,9 +60,12 @@ fn App() -> Element {
         // The router component renders the route enum we defined above. It will handle synchronization of the URL and render
         // the layouts and components for the active route.
         Router::<Route> {}
-        {%- else -%} Hero {}
-        {%- endif %} {% if is_fullstack -%}
-        Echo {}{%- endif %}
+        {%- else -%}
+        Hero {}
+        {% if is_fullstack -%}
+        Echo {}
+        {%- endif %}
+        {%- endif %} 
     }
 }
 

Jumpstart/README.md

@@ -3,6 +3,22 @@
 Your new jumpstart project includes basic organization with an organized `assets` folder and a `components` folder. 
 If you chose to develop with the router feature, you will also have a `views` folder.
 
+```
+project/
+├─ assets/ # Any assets that are used by the app should be placed here
+├─ src/
+│  ├─ main.rs # The entrypoint for the app.{% if is_router %} It also defines the routes for the app.{% endif %}
+│  ├─ components/
+│  │  ├─ mod.rs # Defines the components module
+│  │  ├─ hero.rs # The Hero component for use in the home page{% if is_fullstack %}
+│  │  ├─ echo.rs # The echo component uses server functions to communicate with the server{%- endif %}{% if is_router %}
+│  ├─ views/ # The views each route will render in the app.
+│  │  ├─ mod.rs # Defines the module for the views route and re-exports the components for each route
+│  │  ├─ blog.rs # The component that will render at the /blog/:id route
+│  │  ├─ home.rs # The component that will render at the / route{% endif %}
+├─ Cargo.toml # The Cargo.toml file defines the dependencies and feature flags for your project
+```
+
 {% if is_tailwind -%}
 ### Tailwind
 1. Install npm: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm

Jumpstart/src/components/echo.rs

@@ -4,7 +4,7 @@ const ECHO_CSS: Asset = asset!("/assets/styling/echo.css");
 
 /// Echo component that demonstrates fullstack server functions.
 #[component]
-fn Echo() -> Element {
+pub fn Echo() -> Element {
     // use_signal is a hook. Hooks in dioxus must be run in a consistent order every time the component is rendered.
     // That means they can't be run inside other hooks, async blocks, if statements, or loops.
     // 
@@ -13,6 +13,8 @@ fn Echo() -> Element {
     let mut response = use_signal(|| String::new());
 
     rsx! {
+        document::Link { rel: "stylesheet", href: ECHO_CSS }
+
         div {
             id: "echo",
             h4 { "ServerFn Echo" }

Jumpstart/src/main.rs

@@ -3,11 +3,12 @@
 use dioxus::prelude::*;
 
 {% if is_fullstack -%}
+{% if is_router == false -%}
 use components::{Hero, Echo};
+{%- endif %}
 {%- else -%}
 use components::Hero;
 {%- endif %}
-{%- endif %}
 {% if is_router -%}
 use views::{Blog, Home, Navbar};
 {%- endif %}

Jumpstart/src/views/blog.rs

@@ -10,6 +10,8 @@ const BLOG_CSS: Asset = asset!("/assets/styling/blog.css");
 #[component]
 pub fn Blog(id: i32) -> Element {
     rsx! {
+        document::Link { rel: "stylesheet", href: BLOG_CSS }
+
         div {
             id: "blog",
 

Jumpstart/src/views/navbar.rs

@@ -9,8 +9,10 @@ const NAVBAR_CSS: Asset = asset!("/assets/styling/navbar.css");
 /// This layout component wraps the UI of [Route::Home] and [Route::Blog] in a common navbar. The contents of the Home and Blog
 /// routes will be rendered under the outlet inside this component
 #[component]
-fn Navbar() -> Element {
+pub fn Navbar() -> Element {
     rsx! {
+        document::Link { rel: "stylesheet", href: NAVBAR_CSS }
+
         div {
             id: "navbar",
             Link {

Workspace/README.md

@@ -10,9 +10,9 @@ your_project/
 ├─ desktop/
 │  ├─ ... # Desktop specific UI/logic
 ├─ mobile/
-│  ├─ ... # Mobile specific UI/logic{% if is_fullstack -%}
+│  ├─ ... # Mobile specific UI/logic{% if is_fullstack %}
 ├─ server/
-│  ├─ ... # All shared server logic{%- endif %}
+│  ├─ ... # All shared server logic{% endif %}
 ├─ ui/
 │  ├─ ... # Component shared between multiple platforms
 ```
@@ -25,11 +25,11 @@ Each platform crate contains the entry point for the platform, and any assets, c
 desktop/ # The desktop crate contains all platform specific UI, logic and dependencies for the desktop app
 ├─ assets/ # Assets used by the desktop app - Any platform specific assets should go in this folder
 ├─ src/
-│  ├─ main.rs # The entrypoint for the desktop app.{% if is_router -%} It also defines the routes for the desktop platform
+│  ├─ main.rs # The entrypoint for the desktop app.{% if is_router %} It also defines the routes for the desktop platform
 │  ├─ views/ # The views each route will render in the desktop version of the app
 │  │  ├─ mod.rs # Defines the module for the views route and re-exports the components for each route
 │  │  ├─ blog.rs # The component that will render at the /blog/:id route
-│  │  ├─ home.rs # The component that will render at the / route{%- endif %}
+│  │  ├─ home.rs # The component that will render at the / route{% endif %}
 ├─ Cargo.toml # The desktop crate's Cargo.toml - This should include all desktop specific dependencies
 ```
 
@@ -43,9 +43,9 @@ The workspace contains a `ui` crate with components that are shared between mult
 ui/
 ├─ src/
 │  ├─ lib.rs # The entrypoint for the ui crate
-│  ├─ hero.rs # The Hero component that will be used in every platform{%- if is_fullstack -%}
-│  ├─ echo.rs # The shared echo component that communicates with the server{%- endif %}{%- if is_router -%}
-│  ├─ navbar.rs # The Navbar component that will be used in the layout of every platform's router{%- endif %}
+│  ├─ hero.rs # The Hero component that will be used in every platform{% if is_fullstack %}
+│  ├─ echo.rs # The shared echo component that communicates with the server{%- endif %}{% if is_router %}
+│  ├─ navbar.rs # The Navbar component that will be used in the layout of every platform's router{% endif %}
 ```
 
 {% if is_fullstack -%}

Workspace/server/src/lib.rs

@@ -8,7 +8,7 @@ use dioxus::prelude::*;
 // When the server function is called from the client, it will just serialize the arguments, call the API, and deserialize the
 // response.
 #[server]
-async fn echo_server(input: String) -> Result<String, ServerFnError> {
+pub async fn echo_server(input: String) -> Result<String, ServerFnError> {
     // The body of server function like this comment are only included on the server. If you have any server-only logic like
     // database queries, you can put it here. Any imports for the server function should either be imported inside the function
     // or imported under a `#[cfg(feature = "server")]` block.

Workspace/ui/README.md

@@ -2,6 +2,15 @@
 
 This crate contains all shared components for the workspace. This is a great place to place any UI you would like to use in multiple platforms like a common `Button` or `Navbar` component.
 
+```
+ui/
+├─ src/
+│  ├─ lib.rs # The entrypoint for the ui crate
+│  ├─ hero.rs # The Hero component that will be used in every platform{% if is_fullstack %}
+│  ├─ echo.rs # The shared echo component that communicates with the server{% endif %}{% if is_router %}
+│  ├─ navbar.rs # The Navbar component that will be used in the layout of every platform's router{% endif %}
+```
+
 ## Dependencies
 
 Since this crate is shared between multiple platforms, it should not pull in any platform specific dependencies. For example, if you want to use the `web_sys` crate in the web build of your app, you should not add it to this crate. Instead, you should add platform specific dependencies to the [web](../web/Cargo.toml), [desktop](../desktop/Cargo.toml), or [mobile](../mobile/Cargo.toml) crates.

Workspace/ui/src/echo.rs

@@ -14,6 +14,7 @@ pub fn Echo() -> Element {
 
     rsx! {
         document::Link { rel: "stylesheet", href: ECHO_CSS }
+
         div {
             id: "echo",
             h4 { "ServerFn Echo" }
@@ -24,7 +25,7 @@ pub fn Echo() -> Element {
                 oninput:  move |event| async move {
                     // When we call the echo_server function from the client, it will fire a request to the server and return
                     // the response. It handles serialization and deserialization of the request and response for us.
-                    let data = server::echo(event.value()).await.unwrap();
+                    let data = server::echo_server(event.value()).await.unwrap();
 
                     // After we have the data from the server, we can set the state of the signal to the new value.
                     // Since we read the `response` signal later in this component, the component will rerun.