Routing works properly on the Rocket backend now.

Cargo.toml

@@ -19,4 +19,4 @@ rust-embed = { version = "6.6.1" }
 
 [dependencies]
 void-be = { path = "./void-be" }
-rocket = { workspace = true }
+rocket = { workspace = true }

void-be/src/lib.rs

@@ -1,6 +1,5 @@
-
 //! # Rust Letter Backend
-//! 
+//!
 //! `rust_letter_be` handles the backend execution using Rocket.
 
 #[macro_use]
@@ -10,9 +9,9 @@ extern crate rocket;
 pub mod web_app_backend {
 
     use rocket::fs::FileServer;
-    use rocket::{Rocket, Build};
+    use rocket::{Build, Rocket};
-    use rocket_dyn_templates::{Template, context};
+    use rocket_dyn_templates::{context, Template};
-    use void_fe::void_app::{self, VirtualDom};
+    use void_fe::void_app::{self, PoemRequest, VirtualDom};
 
     #[get("/")]
     async fn index() -> Template {
@@ -29,12 +28,33 @@ pub mod web_app_backend {
         )
     }
 
+    #[get("/poem/<entry>")]
+    async fn poem(entry: &str) -> Template {
+        let mut vdom = VirtualDom::new_with_props(
+            void_app::PoemPage,
+            PoemRequest {
+                slug: entry.to_string(),
+            },
+        );
+        let _ = vdom.rebuild();
+        let output = dioxus_ssr::render(&vdom);
+        Template::render(
+            "index",
+            context! {
+                app_title: "A Letter to the Void",
+                style_include: "<link href=/styles/tailwind.min.css rel=stylesheet />",
+                test: &output
+            },
+        )
+    }
+
     /// This runs `rocket::build()` with the needed mounts and routes.
     pub async fn build_rocket() -> Rocket<Build> {
         rocket::build()
             .mount("/images", FileServer::from("public/images"))
             .mount("/styles", FileServer::from("public/styles"))
             .mount("/fonts", FileServer::from("public/fonts"))
-            .mount("/", routes![index]).attach(Template::fairing())
+            .mount("/", routes![index, poem])
+            .attach(Template::fairing())
     }
 }

void-fe/src/lib.rs

@@ -19,7 +19,7 @@ pub mod void_app {
 
     #[derive(PartialEq, Props)]
     pub struct PoemRequest {
-        slug: String,
+        pub slug: String,
     }
 
     #[derive(PartialEq, Props)]
@@ -107,25 +107,38 @@ pub mod void_app {
         let slug = cx.props.slug.clone();
         cx.render(rsx!{
             div { class: "min-h-screen font-nerd bg-alice-werefox-grey-light dark:bg-alice-werefox-grey",
-                div { class: "container space-y-4 mx-auto p-4", GetPoem { slug: slug } }
+                div { class: "container space-y-4 mx-auto p-4",
+                a { href: "/",
+                    div { class: "p-4 ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition",
+                        p { class: "text-lg text-center",
+                            "Take me back!"
+                        }
+                    }
+                }
+                GetPoem { slug: slug } }
             }
         })
     }
 
     #[cfg(target_family = "wasm")]
     fn PoemPage(cx: Scope) -> Element {
-        log::trace!("Test");
         let slug = String::from(
             dioxus_router::use_route(cx)
                 .segment("slug")
                 .expect("No slug specified."),
         );
-
-        log::trace!("{slug}");
-
         cx.render(rsx!{
             div { class: "min-h-screen font-nerd bg-alice-werefox-grey-light dark:bg-alice-werefox-grey",
-                div { class: "container space-y-4 mx-auto p-4", GetPoem { slug: slug } }
+                div { class: "container space-y-4 mx-auto p-4",
+                    Link { to: "/"
+                        div { class: "p-4 ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition",
+                            p { class: "text-lg text-center",
+                                "Take me back!"
+                            }
+                        }
+                    }
+                    GetPoem { slug: slug }
+                }
             }
         })
     }
@@ -137,7 +150,6 @@ pub mod void_app {
         let slug_ref = slug.as_str();
         cx.render(rsx!{
             a { href: "/poem/{slug_ref}",
-                tabindex: "0",
                 li { class: "p-4 ml-6 mr-6 ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition",
                     div { class: "text-lg text-center", "{title}" }
                 }
@@ -246,7 +258,7 @@ pub mod void_app {
             div { class: "flex-col space-y-4",
                 RenderPoemTitle { title: title.clone() }
                 details { class: "mx-auto max-w-fit space-y-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark border-4 border-alice-werefox-red-dark dark:border-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light p-4",
-                    summary { class: "flex justify-center border-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark border-alice-werefox-red-dark dark:border-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light p-4",
+                    summary { class: "flex justify-center p-4 ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition",
                         "Open"
                     }
                     RenderPoemElement { content: content.clone(), creation_date: creation_date.clone() }