From b292bea28b3a9e26b9148b5d21400131a666b046 Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Tue, 13 May 2025 16:34:07 -0600 Subject: [PATCH] feat(blog): ready to hook up to backend, need to generate blogs page naviagation --- src/views/blog.rs | 63 +++++++++++++++++++++++++++++------------ src/views/contact_me.rs | 2 -- 2 files changed, 45 insertions(+), 20 deletions(-) diff --git a/src/views/blog.rs b/src/views/blog.rs index 0bbe8b4..41b6c08 100644 --- a/src/views/blog.rs +++ b/src/views/blog.rs @@ -1,5 +1,6 @@ use crate::Route; -use dioxus::{document::Link, prelude::*}; +use dioxus::{logger::tracing, prelude::*}; +use reqwest::{Client, Response}; const BLOG_CSS: Asset = asset!("/assets/styling/blog.css"); @@ -9,33 +10,53 @@ const BLOG_CSS: Asset = asset!("/assets/styling/blog.css"); /// re-run and the rendered HTML will be updated. #[component] pub fn Blog(blog_title: String) -> Element { + let blog_content = use_signal(|| { + "

This is a blog #blog_title

+

+ In blog #{blog_title}, we show how the Dioxus router works and + how URL parameters can be passed as props to our route components. +

" + .to_string() + }); rsx! { document::Link { rel: "stylesheet", href: BLOG_CSS } div { id: "blog", // Content - h1 { "This is blog #{blog_title}!" } - p { - "In blog #{blog_title}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components." - } + // h1 { "This is blog #{blog_title}!" } + // p { + // "In blog #{blog_title}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components." + // } - // // Navigation links - // // The `Link` component lets us link to other routes inside our app. It takes a `to` prop of type `Route` and - // // any number of child nodes. - // Link { - // // The `to` prop is the route that the link should navigate to. We can use the `Route` enum to link to the - // // blog page with the id of -1. Since we are using an enum instead of a string, all of the routes will be checked - // // at compile time to make sure they are valid. - // to: Route::Blog { id: id - 1 }, - // "Previous" - // } - // span { " <---> " } - // Link { to: Route::Blog { id: id + 1 }, "Next" } + // // Navigation links + // // The `Link` component lets us link to other routes inside our app. It takes a `to` prop of type `Route` and + // // any number of child nodes. + // Link { + // // The `to` prop is the route that the link should navigate to. We can use the `Route` enum to link to the + // // blog page with the id of -1. Since we are using an enum instead of a string, all of the routes will be checked + // // at compile time to make sure they are valid. + // to: Route::Blog { id: id - 1 }, + // "Previous" + // } + // span { " <---> " } + // Link { to: Route::Blog { id: id + 1 }, "Next" } + Link { to: Route::Blogs { id: 0 }, "Go Back" } + div { dangerous_inner_html: blog_content } } } } +async fn getBlog(blog_name: String) { + let res = reqwest::get("https://www.rust-lang.org") + .await + .unwrap() + .text() + .await + .unwrap_or("".to_string()); + tracing::info!("{}", res); +} + #[component] pub fn Blogs(id: i32) -> Element { rsx! { @@ -43,9 +64,15 @@ pub fn Blogs(id: i32) -> Element { div { id: "blogs", h1 { "Page Under Development" } p { "Please Try Again Later" } - dioxus::prelude::Link { to: Route::Home {}, + Link { to: Route::Home {}, button { "Home" } } + // Link { + // to: Route::Blog { + // blog_title: "Test_Blog".to_string(), + // }, + // button { "To Test Blog" } + // } } } } diff --git a/src/views/contact_me.rs b/src/views/contact_me.rs index ab6b92d..4594494 100644 --- a/src/views/contact_me.rs +++ b/src/views/contact_me.rs @@ -28,7 +28,6 @@ pub fn ContactMe() -> Element { } } div { - // div { id: "contact-me", label { "Name" } input { oninput: move |event| { @@ -60,7 +59,6 @@ pub fn ContactMe() -> Element { }, "Submit" } - // } } } Contact {}