feat(blog): done with ui, just need to deploy backend and hookup
This commit is contained in:
parent
ff6f6c8424
commit
9bc7175e5b
@ -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;
|
||||
|
||||
@ -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<BlogContent, reqwest::Error> {
|
||||
pub fn Blogs(page_num: u32) -> Element {
|
||||
let mut _num_limit: Signal<u8> = use_signal(|| 10);
|
||||
|
||||
let blogs_resource: Resource<Vec<BlogContent>> = use_resource(move || async move {
|
||||
get_blogs_preview(_num_limit(), page_num)
|
||||
.await
|
||||
.unwrap_or_else(|_| vec![])
|
||||
});
|
||||
|
||||
let blogs_resource: Resource<Vec<BlogContent>> =
|
||||
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::<u8>().unwrap_or(10));
|
||||
},
|
||||
option { "10" }
|
||||
@ -232,7 +237,7 @@ async fn get_blogs_preview(
|
||||
) -> Result<Vec<BlogContent>, 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::<Vec<BlogContent>>()
|
||||
// .text()
|
||||
.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(
|
||||
json.get("Blogs")
|
||||
.cloned()
|
||||
.unwrap_or(serde_json::Value::Null),
|
||||
)
|
||||
.unwrap_or_default();
|
||||
|
||||
Ok(blogs)
|
||||
// // Extract the "Blogs" array and deserialize it into Vec<BlogContent>
|
||||
// let blogs: Vec<BlogContent> = serde_json::from_value(
|
||||
// json.get("Blogs")
|
||||
// .cloned()
|
||||
// .unwrap_or(serde_json::Value::Null),
|
||||
// )
|
||||
// .unwrap_or_default();
|
||||
}
|
||||
|
||||
@ -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());
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user