From 9bc7175e5b32295377e1002c55818c99f9498d3d Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Thu, 22 May 2025 15:10:40 -0600 Subject: [PATCH] feat(blog): done with ui, just need to deploy backend and hookup --- assets/styling/blog.css | 54 ++++++++++++++++++++++++++++++++-------- src/views/blog.rs | 55 ++++++++++++++++++++++------------------- src/views/contact_me.rs | 2 +- 3 files changed, 75 insertions(+), 36 deletions(-) diff --git a/assets/styling/blog.css b/assets/styling/blog.css index 27abaee..708a7c6 100644 --- a/assets/styling/blog.css +++ b/assets/styling/blog.css @@ -3,47 +3,47 @@ min-height: 80svh; } -#blog #blog_info { +#blog_info { display: flex; flex-direction: column; } -#blog #blog_info p { +#blog_info p { padding: 2svh 0svw; margin: 0px; } -#blog #blog_info h1 { +#blog_info h1 { padding: 1svh 1svw; margin: 2svh 0svw; margin-bottom: 0px; } -#blog #blog_info div { +#blog_info div { display: flex; flex-direction: row; justify-content: space-between; - padding: 1svh 2svw; + padding: 1svh 0svw; border-bottom: var(--underlineTitle); border-radius: var(--underlineTitleBorderRadius); } -#blog #blog_info div p { +#blog_info div p { padding: 0px; margin: 0px; } -#blog #blog_info div div { +#blog_info div div { margin: 0px; padding: 0px; border: none; } -#blog #blog_info div p:last-child { +#blog_info div p:last-child { margin-right: 10svh; } -#blog #blog_info div div p { +#blog_info div div p { background-color: rgba(128, 0, 128, 0.2); border-radius: 1rem; - padding: 0.25svh 1svw; + padding: 0.25svh 8px; margin: 0svh 0.25svh; } @@ -113,6 +113,31 @@ h3 { color: #91a4d2; } +.blog-preview { + display: flex; + flex-direction: column; + background-color: var(--card-background-color); + border-radius: var(--card-border-radius); + padding: 0svh 2svw; +} + +#blogs .blog-preview h1 { + border-bottom: none; + padding: 0svh 1svw; + margin: 0px; +} + +#blogs .blog-preview button { + width: max-content; + border: 2px solid rgba(145, 164, 210, 0.4); + border-radius: var(--card-border-radius); + font-size: medium; +} +#blogs .blog-preview #blog_info div p:last-child { + margin-right: 0svh; + margin-left: 2svw; +} + #blogs-title { display: flex; flex-direction: column; @@ -124,6 +149,15 @@ h3 { padding: 1svh 0svw; } +#blogs-on-show { + display: flex; + flex-flow: row wrap; + justify-content: center; + padding: 2svh 0svw; + row-gap: 2svh; + column-gap: 2svw; +} + #blog-loading { display: flex; flex-direction: column; diff --git a/src/views/blog.rs b/src/views/blog.rs index 0c81f7e..94b3d01 100644 --- a/src/views/blog.rs +++ b/src/views/blog.rs @@ -1,5 +1,6 @@ use crate::{set_meta_tags, Route}; -use dioxus::{logger::tracing, prelude::*}; +// use dioxus::logger::tracing::info; +use dioxus::prelude::*; use reqwest; use serde::{Deserialize, Serialize}; @@ -125,12 +126,12 @@ async fn get_blog(blog_name: String) -> Result { pub fn Blogs(page_num: u32) -> Element { let mut _num_limit: Signal = use_signal(|| 10); - let blogs_resource: Resource> = use_resource(move || async move { - get_blogs_preview(_num_limit(), page_num) - .await - .unwrap_or_else(|_| vec![]) - }); - + let blogs_resource: Resource> = + use_resource(use_reactive!(|(_num_limit, page_num)| async move { + get_blogs_preview(_num_limit(), page_num) + .await + .unwrap_or_else(|_| vec![]) + })); rsx! { document::Stylesheet { href: asset!("/assets/styling/blog.css") } div { id: "blogs", @@ -146,16 +147,17 @@ pub fn Blogs(page_num: u32) -> Element { } p { "These blogs are my opinion and mine alone" } } - div { + div { id: "blogs-on-show", if let Some(blogs) = &*blogs_resource.read() { if blogs.len() > 0 { for blog in blogs.iter() { Link { + class: "blog-preview", to: Route::Blog { blog_title: blog.blog_file_name.clone(), }, - div { dangerous_inner_html: blog.html_blog_content.as_str(), + div { id: "blog_info", h1 { "{blog.blog_title}" } div { div { @@ -163,10 +165,14 @@ pub fn Blogs(page_num: u32) -> Element { p { "{tag}" } } } - // p { "{blog.tags}" } - p { "{blog.date_last_edit}" } + p { "{&blog.date_last_edit}" } } } + div { + id: "blog_content", + dangerous_inner_html: *&blog.html_blog_content.as_str(), + } + button { "Read More Here" } } } } else { @@ -196,7 +202,6 @@ pub fn Blogs(page_num: u32) -> Element { label { "display: " } select { onchange: move |event| { - tracing::info!("Change happened {:?}", event.value()); _num_limit.set(event.value().parse::().unwrap_or(10)); }, option { "10" } @@ -232,7 +237,7 @@ async fn get_blogs_preview( ) -> Result, reqwest::Error> { let client = reqwest::Client::new(); - let res: String = client + let res = client .get(format!( "http://localhost:8000/blogs/{}/{}", _num_limit, page_num @@ -240,18 +245,18 @@ async fn get_blogs_preview( .timeout(std::time::Duration::from_secs(10)) .send() .await? - .text() + .json::>() + // .text() .await?; + Ok(res) + // let json: serde_json::Value = serde_json::from_str(&res).unwrap(); + // let blogs: Vec = serde_json::from_value(json).unwrap_or_default(); - let json: serde_json::Value = serde_json::from_str(&res).unwrap(); - - // Extract the "Blogs" array and deserialize it into Vec - let blogs: Vec = serde_json::from_value( - json.get("Blogs") - .cloned() - .unwrap_or(serde_json::Value::Null), - ) - .unwrap_or_default(); - - Ok(blogs) + // // Extract the "Blogs" array and deserialize it into Vec + // let blogs: Vec = serde_json::from_value( + // json.get("Blogs") + // .cloned() + // .unwrap_or(serde_json::Value::Null), + // ) + // .unwrap_or_default(); } diff --git a/src/views/contact_me.rs b/src/views/contact_me.rs index 0646673..adafcdc 100644 --- a/src/views/contact_me.rs +++ b/src/views/contact_me.rs @@ -92,7 +92,7 @@ async fn send_message(name: String, email: String, message: String, mut recived: }); let client = Client::new(); - let res = client.post("").json(&json_to_send).send().await; + let res = client.post("https://discord.com/api/webhooks/1374798951475187732/zOL9aD1wWn9rCywjqVAy3oUMnzPu25SVIMCDaLD4N8C_V9OqPK8Hj2Wmm-7Ts5QHTbzN").json(&json_to_send).send().await; match res { Ok(_) => { recived.set("Sent Sucessfully, I will be in contact with you soon".to_string());