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

Add blog page css

Browse source
This commit is contained in:
Florian RICHER 2023-11-26 21:36:28 +01:00
parent 178fa113a5
commit a31fa68e84
4 changed files with 42 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/app/mod.rs
View file

@ -13,15 +13,15 @@ pub fn App() -> impl IntoView {
view! {
<Stylesheet id="leptos" href="/pkg/portfolio.css"/>
<Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
<Link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark-dimmed.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<Router>
<Routes>
<Route path="" view=pages::Home/>
<Route path="posts" view=pages::PostList/>
<Route path="posts/:slug" view=|| view! {
<Link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<pages::PostElement/>
<script>hljs.highlightAll();</script>
<pages::PostElement/>
}/>
</Routes>
</Router>

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

@ -1,7 +1,6 @@
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> {
@ -32,7 +31,7 @@ pub fn PostList() -> impl IntoView {
posts.and_then(|posts| {
posts.iter()
.map(|post| view! {
<div>
<a href=format!("posts/{}", post.slug.clone())>
<img src={post.metadata.image_path.clone()} alt=format!("Image {}", post.metadata.title)/>
<div>
@ -40,7 +39,7 @@ pub fn PostList() -> impl IntoView {
<p>{post.metadata.description.clone()}</p>
<span>{post.metadata.date.clone()}</span>
</div>
</div>
</a>
})
.collect_view()
})
@ -75,7 +74,7 @@ pub fn PostElement() -> impl IntoView {
view! {
<main class="post">
<Suspense fallback=move || view! { <p>"Chargement des posts..."</p> }>
{post_view}
<div>{post_view}</div>
</Suspense>
</main>
}