diff --git a/Dioxus.toml b/Dioxus.toml index 9973e3b..617860a 100644 --- a/Dioxus.toml +++ b/Dioxus.toml @@ -29,20 +29,20 @@ watch_path = ["src", "public", "tailwind.config.js", "Dioxus.toml", "Cargo.toml" # implement redirect on 404 index_on_404 = true -# include `assets` in web platform -[web.resource] +# # include `assets` in web platform +# [web.resource] -# CSS style file -style = ["/styles/tailwind.min.css"] +# # CSS style file +# style = ["/styles/tailwind.min.css"] -# Javascript code file -script = [] +# # Javascript code file +# script = [] -[web.resource.dev] +# [web.resource.dev] -# CSS style file -style = ["/styles/tailwind.min.css"] +# # CSS style file +# style = ["/styles/tailwind.min.css"] -# Javascript code file -# serve: [dev-server] only -script = [] +# # Javascript code file +# # serve: [dev-server] only +# script = [] diff --git a/data/testimonials.toml b/data/testimonials.toml index 653bed0..3f53973 100644 --- a/data/testimonials.toml +++ b/data/testimonials.toml @@ -1,3 +1,7 @@ +[[accounts]] +username = "@efi@chitter.xyz" +content = "have I mentioned I would smooch this girl?" + [[accounts]] username = "@shroomie@0w0.is" content = "dragon woman play metroid good" @@ -27,7 +31,7 @@ username = "@GameDevWitch@tech.lgbt" content = "You are the best Werefox I have ever met." [[accounts]] -username = "@astraluma@tech.lgbt" +username = "@astraluma@tacobelllabs.net" content = "a good derg" [[accounts]] diff --git a/public/tailwind.css b/public/tailwind.css index 3e6d616..5e94264 100644 --- a/public/tailwind.css +++ b/public/tailwind.css @@ -600,6 +600,10 @@ video { order: 2; } +.m-auto { + margin: auto; +} + .mx-auto { margin-left: auto; margin-right: auto; @@ -657,6 +661,10 @@ video { display: none; } +.h-16 { + height: 4rem; +} + .h-4 { height: 1rem; } @@ -701,6 +709,10 @@ video { width: 100%; } +.min-w-full { + min-width: 100%; +} + .max-w-3xl { max-width: 48rem; } @@ -835,6 +847,10 @@ video { overflow: auto; } +.overflow-hidden { + overflow: hidden; +} + .overflow-visible { overflow: visible; } @@ -843,6 +859,10 @@ video { border-radius: 0.5rem; } +.rounded-md { + border-radius: 0.375rem; +} + .rounded-sm { border-radius: 0.125rem; } @@ -1089,6 +1109,10 @@ video { } @media (min-width: 640px) { + .sm\:h-32 { + height: 8rem; + } + .sm\:h-6 { height: 1.5rem; } diff --git a/src/lib.rs b/src/lib.rs index 6e077d6..fb072f4 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -133,7 +133,7 @@ pub mod info_app { 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", + div { class: "grid grid-cols-1 gap-0 xl:grid-rows-1 xl:grid-cols-6 sm:grid-rows-2 sm:grid-cols-3 grid-rows-9 sm:gap-2", for e in identity_list { IdentityButton { button_text: e.0, image_props: e.1 } } @@ -304,62 +304,101 @@ pub mod info_app { ), ]; 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 } - } - ProjectFoldable { - project_title: "Services", - project_description: "Click here for a list of the services I host.", - image_props: ImageProps { - src: "/emoji/crt_blue_screen.svg".to_string(), - alt: "A CRT blue screen emoji.".to_string(), - }, - for service in service_list { - ProjectCard { project_title: service.0, project_description: service.1, project_link: service.2, image_props: service.3 } - } - } - ProjectFoldable { - project_title: "Personal Use", - project_description: "Click here for a list of services I have set up for just me.", - image_props: ImageProps { - src: "/emoji/crt_blue_screen.svg".to_string(), - alt: "A CRT blue screen emoji.".to_string(), - }, - for personal in personal_list { - ProjectCard { - project_title: personal.0, - project_description: personal.1, - project_link: personal.2, - image_props: personal.3 - } - } + 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 } + } + ProjectFoldable { + project_title: "Services", + project_description: "Click here for a list of the services I host.", + image_props: ImageProps { + src: "/emoji/crt_blue_screen.svg".to_string(), + alt: "A CRT blue screen emoji.".to_string(), + }, + for service in service_list { + ProjectCard { project_title: service.0, project_description: service.1, project_link: service.2, image_props: service.3 } + } + } + ProjectFoldable { + project_title: "Personal Use", + project_description: "Click here for a list of services I have set up for just me.", + image_props: ImageProps { + src: "/emoji/crt_blue_screen.svg".to_string(), + alt: "A CRT blue screen emoji.".to_string(), + }, + for personal in personal_list { + ProjectCard { + project_title: personal.0, + project_description: personal.1, + project_link: personal.2, + image_props: personal.3 } } } } } + } + } } #[component] pub fn Testimonials() -> Element { - let mastodon_status = use_resource(get_account_avatar); - // use_effect(|| { - // to_owned![mastodon_status]; - // async move { - // mastodon_status.set(get_mastodon_info().await.unwrap()); - // } - // }); - rsx! { div { match (mastodon_status.value())() { - Some(account) => format!("{:#?}", account.unwrap()), - _ => "Nothing yet...".to_string(), - } } } + let mastodon_status = use_resource(get_account_avatars); + rsx! { + BasicPage { page_title: "Testimonials!", + WerefoxCard { + card_title: "Sometimes, people say some nice things about me. Here are some + examples!", + div { class: "p-2 space-y-4", + match (mastodon_status.value())() { + Some(account) => rsx! { + for a in account.unwrap() { + div { class: "transition rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:animate-yip", + a { href: format!("{}", a.url.unwrap().trim_matches(|c| c == '\"')), + target: "_blank", + div { class: "flex flex-row min-w-full overflow-hidden", + div { class: "order-1 inline-block object-contain pt-4 pb-4 pl-4", + // span { class: "relative w-16 h-16 sm:w-32 sm:h-32", + img { + src: format!("{}", a.avatar.unwrap().trim_matches(|c| c == '\"')), + class: "object-contain h-16 rounded-md sm:h-32", + alt: "" + } + // } + } + div { class: "flex items-center justify-center order-2 w-full min-h-full p-4", + div { class: "text-xs text-center animate-wiggle sm:text-lg", + p { class: "overflow-auto", + { format!("{}", a.content) } + } + { format!("{}", a.username) } + } + } + } + } + } + } + }, + _ => rsx! { + div { class: "flex flex-col justify-center w-full m-auto space-y-2 align-middle", + img { class: "flex justify-center m-auto align-middle", + src: "emoji/:ablobalicebongo:.gif", + alt: "A gif of Alice in a blob emoji form, performing the bongocat animation." + } + p { "Just a sec, lemme grab those for ya..." } + } + } + } + } + } + } + } } #[server] - async fn get_account_avatar() -> Result { + async fn get_account_avatars() -> Result, ServerFnError> { let client = megalodon::generator( megalodon::SNS::Mastodon, String::from("https://bark.lgbt"), @@ -367,20 +406,43 @@ pub mod info_app { None, ); let testimonial_toml: String = tokio::fs::read_to_string("data/testimonials.toml").await?; - let testinomial_accounts: TestimonialAccount = toml::from_str(testimonial_toml.as_str()).unwrap(); - let res = client.search_account(String::from("@heatherhorns@plush.city"), None).await?; - Ok(format!("{}", res.json()[0].avatar_static)) + let testimonial_accounts: TestimonialAccount = + toml::from_str(testimonial_toml.as_str()).unwrap(); + let mut testimonial_avatars: Vec = vec![]; + for account in testimonial_accounts.accounts { + let res = client + .search_account( + String::from(account.username.clone()), + Some(&megalodon::megalodon::SearchAccountInputOptions { + following: None, + resolve: Some(false), + limit: Some(1), + max_id: None, + since_id: None, + }), + ) + .await?; + testimonial_avatars.push(Testimonial { + username: account.username, + content: account.content, + avatar: Some(format!("{:?}", res.json()[0].avatar_static)), + url: Some(format!("{:?}", res.json()[0].url)), + }) + } + Ok(testimonial_avatars) } - #[derive(Deserialize)] + #[derive(Deserialize, Debug)] struct TestimonialAccount { accounts: Vec, } - #[derive(Deserialize)] - struct Testimonial { + #[derive(Serialize, Deserialize, Debug, Clone)] + pub struct Testimonial { username: String, content: String, + avatar: Option, + url: Option, } #[component] @@ -402,7 +464,7 @@ pub mod info_app { rsx! { BasicPage { page_title: "Track my HRT progress!", WerefoxCard { card_title: "I'm so glad you're interested!!", - div { class: "p-2 sm:text-xl text-lg text-center text-alice-werefox-red-dark dark:text-alice-werefox-red-light grid grid-cols-1 grid-rows-4 gap-2", + div { class: "grid grid-cols-1 grid-rows-4 gap-2 p-2 text-lg text-center sm:text-xl text-alice-werefox-red-dark dark:text-alice-werefox-red-light", p { "I've been on HRT for:" } p { "{time_elapsed.read().days} days" } p { "{time_elapsed.read().hours} hours" }