CyberMages/tavernworks
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: CyberMages:c73c99bf481570925e69d41848b7a584acb07205
Branches Tags
CyberMages:main
...
compare: CyberMages:3f4440ec2f25e9f5024cf73bf7ada657c651e05a
Branches Tags
CyberMages:main

2 Commits
c73c99bf48 ... 3f4440ec2f

Author SHA1 Message Date
Myrddin Dundragon
3f4440ec2f Switching to a single stylesheet. 
Also bumped the bard version.
 2025-09-27 13:29:08 -04:00
Myrddin Dundragon
e7969c8050 Fixed the TagSelector reactivity. 
use_server_future was not reliably re-running when url_tag changed during
direct URL navigation, causing tags to remain unselected. use_resource
provides consistent reactivity across all navigation methods and handles
both data fetching and selection logic atomically.
 2025-09-27 13:21:56 -04:00
12 changed files with 363 additions and 676 deletions
Expand all files Collapse all files

8
Cargo.lock generated
View File

@ -224,7 +224,7 @@ dependencies = [
[[package]]
name = "bard"
version = "0.0.23"
version = "0.3.1"
dependencies = [
"dioxus",
"tavern",
@ -263,7 +263,7 @@ dependencies = [
[[package]]
name = "blog_test"
version = "0.1.0"
version = "0.3.0"
dependencies = [
"axum",
"axum-server",
@ -1941,7 +1941,7 @@ checksum = "b3bd0dd2cd90571056fdb71f6275fada10131182f84899f4b2a916e565d81d86"
[[package]]
name = "loreweaver"
version = "0.1.0"
version = "0.3.0"
dependencies = [
"clap",
"tavern",
@ -3104,7 +3104,7 @@ dependencies = [
[[package]]
name = "tavern"
version = "0.2.9"
version = "0.3.0"
dependencies = [
"chrono",
"pulldown-cmark",

2
bard/Cargo.toml
View File

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

175
bard/assets/css/blog.css
View File

@ -1,3 +1,16 @@
.visually_hidden
{
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
border: 0 !important;
white-space: nowrap !important;
}
.blog_style
{
display: flex;
@ -17,3 +30,165 @@
container-type: inline-size;
}
}
.blog_list
{
order: 5;
.blog_title
{
margin-top: 0px;
}
.blog_item
{
margin-bottom: 30px;
h2
{
margin: 0px;
color: var(--accent-color);
}
p
{
margin: 5px 0px 0px 0px;
display: block;
}
}
}
.blog_post
{
order: 5;
h1
{
margin: 0px;
color: var(--accent-color);
}
h4
{
margin-top: 10px;
margin-bottom: 30px;
}
li
{
margin-bottom: 5px;
}
p
{
margin-top: 0px;
margin-bottom: 20px;
}
.embeded_video
{
margin-top: 50px;
display: flex;
align-content: center;
justify-content: center;
iframe
{
box-shadow: 0 0 80px var(--accent-color);
}
}
}
/* Tags will have a class of "tag_{tag_name}" that allows specific
* customization.
*
* .tag_easy
* {
* background-color: #248721;
* }
*
* */
.blog_tag
{
display: flex;
flex-direction: row;
.tag_list
{
display: flex;
flex-direction: row;
}
}
.blog_nav
{
order: 1;
display: flex;
flex-direction: column;
margin-top: 70px;
margin-right: 70px;
fieldset
{
border: none;
padding: 0;
margin: 0;
min-inline-size: unset;
}
legend
{
min-width: 120px;
padding: 0;
margin: 0;
}
.tag_list
{
display: flex;
flex-direction: column;
}
@container site (max-width: 1230px)
{
display: none;
}
}
.tag_list
{
list-style: none;
padding: 0px;
margin: 0px;
.tag_item
{
margin-top: 5px;
margin-right: 5px;
a
{
display: block;
padding: 0px 4px;
text-decoration: none;
border: 2px solid var(--text-color);
border-radius: 5px;
color: var(--text-color);
transition: 0.1s ease-in;
&:hover
{
color: var(--accent-color);
border: 2px solid var(--accent-color);
transform: translateY(-2px);
}
}
}
}

230
bard/assets/css/blog_author.css
View File

@ -1,230 +0,0 @@
.blog_style
{
display: flex;
width: 100%;
height: 100%;
background: var(--bg-color);
padding: 50px 0px;
justify-content: center;
container-name: site;
container-type: inline-size;
.page_content
{
display: flex;
width: 67%;
container-name: page;
container-type: inline-size;
}
}
.blog_nav
{
width: 15%;
padding: 0px 20px;
h3
{
margin-bottom: 10px;
}
ul
{
list-style: none;
li
{
}
}
@container site (max-width: 1230px)
{
display: none;
}
.social
{
/* Hide .social until the font is loaded */
display: flex;
align-items: center;
gap: 15px;
margin: 25px 0;
font-family: cm_social;
a
{
color: var(--text-color);
font-size: 46px;
text-decoration: none;
background: transparent;
width: 65px;
height: 65px;
border-radius: 50%;
display: flex;
align-items: flex-end;
justify-content: center;
transition: 0.4s ease;
border: 4px solid var(--text-color);
&:hover
{
color: var(--accent-color);
border: 4px solid var(--accent-color);
transform: translateY(-7px);
}
}
}
}
}
.blog_item_area
{
.blog_list
{
list-style: none;
.blog_item
{
margin-bottom: 50px;
h1
{
color: var(--accent-color);
}
h4
{
margin: 10px 0px;
}
p
{
display: block;
}
}
}
}
.blog_article
{
h1
{
color: var(--accent-color);
}
h4
{
margin-top: 10px;
margin-bottom: 30px;
}
p
{
margin-bottom: 20px;
}
.embeded_video
{
margin-top: 50px;
display: flex;
align-content: center;
justify-content: center;
iframe
{
box-shadow: 0 0 80px var(--accent-color);
}
}
}
.tag_style
{
display: block;
.tag_list
{
list-style: none;
.tag_item
{
display: inline-block;
margin: 5px 5px 0px 0px;
a
{
display: block;
padding: 0px 4px;
text-decoration: none;
border: 2px solid var(--text-color);
border-radius: 5px;
color: var(--text-color);
transition: 0.1s ease-in;
&:hover
{
color: var(--accent-color);
border: 2px solid var(--accent-color);
transform: translateY(-2px);
}
}
}
}
}
.easy
{
background-color: #248721;
}
.medium
{
background-color: #d6a318;
}
.hard
{
background-color: #d92121;
}
.social
{
background: transparent;
font-family: cm_social;
margin: 15px 0px;
a
{
color: var(--text-color);
font-size: 30px;
text-decoration: none;
background: transparent;
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: flex-end;
justify-content: center;
transition: 0.4s ease;
border: 4px solid var(--text-color);
&:hover
{
color: var(--accent-color);
border: 4px solid var(--accent-color);
transform: translateY(-7px);
}
}
}

27
bard/assets/css/blog_list.css
View File

@ -1,27 +0,0 @@
.blog_list_style
{
.blog_list
{
list-style: none;
.blog_item
{
margin-bottom: 50px;
h1
{
color: var(--accent-color);
}
h4
{
margin: 10px 0px;
}
p
{
display: block;
}
}
}
}

117
bard/assets/css/blog_nav.css
View File

@ -1,117 +0,0 @@
.blog_style
{
display: flex;
width: 100%;
height: 100%;
background: var(--bg-color);
padding: 50px 0px;
justify-content: center;
container-name: site;
container-type: inline-size;
.page_content
{
display: flex;
width: 67%;
container-name: page;
container-type: inline-size;
}
}
.blog_nav_style
{
width: 15%;
padding: 0px 20px;
order: 5;
h3
{
margin-bottom: 10px;
}
ul
{
list-style: none;
li
{
}
}
@container site (max-width: 1230px)
{
display: none;
}
.social
{
/* Hide .social until the font is loaded */
display: flex;
align-items: center;
gap: 15px;
margin: 25px 0;
font-family: cm_social;
a
{
color: var(--text-color);
font-size: 22px;
text-decoration: none;
background: transparent;
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: flex-end;
justify-content: center;
transition: 0.4s ease;
border: 4px solid var(--text-color);
&:hover
{
color: var(--accent-color);
border: 4px solid var(--accent-color);
transform: translateY(-7px);
}
}
}
.tag_style
{
display: block;
.tag_list
{
display: inline-flex;
flex-direction: column;
list-style: none;
.tag_item
{
display: inline-block;
margin: 5px 5px 0px 0px;
a
{
display: inline-flex;
padding: 0px 4px;
text-decoration: none;
border: 2px solid var(--text-color);
border-radius: 5px;
color: var(--text-color);
transition: 0.1s ease-in;
&:hover
{
color: var(--accent-color);
border: 2px solid var(--accent-color);
transform: translateY(-2px);
}
}
}
}
}
}

119
bard/assets/css/blog_post.css
View File

@ -1,119 +0,0 @@
.blog_post_style
{
order: 1;
h1
{
color: var(--accent-color);
}
h4
{
margin-top: 10px;
margin-bottom: 30px;
}
p
{
margin-bottom: 20px;
}
.embeded_video
{
margin-top: 50px;
display: flex;
align-content: center;
justify-content: center;
iframe
{
box-shadow: 0 0 80px var(--accent-color);
}
}
}
.tag_style
{
display: block;
.tag_list
{
list-style: none;
.tag_item
{
display: inline-block;
margin: 5px 5px 0px 0px;
a
{
display: block;
padding: 0px 4px;
text-decoration: none;
border: 2px solid var(--text-color);
border-radius: 5px;
color: var(--text-color);
transition: 0.1s ease-in;
&:hover
{
color: var(--accent-color);
border: 2px solid var(--accent-color);
transform: translateY(-2px);
}
}
}
}
}
.easy
{
background-color: #248721;
}
.medium
{
background-color: #d6a318;
}
.hard
{
background-color: #d92121;
}
.social
{
background: transparent;
font-family: cm_social;
margin: 15px 0px;
a
{
color: var(--text-color);
font-size: 30px;
text-decoration: none;
background: transparent;
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: flex-end;
justify-content: center;
transition: 0.4s ease;
border: 4px solid var(--text-color);
&:hover
{
color: var(--accent-color);
border: 4px solid var(--accent-color);
transform: translateY(-7px);
}
}
}

54
bard/assets/css/blog_tag.css
View File

@ -1,54 +0,0 @@
.blog_tag_style
{
display: block;
.tag_list
{
list-style: none;
.tag_item
{
display: inline-block;
margin: 5px 5px 0px 0px;
a
{
display: block;
padding: 0px 4px;
text-decoration: none;
border: 2px solid var(--text-color);
border-radius: 5px;
color: var(--text-color);
transition: 0.1s ease-in;
&:hover
{
color: var(--accent-color);
border: 2px solid var(--accent-color);
transform: translateY(-2px);
}
}
}
}
.none
{
background-color: var(--bg-color);
}
.easy
{
background-color: #248721;
}
.medium
{
background-color: #d6a318;
}
.hard
{
background-color: #d92121;
}
}

145
bard/src/components/list.rs
View File

@ -30,18 +30,20 @@ pub fn BlogItem(title: String, slug: String, author: String, summary: String,
tags: Vec<String>)
-> Element
{
println!("Blog Item: {title} -- [{tags:?}]");
rsx!
{
li
article
{
key: "{slug}",
class: "blog_item",
h2
{
Link
{
to: Page::Post { slug: slug.clone() },
h1 { "{title}" }
"{title}"
}
}
TagList
@ -55,7 +57,7 @@ pub fn BlogItem(title: String, slug: String, author: String, summary: String,
}
}
h4 { "Author: {author}" }
p { b { "Author: {author}" } }
p { "{summary}" }
}
@ -66,8 +68,10 @@ pub fn BlogItem(title: String, slug: String, author: String, summary: String,
#[component]
pub fn BlogList(tags: Signal<HashSet<String>>, children: Element) -> Element
{
let list = use_server_future(move || {
let categories = tags().iter().cloned().collect();
let list = use_server_future(move ||
{
let t = tags();
let categories = t.iter().cloned().collect();
async move { get_blog_list(categories).await }
})?;
@ -75,12 +79,11 @@ pub fn BlogList(tags: Signal<HashSet<String>>, children: Element) -> Element
rsx!
{
section
{
class: "blog_list_style",
ul
{
class: "blog_list",
h1 { class: "blog_title", "Runes & Ramblings" }
if let Some(Ok(lores)) = &*list.read()
{
for lore in lores
@ -108,9 +111,9 @@ pub fn BlogList(tags: Signal<HashSet<String>>, children: Element) -> Element
{children}
}
}
}
}
#[component]
pub fn ToggleTag(tag: String, toggled_tags: Signal<HashSet<String>>) -> Element
{
@ -130,49 +133,108 @@ pub fn ToggleTag(tag: String, toggled_tags: Signal<HashSet<String>>) -> Element
},
}
span { "{tag}" }
"{tag}"
}
}
}
// Using use_resource instead of use_server_future for URL-dependent tag selection
//
// While use_server_future should theoretically be reactive when reading signals in the
// closure (per Dioxus docs), in practice it doesn't reliably re-run when the url_tag
// signal changes, especially during direct URL navigation (typing URLs in browser).
//
// use_resource provides more reliable reactivity for this use case because:
// 1. It explicitly depends on url_tag and consistently re-runs when it changes
// 2. It handles both async data fetching AND selection logic in a single atomic operation
// 3. It works consistently across all navigation methods (links, direct URLs, etc.)
// 4. It avoids timing coordination issues between separate hooks
//
// This approach combines fetching available tags from the server with determining
// which tags should be selected based on the current URL, returning both pieces
// of data together for clean state management.
#[component]
pub fn TagSelector(show_all: Signal<bool>, toggled_tags: Signal<HashSet<String>>) -> Element
pub fn TagSelector(url_tag: ReadOnlySignal<String>,
toggled_tags: Signal<HashSet<String>>) -> Element
{
let toggle_all: bool = show_all();
// Use use_resource to handle both fetching tags AND initializing selection
let tags_and_selection = use_resource(move ||
{
let current_url = url_tag();
println!("Tag Selector toggled tags: {:?}", toggled_tags());
let tags_future = use_server_future(move || async move { get_tags().await })?;
async move
{
match get_tags().await
{
Ok(available_tags) =>
{
// Determine what should be selected based on URL
let should_show_all = current_url.is_empty() || current_url == "all";
use_effect(move ||
let selected_tags: HashSet<String> = if should_show_all
{
if let Some(Ok(tags)) = &*tags_future.read()
available_tags.iter().cloned().collect()
}
else
{
if toggle_all
let url_categories = convert_categories(&current_url);
let filtered: HashSet<String> = url_categories.into_iter()
.filter(|tag| available_tags.contains(tag))
.collect();
filtered
};
Ok((available_tags, selected_tags))
}
Err(e) =>
{
for tag in tags
{
toggled_tags.write().insert(tag.clone());
eprintln!("RESOURCE - Error: {}", e);
Err(e)
}
}
}
});
// Separate effect to update toggled_tags when resource completes
// This separates reading the resource from writing to toggled_tags
use_effect(move ||
{
if let Some(Ok((_, selected_tags))) = &*tags_and_selection.read()
{
toggled_tags.set(selected_tags.clone());
}
});
rsx!
{
section
{
class: "blog_nav_style",
div
class: "blog_nav",
h2 { class: "visually_hidden", "Filters and Navigation" }
fieldset
{
class: "tag_style",
h2 { "Categories" }
legend { "Category Filter" }
ul
{
class: "tag_list",
if let Some(Ok(tags)) = tags_future()
match &*tags_and_selection.read()
{
for tag in tags
Some(Ok((available_tags, _))) =>
{
rsx!
{
for tag in available_tags
{
li
{
@ -181,14 +243,41 @@ pub fn TagSelector(show_all: Signal<bool>, toggled_tags: Signal<HashSet<String>>
ToggleTag
{
tag: &tag,
tag: tag.clone(),
toggled_tags: toggled_tags
}
}
}
}
}
Some(Err(_)) =>
{
rsx!
{
li { "Error loading tags" }
}
}
None =>
{
rsx!
{
li { "Loading tags..." }
}
}
}
}
}
}
}
}
fn convert_categories(categories: &str) -> HashSet<String>
{
categories
.split('+')
.filter(|s| !s.is_empty() && *s != "all")
.map(str::to_string)
.collect()
}

31
bard/src/components/post.rs
View File

@ -30,12 +30,15 @@ pub fn PostHeaderAuthor(adventurer: Adventurer) -> Element
{
rsx!
{
h4
p
{
b
{
"Author: ",
a { href: "{adventurer.legend.profile}", "{adventurer.name} @{adventurer.handle}" }
}
}
}
}
#[component]
@ -99,7 +102,7 @@ pub fn BlogPost(slug: Signal<String>, children: Element) -> Element
{
article
{
class: "blog_post_style",
class: "blog_post",
if let Some(Ok(tale)) = (post_future.value())()
{
@ -137,36 +140,31 @@ pub fn TagNav() -> Element
{
section
{
class: "blog_nav_style",
div
{
class: "tag_style",
h2 { "Categories" }
ul
class: "blog_nav",
fieldset
{
class: "tag_list",
legend { "Category Filter" }
if let Some(Ok(categories)) = &*tags.read()
{
for tag in categories
{
li
{
key: "{tag}",
class: "tag_item",
Link
{
class: "tag_item tag_{tag}",
to: Page::Blog { tag: tag.clone() },
"{tag}"
}
//a { href: "/blog/{tag}", "{tag}" }
}
}
}
else if let Some(Err(e)) = &*tags.read()
{
p { "Unable to show desired post." }
p { "Unable to load tags." }
p { "{e}" }
}
else
@ -176,5 +174,4 @@ pub fn TagNav() -> Element
}
}
}
}
}

7
bard/src/components/tags.rs
View File

@ -37,15 +37,10 @@ pub fn TagList(children: Element) -> Element
{
rsx!
{
h5
{
class: "blog_tag_style",
ul
{
class: "tag_list",
class: "blog_tag tag_list",
{children}
}
}
}
}

30
bard/src/pages/blog.rs
View File

@ -7,34 +7,12 @@ use crate::page::Page;
fn convert_categories(categories: &str) -> HashSet<String>
{
categories
.split('+')
.filter(|s| !s.is_empty() && *s != "all")
.map(str::to_string)
.collect()
}
/// Blog page
#[component]
pub fn Blog(tag: ReadOnlySignal<String>) -> Element
{
let mut show_all: Signal<bool> =
use_signal(|| tag().is_empty() || tag() == "all");
let mut categories: Signal<HashSet<String>> =
use_signal(|| convert_categories(&tag()));
use_effect(move ||
{
let new_tags = convert_categories(&tag());
categories.set(new_tags);
});
println!("Blog Categories: {:?}", categories());
use_signal(|| HashSet::new());
rsx!
{
@ -47,13 +25,13 @@ pub fn Blog(tag: ReadOnlySignal<String>) -> Element
BlogList
{
tags: categories.clone()
tags: categories
}
TagSelector
{
show_all: show_all.clone(),
toggled_tags: categories.clone()
url_tag: tag,
toggled_tags: categories
}
}
}