project setup

src/views/blog.rs

@@ -0,0 +1,39 @@
+use crate::Route;
+use dioxus::prelude::*;
+
+const BLOG_CSS: Asset = asset!("/assets/styling/blog.css");
+
+/// The Blog page component that will be rendered when the current route is `[Route::Blog]`
+///
+/// The component takes a `id` prop of type `i32` from the route enum. Whenever the id changes, the component function will be
+/// re-run and the rendered HTML will be updated.
+#[component]
+pub fn Blog(id: i32) -> Element {
+	rsx! {
+		document::Link { rel: "stylesheet", href: BLOG_CSS }
+
+		div {
+			id: "blog",
+
+			// Content
+			h1 { "This is blog #{id}!" }
+			p { "In blog #{id}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components." }
+
+			// Navigation links
+			// The `Link` component lets us link to other routes inside our app. It takes a `to` prop of type `Route` and
+			// any number of child nodes.
+			Link {
+				// The `to` prop is the route that the link should navigate to. We can use the `Route` enum to link to the
+				// blog page with the id of -1. Since we are using an enum instead of a string, all of the routes will be checked
+				// at compile time to make sure they are valid.
+				to: Route::Blog { id: id - 1 },
+				"Previous"
+			}
+			span { " <---> " }
+			Link {
+				to: Route::Blog { id: id + 1 },
+				"Next"
+			}
+		}
+	}
+}

src/views/home.rs

@@ -0,0 +1,11 @@
+use crate::components::Hero;
+use dioxus::prelude::*;
+
+/// The Home page component that will be rendered when the current route is `[Route::Home]`
+#[component]
+pub fn Home() -> Element {
+	rsx! {
+		Hero {}
+
+	}
+}

src/views/mod.rs

@@ -0,0 +1,18 @@
+//! The views module contains the components for all Layouts and Routes for our app. Each layout and route in our [`Route`]
+//! enum will render one of these components.
+//!
+//!
+//! The [`Home`] and [`Blog`] components will be rendered when the current route is [`Route::Home`] or [`Route::Blog`] respectively.
+//!
+//!
+//! The [`Navbar`] component will be rendered on all pages of our app since every page is under the layout. The layout defines
+//! a common wrapper around all child routes.
+
+mod home;
+pub use home::Home;
+
+mod blog;
+pub use blog::Blog;
+
+mod navbar;
+pub use navbar::Navbar;

src/views/navbar.rs

@@ -0,0 +1,32 @@
+use crate::Route;
+use dioxus::prelude::*;
+
+const NAVBAR_CSS: Asset = asset!("/assets/styling/navbar.css");
+
+/// The Navbar component that will be rendered on all pages of our app since every page is under the layout.
+///
+///
+/// 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]
+pub fn Navbar() -> Element {
+	rsx! {
+		document::Link { rel: "stylesheet", href: NAVBAR_CSS }
+
+		div {
+			id: "navbar",
+			Link {
+				to: Route::Home {},
+				"Home"
+			}
+			Link {
+				to: Route::Blog { id: 1 },
+				"Blog"
+			}
+		}
+
+		// The `Outlet` component is used to render the next component inside the layout. In this case, it will render either
+		// the [`Home`] or [`Blog`] component depending on the current route.
+		Outlet::<Route> {}
+	}
+}