florian.richer/portfolio_leptos
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add blog list page css

Browse source
This commit is contained in:
Florian RICHER 2023-11-26 20:43:17 +01:00
parent c30d1d5531
commit 178fa113a5
5 changed files with 120 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/app/pages/posts.rs
View file

@ -1,6 +1,7 @@
use leptos::*;
use leptos_router::*;
use crate::app::models::Post;
use crate::app::components::Link;
#[server]
pub async fn get_posts() -> Result<Vec<Post>, ServerFnError> {
@ -31,20 +32,26 @@ pub fn PostList() -> impl IntoView {
posts.and_then(|posts| {
posts.iter()
.map(|post| view! {
<li>
<a href={format!("/posts/{}", post.slug.clone())}>{post.metadata.title.clone()}</a>
</li>
<div>
<img src={post.metadata.image_path.clone()} alt=format!("Image {}", post.metadata.title)/>
<div>
<h2>{post.metadata.title.clone()}</h2>
<p>{post.metadata.description.clone()}</p>
<span>{post.metadata.date.clone()}</span>
</div>
</div>
})
.collect_view()
})
};
view! {
<main class="m-0 p-0 bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface">
<h1>"My Great Blog"</h1>
<main class="posts">
<h1>Blog</h1>
<Suspense fallback=move || view! { <p>"Loading posts..."</p> }>
<ul>{posts_view}</ul>
<Suspense fallback=move || view! { <p>"Chargement des posts..."</p> }>
<div class="posts__cards">{posts_view}</div>
</Suspense>
</main>
}
@ -66,8 +73,8 @@ pub fn PostElement() -> impl IntoView {
};
view! {
<main class="m-0 p-0 bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface">
<Suspense fallback=move || view! { <p>"Loading posts..."</p> }>
<main class="post">
<Suspense fallback=move || view! { <p>"Chargement des posts..."</p> }>
{post_view}
</Suspense>
</main>