Site should be feature complete. Testimonials page is now working.

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
+# # include `assets` in web platform
-[web.resource]
+# [web.resource]
 
-# CSS style file
+# # CSS style file
-style = ["/styles/tailwind.min.css"]
+# style = ["/styles/tailwind.min.css"]
 
-# Javascript code file
+# # Javascript code file
-script = []
+# script = []
 
-[web.resource.dev]
+# [web.resource.dev]
 
-# CSS style file
+# # CSS style file
-style = ["/styles/tailwind.min.css"]
+# style = ["/styles/tailwind.min.css"]
 
-# Javascript code file
+# # Javascript code file
-# serve: [dev-server] only
+# # serve: [dev-server] only
-script = []
+# script = []

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]]

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;
   }

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 }
                         }
@@ -345,21 +345,60 @@ pub mod info_app {
 
     #[component]
     pub fn Testimonials() -> Element {
-        let mastodon_status = use_resource(get_account_avatar);
+        let mastodon_status = use_resource(get_account_avatars);
-        // use_effect(|| {
+        rsx! {
-        //     to_owned![mastodon_status];
+            BasicPage { page_title: "Testimonials!",
-        //     async move {
+                WerefoxCard {
-        //         mastodon_status.set(get_mastodon_info().await.unwrap());
+                    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: ""
+                                                        }
                                                     // }
-        // });
+                                                }
-        rsx! { div { match (mastodon_status.value())() {
+                                                div { class: "flex items-center justify-center order-2 w-full min-h-full p-4",
-            Some(account) => format!("{:#?}", account.unwrap()),
+                                                    div { class: "text-xs text-center animate-wiggle sm:text-lg",
-            _ => "Nothing yet...".to_string(),
+                                                        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<String, ServerFnError> {
+    async fn get_account_avatars() -> Result<Vec<Testimonial>, 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 testimonial_accounts: TestimonialAccount =
-        let res = client.search_account(String::from("@heatherhorns@plush.city"), None).await?;
+            toml::from_str(testimonial_toml.as_str()).unwrap();
-        Ok(format!("{}", res.json()[0].avatar_static))
+        let mut testimonial_avatars: Vec<Testimonial> = 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<Testimonial>,
     }
 
-    #[derive(Deserialize)]
+    #[derive(Serialize, Deserialize, Debug, Clone)]
-    struct Testimonial {
+    pub struct Testimonial {
         username: String,
         content: String,
+        avatar: Option<String>,
+        url: Option<String>,
     }
 
     #[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" }