From f1c345af4fa78b0d16fa20b848e80813afec2f52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Czy=C5=BC?= Date: Fri, 23 May 2025 21:25:12 +0200 Subject: [PATCH] feat: extracted main into components and pages --- src/components/mod.rs | 1 + src/components/navbar.rs | 29 +++++++++++++++++++ src/main.rs | 61 +++------------------------------------- src/pages/mod.rs | 1 + src/pages/notfound.rs | 12 ++++++++ src/router.rs | 42 +++++++++++++++++++++++++++ 6 files changed, 89 insertions(+), 57 deletions(-) create mode 100644 src/components/mod.rs create mode 100644 src/components/navbar.rs create mode 100644 src/pages/notfound.rs create mode 100644 src/router.rs diff --git a/src/components/mod.rs b/src/components/mod.rs new file mode 100644 index 0000000..302260f --- /dev/null +++ b/src/components/mod.rs @@ -0,0 +1 @@ +pub mod navbar; diff --git a/src/components/navbar.rs b/src/components/navbar.rs new file mode 100644 index 0000000..1ac87b7 --- /dev/null +++ b/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:: {} } + } +} diff --git a/src/main.rs b/src/main.rs index 1069365..ec25cca 100644 --- a/src/main.rs +++ b/src/main.rs @@ -1,44 +1,15 @@ -use crate::pages::about::About; -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 crate::router::Route; use dioxus::prelude::*; -use dioxus_material_icons::{MaterialIcon, MaterialIconStylesheet}; -use dioxus_motion::prelude::*; +use dioxus_material_icons::MaterialIconStylesheet; +mod components; mod pages; - -#[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 {}, -} +mod router; const FAVICON: Asset = asset!("/assets/favicon.ico"); const MAIN_CSS: Asset = asset!("/assets/main.css"); -fn PageNotFound(_route: Vec) -> Element { - rsx! { - div { "404 Not Found" } - } -} - fn main() { dioxus::launch(App); } @@ -52,27 +23,3 @@ fn App() -> Element { Router:: {} } } - -/// 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:: {} } - } -} diff --git a/src/pages/mod.rs b/src/pages/mod.rs index aacabfe..6161a04 100644 --- a/src/pages/mod.rs +++ b/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; diff --git a/src/pages/notfound.rs b/src/pages/notfound.rs new file mode 100644 index 0000000..9f645b7 --- /dev/null +++ b/src/pages/notfound.rs @@ -0,0 +1,12 @@ +use dioxus::prelude::*; + +#[component] +pub fn PageNotFound(route: Vec) -> 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:?}" } + } + } +} diff --git a/src/router.rs b/src/router.rs new file mode 100644 index 0000000..539261b --- /dev/null +++ b/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 }, +}