Refactor Title And Loading

src/app/components/loading.rs

@@ -0,0 +1,14 @@
+use leptos::*;
+
+#[component]
+pub fn Loading(
+    #[prop[optional]]
+    title: Option<String>
+) -> impl IntoView {
+    view! {
+        <div class="loading">
+            <h1>{title}</h1>
+            <span></span>
+        </div>
+    }
+}

src/app/components/mod.rs

@@ -23,5 +23,12 @@ mod timeline;
 pub use timeline::{Timeline, TimelineElement, TimelineLabel, TimelineCard, TimelineCardTag, TimelineCardContent, TimelineCardSummary};
 
 mod mon_parcours;
+mod loading;
+
+pub use loading::Loading;
+
+mod title;
+
+pub use title::Title;
 
 pub use mon_parcours::{MonParcours};

src/app/components/title.rs

@@ -0,0 +1,16 @@
+use leptos::*;
+
+#[component]
+pub fn Title(
+    href: String,
+    #[prop[optional]]
+    title: Option<String>
+) -> impl IntoView {
+    view! {
+        <header>
+            <a href=href>r"< Retour"</a>
+            <h1>{title}</h1>
+            <span></span>
+        </header>
+    }
+}

src/app/mod.rs

@@ -15,18 +15,16 @@ pub fn App() -> impl IntoView {
     view! {
         <Stylesheet id="leptos" href="/pkg/portfolio.css"/>
         <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
+        <Link media="(prefers-color-scheme: dark)" rel="stylesheet" href="/css/github-dark-dimmed.min.css"/>
+        <Link media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" rel="stylesheet" href="/css/github.min.css"/>
+        <script src="/js/highlight.min.js"></script>
+        <script src="/js/mermaid.min.js"></script>
+        <script src="/js/autoload.js"/>
         <Router>
             <Routes>
                 <Route path="" view=pages::Home/>
                 <Route path="posts" view=pages::PostList/>
-                <Route path="posts/:slug" view=|| view! {
-                    <Link media="(prefers-color-scheme: dark)" rel="stylesheet" href="/css/github-dark-dimmed.min.css"/>
-                    <Link media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" rel="stylesheet" href="/css/github.min.css"/>
-                    <script src="/js/highlight.min.js"></script>
-                    <script src="/js/mermaid.min.js"></script>
-                    <script src="/js/autoload.js"/>
-                    <pages::PostElement/>
-                }/>
+                <Route path="posts/:slug" view=pages::PostElement/>
             </Routes>
         </Router>
     }

src/app/pages/posts.rs

@@ -1,6 +1,11 @@
 use leptos::*;
 use leptos_router::*;
-use crate::app::models::Post;
+use crate::app::{
+    models::Post,
+    components::{
+        Title, Loading
+    }
+};
 
 #[server]
 pub async fn get_posts() -> Result<Vec<Post>, ServerFnError> {
@@ -46,13 +51,13 @@ pub fn PostList() -> impl IntoView {
     };
 
     view! {
-        <main class="posts">
-            <h1>Blog</h1>
+        <Suspense fallback=move || view! { <Loading title="Chargement des posts...".to_string() /> }>
+            <main class="posts">
+                <Title href="/".to_string() title="Posts".to_string()/>
 
-            <Suspense fallback=move || view! { <p>"Chargement des posts..."</p> }>
                 <div class="posts__cards">{posts_view}</div>
-            </Suspense>
-        </main>
+            </main>
+        </Suspense>
     }
 }
 
@@ -66,16 +71,20 @@ pub fn PostElement() -> impl IntoView {
     let post_view = move || {
         post.and_then(|post| {
             view! {
-                <div inner_html={post.content.clone()}></div>
+                <>
+                    <Title href="/posts".to_string() title=post.metadata.title.clone()/>
+                    <div inner_html={post.content.clone()}></div>
+                </>
             }
         })
     };
 
     view! {
-        <main class="post">
-            <Suspense fallback=move || view! { <p>"Chargement des posts..."</p> }>
-                <div>{post_view}</div>
-            </Suspense>
-        </main>
+        <Suspense fallback=move || view! { <Loading title="Chargement des posts...".to_string() /> }>
+            <main class="post">
+                {post_view}
+                <script>load();</script>
+            </main>
+        </Suspense>
     }
 }