A lot of work just getting Dioxus to route things properly, moved compile conditions to make less repetition.

.gitignore

@@ -11,3 +11,8 @@ Cargo.lock
 
 # Added by Dioxus
 **/dist/**
+
+# Don't sync the NodeJS files.
+**/node_modules/**
+**/package-lock.json
+**/package.json

void-be/src/lib.rs

@@ -99,35 +99,6 @@ pub mod web_app_backend {
         )
     }
 
-    #[get("/")]
-    async fn latest_entry() -> Redirect {
-        let slug = void_app::get_latest_entry();
-        let uri = String::from("/poems/".to_string() + slug.as_str());
-        Redirect::to(uri)
-    }
-
-    #[get("/")]
-    async fn oldest_entry() -> Redirect {
-        let slug = void_app::get_oldest_entry();
-        let uri = String::from("/poems/".to_string() + slug.as_str());
-        Redirect::to(uri)
-    }
-
-    #[get("/?<current>")]
-    async fn previous_entry(current: &str) -> Redirect {
-        let previous =
-            void_app::get_previous_entry(current.to_string()).expect("There is a previous entry.");
-        let uri = String::from("/poems/".to_string() + previous.as_str());
-        Redirect::to(uri)
-    }
-
-    #[get("/?<current>")]
-    async fn next_entry(current: &str) -> Redirect {
-        let next = void_app::get_next_entry(current.to_string()).expect("There is a next entry.");
-        let uri = String::from("/poems/".to_string() + next.as_str());
-        Redirect::to(uri)
-    }
-
     #[get("/<entry>")]
     async fn poem(cookies: &CookieJar<'_>, entry: &str) -> Template {
         let dark_mode = match cookies.get("dark-mode") {
@@ -171,10 +142,6 @@ pub mod web_app_backend {
             .mount("/images", FileServer::from("public/images"))
             .mount("/styles", FileServer::from("public/styles"))
             .mount("/fonts", FileServer::from("public/fonts"))
-            .mount("/poems/oldest", routes![oldest_entry])
-            .mount("/poems/previous", routes![previous_entry])
-            .mount("/poems/next", routes![next_entry])
-            .mount("/poems/latest", routes![latest_entry])
             .mount("/poems", routes![poem_list, poem])
             .mount("/", routes![dark_mode, index])
             .attach(Template::fairing())

void-fe/.vscode/settings.json

@@ -1,5 +1,19 @@
 {
-    "rust-analyzer.linkedProjects": [
+  "rust-analyzer.cargo.extraArgs": ["--profile", "rust-analyzer"],
-        "./Cargo.toml"
+  // "rust-analyzer.cargo.buildScripts.invocationLocation": "root",
-    ]
+  "rust-analyzer.cargo.target": "wasm32-unknown-unknown",
+  // "rust-analyzer.cargo.buildScripts.overrideCommand": ["dioxus", "build"],
+  "rust-analyzer.check.overrideCommand": ["cargo", "check", "--quiet", "--message-format=json"],
+  "rust-analyzer.check.invocationLocation": "root",
+  "rust-analyzer.check.targets": ["wasm32-unknown-unknown", "x86_64-unknown-linux-gnu"],
+  // "rust-analyzer.runnables.command": "dioxus serve",
+  "rust-analyzer.cargo.buildScripts.enable": false,
+  "rust-analyzer.linkedProjects": [
+    "./Cargo.toml"
+  ],
+  "rust-analyzer.showUnlinkedFileNotification": false,
+  "rust-analyzer.hover.actions.run.enable": true,
+  "rust-analyzer.hover.actions.debug.enable": true,
+  "rust-analyzer.hover.documentation.enable": true,
+  "rust-analyzer.hover.actions.enable": true
 }

void-fe/Cargo.toml

@@ -16,6 +16,11 @@ wasm-logger = "0.2.0"
 console_error_panic_hook = "0.1.7"
 log = "0.4.17"
 dioxus-helmet = "0.2.4"
+dioxus-use-storage = "0.3.0"
+
+[dependencies.serde]
+version = "1.0.160"
+features = ["derive"]
 
 [dependencies.dioxus-router]
 version = "0.3.0"

void-fe/src/lib.rs

@@ -12,11 +12,22 @@ pub mod void_app {
     use markdown::{self, Options};
     use rust_embed::RustEmbed;
     use std::collections::VecDeque;
+    use dioxus_router::{Route, Router, Redirect};
 
     #[cfg(any(target_family = "wasm"))]
     use dioxus_helmet::Helmet;
     #[cfg(any(target_family = "wasm"))]
-    use dioxus_router::{Link, Redirect, Route, Router};
+    use dioxus_router::{Link};
+    #[cfg(any(target_family = "wasm"))]
+    use dioxus_use_storage::use_local_storage;
+    #[cfg(any(target_family = "wasm"))]
+    use serde::Deserialize;
+
+    #[cfg(target_family = "wasm")]
+    #[derive(Deserialize)]
+    struct CurrentPoem {
+        current: String,
+    }
 
     #[derive(PartialEq, Props)]
     pub struct PoemRequest {
@@ -54,21 +65,41 @@ pub mod void_app {
     #[folder = "data/poems"]
     pub struct Poems;
 
-    #[cfg(target_family = "wasm")]
     pub fn DioxusApp(cx: Scope) -> Element {
-        use dioxus_router::Redirect;
+        // use dioxus_router::Redirect;
 
-        let poem_list = get_poem_list();
         cx.render(rsx! {
             Router {
-                Route { to: "/", HomePage {} }
+                Route { to: "/", HomePage { dark_mode: true, } }
-                Route { to: "/poems/:slug/", PoemPage {} }
+                Route { to: "/poems/", PoemListPage { slug: "".to_string(), dark_mode: true, } }
+                Route { to: "/poems/:slug", PoemPage { slug: "".to_string(), dark_mode: true, } }
                 Route { to: "", PageNotFound {} }
             }
         })
     }
 
     #[cfg(target_family = "wasm")]
+    fn RoutePreviousPage(cx: Scope<PoemRequest>) -> Element {
+        let current = String::from(dioxus_router::use_route(cx)
+                .segment("slug")
+                .expect("Slug to know which poem we are at."));
+        log::info!("{}", current.clone());
+        let previous = current.clone();
+        cx.render(rsx!{
+            Redirect { to: "{previous}" }
+        })
+    }
+    #[cfg(target_family = "wasm")]
+    fn RouteNextPage(cx: Scope<PoemRequest>) -> Element {
+        let current = String::from(dioxus_router::use_route(cx)
+                .segment("slug")
+                .expect("Slug to know which poem we are at."));
+        let next = current.clone();
+        cx.render(rsx!{
+            Redirect { to: "{next}" }
+        })
+    }
+
     fn PageNotFound(cx: Scope) -> Element {
         cx.render(rsx! {
             p { "That page doesn't exist, sorry!" }
@@ -78,65 +109,56 @@ pub mod void_app {
 
     fn MutantStandardFooter(cx: Scope) -> Element {
         cx.render(rsx!{
-            div { class: "flex p-4 text-md text-center 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-grey-dark dark:text-alice-werefox-grey-light",
+            div { class: "flex p-4 mx-auto max-w-full justify-center text-md text-center 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-grey-dark dark:text-alice-werefox-grey-light",
                 "This site uses Mutant Standard emoji, which are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License"
             }
         })
     }
 
-    #[cfg(any(target_family = "windows", target_family = "unix"))]
     fn BackToHomePage(cx: Scope) -> Element {
-        cx.render(rsx!{
+        #[cfg(any(target_family = "windows", target_family = "unix"))]
+        return cx.render(rsx!{
             a { class: "flex justify-center p-4 text-xl text-center 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-grey-dark dark:text-alice-werefox-grey-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",
                 href: "/",
                 p {
                     "Back to the homepage"
                 }
             }
-        })
+        });
-    }
+        #[cfg(target_family = "wasm")]
-
+        return cx.render(rsx!{
-    #[cfg(target_family = "wasm")]
+            Link { class: "flex justify-center p-4 text-xl text-center 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-grey-dark dark:text-alice-werefox-grey-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",
-    fn BackToHomePage(cx: Scope) -> Element {
+                to: "/",
-        cx.render(rsx!{
-            Link { to: "flex justify-center p-4 text-xl text-center 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-grey-dark dark:text-alice-werefox-grey-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",
-                href: "/",
                 p {
                     "Back to the homepage"
                 }
             }
-        })
+        });
     }
 
-    #[cfg(any(target_family = "windows", target_family = "unix"))]
     fn NavigationButton(cx: Scope<ButtonProps>) -> Element {
         let title = cx.props.title.clone();
         let title_ref = title.as_str();
         let slug = cx.props.slug.clone();
         let slug_ref = slug.as_str();
-        cx.render(rsx!{
+        #[cfg(any(target_family = "windows", target_family = "unix"))]
+        return cx.render(rsx!{
             a { class: "flex mx-auto max-w-full justify-center p-4 ml-2 mr-2 text-xl text-center 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-grey-dark dark:text-alice-werefox-grey-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",
                 href: "{slug_ref}",
                 "{title_ref}"
             }
-        })
+        });
-    }
+        #[cfg(target_family = "wasm")]
-
+        return cx.render(rsx!{
-    #[cfg(target_family = "wasm")]
+            Link { class: "flex mx-auto max-w-full justify-center p-4 ml-2 mr-2 text-xl text-center 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-grey-dark dark:text-alice-werefox-grey-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",
-    fn NavigationButton(cx: Scope<ButtonProps>) -> Element {
+                to: "{slug_ref}",
-        let title = cx.props.title.clone();
+                div {
-        let title_ref = title.as_str();
+                    dangerous_inner_html: "{title_ref}",
-        let slug = cx.props.slug.clone();
+                }
-        let slug_ref = slug.as_str();
-        cx.render(rsx!{
-            Link { class: "flex mx-auto max-w-full justify-center p-4 text-xl text-center 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-grey-dark dark:text-alice-werefox-grey-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",
-                to: slug_ref,
-                title_ref
             }
-        })
+        });
     }
 
-    #[cfg(any(target_family = "windows", target_family = "unix"))]
     fn DarkModeButton(cx: Scope<DarkModeProps>) -> Element {
         let slug = cx
             .props
@@ -145,7 +167,8 @@ pub mod void_app {
             .expect("Slug found to know where to redirect after dark mode setting.");
         let slug_ref = slug.as_str();
         let dark_mode = cx.props.dark_mode;
-        cx.render(rsx! {
+        #[cfg(any(target_family = "windows", target_family = "unix"))]
+        return cx.render(rsx! {
             a { href: "/?dark_mode&callback={slug_ref}",
                 match dark_mode {
                     true => {
@@ -164,19 +187,9 @@ pub mod void_app {
                     },
                 }
             }
-        })
+        });
-    }
+        #[cfg(target_family = "wasm")]
-
+        return cx.render(rsx! {
-    #[cfg(target_family = "wasm")]
-    fn DarkModeButton(cx: Scope<DarkModeProps>) -> Element {
-        let slug = cx
-            .props
-            .slug
-            .clone()
-            .expect("Slug found to know where to redirect after dark mode setting.");
-        let slug_ref = slug.as_str();
-        let dark_mode = cx.props.dark_mode;
-        cx.render(rsx! {
             Link { to: "{slug_ref}/toggle-dark-mode",
                 match dark_mode {
                     true => {
@@ -195,50 +208,48 @@ pub mod void_app {
                     },
                 }
             }
-        })
+        });
     }
 
-    #[cfg(any(target_family = "unix", target_family = "windows"))]
     fn PoemButton(cx: Scope<ButtonProps>) -> Element {
         let title = cx.props.title.clone();
         let title_ref = title.as_str();
         let slug = cx.props.slug.clone();
         let slug_ref = slug.as_str();
-        cx.render(rsx!{
+        #[cfg(any(target_family = "unix", target_family = "windows"))]
+        return cx.render(rsx!{
             a { href: "/poems/{slug_ref}",
                 li { class: "p-4 ml-2 mr-2 text-xl text-center 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-grey-dark dark:text-alice-werefox-grey-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",
                     "{title_ref}"
                 }
             }
-        })
+        });
-    }
+        #[cfg(target_family = "wasm")]
-
+        return cx.render(rsx!{
-    #[cfg(target_family = "wasm")]
-    fn PoemButton(cx: Scope<ButtonProps>) -> Element {
-        let title = cx.props.title.clone();
-        let title_ref = title.as_str();
-        let slug = cx.props.slug.clone();
-        let slug_ref = slug.as_str();
-        cx.render(rsx!{
             Link { to: "/poems/{slug_ref}",
                 li { class: "p-4 ml-2 mr-2 text-xl text-center 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-grey-dark dark:text-alice-werefox-grey-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",
-                    dangerous_inner_html: "{title_ref}"
+                    dangerous_inner_html: "{title_ref}",
                 }
             }
-        })
+        });
     }
 
     /// Renders the app and returns the rendered Element.
     pub fn HomePage(cx: Scope<DarkModeProps>) -> Element {
+        #[cfg(any(target_family = "unix", target_family = "windows"))]
         let slug = cx.props.slug.clone().expect("Slug for dark mode redirect.");
-        // let slug_ref = slug.as_str();
+        #[cfg(target_family = "wasm")]
+        let slug = "".to_string();
+        let oldest_uri = format!("/poems/{}", get_oldest_entry());
+        let latest_uri = format!("/poems/{}", get_latest_entry());
+        let title = "A Letter to the Void".to_string();
         let dark_mode = cx.props.dark_mode.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",
                     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-grey-dark dark:text-alice-werefox-grey-light",
                         p { class: "flex flex-row mx-auto max-w-full justify-center text-xl text-center",
-                            "A Letter to the Void&nbsp;"
+                            "{title}"
                             DarkModeButton { slug: slug, dark_mode: dark_mode }
                         }
                     }
@@ -256,8 +267,8 @@ pub mod void_app {
                             "🖤 Alice Icehart Werefox"
                         }
                     }
-                    NavigationButton { title: "See Latest Entry".to_string(), slug: "/poems/latest".to_string() }
+                    NavigationButton { title: "See Latest Entry".to_string(), slug: latest_uri }
-                    NavigationButton { title: "See Oldest Entry".to_string(), slug: "/poems/oldest".to_string() }
+                    NavigationButton { title: "See Oldest Entry".to_string(), slug: oldest_uri }
                     NavigationButton { title: "See All Entries".to_string(), slug: "/poems".to_string() }
                     MutantStandardFooter {}
                 }
@@ -362,24 +373,30 @@ pub mod void_app {
         })
     }
 
-    #[cfg(any(target_family = "unix", target_family = "windows"))]
     pub fn PoemPage(cx: Scope<PoemRequest>) -> Element {
+        #[cfg(any(target_family = "unix", target_family = "windows"))]
         let slug = cx.props.slug.clone();
-        let mut oldest_uri = "#".to_string();
+        #[cfg(target_family = "wasm")]
-        if get_oldest_entry() != slug.to_string() {
+        let slug = String::from(
-            oldest_uri = format!("/poems/oldest");
+            dioxus_router::use_route(cx)
+                .segment("slug")
+                .expect("No slug specified."),
+        );
+        let mut oldest_uri = get_oldest_entry();
+        if oldest_uri == slug.to_string() {
+            oldest_uri = format!("/poems/{slug}#");
         }
-        let mut previous_uri = "#".to_string();
+        let previous_uri = match get_previous_entry(slug.clone()) {
-        if let Some(_) = get_previous_entry(slug.clone()) {
+            Some(p) => format!("/poems/{p}"),
-            previous_uri = format!("/poems/previous/?current={slug}");
+            None => format!("/poems/{slug}#"),
-        }
+        };
-        let mut next_uri = "#".to_string();
+        let next_uri = match get_next_entry(slug.clone()) {
-        if let Some(_) = get_next_entry(slug.clone()) {
+            Some(p) => format!("/poems/{p}"),
-            next_uri = format!("/poems/next/?current={slug}");
+            None => format!("/poems/{slug}#"),
-        }
+        };
-        let mut latest_uri = "#".to_string();
+        let mut latest_uri = get_latest_entry();
-        if get_latest_entry() != slug.to_string() {
+        if latest_uri == slug.to_string() {
-            latest_uri = format!("/poems/latest");
+            latest_uri = format!("{slug}#");
         }
         let dark_mode = cx
             .props
@@ -404,54 +421,6 @@ pub mod void_app {
         })
     }
 
-    #[cfg(target_family = "wasm")]
-    fn PoemPage(cx: Scope) -> Element {
-        let slug = String::from(
-            dioxus_router::use_route(cx)
-                .segment("slug")
-                .expect("No slug specified."),
-        );
-        let dark_mode = cx
-            .props
-            .dark_mode
-            .clone()
-            .expect("Dark mode prop not passed.");
-        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",
-                    BackToHomePage {}
-                    GetPoem { slug: slug, dark_mode: dark_mode }
-                    BackToHomePage {}
-                    MutantStandardFooter {}
-                }
-            }
-        })
-    }
-
-    // fn PoemButton(cx: Scope<PoemData>) -> Element {
-    //     let title = cx.props.title.clone().expect("No title specified.");
-    //     let slug = cx.props.slug.clone().expect("No slug specified.");
-    //     let class = String::from("p-4 ml-2 mr-2 text-xl text-center 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-grey-dark dark:text-alice-werefox-grey-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");
-    //     cx.render(rsx!{
-    //         PoemButtonLink { title: title, slug: slug, classes: class }
-    //     })
-    // }
-
-    // fn PoemButton(cx: Scope<PoemData>) -> Element {
-    //     let title = cx.props.title.clone().expect("No title specified.");
-    //     let slug = cx.props.slug.clone().expect("No slug specified.");
-    //     let slug_ref = slug.as_str();
-    //     cx.render(rsx!{
-    //         Link { to: "/poems/{slug_ref}",
-    //             li { class: "p-4 ml-2 mr-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-grey-dark dark:text-alice-werefox-grey-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: "mx-auto max-w-fit flex justify-center text-lg text-center",
-    //                     dangerous_inner_html: "{title}"
-    //                 }
-    //             }
-    //         }
-    //     })
-    // }
-
     fn GetPoem(cx: Scope<PoemData>) -> Element {
         // It would be good to implement some kind of "get_poem_data" or "into" functionality for the struct, so I don't have to write all this here.
         let dark_mode = cx
@@ -475,13 +444,6 @@ pub mod void_app {
             markdown::to_html_with_options(poem_content.as_str(), &Options::gfm()).unwrap();
         cx.render(rsx! {
         MakePoem{
-            // data: PoemData{
-            //     title: None,
-            //     content: Some(poem_content_to_html_string.clone()),
-            //     creation_date: Some(creation_date.clone()),
-            //     slug: Some(slug.clone()),
-            //     dark_mode: Some(dark_mode),
-            // },
             RenderPoemTitle { title: poem_title_to_html_string, slug: slug, dark_mode: dark_mode }
             RenderPoemElement { content: poem_content_to_html_string, creation_date: creation_date }
         }})
@@ -497,54 +459,26 @@ pub mod void_app {
             .clone()
             .expect("Dark mode prop not passed.");
         let title = cx.props.title.clone().expect("No title specified.");
-        cx.render(rsx!{
+        #[cfg(any(target_family = "unix", target_family = "windows"))]
+        return cx.render(rsx!{
             span { class: "p-4 ml-2 mr-2 flex text-xl text-center 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-grey-dark dark:text-alice-werefox-grey-light",
                 span { class: "flex flex-row align-middle mx-auto max-w-full justify-center",
                     "{title}&nbsp;"
                     DarkModeButton { slug: callback, dark_mode: dark_mode }
                 }
             }
-        })
+        });
+        #[cfg(target_family = "wasm")]
+        return cx.render(rsx!{
+            span { class: "p-4 ml-2 mr-2 flex text-xl text-center 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-grey-dark dark:text-alice-werefox-grey-light",
+                span { class: "flex flex-row align-middle mx-auto max-w-full justify-center",
+                    div { dangerous_inner_html: "{title}", }
+                    DarkModeButton { slug: callback, dark_mode: dark_mode }
+                }
+            }
+        });
     }
 
-    // #[cfg(target_family = "wasm")]
-    // fn RenderPoemTitle(cx: Scope<PoemData>) -> Element {
-    //     let slug = cx.props.slug.clone().expect("Slug prop was not passed.");
-    //     let dark_mode = cx.props.dark_mode.clone().expect("Dark mode prop not passed.");
-    //     let title = cx
-    //         .props
-    //         .title
-    //         .clone()
-    //         .expect("This poem has an empty title.");
-    //     cx.render(rsx!{
-    //         p { class: "mx-auto max-w-fit flex flex-row justify-center bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light p-4",
-    //             dangerous_inner_html: "{title}&nbsp;",
-    //             a { class: "",
-    //                 href: "/poems/{slug}/toggle-dark-mode",
-    //                 match dark_mode {
-    //                     true => {
-    //                         rsx! {
-    //                             img { class: "",
-    //                                 src: "/images/white_square_button.png",
-    //                                 alt: "A white square button that can toggle dark mode.",
-    //                             }
-    //                         }
-    //                     },
-    //                     false => {
-    //                         rsx! {
-    //                             img { class: "",
-    //                                 src: "/images/black_square_button.png",
-    //                                 alt: "A black square button that can toggle dark mode.",
-    //                             }
-    //                         }
-    //                     },
-    //                 }
-    //             }
-    //         }
-    //     })
-    // }
-
-    #[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
@@ -552,7 +486,8 @@ pub mod void_app {
             .creation_date
             .clone()
             .expect("No creation date specified.");
-        cx.render(rsx! {
+        #[cfg(any(target_family = "unix", target_family = "windows"))]
+        return cx.render(rsx! {
             div { class: "flex p-2 mx-auto max-w-full justify-center",
                 details { class: "group p-4 max-w-fit space-y-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-4 ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light",
                     summary { class: "group-open:before:content-['Close'] before:content-['Open'] flex justify-center p-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-grey-dark dark:text-alice-werefox-grey-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",
@@ -561,23 +496,19 @@ pub mod void_app {
                     }
                 }
             }
-        })
+        });
-    }
+        #[cfg(target_family = "wasm")]
-
+        return cx.render(rsx! {
-    #[cfg(target_family = "wasm")]
+            div { class: "flex p-2 mx-auto max-w-full justify-center",
-    fn RenderPoemElement(cx: Scope<PoemData>) -> Element {
+                details { class: "group p-4 max-w-fit space-y-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-4 ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light",
-        let content = cx.props.content.clone().expect("No content specified.");
+                    summary { class: "group-open:before:content-['Close'] before:content-['Open'] flex justify-center p-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-grey-dark dark:text-alice-werefox-grey-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",
-        let creation_date = cx
+                    }
-            .props
+                    div { class: "font-nerd flex flex-col space-y-4 py-4", 
-            .creation_date
+                        dangerous_inner_html: "{content}{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",
-                dangerous_inner_html: "{content}{creation_date}"
             }
-        })
+        });
     }
 
     fn MakePoem<'a>(cx: Scope<'a, PoemChildren<'a>>) -> Element {