Added the ability to specify images.

The blog title can now be set to be an image. If not it will default to
the text. If no text it will just be "Blog".

A Post has now been given a default post image that will be used for all
posts for their openGraph sharing. This can later be expanded to allow
a blog post to have a desired image.

Cargo.lock

@@ -297,7 +297,7 @@ dependencies = [
 
 [[package]]
 name = "bard"
-version = "0.3.6"
+version = "0.3.7"
 dependencies = [
  "dioxus",
  "tavern",

bard/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "bard"
-version = "0.3.6"
+version = "0.3.8"
 edition = "2024"
 description = "Dioxus components that will display a Tavern blogging system Blog."
 repository = "/CyberMages/tavern"

bard/assets/css/blog.css

@@ -35,6 +35,9 @@
 
 .blog_list
 {
+   display: flex;
+   flex-direction: column;
+   width: 100%;
    order: 5;
 
    .blog_title
@@ -43,6 +46,13 @@
       color: var(--accent-color);
    }
 
+   .blog_title_image
+   {
+      width: 23rem;
+      align-self: center;
+      margin-bottom: 25px;
+   }
+
    .blog_item
    {
       margin-bottom: 30px;
@@ -51,6 +61,16 @@
       {
          margin: 0px;
          color: var(--accent-color);
+
+         a:link, a:visited
+         {
+            color: var(--accent-color);
+         }
+
+         a:hover
+         {
+            color: var(--text-color);
+         }
       }
 
       p
@@ -140,7 +160,7 @@
    order: 1;
    display: flex;
    flex-direction: column;
-   margin-top: 70px;
+   margin-top: 185px;
    margin-right: 70px;
    position:sticky;
    top: 150px;

bard/src/components/list.rs

@@ -15,12 +15,12 @@ pub fn BlogItem(title: String, slug: String, author: String, summary: String,
                 tags: Vec<String>)
                 -> Element
 {
-   let author_future = use_server_future(move ||
+   let author_future = use_resource(move ||
    {
       let handle: String = author.clone();
 
       async move { get_author(handle).await }
-   })?;
+   });
 
    rsx!
    {
@@ -80,13 +80,13 @@ pub fn BlogList(tags: Signal<HashSet<String>>, children: Element) -> Element
    // Retrieve the provided settings from context.
    let settings = use_context::<BardSettings>();
 
-   let list = use_server_future(move || 
+   let list = use_resource(move || 
    {
-      let t = tags();
-      let categories = t.iter().cloned().collect();
+      let tags = tags();
+      let categories: Vec<String> = tags.iter().cloned().collect();
 
       async move { get_blog_list(categories).await }
-   })?;
+   });
 
    rsx!
    {
@@ -94,20 +94,51 @@ pub fn BlogList(tags: Signal<HashSet<String>>, children: Element) -> Element
       {
          class: "blog_list",
 
-         match settings.blog_name
+         match settings.blog_image
          {
-            Some(title) =>
+            Some(image) =>
             {
-               rsx!
+               match settings.blog_name
                {
-                  h1 { class: "blog_title", "{title}" }
+                  Some(title) =>
+                  {
+                     rsx!
+                     {
+                        h1 { class: "blog_title visually_hidden", "{title}" }
+                        img { class: "blog_title_image", alt: "{title} blog logo", src: image }
+                     }
+                  }
+
+                  None =>
+                  {
+                     rsx!
+                     {
+                        h1 { class: "blog_title visually_hidden", "Blog" }
+                        img { class: "blog_title_image", alt: "Blog logo", src: image }
+                     }
+                  }
                }
             }
+
             None =>
             {
-               rsx!
+               match settings.blog_name
                {
-                  h1 { class: "blog_title visually_hidden", "Blog" }
+                  Some(title) =>
+                  {
+                     rsx!
+                     {
+                        h1 { class: "blog_title", "{title}" }
+                     }
+                  }
+
+                  None =>
+                  {
+                     rsx!
+                     {
+                        h1 { class: "blog_title visually_hidden", "Blog" }
+                     }
+                  }
                }
             }
          }
@@ -118,6 +149,7 @@ pub fn BlogList(tags: Signal<HashSet<String>>, children: Element) -> Element
             {
                BlogItem
                {
+                  key: "{lore.slug}",
                   title: lore.title.clone(),
                   slug: lore.slug.clone(),
                   author: lore.author.clone(),
@@ -144,6 +176,7 @@ pub fn BlogList(tags: Signal<HashSet<String>>, children: Element) -> Element
 #[component]
 pub fn ToggleTag(tag: String, toggled_tags: Signal<HashSet<String>>) -> Element
 {
+   let is_checked = toggled_tags.read().is_toggled(&tag);
    rsx!
    {
       label
@@ -153,7 +186,7 @@ pub fn ToggleTag(tag: String, toggled_tags: Signal<HashSet<String>>) -> Element
          input
          {
             r#type: "checkbox",
-            checked: toggled_tags.read().is_toggled(&tag),
+            checked: is_checked,
             onchange: move |_|
                       {
                          toggled_tags.write().toggle(&tag.clone());

bard/src/components/post.rs

@@ -53,7 +53,7 @@ pub fn PostHeader(tale: Tale) -> Element
    // Get the blog's image to use as a placeholder if there isn't one for the
    // blog post.
    // Retrieve the provided settings from context.
-   let _settings = use_context::<BardSettings>();
+   let settings = use_context::<BardSettings>();
 
    let author_future = use_server_future(move ||
    {
@@ -73,7 +73,10 @@ pub fn PostHeader(tale: Tale) -> Element
       document::Meta { property: "og:title", content: "{tale.lore.title}" }
       document::Meta { property: "og:description", content: "{tale.lore.summary}" }
       document::Meta { property: "og:url", content: "{url}" }
-      document::Meta { property: "og:image", content: "" }
+      if let Some(image) = settings.default_post_image
+      {
+         document::Meta { property: "og:image", content: image }
+      }
 
       h1 { {tale.lore.title} }
 

bard/src/settings.rs

@@ -1,6 +1,7 @@
 use dioxus::prelude::*;
 
 
+
 #[derive(Copy, Clone)]
 pub enum StylesheetBehavior
 {
@@ -23,6 +24,13 @@ pub struct BardSettings
    /// it is still available for screen readers.
    pub blog_name: Option<String>,
 
+   /// The image to use for the blog title instead of just the name.
+   pub blog_image: Option<Asset>,
+
+   /// The image to use for the default post image in open graph. This is what
+   /// is shown when sharing the article.
+   pub default_post_image: Option<Asset>,
+
    /// A user defined stylesheet and how the library should include it.
    pub stylesheet: StylesheetBehavior
 }

blog_test/Cargo.toml

@@ -10,7 +10,6 @@ edition = "2021"
 axum = { version = "0.8.4", optional = true }
 axum-server = { version = "0.7.2", optional = true }
 dioxus = { version = "=0.7.0-rc.1", features = ["router", "fullstack"] }
-#dioxus-cli-config = { version = "*", optional = true }
 bard = { version = "*", path="../bard", optional = true }
 tokio = { version = "1.0", optional = true }
 

blog_test/src/main.rs

@@ -6,6 +6,11 @@ use bard::*;
 
 const FAVICON: Asset = asset!("/assets/favicon.ico");
 const BLOG: Asset = asset!("/assets/blog.css");
+const BLOG_IMAGE: Asset = asset!("/assets/runes_and_ramblings_text.png",
+                                 AssetOptions::builder().with_hash_suffix(false));
+const POST_IMAGE: Asset = asset!("/assets/runes_and_ramblings_logo.png",
+                                 AssetOptions::builder().with_hash_suffix(false));
+
 
 
 fn main()
@@ -30,6 +35,8 @@ fn App() -> Element
    let custom_settings = BardSettings
    {
       blog_name: Some(String::from("Blog Test")),
+      blog_image: Some(BLOG_IMAGE),
+      default_post_image: Some(POST_IMAGE),
       stylesheet: StylesheetBehavior::Extend(BLOG),
    };
    provide_context(custom_settings);