ada/info-werefox-cafe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Themeing fixed, fonts and themes are now customizable by user and CSS updates appropriately.

Browse Source
This commit is contained in:
Ada Werefox 2023-04-17 18:04:18 -05:00
parent 9cb902978b
commit 5490393678
9 changed files with 117 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/styles/tailwind.min.css vendored
View File

File diff suppressed because one or more lines are too long

16
void-fe/src/components/void_buttons.rs
View File

@ -1,13 +1,14 @@
use crate::utils::prop_structs::{ButtonProps, ContentChildren};
use super::super::utils::{prop_structs::{ButtonProps, ContentChildren}, user_prefs::{UserPrefs, ThemedComponent}};
use dioxus::prelude::*;
#[cfg(target_family = "wasm")]
use dioxus_router::Link;
pub fn BackToHomePage(cx: Scope) -> Element {
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 cx.render(rsx!{
a { class: "flex justify-center p-4 text-xl text-center ring-2",
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"
@ -16,7 +17,7 @@ pub fn BackToHomePage(cx: Scope) -> Element {
});
#[cfg(target_family = "wasm")]
return cx.render(rsx!{
Link { class: "flex justify-center p-4 text-xl text-center ring-2",
Link { class: "flex justify-center p-4 text-xl text-center ring-2 hover:animate-yip transition {user_theme} {user_font}",
to: "/",
p {
"Back to the homepage"
@ -26,20 +27,21 @@ pub fn BackToHomePage(cx: Scope) -> Element {
}
pub fn NavigationButton(cx: Scope<ButtonProps>) -> Element {
let (user_theme, user_font)= cx.props.user_prefs.clone().get_pref_classes(ThemedComponent::Button);
let title = cx.props.title.clone();
let title_ref = title.as_str();
let slug = cx.props.slug.clone();
let slug_ref = slug.as_str();
#[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",
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}",
"{title_ref}"
}
});
#[cfg(target_family = "wasm")]
return cx.render(rsx!{
Link { class: "flex mx-auto max-w-full justify-center p-4 ml-2 mr-2 text-xl text-center ring-2",
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}",
@ -50,7 +52,7 @@ pub fn NavigationButton(cx: Scope<ButtonProps>) -> Element {
pub fn ButtonGroup<'a>(cx: Scope<'a, ContentChildren<'a>>) -> Element {
cx.render(rsx! {
div { class: "grid md:grid-flow-col grid-flow-row gap-y-4",
div { class: "flex md:flex-row md:space-y-0 flex-col space-y-4",
&cx.props.children
}
})

4
void-fe/src/components/void_content.rs
View File

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

15
void-fe/src/components/void_footer.rs
View File

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

1
void-fe/src/components/void_page.rs
View File

@ -3,7 +3,6 @@ use dioxus::prelude::*;
pub fn PageBase<'a>(cx: Scope<'a, PageChildren<'a>>) -> Element {
cx.render(rsx!{
// 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", hidden: true }
div { class: "min-h-screen",
div { class: "container space-y-4 mx-auto p-4",
&cx.props.children

26
void-fe/src/components/void_poem.rs
View File

@ -1,18 +1,17 @@
use crate::components::void_buttons::*;
use crate::components::void_title::*;
use crate::utils::helpers;
use crate::utils::prop_structs::{PoemChildren, PoemData};
use super::super::utils::user_prefs::*;
use crate::utils::{helpers, prop_structs::{PoemChildren, PoemData}, user_prefs::{UserPrefs, ThemedComponent} };
use dioxus::prelude::*;
pub fn PoemList(cx: Scope) -> Element {
pub fn PoemList(cx: Scope<UserPrefs>) -> Element {
let poem_list = helpers::get_poem_list();
cx.render(rsx! {
ul { class: "flex flex-col space-y-4",
poem_list.into_iter().map(|p| {
let user_prefs = cx.props.clone();
let slug = format!("/poems/{}", p.1);
rsx!{
NavigationButton { title: p.0, slug: slug }
NavigationButton { title: p.0, slug: slug, user_prefs: user_prefs.clone() }
}
})
}
@ -31,14 +30,15 @@ pub fn GetPoem(cx: Scope<PoemData>) -> Element {
let slug = String::from(cx.props.slug.clone().expect("No slug specified."));
let (title, content, creation_date) = helpers::get_poem(slug.clone());
cx.render(rsx! {
Title { title: title, is_html: true, user_prefs: UserPrefs::new(ThemePref::Auto, FontPref::OpenDyslexic)}
Title { title: title, is_html: true, user_prefs: cx.props.user_prefs.clone() }
MakePoem{
PoemContent { content: content, creation_date: creation_date }
PoemContent { content: content, creation_date: creation_date, user_prefs: cx.props.user_prefs.clone() }
}
})
}
pub fn PoemContent(cx: Scope<PoemData>) -> Element {
let (user_theme, user_font) = cx.props.user_prefs.get_pref_classes(ThemedComponent::Card);
let content = cx.props.content.clone().expect("No content specified.");
let creation_date = cx
.props
@ -48,10 +48,10 @@ pub fn PoemContent(cx: Scope<PoemData>) -> Element {
#[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 ring-4",
summary { class: "group-open:before:content-['Close'] before:content-['Open'] flex justify-center p-2 ring-2",
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: "font-nerd flex flex-col space-y-4 py-4", "{content}{creation_date}"
div { class: "flex flex-col space-y-4 py-4", "{content}{creation_date}"
}
}
}
@ -59,10 +59,10 @@ pub fn PoemContent(cx: Scope<PoemData>) -> Element {
#[cfg(target_family = "wasm")]
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",
summary { class: "group-open:before:content-['Close'] before:content-['Open'] flex justify-center p-2 ring-2",
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: "font-nerd flex flex-col space-y-4 py-4",
div { class: "flex flex-col space-y-4 py-4",
dangerous_inner_html: "{content}{creation_date}",
}
}

93
void-fe/src/lib.rs
View File

@ -64,30 +64,19 @@ pub mod void_app {
/// Renders the app and returns the rendered Element.
pub fn HomePage(cx: Scope<UserPrefs>) -> Element {
let user_prefs = cx.props.clone();
let (user_theme, user_font) = user_prefs.get_prefs(ThemedComponent::Page);
let (user_theme, user_font) = user_prefs.get_pref_classes(ThemedComponent::Page);
let title = "A Letter to the Void".to_string();
cx.render(rsx!{
// class: "bg-alice-werefox-grey-light dark:bg-alice-werefox-grey"
// class: "bg-alice-werefox-grey"
// class: "bg-alice-werefox-grey-lightest ring-alice-werefox-red-dark text-alice-werefox-grey-dark"
// class: "dark:bg-alice-werefox-grey-dark dark:ring-alice-werefox-red dark:text-alice-werefox-grey-light"
// class: "bg-alice-werefox-grey-dark ring-alice-werefox-red text-alice-werefox-grey-light"
// class: "bg-alice-werefox-grey-lightest ring-alice-werefox-red-dark text-alice-werefox-grey-dark"
// class: "hover:text-alice-werefox-blue-dark"
// class: "hover:ring-alice-werefox-blue dark:bg-alice-werefox-grey-dark dark:ring-alice-werefox-red"
// class: "bg-alice-werefox-grey-dark ring-alice-werefox-red"
// 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"
div { class: "{user_theme} {user_font}",
PageBase {
Title { title: title, is_html: false, user_prefs: user_prefs }
RenderContent { content: helpers::get_homepage_paragraph() }
Title { title: title, is_html: false, user_prefs: user_prefs.clone() }
RenderContent { content: helpers::get_homepage_paragraph(), user_prefs: user_prefs.clone() }
ButtonGroup {
NavigationButton { title: "See Latest Entry".to_string(), slug: helpers::get_latest_entry("".to_string()) }
NavigationButton { title: "See Oldest Entry".to_string(), slug: helpers::get_oldest_entry("".to_string()) }
NavigationButton { title: "See All Entries".to_string(), slug: "/poems".to_string() }
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() }
}
Footer {}
Footer { theme: user_prefs.clone().get_theme(), font: user_prefs.get_font() }
}
}
})
@ -96,15 +85,15 @@ pub mod void_app {
/// Renders the app and returns the rendered Element.
pub fn PoemListPage(cx: Scope<UserPrefs>) -> Element {
let user_prefs = cx.props.clone();
let (user_theme, user_font) = user_prefs.get_prefs(ThemedComponent::Page);
let (user_theme, user_font) = user_prefs.get_pref_classes(ThemedComponent::Page);
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 }
BackToHomePage {}
PoemList {}
BackToHomePage {}
Footer {}
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() }
}
}
})
@ -112,7 +101,7 @@ pub mod void_app {
pub fn PoemPage(cx: Scope<PoemRequest>) -> Element {
let user_prefs = cx.props.user_prefs.clone();
let (user_theme, user_font) = user_prefs.get_prefs(ThemedComponent::Page);
let (user_theme, user_font) = user_prefs.get_pref_classes(ThemedComponent::Page);
#[cfg(any(target_family = "unix", target_family = "windows"))]
let slug = cx.props.slug.clone();
#[cfg(target_family = "wasm")]
@ -124,16 +113,16 @@ pub mod void_app {
cx.render(rsx!{
div { class: "{user_theme} {user_font}",
PageBase {
BackToHomePage {}
GetPoem { slug: slug.clone() }
BackToHomePage { theme: user_prefs.clone().get_theme(), font: user_prefs.clone().get_font() }
GetPoem { slug: slug.clone(), user_prefs: user_prefs.clone() }
ButtonGroup {
NavigationButton { title: "Oldest".to_string(), slug: helpers::get_oldest_entry(slug.clone()) }
NavigationButton { title: "Previous".to_string(), slug: helpers::get_previous_entry(slug.clone()) }
NavigationButton { title: "Next".to_string(), slug: helpers::get_next_entry(slug.clone()) }
NavigationButton { title: "Latest".to_string(), slug: helpers::get_latest_entry(slug.clone()) }
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() }
}
BackToHomePage {}
Footer {}
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() }
}
}
})
@ -141,28 +130,40 @@ pub mod void_app {
pub fn SettingsPage(cx: Scope<UserPrefs>) -> Element {
let user_prefs = cx.props.clone();
let (user_theme, user_font) = user_prefs.get_prefs(ThemedComponent::Page);
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);
cx.render(rsx! {
div { class: "{user_theme} {user_font}",
PageBase {
Title { title: "Settings".to_string(), is_html: false, user_prefs: user_prefs }
BackToHomePage {}
div { class: "grid grid-flow-row space-y-4",
ButtonGroup {
NavigationButton { title: "Light".to_string(), slug: "/settings/?theme=light".to_string() }
NavigationButton { title: "Dark".to_string(), slug: "/settings/?theme=dark".to_string() }
NavigationButton { title: "Auto".to_string(), slug: "/settings/?theme=auto".to_string() }
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 {
span { class: "font-nerd",
NavigationButton { title: "Nerd Font".to_string(), slug: "/settings/?font=nerd".to_string() }
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() }
}
span { class: "font-open",
NavigationButton { title: "Open Dyslexic".to_string(), slug: "/settings/?font=open".to_string() }
}
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 {
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() }
}
}
}
BackToHomePage {}
}
BackToHomePage { theme: user_prefs.clone().get_theme(), font: user_prefs.get_font() }
}
}
})

4
void-fe/src/utils/prop_structs.rs
View File

@ -18,12 +18,14 @@ pub struct TitleProps {
#[derive(PartialEq, Props)]
pub struct ContentProps {
pub content: String,
pub user_prefs: UserPrefs,
}
#[derive(PartialEq, Props)]
pub struct ButtonProps {
pub title: String,
pub slug: String,
pub user_prefs: UserPrefs,
}
#[derive(PartialEq, Props)]
@ -32,7 +34,7 @@ pub struct PoemData {
pub content: Option<String>,
pub creation_date: Option<String>,
pub slug: Option<String>,
pub dark_mode: Option<bool>,
pub user_prefs: UserPrefs,
}
// These next three should all just be one prop.

45
void-fe/src/utils/user_prefs.rs
View File

@ -58,6 +58,12 @@ impl UserPrefs {
}
}
pub fn get_pref_classes(&self, component: ThemedComponent) -> (String, String) {
let theme = self.get_theme_classes(component).clone();
let font = self.get_font_class().clone();
(theme, font)
}
pub fn get_theme_classes(&self, component: ThemedComponent) -> String {
match &self.theme {
ThemePref::Light => match component {
@ -111,29 +117,38 @@ impl UserPrefs {
}
}
pub fn set_theme(mut self, theme: ThemePref) {
self.theme = theme;
}
pub fn get_font(&self) -> String {
pub fn get_font_class(&self) -> String {
match &self.font {
FontPref::OpenDyslexic => "font-open".to_string(),
FontPref::NerdFont => "font-nerd".to_string(),
}
}
pub fn set_font(mut self, font: FontPref) {
self.font = font;
}
pub fn get_prefs(&self, component: ThemedComponent) -> (String, String) {
let theme = self.get_theme_classes(component).clone();
let font = self.get_font().clone();
(theme, font)
}
pub fn set_prefs(mut self, prefs: UserPrefs) {
self.theme = prefs.theme;
self.font = prefs.font;
}
pub fn set_theme(mut self, theme: ThemePref) {
self.theme = theme;
}
pub fn set_font(mut self, font: FontPref) {
self.font = font;
}
pub fn get_prefs(self) -> (ThemePref, FontPref) {
let prefs = self.clone();
(prefs.theme, prefs.font)
}
pub fn get_theme(self) -> ThemePref {
let prefs = self.clone();
prefs.theme.clone()
}
pub fn get_font(self) -> FontPref {
let prefs = self.clone();
prefs.font.clone()
}
}