2023-04-07 17:16:43 -05:00
|
|
|
//! # Rust Letter Frontend
|
|
|
|
//!
|
|
|
|
//! Rendering functions for the site using [Dioxus](https://dioxuslabs.com/).
|
|
|
|
|
|
|
|
#![allow(non_snake_case)]
|
|
|
|
|
2023-04-13 12:51:25 -05:00
|
|
|
mod components;
|
|
|
|
pub mod utils;
|
|
|
|
|
2023-04-07 17:16:43 -05:00
|
|
|
/// A module that handles the functions needed
|
|
|
|
/// to render the site.
|
|
|
|
pub mod void_app {
|
2023-04-16 21:46:10 -05:00
|
|
|
|
2023-04-07 17:16:43 -05:00
|
|
|
// import the prelude to get access to the `rsx!` macro and the `Scope` and `Element` types
|
|
|
|
pub use dioxus::prelude::*;
|
2023-04-13 12:51:25 -05:00
|
|
|
|
|
|
|
use crate::components::void_buttons::*;
|
2023-04-16 21:46:10 -05:00
|
|
|
use crate::components::void_content::*;
|
2023-04-13 12:51:25 -05:00
|
|
|
use crate::components::void_footer::*;
|
2023-04-16 21:46:10 -05:00
|
|
|
use crate::components::void_page::PageBase;
|
2023-04-13 12:51:25 -05:00
|
|
|
use crate::components::void_poem::*;
|
|
|
|
use crate::components::void_title::*;
|
|
|
|
use crate::utils::helpers;
|
|
|
|
use crate::utils::prop_structs::*;
|
2023-04-16 21:46:10 -05:00
|
|
|
use crate::utils::user_prefs::*;
|
2023-04-07 17:16:43 -05:00
|
|
|
|
2023-04-08 20:47:51 -05:00
|
|
|
#[cfg(any(target_family = "wasm"))]
|
2023-04-09 11:27:28 -05:00
|
|
|
use dioxus_helmet::Helmet;
|
|
|
|
#[cfg(any(target_family = "wasm"))]
|
2023-04-16 21:46:10 -05:00
|
|
|
use dioxus_router::{Link, Redirect, Route, Router};
|
2023-04-12 17:25:14 -05:00
|
|
|
#[cfg(any(target_family = "wasm"))]
|
|
|
|
use dioxus_use_storage::use_local_storage;
|
|
|
|
|
2023-04-13 12:51:25 -05:00
|
|
|
#[cfg(target_family = "wasm")]
|
2023-04-08 20:47:51 -05:00
|
|
|
pub fn DioxusApp(cx: Scope) -> Element {
|
2023-04-12 17:25:14 -05:00
|
|
|
// use dioxus_router::Redirect;
|
2023-04-09 11:27:28 -05:00
|
|
|
|
2023-04-16 21:46:10 -05:00
|
|
|
let user_prefs = UserPrefs::new(ThemePref::Auto, FontPref::OpenDyslexic);
|
|
|
|
|
2023-04-08 20:47:51 -05:00
|
|
|
cx.render(rsx! {
|
2023-04-16 21:46:10 -05:00
|
|
|
div { class: "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 let button_classes hover:text-alice-werefox-blue-dark hover:ring-alice-werefox-blue dark:hover:text-alice-werefox-blue-light dark:hover:ring-alice-werefox-blue hover:animate-yip transition" }
|
2023-04-08 20:47:51 -05:00
|
|
|
Router {
|
2023-04-16 21:46:10 -05:00
|
|
|
Route { to: "/",
|
|
|
|
self::HomePage { user_prefs }
|
2023-04-13 12:51:25 -05:00
|
|
|
}
|
2023-04-16 21:46:10 -05:00
|
|
|
Route { to: "/poems", PoemListPage { user_prefs } }
|
|
|
|
Route { to: "/poems/:slug", PoemPage { slug: "".to_string(), user_prefs } }
|
|
|
|
Route { to: "/settings", SettingsPage { user_prefs } }
|
|
|
|
Route { to: "/settings/dark", SettingsPage { user_prefs } }
|
|
|
|
Route { to: "/settings/font", SettingsPage { user_prefs } }
|
2023-04-09 11:27:28 -05:00
|
|
|
Route { to: "", PageNotFound {} }
|
2023-04-08 20:47:51 -05:00
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2023-04-09 11:27:28 -05:00
|
|
|
#[cfg(target_family = "wasm")]
|
|
|
|
fn PageNotFound(cx: Scope) -> Element {
|
|
|
|
cx.render(rsx! {
|
|
|
|
p { "That page doesn't exist, sorry!" }
|
|
|
|
Redirect { to: "/" }
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2023-04-07 17:16:43 -05:00
|
|
|
/// Renders the app and returns the rendered Element.
|
2023-04-16 21:46:10 -05:00
|
|
|
pub fn HomePage(cx: Scope<UserPrefs>) -> Element {
|
|
|
|
let user_prefs = cx.props.clone();
|
2023-04-17 18:04:18 -05:00
|
|
|
let (user_theme, user_font) = user_prefs.get_pref_classes(ThemedComponent::Page);
|
2023-04-12 17:25:14 -05:00
|
|
|
let title = "A Letter to the Void".to_string();
|
2023-04-08 20:47:51 -05:00
|
|
|
cx.render(rsx!{
|
2023-04-16 21:46:10 -05:00
|
|
|
div { class: "{user_theme} {user_font}",
|
|
|
|
PageBase {
|
2023-04-17 18:04:18 -05:00
|
|
|
Title { title: title, is_html: false, user_prefs: user_prefs.clone() }
|
|
|
|
RenderContent { content: helpers::get_homepage_paragraph(), user_prefs: user_prefs.clone() }
|
2023-04-16 21:46:10 -05:00
|
|
|
ButtonGroup {
|
2023-04-17 18:04:18 -05:00
|
|
|
NavigationButton { title: "See Latest Entry".to_string(), slug: helpers::get_latest_entry("".to_string()), user_prefs: user_prefs.clone() }
|
|
|
|
NavigationButton { title: "See Oldest Entry".to_string(), slug: helpers::get_oldest_entry("".to_string()), user_prefs: user_prefs.clone() }
|
|
|
|
NavigationButton { title: "See All Entries".to_string(), slug: "/poems".to_string(), user_prefs: user_prefs.clone() }
|
2023-04-10 20:37:40 -05:00
|
|
|
}
|
2023-04-17 18:04:18 -05:00
|
|
|
Footer { theme: user_prefs.clone().get_theme(), font: user_prefs.get_font() }
|
2023-04-07 17:16:43 -05:00
|
|
|
}
|
|
|
|
}
|
2023-04-08 20:47:51 -05:00
|
|
|
})
|
2023-04-07 17:16:43 -05:00
|
|
|
}
|
|
|
|
|
2023-04-10 20:37:40 -05:00
|
|
|
/// Renders the app and returns the rendered Element.
|
2023-04-16 21:46:10 -05:00
|
|
|
pub fn PoemListPage(cx: Scope<UserPrefs>) -> Element {
|
|
|
|
let user_prefs = cx.props.clone();
|
2023-04-17 18:04:18 -05:00
|
|
|
let (user_theme, user_font) = user_prefs.get_pref_classes(ThemedComponent::Page);
|
2023-04-16 21:46:10 -05:00
|
|
|
cx.render(rsx! {
|
|
|
|
div { class: "{user_theme} {user_font}",
|
|
|
|
PageBase {
|
2023-04-17 18:04:18 -05:00
|
|
|
Title { title: "A Letter to the Void".to_string(), is_html: false, user_prefs: user_prefs.clone() }
|
|
|
|
BackToHomePage { theme: user_prefs.clone().get_theme(), font: user_prefs.clone().get_font() }
|
|
|
|
PoemList { theme: user_prefs.clone().get_theme(), font: user_prefs.clone().get_font() }
|
|
|
|
BackToHomePage { theme: user_prefs.clone().get_theme(), font: user_prefs.clone().get_font() }
|
|
|
|
Footer { theme: user_prefs.clone().get_theme(), font: user_prefs.get_font() }
|
2023-04-10 20:37:40 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2023-04-08 20:47:51 -05:00
|
|
|
pub fn PoemPage(cx: Scope<PoemRequest>) -> Element {
|
2023-04-16 21:46:10 -05:00
|
|
|
let user_prefs = cx.props.user_prefs.clone();
|
2023-04-17 18:04:18 -05:00
|
|
|
let (user_theme, user_font) = user_prefs.get_pref_classes(ThemedComponent::Page);
|
2023-04-12 17:25:14 -05:00
|
|
|
#[cfg(any(target_family = "unix", target_family = "windows"))]
|
2023-04-11 19:42:46 -05:00
|
|
|
let slug = cx.props.slug.clone();
|
2023-04-12 17:25:14 -05:00
|
|
|
#[cfg(target_family = "wasm")]
|
|
|
|
let slug = String::from(
|
|
|
|
dioxus_router::use_route(cx)
|
|
|
|
.segment("slug")
|
|
|
|
.expect("No slug specified."),
|
|
|
|
);
|
2023-04-08 20:47:51 -05:00
|
|
|
cx.render(rsx!{
|
2023-04-16 21:46:10 -05:00
|
|
|
div { class: "{user_theme} {user_font}",
|
|
|
|
PageBase {
|
2023-04-17 18:04:18 -05:00
|
|
|
BackToHomePage { theme: user_prefs.clone().get_theme(), font: user_prefs.clone().get_font() }
|
|
|
|
GetPoem { slug: slug.clone(), user_prefs: user_prefs.clone() }
|
2023-04-16 21:46:10 -05:00
|
|
|
ButtonGroup {
|
2023-04-17 18:04:18 -05:00
|
|
|
NavigationButton { title: "Oldest".to_string(), slug: helpers::get_oldest_entry(slug.clone()), user_prefs: user_prefs.clone() }
|
|
|
|
NavigationButton { title: "Previous".to_string(), slug: helpers::get_previous_entry(slug.clone()), user_prefs: user_prefs.clone() }
|
|
|
|
NavigationButton { title: "Next".to_string(), slug: helpers::get_next_entry(slug.clone()), user_prefs: user_prefs.clone() }
|
|
|
|
NavigationButton { title: "Latest".to_string(), slug: helpers::get_latest_entry(slug.clone()), user_prefs: user_prefs.clone() }
|
2023-04-10 20:37:40 -05:00
|
|
|
}
|
2023-04-17 18:04:18 -05:00
|
|
|
BackToHomePage { theme: user_prefs.clone().get_theme(), font: user_prefs.clone().get_font() }
|
|
|
|
Footer { theme: user_prefs.clone().get_theme(), font: user_prefs.get_font() }
|
2023-04-11 19:42:46 -05:00
|
|
|
}
|
2023-04-10 18:19:02 -05:00
|
|
|
}
|
2023-04-08 20:47:51 -05:00
|
|
|
})
|
2023-04-07 17:16:43 -05:00
|
|
|
}
|
2023-04-16 21:46:10 -05:00
|
|
|
|
|
|
|
pub fn SettingsPage(cx: Scope<UserPrefs>) -> Element {
|
|
|
|
let user_prefs = cx.props.clone();
|
2023-04-17 18:04:18 -05:00
|
|
|
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);
|
2023-04-16 21:46:10 -05:00
|
|
|
cx.render(rsx! {
|
|
|
|
div { class: "{user_theme} {user_font}",
|
|
|
|
PageBase {
|
2023-04-17 18:04:18 -05:00
|
|
|
Title { title: "Settings".to_string(), is_html: false, user_prefs: user_prefs.clone() }
|
|
|
|
BackToHomePage { theme: user_prefs.clone().get_theme(), font: user_prefs.clone().get_font() }
|
|
|
|
div { class: "p-4 flex flex-col space-y-4 mx-auto max-w-full justify-center",
|
|
|
|
div { class: "p-4 flex flex-col space-y-4 text-xl text-center ring-4 {user_theme_card} {user_font_card}",
|
|
|
|
p {
|
|
|
|
"Theme"
|
|
|
|
}
|
|
|
|
ButtonGroup {
|
|
|
|
NavigationButton { title: "Light".to_string(), slug: "/settings/?theme=light".to_string(), user_prefs: user_prefs.clone() }
|
|
|
|
NavigationButton { title: "Dark".to_string(), slug: "/settings/?theme=dark".to_string(), user_prefs: user_prefs.clone() }
|
|
|
|
NavigationButton { title: "Auto".to_string(), slug: "/settings/?theme=auto".to_string(), user_prefs: user_prefs.clone() }
|
|
|
|
}
|
2023-04-16 21:46:10 -05:00
|
|
|
}
|
2023-04-17 18:04:18 -05:00
|
|
|
div { class: "p-4 flex flex-col space-y-4 text-xl text-center ring-4 {user_theme_card} {user_font_card}",
|
|
|
|
p {
|
|
|
|
"Font"
|
2023-04-16 21:46:10 -05:00
|
|
|
}
|
2023-04-17 18:04:18 -05:00
|
|
|
ButtonGroup {
|
|
|
|
span { class: "font-nerd flex basis-full",
|
|
|
|
NavigationButton { title: "Nerd Font".to_string(), slug: "/settings/?font=nerd".to_string(), user_prefs: user_prefs.clone() }
|
|
|
|
}
|
|
|
|
span { class: "font-open flex basis-full",
|
|
|
|
NavigationButton { title: "Open Dyslexic".to_string(), slug: "/settings/?font=open".to_string(), user_prefs: user_prefs.clone() }
|
|
|
|
}
|
2023-04-16 21:46:10 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2023-04-17 18:04:18 -05:00
|
|
|
BackToHomePage { theme: user_prefs.clone().get_theme(), font: user_prefs.get_font() }
|
2023-04-16 21:46:10 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
2023-04-07 17:16:43 -05:00
|
|
|
}
|