Adding components and assets.

Commiting to try the library with the target dioxus project.

bard/src/components.rs

@@ -1,10 +1,9 @@
 
 use dioxus::prelude::*;
 
-use tavern::Lore;
+use tavern::{Adventurer, Legend, Lore, Tale};
 
-use crate::components::social::*;
-use crate::page::Page;
+use crate::server::*;
 
 
 
@@ -15,7 +14,6 @@ const POST_CSS: Asset = asset!("/assets/css/blog_post.css");
 const TAG_CSS: Asset = asset!("/assets/css/blog_tag.css");
 
 
-
 #[derive(Clone, Copy, PartialEq)]
 pub enum TagStyle
 {
@@ -85,6 +83,7 @@ pub fn TagList(children: Element) -> Element
 }
 
 
+/*
 #[component]
 pub fn BlogAuthor() -> Element
 {
@@ -210,20 +209,32 @@ pub fn BlogNav() -> Element
       }
    }
 }
+*/
 
 
 #[component]
-pub fn BlogPost(children: Element) -> Element
+pub fn PostHeaderAuthor(name: String, handle: String, profile_link: String) -> Element
 {
    rsx!
    {
-      document::Link { rel: "stylesheet", href: POST_CSS }
+      h4 { "Author: ", a { href: "{profile_link}", "{name} @{handle}" } }
+   }
+}
 
-      article
+#[component]
+pub fn PostHeader(title: String, author: String, tags: Vec<String>) -> Element
+{
+   let Ok(author) = use_server_future(move || get_author(author.clone())) else
+   {
+      return rsx! { p { "Failed to load author." } }
+   };
+
+   rsx!
+   {
+      h1 { "{title}" }
+      TagList
       {
-         class: "blog_post_style",
-         h1 { "Leet Code: Let's Get Started" }
-         TagList
+         for category in tags
          {
             TagItem
             {
@@ -231,7 +242,96 @@ pub fn BlogPost(children: Element) -> Element
                style: TagStyle::Regular
             }
          }
-         h4 { "Author: ", a { href: "https://cybermages.tech", "Jason Smith" } }
+      }
+
+      match &*author.read()
+      {
+         Some(Ok(author)) =>
+         {
+            rsx!
+            {
+               PostHeaderAuthor
+               {
+                  name: author.name.clone(),
+                  handle: author.handle.clone(),
+                  profile_link: author.legend.profile.clone()
+               }
+            }
+         }
+
+         Some(Err(e)) =>
+         {
+            rsx!
+            {
+               p { "Unable to show post header." }
+               p { "{e}" }
+            }
+         }
+
+         None =>
+         {
+            rsx!
+            {
+               p { "Loading..." }
+            }
+         }
+      }
+   }
+}
+
+#[component]
+pub fn BlogPost(slug: String, children: Element) -> Element
+{
+   // 1. Fetch the blog post using the slug.
+   let Ok(post) = use_server_future(move || get_blog_post(slug.clone())) else
+   {
+      return rsx! { p { "Failed to load post." } }
+   };
+
+   // Then build the component.
+   rsx!
+   {
+      document::Link { rel: "stylesheet", href: POST_CSS }
+
+      article
+      {
+         class: "blog_post_style",
+
+         match &*post.read()
+         {
+            Some(Ok(post)) =>
+            {
+               rsx!
+               {
+                  PostHeader
+                  {
+                     title: post.lore.title.clone(),
+                     author: post.lore.author.clone(),
+                     tags: post.lore.tags.clone()
+                  }
+
+                  div { dangerous_inner_html: "{post.story}" }
+               }
+            }
+
+            Some(Err(e)) =>
+            {
+               rsx!
+               {
+                  p { "Unable to show desired post." }
+                  p { "{e}" }
+               }
+            }
+
+            None =>
+            {
+               rsx!
+               {
+                  p { "Loading..." }
+               }
+            }
+         }
+
          {children}
       }
    }