Cargo.toml

@@ -11,17 +11,13 @@ members = [
 ]
 
 [workspace.dependencies]
-rocket = "=0.5.0"
+rocket = "=0.5.0-rc.3"
-dioxus = "0.5.0-alpha.0"
+dioxus = "0.3.2"
-markdown = "1.0.0-alpha.16"
+markdown = "1.0.0-alpha.7"
-dioxus-ssr = "0.5.0-alpha.0"
+dioxus-ssr = "0.3.0"
-rust-embed = { version = "8.3.0" }
+rust-embed = { version = "6.6.1" }
 once_cell = "1.17.1"
 
 [dependencies]
 void-be = { path = "./void-be" }
 rocket = { workspace = true }
-
-[dependencies.dioxus]
-version = "0.5.0-alpha.0"
-features = ["router"]

void-be/Cargo.toml

@@ -16,5 +16,5 @@ rocket = { workspace = true }
 
 # Needed to enable handlebar template support
 [dependencies.rocket_dyn_templates]
-version = "=0.1.0"
+version = "=0.1.0-rc.3"
 features = ["handlebars"]

void-be/src/lib.rs

@@ -14,11 +14,9 @@ pub mod web_app_backend {
     use rocket::response::Redirect;
     use rocket::{Build, Rocket};
     use rocket_dyn_templates::{context, Template};
-    use void_fe::utils::prop_structs::{PoemDatabase, VoidProps, ContentProps};
+    use void_fe::utils::prop_structs::{PoemDatabase, VoidProps};
     use void_fe::utils::user_prefs::*;
     use void_fe::void_app::{self, VirtualDom};
-    pub use void_fe::components::void_content::RenderContent;
-    use void_fe::utils::helpers::get_homepage_paragraph;
 
     static POEM_DATABASE: OnceCell<PoemDatabase> = OnceCell::new();
 
@@ -29,7 +27,7 @@ pub mod web_app_backend {
                 "light" => ThemePref::Light,
                 "dark" => ThemePref::Dark,
                 _ => {
-                    cookies.remove("theme");
+                    cookies.remove(Cookie::named("theme"));
                     cookies.add(Cookie::new("theme", "auto"));
                     ThemePref::Auto
                 }
@@ -44,7 +42,7 @@ pub mod web_app_backend {
                 "nerd" => FontPref::NerdFont,
                 "open" => FontPref::OpenDyslexic,
                 _ => {
-                    cookies.remove("font");
+                    cookies.remove(Cookie::named("font"));
                     cookies.add(Cookie::new("font", "open"));
                     FontPref::OpenDyslexic
                 }
@@ -59,7 +57,7 @@ pub mod web_app_backend {
 
     async fn set_user_theme(cookies: &CookieJar<'_>, theme: &str) {
         if theme == "light" || theme == "dark" || theme == "auto" {
-            cookies.remove("theme");
+            cookies.remove(Cookie::named("theme"));
             cookies.add(Cookie::new("theme", format!("{theme}")));
         } else {
             return;
@@ -68,7 +66,7 @@ pub mod web_app_backend {
 
     async fn set_user_font(cookies: &CookieJar<'_>, font: &str) {
         if font == "nerd" || font == "open" {
-            cookies.remove("font");
+            cookies.remove(Cookie::named("font"));
             cookies.add(Cookie::new("font", format!("{font}")));
         } else {
             return;
@@ -86,13 +84,8 @@ pub mod web_app_backend {
                 .clone(),
             user_prefs: user_prefs,
         };
-        // let content_props = ContentProps {
+        let mut vdom = VirtualDom::new_with_props(void_app::HomePage, void_props);
-        //     content: get_homepage_paragraph(),
+        let _ = vdom.rebuild();
-        //     user_prefs: user_prefs
-        // };
-        // let mut vdom = VirtualDom::new_with_props(void_app::HomePage, void_props);
-        let mut vdom = VirtualDom::new_with_props(void_app::HomePage, void_fe::void_app::HomePageProps { props: void_props });
-        let _ = vdom.rebuild_in_place();
         let output = dioxus_ssr::render(&vdom);
         Template::render(
             "index",
@@ -109,7 +102,7 @@ pub mod web_app_backend {
     async fn settings(cookies: &CookieJar<'_>) -> Template {
         let user_prefs = get_user_prefs(cookies).await;
         let mut vdom = VirtualDom::new_with_props(void_app::SettingsPage, user_prefs);
-        let _ = vdom.rebuild_in_place();
+        let _ = vdom.rebuild();
         let output = dioxus_ssr::render(&vdom);
         Template::render(
             "index",
@@ -146,7 +139,7 @@ pub mod web_app_backend {
             user_prefs: user_prefs,
         };
         let mut vdom = VirtualDom::new_with_props(void_app::PoemListPage, void_props);
-        let _ = vdom.rebuild_in_place();
+        let _ = vdom.rebuild();
         let output = dioxus_ssr::render(&vdom);
         Template::render(
             "index",
@@ -171,7 +164,7 @@ pub mod web_app_backend {
             user_prefs: user_prefs,
         };
         let mut vdom = VirtualDom::new_with_props(void_app::PoemPage, void_props);
-        let _ = vdom.rebuild_in_place();
+        let _ = vdom.rebuild();
         let output = dioxus_ssr::render(&vdom);
         Template::render(
             "index",

void-fe/.vscode/settings.json

@@ -2,18 +2,15 @@
   "rust-analyzer.cargo.extraArgs": ["--profile", "rust-analyzer"],
   // "rust-analyzer.cargo.buildScripts.invocationLocation": "root",
   "rust-analyzer.cargo.target": "wasm32-unknown-unknown",
-  "rust-analyzer.cargo.buildScripts.overrideCommand": ["dx", "build"],
+  // "rust-analyzer.cargo.buildScripts.overrideCommand": ["dioxus", "build"],
-  "rust-analyzer.check.overrideCommand": ["dx", "check", "--quiet", "--message-format=json"],
+  "rust-analyzer.check.overrideCommand": ["cargo", "check", "--quiet", "--message-format=json"],
   "rust-analyzer.check.invocationLocation": "root",
-  "rust-analyzer.check.targets": ["wasm32-unknown-unknown"],
+  "rust-analyzer.check.targets": ["wasm32-unknown-unknown", "x86_64-unknown-linux-gnu"],
-  "rust-analyzer.runnables.command": "dx serve",
+  // "rust-analyzer.runnables.command": "dioxus serve",
   "rust-analyzer.cargo.buildScripts.enable": false,
   "rust-analyzer.linkedProjects": [
     "./Cargo.toml"
   ],
-  "rust-analyzer.diagnostics.disabled": ["unresolved-proc-macro"],
-  // "rust-analyzer.procMacro.enable": true,
-  // "rust-analyzer.procMacro.attributes.enable": true,
   "rust-analyzer.showUnlinkedFileNotification": false,
   "rust-analyzer.hover.actions.run.enable": true,
   "rust-analyzer.hover.actions.debug.enable": true,

void-fe/Cargo.toml

@@ -7,36 +7,30 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-# dioxus = { workspace = true }
+dioxus = { workspace = true }
 markdown = { workspace = true }
-once_cell = { workspace = true }
+dioxus-web = "0.3.1"
-# dioxus-web = "0.5.0-alpha.0"
+dioxus-autofmt = "0.3.0"
-dioxus-autofmt = "0.5.0-alpha.0"
 # WebAssembly Debug
 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.1"
+dioxus-use-storage = "0.3.0"
 rand = "0.8.5"
-dioxus-html-macro = "0.3.0"
 
 [dependencies.getrandom]
-version = "0.2.12"
+version = "0.2.9"
 features = ["js"]
 
 [dependencies.serde]
-version = "1.0.197"
+version = "1.0.160"
 features = ["derive"]
 
 [dependencies.dioxus-router]
-version = "0.5.0-alpha.0"
+version = "0.3.0"
-features = ["web"]
+features = ["query", "web"]
 
 [dependencies.rust-embed]
-version = "8.3.0"
+version = "6.6.1"
 features = ["debug-embed"]
-
-[dependencies.dioxus]
-version = "0.5.0-alpha.0"
-features = ["web"]

void-fe/src/components/void_buttons.rs

@@ -1,73 +1,72 @@
-use crate::utils::prop_structs::PoemDatabase;
-
 use super::super::utils::{
-    prop_structs::{ButtonProps, ContentChildren, VoidProps},
+    prop_structs::{ButtonProps, ContentChildren},
     user_prefs::{ThemedComponent, UserPrefs},
 };
 use dioxus::prelude::*;
-use dioxus_router::prelude::*;
 
-pub fn BackToHomePage(props: UserPrefs) -> Element {
+#[cfg(target_family = "wasm")]
-    let (user_theme, user_font) = props.clone().get_pref_classes(ThemedComponent::Button);
+use dioxus_router::Link;
+
+pub fn BackToHomePage(cx: Scope<UserPrefs>) -> Element {
+    let (user_theme, user_font) = cx.props.clone().get_pref_classes(ThemedComponent::Button);
     #[cfg(any(target_family = "windows", target_family = "unix"))]
-    return rsx! {
+    return cx.render(rsx!{
         a { class: "flex justify-center p-4 text-xl text-center ring-2 hover:animate-yip transition {user_theme} {user_font}",
             href: "/",
             p {
                 "Back to the homepage"
             }
         }
-    };
+    });
-    let mut poem_database = PoemDatabase::new();
-    poem_database.build_poem_database();
     #[cfg(target_family = "wasm")]
-    return render! {
+    return cx.render(rsx!{
         Link { class: "flex justify-center p-4 text-xl text-center ring-2 hover:animate-yip transition {user_theme} {user_font}",
-            to: crate::void_app::Route::HomePage { props:VoidProps{slug: Some("/".to_string()), poem_database: poem_database.clone(), user_prefs: props.clone(),}},
+            to: "/",
             p {
                 "Back to the homepage"
             }
         }
-    };
+    });
 }
 
-pub fn NavigationButton(props: ButtonProps) -> Element {
+pub fn NavigationButton(cx: Scope<ButtonProps>) -> Element {
-    let (user_theme, mut user_font) = props
+    let (user_theme, mut user_font) = cx
+        .props
         .user_prefs
         .clone()
         .get_pref_classes(ThemedComponent::Button);
-    let title = props.title.clone();
+    let title = cx.props.title.clone();
     let title_ref = title.as_str();
-    let slug = props.slug.clone();
+    let slug = cx.props.slug.clone();
     let slug_ref = slug.as_str();
 
-    match props.override_font {
+    match &cx.props.override_font {
         Some(font) => user_font = font.clone(),
         None => (),
     }
 
     #[cfg(any(target_family = "windows", target_family = "unix"))]
-    return rsx! {
+    return cx.render(rsx!{
         a { class: "flex basis-full justify-center p-4 ml-2 mr-2 text-xl text-center ring-2 hover:animate-yip transition {user_theme} {user_font}",
             href: "{slug_ref}",
-            dangerous_inner_html: "{title_ref}",
+            "{title_ref}"
         }
-    };
+    });
     #[cfg(target_family = "wasm")]
-    return rsx! {
+    return cx.render(rsx!{
         Link { class: "flex basis-full justify-center p-4 ml-2 mr-2 text-xl text-center ring-2 hover:animate-yip transition {user_theme} {user_font}",
             to: "{slug_ref}",
             div {
                 dangerous_inner_html: "{title_ref}",
             }
         }
-    };
+    });
 }
 
-pub fn ButtonGroup(props: ContentChildren) -> Element {
+pub fn ButtonGroup<'a>(cx: Scope<'a, ContentChildren<'a>>) -> Element {
-    rsx! {
+    cx.render(rsx! {
         div { class: "flex md:flex-row md:space-y-0 flex-col space-y-4",
-            {props.children}
+            &cx.props.children
         }
-    }
+    })
 }

void-fe/src/components/void_content.rs

@@ -1,14 +1,21 @@
 // Might wanna move stuff form `void_poem.rs` into here...
+use crate::utils::prop_structs::{ContentProps};
 use super::super::utils::user_prefs::ThemedComponent;
-use crate::utils::prop_structs::ContentProps;
 use dioxus::prelude::*;
 
-pub fn RenderContent(props: ContentProps) -> Element {
+pub fn RenderContent(cx: Scope<ContentProps>) -> Element {
-    let (user_theme, user_font) = props.user_prefs.get_pref_classes(ThemedComponent::Card);
+    let (user_theme, user_font) = cx.props.user_prefs.get_pref_classes(ThemedComponent::Card);
-    let content = props.content;
+    let content = &cx.props.content;
-    return rsx! {
+    #[cfg(any(target_family = "windows", target_family = "unix"))]
+    return cx.render(rsx!{
+        div { class: "flex p-4 md:pl-8 md:pr-8 ml-4 mr-4 text-md text-center ring-4 {user_theme} {user_font}",
+            "{content}",
+        }
+    });
+    #[cfg(target_family = "wasm")]
+    return cx.render(rsx!{
         div { class: "flex p-4 md:pl-8 md:pr-8 ml-4 mr-4 text-md text-center ring-4 {user_theme} {user_font}",
             dangerous_inner_html: "{content}",
         }
-    };
+    });
 }

void-fe/src/components/void_footer.rs

@@ -4,17 +4,17 @@ use crate::{
 };
 use dioxus::prelude::*;
 
-pub fn Footer(props: UserPrefs) -> Element {
+pub fn Footer(cx: Scope<UserPrefs>) -> Element {
-    rsx! {
+    cx.render(rsx! {
-        MutantStandardFooter { theme: props.clone().get_theme(), font: props.clone().get_font() }
+        MutantStandardFooter { theme: cx.props.clone().get_theme(), font: cx.props.clone().get_font() }
-    }
+    })
 }
 
-fn MutantStandardFooter(props: UserPrefs) -> Element {
+fn MutantStandardFooter(cx: Scope<UserPrefs>) -> Element {
-    let user_prefs = UserPrefs::new(props.clone().get_theme(), props.clone().get_font());
+    let user_prefs = UserPrefs::new(cx.props.clone().get_theme(), cx.props.clone().get_font());
-    let user_theme = props.get_theme_classes(ThemedComponent::Card);
+    let user_theme = cx.props.get_theme_classes(ThemedComponent::Card);
-    let user_font = props.get_font_class();
+    let user_font = cx.props.get_font_class();
-    rsx! {
+    cx.render(rsx!{
         div { class: "p-4 flex flex-col space-y-4 mx-auto max-w-full justify-center ring-4 {user_theme} {user_font}",
             ButtonGroup{
                 NavigationButton { title: "⚙️ Settings".to_string(), slug: "/settings".to_string(), user_prefs: user_prefs.clone() }
@@ -24,5 +24,5 @@ fn MutantStandardFooter(props: UserPrefs) -> Element {
                 "This site uses Mutant Standard emoji, which are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License"
             }
         }
-    }
+    })
 }

void-fe/src/components/void_page.rs

@@ -1,13 +1,13 @@
 use crate::utils::prop_structs::PageChildren;
 use dioxus::prelude::*;
 
-pub fn PageBase(props: PageChildren) -> Element {
+pub fn PageBase<'a>(cx: Scope<'a, PageChildren<'a>>) -> Element {
-    rsx! {
+    cx.render(rsx! {
         span { hidden: true,
             a { rel: "me", href: "https://yiff.life/@werefox", "Mastodon" }
         }
         div { class: "min-h-screen",
-            div { class: "container space-y-4 pt-4 pb-4 max-w-3xl", {props.children} }
+            div { class: "container space-y-4 pt-4 pb-4 max-w-3xl", &cx.props.children }
         }
-    }
+    })
 }

void-fe/src/components/void_poem.rs

@@ -4,54 +4,57 @@ use crate::utils::prop_structs::VoidProps;
 use crate::utils::{prop_structs::PoemChildren, user_prefs::ThemedComponent};
 use dioxus::prelude::*;
 
-pub fn PoemList(props: VoidProps) -> Element {
+pub fn PoemList(cx: Scope<VoidProps>) -> Element {
-    let poem_list = props.poem_database.get_poem_list();
+    let poem_list = cx.props.poem_database.get_poem_list();
-    rsx! {
+    cx.render(rsx! {
         ul { class: "flex flex-col space-y-4",
-            {poem_list.into_iter().map(|p| {
+            poem_list.into_iter().map(|p| {
                 let slug = format!("/poems/{}", p.0);
                 rsx!{
-                    NavigationButton { title: p.1, slug: slug, user_prefs: props.user_prefs.clone() }
+                    NavigationButton { title: p.1, slug: slug, user_prefs: cx.props.user_prefs.clone() }
                 }
-            })}
+            })
         }
-    }
+    })
 }
 
-pub fn MakePoem(props: PoemChildren) -> Element {
+pub fn MakePoem<'a>(cx: Scope<'a, PoemChildren<'a>>) -> Element {
-    rsx! {
+    cx.render(rsx! {
         div { class: "flex-col space-y-4",
-            {props.children}
+            &cx.props.children
         }
-    }
+    })
 }
 
-pub fn GetPoem(props: VoidProps) -> Element {
+pub fn GetPoem(cx: Scope<VoidProps>) -> Element {
-    let poem_database = props.poem_database;
+    let poem_database = &cx.props.poem_database;
-    let slug = String::from(props.slug.clone().expect("No slug specified."));
+    let slug = String::from(&cx.props.slug.clone().expect("No slug specified."));
     let poem_struct = poem_database.get_poem(slug.clone());
-    rsx! {
+    cx.render(rsx! {
-        Title { title: poem_struct.title.clone(), is_html: true, user_prefs: props.user_prefs.clone() }
+        Title { title: poem_struct.title.clone(), is_html: true, user_prefs: cx.props.user_prefs.clone() }
         MakePoem{
-            PoemContent { slug: slug, poem_database: poem_database.clone(), user_prefs: props.user_prefs.clone() }
+            PoemContent { slug: slug, poem_database: poem_database.clone(), user_prefs: cx.props.user_prefs.clone() }
         }
-    }
+    })
 }
 
-pub fn PoemContent(props: VoidProps) -> Element {
+pub fn PoemContent(cx: Scope<VoidProps>) -> Element {
-    let (user_theme, user_font) = props.user_prefs.get_pref_classes(ThemedComponent::Card);
+    let (user_theme, user_font) = cx.props.user_prefs.get_pref_classes(ThemedComponent::Card);
-    let slug = props
+    let slug = cx
+        .props
         .slug
         .as_ref()
         .expect("Received slug for poem selection.");
-    let content = props
+    let content = &cx
+        .props
         .poem_database
         .poem_hashmap
         .get(slug)
         .expect("Grabbed poem stuct from databse.")
         .content
         .clone();
-    let creation_date = props
+    let creation_date = &cx
+        .props
         .poem_database
         .poem_hashmap
         .get(slug)
@@ -60,18 +63,18 @@ pub fn PoemContent(props: VoidProps) -> Element {
         .clone();
     let publish_string = "\u{003C}br\u{003E}\u{003C}br\u{003E}\u{003C}br\u{003E}Published: ";
     #[cfg(any(target_family = "unix", target_family = "windows"))]
-    return rsx! {
+    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 ring-4 {user_theme} {user_font}",
                 summary { class: "group-open:before:content-['Close'] before:content-['Open'] flex justify-center p-2 hover:animate-yip transition ring-2 {user_theme} {user_font}",
                 }
-                div { class: "flex flex-col space-y-4 py-4 ml-4 mr-4", dangerous_inner_html: "{content}{publish_string}{creation_date}"
+                div { class: "flex flex-col space-y-4 py-4 ml-4 mr-4", "{content}{publish_string}{creation_date}"
                 }
             }
         }
-    };
+    });
     #[cfg(target_family = "wasm")]
-    return rsx! {
+    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 ring-4 {user_theme} {user_font}",
                 summary { class: "group-open:before:content-['Close'] before:content-['Open'] flex justify-center p-2 hover:animate-yip transition ring-2 {user_theme} {user_font}",
@@ -81,5 +84,5 @@ pub fn PoemContent(props: VoidProps) -> Element {
                 }
             }
         }
-    };
+    });
 }

void-fe/src/components/void_title.rs

@@ -2,40 +2,40 @@ use crate::utils::prop_structs::TitleProps;
 use super::super::utils::user_prefs::ThemedComponent;
 use dioxus::prelude::*;
 
-pub fn Title(props: TitleProps) -> Element {
+pub fn Title(cx: Scope<TitleProps>) -> Element {
-    let user_prefs = props.user_prefs.clone();
+    let user_prefs = cx.props.user_prefs.clone();
     let title_classes = user_prefs.get_theme_classes(ThemedComponent::Card);
-    let title = props.title.clone();
+    let title = cx.props.title.clone();
-    let is_html = props.is_html;
+    let is_html = cx.props.is_html;
-    rsx!{
+    cx.render(rsx!{
         div { class: "p-4 ring-4 {title_classes}",
             span { class: "flex flex-row mx-auto max-w-full justify-center text-xl text-center",
                 TitleHtml { title: title, is_html: is_html, user_prefs: user_prefs }
             }
         }
-    }
+    })
 }
 
-fn TitleHtml(props: TitleProps) -> Element {
+fn TitleHtml(cx: Scope<TitleProps>) -> Element {
-    let title = props.title.clone();
+    let title = cx.props.title.clone();
-    if props.is_html {
+    if cx.props.is_html {
         #[cfg(any(target_family = "unix", target_family = "windows"))]
-        return rsx! {
+        return cx.render(rsx! {
             span { class: "flex flex-row align-middle mx-auto max-w-full justify-center",
-                dangerous_inner_html: "{title}&nbsp;"
+                "{title}&nbsp;"
             }
-        };
+        });
         #[cfg(target_family = "wasm")]
-        return rsx! {
+        return cx.render(rsx! {
             span { class: "flex flex-row align-middle mx-auto max-w-full justify-center",
                 div { dangerous_inner_html: "{title}", }
             }
-        };
+        });
     } else {
-        return rsx! {
+        return cx.render(rsx! {
             span {
                 "{title}"
             }
-        };
+        });
     }
 }

void-fe/src/lib.rs

@@ -4,10 +4,9 @@
 
 #![allow(non_snake_case)]
 
-use utils::{prop_structs::PoemDatabase, user_prefs::UserPrefs};
+mod components;
-
-pub mod components;
 pub mod utils;
+
 /// A module that handles the functions needed
 /// to render the site.
 pub mod void_app {
@@ -28,80 +27,45 @@ pub mod void_app {
     #[cfg(any(target_family = "wasm"))]
     use dioxus_helmet::Helmet;
     #[cfg(any(target_family = "wasm"))]
-    use dioxus_router::prelude::*;
+    use dioxus_router::{Link, Redirect, Route, Router};
     #[cfg(any(target_family = "wasm"))]
     use dioxus_use_storage::use_local_storage;
-    #[cfg(any(target_family = "wasm"))]
-    use once_cell::sync::OnceCell;
-    #[cfg(any(target_family = "wasm"))]
-    static POEM_DATABASE: OnceCell<PoemDatabase> = OnceCell::new();
 
     #[cfg(target_family = "wasm")]
-    #[derive(Routable, PartialEq, Clone)]
+    pub fn DioxusApp(cx: Scope) -> Element {
-    pub enum Route {
-        #[route("/")]
-        // #[redirect("/")]//, || Route::HomePage {slug: "/".to_string(), poem_database: poem_database.clone(), user_prefs: user_prefs.clone(),})]
-        HomePage { props: VoidProps },
-        #[route("/poems")]
-        PoemListPage {
-            slug: String,
-            poem_database: PoemDatabase,
-            user_prefs: UserPrefs,
-        },
-        #[route("/poems/:slug")]
-        PoemPage {
-            slug: String,
-            poem_database: PoemDatabase,
-            user_prefs: UserPrefs,
-        },
-        #[route("/settings")]
-        SettingsPage { theme: ThemePref, font: FontPref },
-        // #[route("/settings/dark")]
-        // SettingsPage { theme: String, font: String },
-        // #[route("/settings/font")]
-        // SettingsPage { theme: String, font: String },
-        #[route("")]
-        PageNotFound {},
-    }
-    #[cfg(target_family = "wasm")]
-    pub fn DioxusApp() -> Element {
-        // let mut poem_database = PoemDatabase::new();
-        // poem_database.build_poem_database();
-
-        // let user_prefs = UserPrefs::new(ThemePref::Auto, FontPref::OpenDyslexic);
         let mut poem_database = PoemDatabase::new();
         poem_database.build_poem_database();
-        POEM_DATABASE
-            .set(poem_database)
-            .expect("Could not initialize poem database.");
 
-        rsx! {
+        let user_prefs = UserPrefs::new(ThemePref::Auto, FontPref::OpenDyslexic);
-            Router::<Route> {}
+
-        }
+        cx.render(rsx! {
+            Router {
+                Route { to: "/", HomePage { slug: "/".to_string(), poem_database: poem_database.clone(), user_prefs: user_prefs.clone(), } }
+                Route { to: "/poems", PoemListPage { slug: "/poems".to_string(), poem_database: poem_database.clone(), user_prefs: user_prefs.clone(), } }
+                Route { to: "/poems/:slug", PoemPage { slug: "".to_string(), poem_database: poem_database.clone(), user_prefs: user_prefs.clone(), } }
+                Route { to: "/settings", SettingsPage { theme: user_prefs.clone().get_theme(), font: user_prefs.clone().get_font() } }
+                Route { to: "/settings/dark", SettingsPage { theme: user_prefs.clone().get_theme(), font: user_prefs.clone().get_font() } }
+                Route { to: "/settings/font", SettingsPage { theme: user_prefs.clone().get_theme(), font: user_prefs.clone().get_font() } }
+                Route { to: "", PageNotFound {} }
+            }
+        })
     }
 
     #[cfg(target_family = "wasm")]
-    fn PageNotFound() -> Element {
+    fn PageNotFound(cx: Scope) -> Element {
-        rsx! {
+        cx.render(rsx! {
             p { "That page doesn't exist, sorry!" }
-        }
+            Redirect { to: "/" }
+        })
     }
 
-    #[component]
     /// Renders the app and returns the rendered Element.
-    pub fn HomePage(props: VoidProps) -> Element {
+    pub fn HomePage(cx: Scope<VoidProps>) -> Element {
-        #[cfg(target_family = "wasm")]
+        let poem_database = &cx.props.poem_database;
-        let poem_database = POEM_DATABASE
+        let user_prefs = cx.props.user_prefs.clone();
-            .get()
-            .expect("Poem database is not initialized")
-            .clone();
-
-        #[cfg(any(target_family = "unix", target_family = "windows"))]
-        let poem_database = props.poem_database.clone();
-        let user_prefs = props.user_prefs.clone();
         let (user_theme, user_font) = user_prefs.get_pref_classes(ThemedComponent::Page);
         let page_title = "A Letter to the Void".to_string();
-        rsx! {
+        cx.render(rsx!{
             div { class: "{user_theme} {user_font}",
                 PageBase {
                     Title { title: page_title, is_html: false, user_prefs: user_prefs.clone() }
@@ -115,21 +79,15 @@ pub mod void_app {
                     Footer { theme: user_prefs.clone().get_theme(), font: user_prefs.get_font() }
                 }
             }
-        }
+        })
     }
 
     /// Renders the app and returns the rendered Element.
-    pub fn PoemListPage(props: VoidProps) -> Element {
+    pub fn PoemListPage(cx: Scope<VoidProps>) -> Element {
-        #[cfg(target_family = "wasm")]
+        let poem_database = &cx.props.poem_database;
-        let poem_database = POEM_DATABASE
+        let user_prefs = cx.props.user_prefs.clone();
-            .get()
-            .expect("Poem database is not initialized")
-            .clone();
-        #[cfg(any(target_family = "unix", target_family = "windows"))]
-        let poem_database = props.poem_database.clone();
-        let user_prefs = props.user_prefs.clone();
         let (user_theme, user_font) = user_prefs.get_pref_classes(ThemedComponent::Page);
-        rsx! {
+        cx.render(rsx! {
             div { class: "{user_theme} {user_font}",
                 PageBase {
                     Title { title: "A Letter to the Void".to_string(), is_html: false, user_prefs: user_prefs.clone() }
@@ -139,32 +97,27 @@ pub mod void_app {
                     Footer { theme: user_prefs.clone().get_theme(), font: user_prefs.get_font() }
                 }
             }
-        }
+        })
     }
 
-    pub fn PoemPage(props: VoidProps) -> Element {
+    pub fn PoemPage(cx: Scope<VoidProps>) -> Element {
-        #[cfg(target_family = "wasm")]
+        let poem_database = &cx.props.poem_database;
-        let poem_database = POEM_DATABASE
+        let user_prefs = cx.props.user_prefs.clone();
-            .get()
-            .expect("Poem database is not initialized")
-            .clone();
-        #[cfg(any(target_family = "unix", target_family = "windows"))]
-        let poem_database = props.poem_database.clone();
-        let user_prefs = props.user_prefs.clone();
         let (user_theme, user_font) = user_prefs.get_pref_classes(ThemedComponent::Page);
-        // #[cfg(any(target_family = "unix", target_family = "windows"))]
+        #[cfg(any(target_family = "unix", target_family = "windows"))]
-        let slug = props
+        let slug = &cx
+            .props
             .slug
             .as_ref()
-            .expect("A slug was given in the props.")
+            .expect("A slug was given in the pops.")
             .clone();
-        // #[cfg(target_family = "wasm")]
+        #[cfg(target_family = "wasm")]
-        // let slug = String::from(
+        let slug = String::from(
-        //     use_route()
+            dioxus_router::use_route(cx)
-        //         .segment("slug")
+                .segment("slug")
-        //         .expect("No slug specified."),
+                .expect("No slug specified."),
-        // );
+        );
-        rsx! {
+        cx.render(rsx!{
             div { class: "{user_theme} {user_font}",
                 PageBase {
                     BackToHomePage { theme: user_prefs.clone().get_theme(), font: user_prefs.clone().get_font() }
@@ -180,15 +133,15 @@ pub mod void_app {
                     Footer { theme: user_prefs.clone().get_theme(), font: user_prefs.get_font() }
                 }
             }
-        }
+        })
     }
 
-    pub fn SettingsPage(props: UserPrefs) -> Element {
+    pub fn SettingsPage(cx: Scope<UserPrefs>) -> Element {
-        let user_prefs = props.clone();
+        let user_prefs = cx.props.clone();
         let (user_theme, user_font) = user_prefs.get_pref_classes(ThemedComponent::Page);
         // Get rid of this and create a general card component with children.
         let (user_theme_card, user_font_card) = user_prefs.get_pref_classes(ThemedComponent::Card);
-        rsx! {
+        cx.render(rsx! {
             div { class: "{user_theme} {user_font}",
                 PageBase {
                     Title { title: "Settings".to_string(), is_html: false, user_prefs: user_prefs.clone() }
@@ -209,14 +162,14 @@ pub mod void_app {
                                 "Font"
                             }
                             ButtonGroup {
-                                NavigationButton { title: "Nerd Font".to_string(), slug: "/settings/?font=nerd".to_string(), user_prefs: user_prefs.clone(), override_font: "font-nerd".to_string() }
+                                NavigationButton { title: "Nerd Font".to_string(), slug: "/settings/?font=nerd".to_string(), user_prefs: user_prefs.clone() override_font: "font-nerd".to_string() }
-                                NavigationButton { title: "Open Dyslexic".to_string(), slug: "/settings/?font=open".to_string(), user_prefs: user_prefs.clone(), override_font: "font-open".to_string() }
+                                NavigationButton { title: "Open Dyslexic".to_string(), slug: "/settings/?font=open".to_string(), user_prefs: user_prefs.clone() override_font: "font-open".to_string() }
                             }
                         }
                     }
                     BackToHomePage { theme: user_prefs.clone().get_theme(), font: user_prefs.get_font() }
                 }
             }
-        }
+        })
     }
 }

void-fe/src/main.rs

@@ -18,5 +18,5 @@ fn main() {
     wasm_logger::init(wasm_logger::Config::default());
     console_error_panic_hook::set_once();
 
-    dioxus::prelude::launch(void_app::DioxusApp);
+    dioxus_web::launch(void_app::DioxusApp);
 }

void-fe/src/utils/helpers.rs

@@ -23,14 +23,6 @@ impl PoemDatabase {
     // There's no need to actually make a database yet, but maybe in the future...
     #[cfg(any(target_family = "unix", target_family = "windows"))]
     pub async fn build_poem_database(&mut self) {
-        use dioxus::dioxus_core::Component;
-        use markdown::CompileOptions;
-        let markdown_options = &mut Options::gfm();
-        markdown_options.compile = CompileOptions {
-            allow_dangerous_html: true,
-            ..CompileOptions::default()
-        };
-
         for p in Poems::iter() {
             let filename = p.to_string();
             let poem_content = Poems::get(&filename).expect("Found poem {filename:?}");
@@ -40,7 +32,7 @@ impl PoemDatabase {
             let poem_title = poem_to_str.next().expect("No title specified.");
             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, markdown_options).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();
             let mut split_filename = filename.trim_end_matches(".md").split("_");
@@ -49,7 +41,7 @@ impl PoemDatabase {
             self.poem_list
                 .push((creation_date.to_string(), slug.to_string()));
             let poem_struct = PoemStruct {
-                title: poem_title_to_html_string,
+                title: poem_title_to_html_string.to_string(),
                 content: poem_content_to_html_string,
                 creation_date: creation_date.to_string(),
             };

void-fe/src/utils/prop_structs.rs

@@ -1,28 +1,27 @@
 use std::collections::HashMap;
-// use crate::void_app::{Element, Props};
+use crate::void_app::{Element, Props};
 use super::user_prefs::UserPrefs;
-use dioxus::prelude::*;
 
-#[derive(PartialEq, Props, Clone)]
+#[derive(PartialEq, Props)]
 pub struct PoemRequest {
     pub slug: String,
     pub user_prefs: UserPrefs,
 }
 
-#[derive(PartialEq, Props, Clone)]
+#[derive(PartialEq, Props)]
 pub struct TitleProps {
     pub title: String,
     pub is_html: bool,
     pub user_prefs: UserPrefs,
 }
 
-#[derive(PartialEq, Props, Clone)]
+#[derive(PartialEq, Props)]
 pub struct ContentProps {
     pub content: String,
     pub user_prefs: UserPrefs,
 }
 
-#[derive(PartialEq, Props, Clone)]
+#[derive(PartialEq, Props)]
 pub struct ButtonProps {
     pub title: String,
     pub slug: String,
@@ -30,14 +29,14 @@ pub struct ButtonProps {
     pub override_font: Option<String>,
 }
 
-#[derive(Default, PartialEq, Props, Clone)]
+#[derive(PartialEq, Props)]
 pub struct VoidProps {
     pub slug: Option<String>,
     pub poem_database: PoemDatabase,
     pub user_prefs: UserPrefs,
 }
 
-#[derive(Default, PartialEq, Props, Clone, Debug)]
+#[derive(PartialEq, Props, Clone, Debug)]
 pub struct PoemDatabase {
     pub poem_list: Vec<(String, String)>,
     pub poem_hashmap: HashMap<String, PoemStruct>,
@@ -51,17 +50,17 @@ pub struct PoemStruct {
 }
 
 // These next three should all just be one prop.
-#[derive(PartialEq, Props, Clone)]
+#[derive(Props)]
-pub struct PoemChildren {
+pub struct PoemChildren<'a> {
-    pub children: Element,
+    pub children: Element<'a>,
 }
 
-#[derive(PartialEq, Props, Clone)]
+#[derive(Props)]
-pub struct PageChildren {
+pub struct PageChildren<'a> {
-    pub children: Element,
+    pub children: Element<'a>,
 }
 
-#[derive(PartialEq, Props, Clone)]
+#[derive(Props)]
-pub struct ContentChildren {
+pub struct ContentChildren<'a> {
-    pub children: Element,
+    pub children: Element<'a>,
 }

void-fe/src/utils/user_prefs.rs

@@ -1,22 +1,20 @@
 use dioxus::prelude::*;
 
-#[derive(Default, PartialEq, Props, Clone)]
+#[derive(PartialEq, Props, Clone)]
 pub struct UserPrefs {
     theme: ThemePref,
     font: FontPref,
 }
 
-#[derive(Default, PartialEq, Clone)]
+#[derive(PartialEq, Clone)]
 pub enum ThemePref {
     Light,
     Dark,
-    #[default]
     Auto,
 }
 
-#[derive(Default, PartialEq, Clone)]
+#[derive(PartialEq, Clone)]
 pub enum FontPref {
-    #[default]
     NerdFont,
     OpenDyslexic,
 }
@@ -43,9 +41,9 @@ impl UserPrefs {
     // class: "dark:text-alice-werefox-grey-light dark:hover:text-alice-werefox-blue-light dark:hover:ring-alice-werefox-blue"
     // class: "text-alice-werefox-grey-light hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue"
 
-    const PAGE_CLASSES: &'static str = "bg-alice-werefox-grey-light dark:bg-alice-werefox-grey";
+    const PAGE_CLASSES: &str = "bg-alice-werefox-grey-light dark:bg-alice-werefox-grey";
-    const CARD_CLASSES: &'static str = "bg-alice-werefox-grey-lightest ring-alice-werefox-red-dark text-alice-werefox-grey-dark dark:bg-alice-werefox-grey-dark dark:ring-alice-werefox-red dark:text-alice-werefox-grey-light";
+    const CARD_CLASSES: &str = "bg-alice-werefox-grey-lightest ring-alice-werefox-red-dark text-alice-werefox-grey-dark dark:bg-alice-werefox-grey-dark dark:ring-alice-werefox-red dark:text-alice-werefox-grey-light";
-    const BUTTON_CLASSES: &'static str = "bg-alice-werefox-grey-lightest ring-alice-werefox-red-dark text-alice-werefox-grey-dark hover:text-alice-werefox-blue-dark hover:ring-alice-werefox-blue dark:bg-alice-werefox-grey-dark dark:ring-alice-werefox-red dark:text-alice-werefox-grey-light dark:hover:text-alice-werefox-blue-light dark:hover:ring-alice-werefox-blue";
+    const BUTTON_CLASSES: &str = "bg-alice-werefox-grey-lightest ring-alice-werefox-red-dark text-alice-werefox-grey-dark hover:text-alice-werefox-blue-dark hover:ring-alice-werefox-blue dark:bg-alice-werefox-grey-dark dark:ring-alice-werefox-red dark:text-alice-werefox-grey-light dark:hover:text-alice-werefox-blue-light dark:hover:ring-alice-werefox-blue";
 
     pub fn new(theme: ThemePref, font: FontPref) -> UserPrefs {
         UserPrefs { theme, font }