darkicewolf50/personal_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(blog): done with ui, just need to deploy backend and hookup

Browse Source
This commit is contained in:
darkicewolf50 2025-05-22 15:10:40 -06:00
parent ff6f6c8424
commit 9bc7175e5b
3 changed files with 75 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
assets/styling/blog.css
View File

@ -3,47 +3,47 @@
min-height: 80svh; min-height: 80svh;
} }
#blog #blog_info { #blog_info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#blog #blog_info p { #blog_info p {
padding: 2svh 0svw; padding: 2svh 0svw;
margin: 0px; margin: 0px;
} }
#blog #blog_info h1 { #blog_info h1 {
padding: 1svh 1svw; padding: 1svh 1svw;
margin: 2svh 0svw; margin: 2svh 0svw;
margin-bottom: 0px; margin-bottom: 0px;
} }
#blog #blog_info div { #blog_info div {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
padding: 1svh 2svw; padding: 1svh 0svw;
border-bottom: var(--underlineTitle); border-bottom: var(--underlineTitle);
border-radius: var(--underlineTitleBorderRadius); border-radius: var(--underlineTitleBorderRadius);
} }
#blog #blog_info div p { #blog_info div p {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
} }
#blog #blog_info div div { #blog_info div div {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
border: none; border: none;
} }
#blog #blog_info div p:last-child { #blog_info div p:last-child {
margin-right: 10svh; margin-right: 10svh;
} }
#blog #blog_info div div p { #blog_info div div p {
background-color: rgba(128, 0, 128, 0.2); background-color: rgba(128, 0, 128, 0.2);
border-radius: 1rem; border-radius: 1rem;
padding: 0.25svh 1svw; padding: 0.25svh 8px;
margin: 0svh 0.25svh; margin: 0svh 0.25svh;
} }
@ -113,6 +113,31 @@ h3 {
color: #91a4d2; 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 { #blogs-title {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -124,6 +149,15 @@ h3 {
padding: 1svh 0svw; 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 { #blog-loading {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

55
src/views/blog.rs
View File

@ -1,5 +1,6 @@
use crate::{set_meta_tags, Route}; use crate::{set_meta_tags, Route};
use dioxus::{logger::tracing, prelude::*}; // use dioxus::logger::tracing::info;
use dioxus::prelude::*;
use reqwest; use reqwest;
use serde::{Deserialize, Serialize}; use serde::{Deserialize, Serialize};
@ -125,12 +126,12 @@ async fn get_blog(blog_name: String) -> Result<BlogContent, reqwest::Error> {
pub fn Blogs(page_num: u32) -> Element { pub fn Blogs(page_num: u32) -> Element {
let mut _num_limit: Signal<u8> = use_signal(|| 10); let mut _num_limit: Signal<u8> = use_signal(|| 10);
let blogs_resource: Resource<Vec<BlogContent>> = use_resource(move || async move { let blogs_resource: Resource<Vec<BlogContent>> =
get_blogs_preview(_num_limit(), page_num) use_resource(use_reactive!(|(_num_limit, page_num)| async move {
.await get_blogs_preview(_num_limit(), page_num)
.unwrap_or_else(|_| vec![]) .await
}); .unwrap_or_else(|_| vec![])
}));
rsx! { rsx! {
document::Stylesheet { href: asset!("/assets/styling/blog.css") } document::Stylesheet { href: asset!("/assets/styling/blog.css") }
div { id: "blogs", div { id: "blogs",
@ -146,16 +147,17 @@ pub fn Blogs(page_num: u32) -> Element {
} }
p { "These blogs are my opinion and mine alone" } p { "These blogs are my opinion and mine alone" }
} }
div { div { id: "blogs-on-show",
if let Some(blogs) = &*blogs_resource.read() { if let Some(blogs) = &*blogs_resource.read() {
if blogs.len() > 0 { if blogs.len() > 0 {
for blog in blogs.iter() { for blog in blogs.iter() {
Link { Link {
class: "blog-preview",
to: Route::Blog { to: Route::Blog {
blog_title: blog.blog_file_name.clone(), 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}" } h1 { "{blog.blog_title}" }
div { div {
div { div {
@ -163,10 +165,14 @@ pub fn Blogs(page_num: u32) -> Element {
p { "{tag}" } 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 { } else {
@ -196,7 +202,6 @@ pub fn Blogs(page_num: u32) -> Element {
label { "display: " } label { "display: " }
select { select {
onchange: move |event| { onchange: move |event| {
tracing::info!("Change happened {:?}", event.value());
_num_limit.set(event.value().parse::<u8>().unwrap_or(10)); _num_limit.set(event.value().parse::<u8>().unwrap_or(10));
}, },
option { "10" } option { "10" }
@ -232,7 +237,7 @@ async fn get_blogs_preview(
) -> Result<Vec<BlogContent>, reqwest::Error> { ) -> Result<Vec<BlogContent>, reqwest::Error> {
let client = reqwest::Client::new(); let client = reqwest::Client::new();
let res: String = client let res = client
.get(format!( .get(format!(
"http://localhost:8000/blogs/{}/{}", "http://localhost:8000/blogs/{}/{}",
_num_limit, page_num _num_limit, page_num
@ -240,18 +245,18 @@ async fn get_blogs_preview(
.timeout(std::time::Duration::from_secs(10)) .timeout(std::time::Duration::from_secs(10))
.send() .send()
.await? .await?
.text() .json::<Vec<BlogContent>>()
// .text()
.await?; .await?;
Ok(res)
// let json: serde_json::Value = serde_json::from_str(&res).unwrap();
// let blogs: Vec<BlogContent> = 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<BlogContent>
// let blogs: Vec<BlogContent> = serde_json::from_value(
// Extract the "Blogs" array and deserialize it into Vec<BlogContent> // json.get("Blogs")
let blogs: Vec<BlogContent> = serde_json::from_value( // .cloned()
json.get("Blogs") // .unwrap_or(serde_json::Value::Null),
.cloned() // )
.unwrap_or(serde_json::Value::Null), // .unwrap_or_default();
)
.unwrap_or_default();
Ok(blogs)
} }

2
src/views/contact_me.rs
View File

@ -92,7 +92,7 @@ async fn send_message(name: String, email: String, message: String, mut recived:
}); });
let client = Client::new(); 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 { match res {
Ok(_) => { Ok(_) => {
recived.set("Sent Sucessfully, I will be in contact with you soon".to_string()); recived.set("Sent Sucessfully, I will be in contact with you soon".to_string());