Minor changes. Honestly, I don't even remember what exactly I changed besides the gitignore.

.gitignore

@@ -1,13 +1,13 @@
 # Generated by Cargo
 # will have compiled files and executables
-/target/
+**/target/**
 
 # Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
 # More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
-#Cargo.lock
+Cargo.lock
 
 # These are backup files generated by rustfmt
 **/*.rs.bk
 
 # Added by Dioxus
-/dist/
+**/dist/**

void-fe/Cargo.toml

@@ -15,6 +15,7 @@ dioxus-autofmt = "0.3.0"
 wasm-logger = "0.2.0"
 console_error_panic_hook = "0.1.7"
 log = "0.4.17"
+dioxus-helmet = "0.2.4"
 
 [dependencies.dioxus-router]
 version = "0.3.0"

void-fe/Dioxus.toml

@@ -24,7 +24,7 @@ title = "A Letter to the Void"
 reload_html = true
 
 # which files or dirs will be watcher monitoring
-watch_path = ["src", "../data", "../public", "tailwind.config.js", "Dioxus.toml", "Cargo.toml", "build.rs"]
+watch_path = ["src", "data", "../public", "tailwind.config.js", "Dioxus.toml", "Cargo.toml", "build.rs"]
 
 # include `assets` in web platform
 [web.resource]

void-fe/src/lib.rs

@@ -9,11 +9,13 @@
 pub mod void_app {
     // import the prelude to get access to the `rsx!` macro and the `Scope` and `Element` types
     pub use dioxus::prelude::*;
-    use rust_embed::RustEmbed;
     use markdown::{self, Options};
+    use rust_embed::RustEmbed;
 
     #[cfg(any(target_family = "wasm"))]
-    use dioxus_router::{Router, Route, Link};
+    use dioxus_helmet::Helmet;
+    #[cfg(any(target_family = "wasm"))]
+    use dioxus_router::{Link, Redirect, Route, Router};
 
     #[derive(PartialEq, Props)]
     pub struct PoemRequest {
@@ -27,45 +29,76 @@ pub mod void_app {
         creation_date: Option<String>,
         slug: Option<String>,
     }
+
     #[derive(RustEmbed)]
     #[folder = "data/poems"]
     pub struct Poems;
 
     #[cfg(target_family = "wasm")]
     pub fn DioxusApp(cx: Scope) -> Element {
+        use dioxus_router::Redirect;
+
+        let poem_list = get_poem_list();
         cx.render(rsx! {
             Router {
                 Route { to: "/", HomePage {} }
                 Route { to: "/poem/:slug/", PoemPage {} }
+                Route { to: "", PageNotFound {} }
             }
         })
     }
 
+    #[cfg(target_family = "wasm")]
+    fn PageNotFound(cx: Scope) -> Element {
+        cx.render(rsx! {
+            p { "That page doesn't exist, sorry!" }
+            Redirect { to: "/" }
+        })
+    }
+
     /// Renders the app and returns the rendered Element.
     pub fn HomePage(cx: Scope) -> Element {
         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",
-                    div { class: "p-4 space-y-2 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",
+                    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",
                         p { class: "text-lg text-center",
                             "A Letter to the Void"
                         }
                     }
-                    Poems::iter().map(|p| {
+                    PoemList {}
+                }
+            }
+        })
+    }
+
+    fn get_poem_list() -> Vec<(String, String)> {
+        let mut poem_list = Vec::new();
+        for p in Poems::iter() {
             let filename = p.to_string();
             let poem_content = Poems::get(&filename).expect("Found poem {filename:?}");
-                        let mut poem_to_str = std::str::from_utf8(poem_content.data.as_ref()).expect("Title is valid UT8.").lines();
+            let mut poem_to_str = std::str::from_utf8(poem_content.data.as_ref())
+                .expect("Title is valid UT8.")
+                .lines();
             let title_markdown = poem_to_str.next().expect("No title specified.");
             let title = markdown::to_html_with_options(title_markdown, &Options::gfm()).unwrap();
             let slug = String::from(filename.trim_end_matches(".md"));
-                        cx.render(rsx!(
+            poem_list.push((title.clone(), slug.clone()));
+        }
+        log::trace!("{poem_list:?}");
+        poem_list
+    }
+
+    fn PoemList(cx: Scope) -> Element {
+        let poem_list = get_poem_list();
+        cx.render(rsx! {
             ul { class: "space-y-4",
-                                PoemButton { title: title, slug: slug }
+                poem_list.into_iter().map(|p| {
+                    rsx!{
+                        div { PoemButton { title: p.0, slug: p.1 } }
                     }
-                        ))
                 })
             }
-            }
         })
     }
 
@@ -82,7 +115,11 @@ pub mod void_app {
     #[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."));
+        let slug = String::from(
+            dioxus_router::use_route(cx)
+                .segment("slug")
+                .expect("No slug specified."),
+        );
 
         log::trace!("{slug}");
 
@@ -99,13 +136,12 @@ pub mod void_app {
         let slug = cx.props.slug.clone().expect("No slug specified.");
         let slug_ref = slug.as_str();
         cx.render(rsx!{
-            div {
             a { href: "/poem/{slug_ref}",
-                    li { class: "p-4 ml-6 mr-6 space-y-2 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",
+                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}" }
                 }
             }
-            }
         })
     }
 
@@ -115,10 +151,10 @@ pub mod void_app {
         let slug = cx.props.slug.clone().expect("No slug specified.");
         let slug_ref = slug.as_str();
         cx.render(rsx!{
-            div {
             Link { to: "/poem/{slug_ref}",
-                    li { class: "p-4 ml-6 mr-6 space-y-2 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",
+                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", dangerous_inner_html: "{title}" }
+                    div { class: "mx-auto max-w-fit flex justify-center text-lg text-center", 
+                        dangerous_inner_html: "{title}" 
                     }
                 }
             }
@@ -126,14 +162,20 @@ pub mod void_app {
     }
 
     fn GetPoem(cx: Scope<PoemData>) -> Element {
-        let filename = String::from(String::from(cx.props.slug.clone().expect("No slug specified.")) + ".md");
+        let filename =
-        let creation_date = String::from(String::from("<br>Written on: ") + filename.split("_").next().unwrap());
+            String::from(String::from(cx.props.slug.clone().expect("No slug specified.")) + ".md");
+        let creation_date =
+            String::from(String::from("<br>Written on: ") + filename.split("_").next().unwrap());
         let poem_content = Poems::get(&filename).expect("Found poem {filename:?}");
-        let mut poem_to_str = std::str::from_utf8(poem_content.data.as_ref()).expect("Title is valid UT8.").lines();
+        let mut poem_to_str = std::str::from_utf8(poem_content.data.as_ref())
+            .expect("Title is valid UT8.")
+            .lines();
         let poem_title = poem_to_str.next().unwrap();
         let poem_content = poem_to_str.into_iter().collect::<Vec<&str>>().join("\n");
-        let poem_title_to_html_string = markdown::to_html_with_options(poem_title, &Options::gfm()).unwrap();
+        let poem_title_to_html_string =
-        let poem_content_to_html_string = markdown::to_html_with_options(poem_content.as_str(), &Options::gfm()).unwrap();
+            markdown::to_html_with_options(poem_title, &Options::gfm()).unwrap();
+        let poem_content_to_html_string =
+            markdown::to_html_with_options(poem_content.as_str(), &Options::gfm()).unwrap();
         cx.render(rsx!{
             MakePoem{ title: poem_title_to_html_string, content: poem_content_to_html_string, creation_date: creation_date } }
         )
@@ -151,7 +193,11 @@ pub mod void_app {
 
     #[cfg(target_family = "wasm")]
     fn RenderPoemTitle(cx: Scope<PoemData>) -> Element {
-        let title = cx.props.title.clone().expect("This poem has an empty title.");
+        let title = cx
+            .props
+            .title
+            .clone()
+            .expect("This poem has an empty title.");
         cx.render(rsx!{
             p { class: "mx-auto max-w-fit flex justify-center 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",
                 dangerous_inner_html: "{title}",
@@ -162,7 +208,11 @@ pub mod void_app {
     #[cfg(any(target_family = "unix", target_family = "windows"))]
     fn RenderPoemElement(cx: Scope<PoemData>) -> Element {
         let content = cx.props.content.clone().expect("No content specified.");
-        let creation_date = cx.props.creation_date.clone().expect("No creation date specified.");
+        let creation_date = cx
+            .props
+            .creation_date
+            .clone()
+            .expect("No creation date specified.");
         cx.render(rsx! {
             div { class: "font-nerd flex flex-col space-y-4 mx-4 py-4", "{content}{creation_date}" }
         })
@@ -171,7 +221,11 @@ pub mod void_app {
     #[cfg(target_family = "wasm")]
     fn RenderPoemElement(cx: Scope<PoemData>) -> Element {
         let content = cx.props.content.clone().expect("No content specified.");
-        let creation_date = cx.props.creation_date.clone().expect("No creation date specified.");
+        let creation_date = cx
+            .props
+            .creation_date
+            .clone()
+            .expect("No creation date specified.");
         cx.render(rsx! {
             div {
                 class: "font-nerd flex flex-col space-y-4 mx-4 py-4",
@@ -182,7 +236,11 @@ pub mod void_app {
 
     fn MakePoem(cx: Scope<PoemData>) -> Element {
         let title = cx.props.title.clone().expect("No title specified.");
-        let creation_date = cx.props.creation_date.clone().expect("No creation date specified.");
+        let creation_date = cx
+            .props
+            .creation_date
+            .clone()
+            .expect("No creation date specified.");
         let content = cx.props.content.clone().expect("No content specified.");
         cx.render(rsx!{
             div { class: "flex-col space-y-4",