feat: extracted main into components and pages

src/components/mod.rs

@@ -0,0 +1 @@
+pub mod navbar;

src/components/navbar.rs

@@ -0,0 +1,29 @@
+use dioxus::prelude::*;
+use dioxus_material_icons::MaterialIcon;
+use dioxus_motion::prelude::*;
+
+use crate::router::Route;
+
+/// Shared navbar component.
+#[component]
+pub fn Navbar() -> Element {
+    rsx! {
+        div { id: "navbar",
+            div { class: "navbar-start",
+                Link { class: "navbar-main", to: Route::Home {}, "Michał Czyż" }
+            }
+            div { class: "navbar-end",
+                Link { to: Route::Home {}, "Home" }
+                Link { to: Route::About {}, "About" }
+                Link { to: Route::Projects {}, "Projects" }
+                Link { to: Route::Education {}, "Education" }
+                Link { to: Route::Certifications {}, "Certifications" }
+                Link { to: Route::Contact {}, "Contact" }
+                button { class: "navbar-theme",
+                    MaterialIcon { size: 24, name: "light_mode" }
+                }
+            }
+        }
+        div { class: "content-wrapper", AnimatedOutlet::<Route> {} }
+    }
+}

src/main.rs

@@ -1,44 +1,15 @@
-use crate::pages::about::About;
+use crate::router::Route;
-use crate::pages::certifications::Certifications;
-use crate::pages::contact::Contact;
-use crate::pages::education::Education;
-use crate::pages::home::Home;
-use crate::pages::projects::Projects;
 
 use dioxus::prelude::*;
-use dioxus_material_icons::{MaterialIcon, MaterialIconStylesheet};
+use dioxus_material_icons::MaterialIconStylesheet;
-use dioxus_motion::prelude::*;
 
+mod components;
 mod pages;
-
+mod router;
-#[derive(Debug, Clone, Routable, PartialEq, MotionTransitions)]
-#[rustfmt::skip]
-enum Route {
-    #[layout(Navbar)]
-        #[route("/")]
-        #[transition(Fade)]
-        Home {},
-        #[route("/about")]
-        About {},
-        #[route("/projects")]
-        Projects {},
-        #[route("/education")]
-        Education {},
-        #[route("/certifications")]
-        Certifications {},
-        #[route("/contact")]
-        Contact {},
-}
 
 const FAVICON: Asset = asset!("/assets/favicon.ico");
 const MAIN_CSS: Asset = asset!("/assets/main.css");
 
-fn PageNotFound(_route: Vec<String>) -> Element {
-    rsx! {
-        div { "404 Not Found" }
-    }
-}
-
 fn main() {
     dioxus::launch(App);
 }
@@ -52,27 +23,3 @@ fn App() -> Element {
         Router::<Route> {}
     }
 }
-
-/// Shared navbar component.
-#[component]
-fn Navbar() -> Element {
-    rsx! {
-        div { id: "navbar",
-            div { class: "navbar-start",
-                Link { class: "navbar-main", to: Route::Home {}, "Michał Czyż" }
-            }
-            div { class: "navbar-end",
-                Link { to: Route::Home {}, "Home" }
-                Link { to: Route::About {}, "About" }
-                Link { to: Route::Projects {}, "Projects" }
-                Link { to: Route::Education {}, "Education" }
-                Link { to: Route::Certifications {}, "Certifications" }
-                Link { to: Route::Contact {}, "Contact" }
-                button { class: "navbar-theme",
-                    MaterialIcon { size: 24, name: "light_mode" }
-                }
-            }
-        }
-        div { class: "content-wrapper", AnimatedOutlet::<Route> {} }
-    }
-}

src/pages/mod.rs

@@ -3,4 +3,5 @@ pub mod certifications;
 pub mod contact;
 pub mod education;
 pub mod home;
+pub mod notfound;
 pub mod projects;

src/pages/notfound.rs

@@ -0,0 +1,12 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn PageNotFound(route: Vec<String>) -> Element {
+    rsx! {
+        div {
+            h1 { "Page not found" }
+            p { "We are terribly sorry, but the page you requested doesn't exist." }
+            pre { "log:\nattempted to navigate to: {route:?}" }
+        }
+    }
+}

src/router.rs

@@ -0,0 +1,42 @@
+use crate::pages::certifications::Certifications;
+use crate::pages::contact::Contact;
+use crate::pages::education::Education;
+use crate::pages::home::Home;
+use crate::pages::notfound::PageNotFound;
+use crate::pages::projects::Projects;
+use crate::{components::navbar::Navbar, pages::about::About};
+
+use dioxus::prelude::*;
+use dioxus_motion::prelude::*;
+
+#[derive(Debug, Clone, Routable, PartialEq, MotionTransitions)]
+#[rustfmt::skip]
+pub enum Route {
+    #[layout(Navbar)]
+        #[route("/")]
+        #[transition(Fade)]
+        Home {},
+
+        #[route("/about")]
+        #[transition(Fade)]
+        About {},
+        
+        #[route("/projects")]
+        #[transition(Fade)]
+        Projects {},
+        
+        #[route("/education")]
+        #[transition(Fade)]
+        Education {},
+        
+        #[route("/certifications")]
+        #[transition(Fade)]
+        Certifications {},
+        
+        #[route("/contact")]
+        #[transition(Fade)]
+        Contact {},
+    #[end_layout]
+    #[route("/:..route")]
+    PageNotFound { route: Vec<String> },
+}