357 lines
15 KiB
Rust
357 lines
15 KiB
Rust
|
//! # Rust Info Site Frontend
|
||
|
|
//!
|
||
|
|
//! Rendering functions for the site using [Dioxus](https://dioxuslabs.com/).
|
||
|
|
|
||
|
|
#![allow(non_snake_case)]
|
||
|
|
|
||
|
|
// use utils::{prop_structs::PoemDatabase, user_prefs::UserPrefs};
|
||
|
|
// use manganis;
|
||
|
|
|
||
|
|
pub mod components;
|
||
|
|
pub mod utils;
|
||
|
|
|
||
|
|
// Urls are relative to your Cargo.toml file
|
||
|
|
const _TAILWIND_URL: &str = manganis::mg!(file("public/tailwind.css"));
|
||
|
|
|
||
|
|
/// A module that handles the functions needed
|
||
|
|
/// to render the site.
|
||
|
|
pub mod info_app {
|
||
|
|
|
||
|
|
// import the prelude to get access to the `rsx!` macro and the `Scope` and `Element` types
|
||
|
|
pub use dioxus::prelude::*;
|
||
|
|
|
||
|
|
// use crate::components::void_buttons::*;
|
||
|
|
// use crate::components::void_content::*;
|
||
|
|
// use crate::components::void_footer::*;
|
||
|
|
use crate::components::basic_page::*;
|
||
|
|
use crate::components::home_page::*;
|
||
|
|
use crate::components::identity_button::*;
|
||
|
|
use crate::components::introduction_card::*;
|
||
|
|
use crate::components::page_button::*;
|
||
|
|
use crate::components::project_card::*;
|
||
|
|
use crate::components::title_card::*;
|
||
|
|
use crate::components::werefox_card::*;
|
||
|
|
use crate::utils::prop_structs::*;
|
||
|
|
// use crate::components::void_poem::*;
|
||
|
|
// use crate::components::void_title::*;
|
||
|
|
// use crate::utils::helpers;
|
||
|
|
// use crate::utils::user_prefs::*;
|
||
|
|
// use crate::{components::basic_page::*, utils::prop_structs::PageProps};
|
||
|
|
|
||
|
|
use dioxus_router::prelude::*;
|
||
|
|
// use dioxus_use_storage::use_local_storage;
|
||
|
|
|
||
|
|
#[derive(Routable, PartialEq, Clone)]
|
||
|
|
pub enum Route {
|
||
|
|
#[route("/")]
|
||
|
|
#[redirect("/:..segments", |segments: Vec<String>| Route::Home {})]
|
||
|
|
Home {},
|
||
|
|
#[route("/projects")]
|
||
|
|
Projects {},
|
||
|
|
#[route("/testimonials")]
|
||
|
|
Testimonials {},
|
||
|
|
#[route("/hrt")]
|
||
|
|
Hrt {},
|
||
|
|
#[route("/faq")]
|
||
|
|
Faq {},
|
||
|
|
#[route("/support")]
|
||
|
|
Support {},
|
||
|
|
}
|
||
|
|
pub fn DioxusApp() -> Element {
|
||
|
|
rsx! { Router::<Route> {} }
|
||
|
|
}
|
||
|
|
|
||
|
|
// #[cfg(target_family = "wasm")]
|
||
|
|
// fn PageNotFound() -> Element {
|
||
|
|
// rsx! {
|
||
|
|
// p { "That page doesn't exist, sorry!" }
|
||
|
|
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
#[component]
|
||
|
|
/// Renders the app and returns the rendered Element.
|
||
|
|
pub fn Home() -> Element {
|
||
|
|
let identity_list = [
|
||
|
|
(
|
||
|
|
"29",
|
||
|
|
ImageProps {
|
||
|
|
src: "/emoji/18_plus.svg".to_string(),
|
||
|
|
alt: "Over 18 emoji".to_string(),
|
||
|
|
},
|
||
|
|
),
|
||
|
|
(
|
||
|
|
"Transfemme",
|
||
|
|
ImageProps {
|
||
|
|
src: "/emoji/female_symbol.svg".to_string(),
|
||
|
|
alt: "Female symbol emoji".to_string(),
|
||
|
|
},
|
||
|
|
),
|
||
|
|
(
|
||
|
|
"She/It",
|
||
|
|
ImageProps {
|
||
|
|
src: "/emoji/speech_bubble_left.svg".to_string(),
|
||
|
|
alt: "A speech bubble emoji".to_string(),
|
||
|
|
},
|
||
|
|
),
|
||
|
|
(
|
||
|
|
"Pansexual",
|
||
|
|
ImageProps {
|
||
|
|
src: "/emoji/pansexual_flag.svg".to_string(),
|
||
|
|
alt: "Pansexual flag emoji".to_string(),
|
||
|
|
},
|
||
|
|
),
|
||
|
|
(
|
||
|
|
"Lesbian",
|
||
|
|
ImageProps {
|
||
|
|
src: "/emoji/lesbian_flag.svg".to_string(),
|
||
|
|
alt: "Lesbian flag emoji".to_string(),
|
||
|
|
},
|
||
|
|
),
|
||
|
|
(
|
||
|
|
"Dragon",
|
||
|
|
ImageProps {
|
||
|
|
src: "/emoji/:alicehappy:.png".to_string(),
|
||
|
|
alt: "Alice happy emoji".to_string(),
|
||
|
|
},
|
||
|
|
),
|
||
|
|
];
|
||
|
|
let project_list = [
|
||
|
|
(
|
||
|
|
"Stuff I Do!",
|
||
|
|
Route::Projects {},
|
||
|
|
ImageProps {
|
||
|
|
src: "/emoji/crt_prompt.svg".to_string(),
|
||
|
|
alt: "CRT prompt emoji".to_string(),
|
||
|
|
},
|
||
|
|
),
|
||
|
|
(
|
||
|
|
"See Testimonials!",
|
||
|
|
Route::Testimonials {},
|
||
|
|
ImageProps {
|
||
|
|
src: "/emoji/awoo.svg".to_string(),
|
||
|
|
alt: "Awoo emoji".to_string(),
|
||
|
|
},
|
||
|
|
),
|
||
|
|
(
|
||
|
|
"HRT Tracker!",
|
||
|
|
Route::Hrt {},
|
||
|
|
ImageProps {
|
||
|
|
src: "/emoji/trans_heart.png".to_string(),
|
||
|
|
alt: "Transgender heart emoji".to_string(),
|
||
|
|
},
|
||
|
|
),
|
||
|
|
(
|
||
|
|
"FAQ",
|
||
|
|
Route::Faq {},
|
||
|
|
ImageProps {
|
||
|
|
src: "/emoji/red_question_mark.svg".to_string(),
|
||
|
|
alt: "Red question mark emoji".to_string(),
|
||
|
|
},
|
||
|
|
),
|
||
|
|
(
|
||
|
|
"Support Me?",
|
||
|
|
Route::Support {},
|
||
|
|
ImageProps {
|
||
|
|
src: "/emoji/green_money.svg".to_string(),
|
||
|
|
alt: "Green money emoji".to_string(),
|
||
|
|
},
|
||
|
|
),
|
||
|
|
];
|
||
|
|
rsx! {
|
||
|
|
HomePage { page_title: "About a Werefox", card_title: "Hi! I'm Alice Werefox!",
|
||
|
|
WerefoxCard { card_title: "Basic Info".to_string(), title_emoji: None,
|
||
|
|
div { class: "grid xl:grid-rows-1 xl:grid-cols-6 sm:grid-rows-2 sm:grid-cols-3 grid-rows-9 grid-cols-1 sm:gap-2 gap-0",
|
||
|
|
for e in identity_list {
|
||
|
|
IdentityButton { button_text: e.0, image_props: e.1 }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
WerefoxCard { card_title: "Welcome to my little info site!", title_emoji: None, IntroductionCard {} }
|
||
|
|
WerefoxCard { card_title: "Neat Pages!", title_emoji: None,
|
||
|
|
div { class: "flex flex-col space-y-4",
|
||
|
|
for e in project_list {
|
||
|
|
PageButton { button_text: e.0, button_route: e.1, image_props: e.2 }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#[component]
|
||
|
|
pub fn Projects() -> Element {
|
||
|
|
let project_list = [
|
||
|
|
(
|
||
|
|
"Streaming",
|
||
|
|
"I stream regularly! Sometimes randomizers, sometimes just a chill time with a fun game.",
|
||
|
|
"https://twitch.tv/alice_werefox",
|
||
|
|
ImageProps {
|
||
|
|
src: "/emoji/twitch-logo.png".to_string(),
|
||
|
|
alt: "Twitch logo".to_string(),
|
||
|
|
},
|
||
|
|
),
|
||
|
|
(
|
||
|
|
"Poetry",
|
||
|
|
"Sometimes, I write poetry. It's not always the happiest, but I am proud of it. It would mean a lot to me if you took a look!",
|
||
|
|
"https://void.werefox.cafe",
|
||
|
|
ImageProps {
|
||
|
|
src: "/emoji/pen.svg".to_string(),
|
||
|
|
alt: "Pen emoji".to_string(),
|
||
|
|
},
|
||
|
|
),
|
||
|
|
(
|
||
|
|
"Programming",
|
||
|
|
"Much like this site, sometimes I program things! Gotta at least try and put that Comp. Sci. degree to good use!",
|
||
|
|
"https://gitea.werefox.cafe/ada",
|
||
|
|
ImageProps {
|
||
|
|
src: "/emoji/laptop.svg".to_string(),
|
||
|
|
alt: "Laptop emoji".to_string(),
|
||
|
|
},
|
||
|
|
),
|
||
|
|
(
|
||
|
|
"Valentine's Day Letter",
|
||
|
|
"Here's a little treat I put together for Valentine's Day one year, and I decided to just keep it up all year. Feel free to take a look if you ever need a little pick-me-up.",
|
||
|
|
"https://letter.werefox.cafe",
|
||
|
|
ImageProps {
|
||
|
|
src: "/emoji/red_heart.svg".to_string(),
|
||
|
|
alt: "Red heart emoji".to_string(),
|
||
|
|
},
|
||
|
|
),
|
||
|
|
];
|
||
|
|
rsx! {
|
||
|
|
BasicPage { page_title: "Some stuff I do!",
|
||
|
|
div { class: "rounded-lg ring-2 ring-alice-werefox-grey dark:ring-alice-werefox-grey-darker bg-alice-werefox-grey-light dark:bg-alice-werefox-grey",
|
||
|
|
WerefoxCard { card_title: "Personal Projects",
|
||
|
|
for project in project_list {
|
||
|
|
ProjectCard { project_title: project.0, project_description: project.1, project_link: project.2, image_props: project.3 }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#[component]
|
||
|
|
pub fn Testimonials() -> Element {
|
||
|
|
rsx! { div {} }
|
||
|
|
}
|
||
|
|
|
||
|
|
#[component]
|
||
|
|
pub fn Hrt() -> Element {
|
||
|
|
rsx! { div {} }
|
||
|
|
}
|
||
|
|
|
||
|
|
#[component]
|
||
|
|
pub fn Faq() -> Element {
|
||
|
|
rsx! { div {} }
|
||
|
|
}
|
||
|
|
|
||
|
|
#[component]
|
||
|
|
pub fn Support() -> Element {
|
||
|
|
rsx! { div {} }
|
||
|
|
}
|
||
|
|
|
||
|
|
// Renders the app and returns the rendered Element.
|
||
|
|
// pub fn PoemListPage(props: VoidProps) -> Element {
|
||
|
|
// #[cfg(target_family = "wasm")]
|
||
|
|
// let poem_database = POEM_DATABASE
|
||
|
|
// .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! {
|
||
|
|
// div { class: "{user_theme} {user_font}",
|
||
|
|
// PageBase {
|
||
|
|
// 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 { poem_database: poem_database.clone(), user_prefs: user_prefs.clone() }
|
||
|
|
// 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() }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
// pub fn PoemPage(props: VoidProps) -> Element {
|
||
|
|
// #[cfg(target_family = "wasm")]
|
||
|
|
// let poem_database = POEM_DATABASE
|
||
|
|
// .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"))]
|
||
|
|
// let slug = props
|
||
|
|
// .slug
|
||
|
|
// .as_ref()
|
||
|
|
// .expect("A slug was given in the props.")
|
||
|
|
// .clone();
|
||
|
|
// // #[cfg(target_family = "wasm")]
|
||
|
|
// // let slug = String::from(
|
||
|
|
// // use_route()
|
||
|
|
// // .segment("slug")
|
||
|
|
// // .expect("No slug specified."),
|
||
|
|
// // );
|
||
|
|
// rsx! {
|
||
|
|
// div { class: "{user_theme} {user_font}",
|
||
|
|
// PageBase {
|
||
|
|
// BackToHomePage { theme: user_prefs.clone().get_theme(), font: user_prefs.clone().get_font() }
|
||
|
|
// GetPoem { slug: slug.clone(), poem_database: poem_database.clone(), user_prefs: user_prefs.clone() }
|
||
|
|
// ButtonGroup {
|
||
|
|
// NavigationButton { title: "Oldest".to_string(), slug: poem_database.get_oldest_entry(slug.clone()), user_prefs: user_prefs.clone() }
|
||
|
|
// NavigationButton { title: "Previous".to_string(), slug: poem_database.get_previous_entry(slug.clone()), user_prefs: user_prefs.clone() }
|
||
|
|
// NavigationButton { title: "Random".to_string(), slug: poem_database.get_random_entry(), user_prefs: user_prefs.clone() }
|
||
|
|
// NavigationButton { title: "Next".to_string(), slug: poem_database.get_next_entry(slug.clone()), user_prefs: user_prefs.clone() }
|
||
|
|
// NavigationButton { title: "Latest".to_string(), slug: poem_database.get_latest_entry(slug.clone()), user_prefs: user_prefs.clone() }
|
||
|
|
// }
|
||
|
|
// 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() }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
// pub fn SettingsPage(props: UserPrefs) -> Element {
|
||
|
|
// let user_prefs = 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! {
|
||
|
|
// div { class: "{user_theme} {user_font}",
|
||
|
|
// PageBase {
|
||
|
|
// 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() }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// div { class: "p-4 flex flex-col space-y-4 text-xl text-center ring-4 {user_theme_card} {user_font_card}",
|
||
|
|
// p {
|
||
|
|
// "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: "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() }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
}
|