Index: assets/header.svg
===================================================================
--- assets/header.svg (revision 9773690e4b95641a35de679eaca95858ed9cc474)
+++ assets/header.svg (revision 9773690e4b95641a35de679eaca95858ed9cc474)
@@ -0,0 +1,20 @@
+
Index: assets/styling/blog.css
===================================================================
--- assets/styling/blog.css (revision 9773690e4b95641a35de679eaca95858ed9cc474)
+++ assets/styling/blog.css (revision 9773690e4b95641a35de679eaca95858ed9cc474)
@@ -0,0 +1,8 @@
+#blog {
+ margin-top: 50px;
+}
+
+#blog a {
+ color: #ffffff;
+ margin-top: 50px;
+}
Index: assets/styling/echo.css
===================================================================
--- assets/styling/echo.css (revision 9773690e4b95641a35de679eaca95858ed9cc474)
+++ assets/styling/echo.css (revision 9773690e4b95641a35de679eaca95858ed9cc474)
@@ -0,0 +1,34 @@
+#echo {
+ width: 360px;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 50px;
+ background-color: #1e222d;
+ padding: 20px;
+ border-radius: 10px;
+}
+
+#echo>h4 {
+ margin: 0px 0px 15px 0px;
+}
+
+
+#echo>input {
+ border: none;
+ border-bottom: 1px white solid;
+ background-color: transparent;
+ color: #ffffff;
+ transition: border-bottom-color 0.2s ease;
+ outline: none;
+ display: block;
+ padding: 0px 0px 5px 0px;
+ width: 100%;
+}
+
+#echo>input:focus {
+ border-bottom-color: #6d85c6;
+}
+
+#echo>p {
+ margin: 20px 0px 0px auto;
+}
Index: assets/styling/main.css
===================================================================
--- assets/styling/main.css (revision 9773690e4b95641a35de679eaca95858ed9cc474)
+++ assets/styling/main.css (revision 9773690e4b95641a35de679eaca95858ed9cc474)
@@ -0,0 +1,42 @@
+body {
+ background-color: #0f1116;
+ color: #ffffff;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ margin: 20px;
+}
+
+#hero {
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+#links {
+ width: 400px;
+ text-align: left;
+ font-size: x-large;
+ color: white;
+ display: flex;
+ flex-direction: column;
+}
+
+#links a {
+ color: white;
+ text-decoration: none;
+ margin-top: 20px;
+ margin: 10px 0px;
+ border: white 1px solid;
+ border-radius: 5px;
+ padding: 10px;
+}
+
+#links a:hover {
+ background-color: #1f1f1f;
+ cursor: pointer;
+}
+
+#header {
+ max-width: 1200px;
+}
Index: assets/styling/navbar.css
===================================================================
--- assets/styling/navbar.css (revision 9773690e4b95641a35de679eaca95858ed9cc474)
+++ assets/styling/navbar.css (revision 9773690e4b95641a35de679eaca95858ed9cc474)
@@ -0,0 +1,16 @@
+#navbar {
+ display: flex;
+ flex-direction: row;
+}
+
+#navbar a {
+ color: #ffffff;
+ margin-right: 20px;
+ text-decoration: none;
+ transition: color 0.2s ease;
+}
+
+#navbar a:hover {
+ cursor: pointer;
+ color: #91a4d2;
+}
Index: src/components/echo.rs
===================================================================
--- src/components/echo.rs (revision 9773690e4b95641a35de679eaca95858ed9cc474)
+++ src/components/echo.rs (revision 9773690e4b95641a35de679eaca95858ed9cc474)
@@ -0,0 +1,61 @@
+use dioxus::prelude::*;
+
+const ECHO_CSS: Asset = asset!("/assets/styling/echo.css");
+
+/// Echo component that demonstrates fullstack server functions.
+#[component]
+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.
+ //
+ // use_signal is a hook that creates a state for the component. It takes a closure that returns the initial value of the state.
+ // The state is automatically tracked and will rerun any other hooks or components that read it whenever it changes.
+ let mut response = use_signal(|| String::new());
+
+ rsx! {
+ document::Link { rel: "stylesheet", href: ECHO_CSS }
+
+ div {
+ id: "echo",
+ h4 { "ServerFn Echo" }
+ input {
+ placeholder: "Type here to echo...",
+ // `oninput` is an event handler that will run when the input changes. It can return either nothing or a future
+ // that will be run when the event runs.
+ 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 = 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.
+ response.set(data);
+ },
+ }
+
+ // Signals can be called like a function to clone the current value of the signal
+ if !response().is_empty() {
+ p {
+ "Server echoed: "
+ // Since we read the signal inside this component, the component "subscribes" to the signal. Whenever
+ // the signal changes, the component will rerun.
+ i { "{response}" }
+ }
+ }
+ }
+ }
+}
+
+// Server functions let us define public APIs on the server that can be called like a normal async function from the client.
+// Each server function needs to be annotated with the `#[server]` attribute, accept and return serializable types, and return
+// a `Result` with the error type [`ServerFnError`].
+//
+// 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 {
+ // 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.
+ Ok(input)
+}
Index: src/components/hero.rs
===================================================================
--- src/components/hero.rs (revision 9773690e4b95641a35de679eaca95858ed9cc474)
+++ src/components/hero.rs (revision 9773690e4b95641a35de679eaca95858ed9cc474)
@@ -0,0 +1,25 @@
+use dioxus::prelude::*;
+
+const HEADER_SVG: Asset = asset!("/assets/header.svg");
+
+#[component]
+pub fn Hero() -> Element {
+ rsx! {
+ // We can create elements inside the rsx macro with the element name followed by a block of attributes and children.
+ div {
+ // Attributes should be defined in the element before any children
+ id: "hero",
+ // After all attributes are defined, we can define child elements and components
+ img { src: HEADER_SVG, id: "header" }
+ div { id: "links",
+ // The RSX macro also supports text nodes surrounded by quotes
+ a { href: "https://dioxuslabs.com/learn/0.6/", "📚 Learn Dioxus" }
+ a { href: "https://dioxuslabs.com/awesome", "🚀 Awesome Dioxus" }
+ a { href: "https://github.com/dioxus-community/", "📡 Community Libraries" }
+ a { href: "https://github.com/DioxusLabs/sdk", "⚙️ Dioxus Development Kit" }
+ a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus", "💫 VSCode Extension" }
+ a { href: "https://discord.gg/XgGxMSkvUM", "👋 Community Discord" }
+ }
+ }
+ }
+}
Index: src/components/mod.rs
===================================================================
--- src/components/mod.rs (revision 9773690e4b95641a35de679eaca95858ed9cc474)
+++ src/components/mod.rs (revision 9773690e4b95641a35de679eaca95858ed9cc474)
@@ -0,0 +1,9 @@
+//! The components module contains all shared components for our app. Components are the building blocks of dioxus apps.
+//! They can be used to defined common UI elements like buttons, forms, and modals. In this template, we define a Hero
+//! component and an Echo component for fullstack apps to be used in our app.
+
+mod hero;
+pub use hero::Hero;
+
+mod echo;
+pub use echo::Echo;
Index: src/main.rs
===================================================================
--- src/main.rs (revision 9773690e4b95641a35de679eaca95858ed9cc474)
+++ src/main.rs (revision 9773690e4b95641a35de679eaca95858ed9cc474)
@@ -0,0 +1,65 @@
+// The dioxus prelude contains a ton of common items used in dioxus apps. It's a good idea to import wherever you
+// need dioxus
+use dioxus::prelude::*;
+
+use views::{Blog, Home, Navbar};
+
+/// Define a components module that contains all shared components for our app.
+mod components;
+/// Define a views module that contains the UI for all Layouts and Routes for our app.
+mod views;
+
+/// The Route enum is used to define the structure of internal routes in our app. All route enums need to derive
+/// the [`Routable`] trait, which provides the necessary methods for the router to work.
+///
+/// Each variant represents a different URL pattern that can be matched by the router. If that pattern is matched,
+/// the components for that route will be rendered.
+#[derive(Debug, Clone, Routable, PartialEq)]
+#[rustfmt::skip]
+enum Route {
+ // The layout attribute defines a wrapper for all routes under the layout. Layouts are great for wrapping
+ // many routes with a common UI like a navbar.
+ #[layout(Navbar)]
+ // The route attribute defines the URL pattern that a specific route matches. If that pattern matches the URL,
+ // the component for that route will be rendered. The component name that is rendered defaults to the variant name.
+ #[route("/")]
+ Home {},
+ // The route attribute can include dynamic parameters that implement [`std::str::FromStr`] and [`std::fmt::Display`] with the `:` syntax.
+ // In this case, id will match any integer like `/blog/123` or `/blog/-456`.
+ #[route("/blog/:id")]
+ // Fields of the route variant will be passed to the component as props. In this case, the blog component must accept
+ // an `id` prop of type `i32`.
+ Blog { id: i32 },
+}
+
+// We can import assets in dioxus with the `asset!` macro. This macro takes a path to an asset relative to the crate root.
+// The macro returns an `Asset` type that will display as the path to the asset in the browser or a local path in desktop bundles.
+const FAVICON: Asset = asset!("/assets/favicon.ico");
+// The asset macro also minifies some assets like CSS and JS to make bundled smaller
+const MAIN_CSS: Asset = asset!("/assets/styling/main.css");
+
+fn main() {
+ // The `launch` function is the main entry point for a dioxus app. It takes a component and renders it with the platform feature
+ // you have enabled
+ dioxus::launch(App);
+}
+
+/// App is the main component of our app. Components are the building blocks of dioxus apps. Each component is a function
+/// that takes some props and returns an Element. In this case, App takes no props because it is the root of our app.
+///
+/// Components should be annotated with `#[component]` to support props, better error messages, and autocomplete
+#[component]
+fn App() -> Element {
+ // The `rsx!` macro lets us define HTML inside of rust. It expands to an Element with all of our HTML inside.
+ rsx! {
+ // In addition to element and text (which we will see later), rsx can contain other components. In this case,
+ // we are using the `document::Link` component to add a link to our favicon and main CSS file into the head of our app.
+ document::Link { rel: "icon", href: FAVICON }
+ document::Link { rel: "stylesheet", href: MAIN_CSS }
+
+
+ // 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:: {}
+ }
+}
Index: src/views/blog.rs
===================================================================
--- src/views/blog.rs (revision 9773690e4b95641a35de679eaca95858ed9cc474)
+++ src/views/blog.rs (revision 9773690e4b95641a35de679eaca95858ed9cc474)
@@ -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"
+ }
+ }
+ }
+}
Index: src/views/home.rs
===================================================================
--- src/views/home.rs (revision 9773690e4b95641a35de679eaca95858ed9cc474)
+++ src/views/home.rs (revision 9773690e4b95641a35de679eaca95858ed9cc474)
@@ -0,0 +1,11 @@
+use crate::components::{Echo, 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 {}
+ Echo {}
+ }
+}
Index: src/views/mod.rs
===================================================================
--- src/views/mod.rs (revision 9773690e4b95641a35de679eaca95858ed9cc474)
+++ src/views/mod.rs (revision 9773690e4b95641a35de679eaca95858ed9cc474)
@@ -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;
Index: src/views/navbar.rs
===================================================================
--- src/views/navbar.rs (revision 9773690e4b95641a35de679eaca95858ed9cc474)
+++ src/views/navbar.rs (revision 9773690e4b95641a35de679eaca95858ed9cc474)
@@ -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:: {}
+ }
+}