From f8c9888d803a35452bfccae9d762c7d8961cc4e6 Mon Sep 17 00:00:00 2001
From: Florian RICHER <florian.richer@unova.fr>
Date: Sat, 9 Dec 2023 16:49:05 +0100
Subject: [PATCH] Refactor Title And Loading

---
 markdowns/posts/test.md       |  2 -
 markdowns/posts/test_2.md     | 76 -----------------------------------
 src/app/components/loading.rs | 14 +++++++
 src/app/components/mod.rs     |  7 ++++
 src/app/components/title.rs   | 16 ++++++++
 src/app/mod.rs                | 14 +++----
 src/app/pages/posts.rs        | 33 +++++++++------
 style/portfolio.css           |  1 +
 style/post.css                |  4 +-
 style/title.css               |  9 +++++
 10 files changed, 76 insertions(+), 100 deletions(-)
 delete mode 100644 markdowns/posts/test_2.md
 create mode 100644 src/app/components/loading.rs
 create mode 100644 src/app/components/title.rs
 create mode 100644 style/title.css

diff --git a/markdowns/posts/test.md b/markdowns/posts/test.md
index 989ee94..93c16c5 100644
--- a/markdowns/posts/test.md
+++ b/markdowns/posts/test.md
@@ -6,8 +6,6 @@ description: Testing the layout of the site.
 project_link: none
 ---
 
-### Heading Tags
-
 # Heading 1
 ## Heading 2
 ### Heading 3
diff --git a/markdowns/posts/test_2.md b/markdowns/posts/test_2.md
deleted file mode 100644
index e44f5ac..0000000
--- a/markdowns/posts/test_2.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-image_path: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/783px-Test-Logo.svg.png?20150906031702"
-title: Testing layout 2
-date: 2023-11-27
-description: Testing the layout of the site 2.
-project_link: none
----
-
-### Heading Tags
-
-# Heading 1
-## Heading 2
-### Heading 3
-#### Heading 4
-##### Heading 5
-###### Heading 6
-
-This is a paragraph tag. It's used for displaying text content.
-
-[Click me to visit Example website!](https://www.example.com)
-
-Unordered list
-
-*   Item 1
-*   Item 2
-*   Item 3
-
-Ordered list
-
-1.  Item 1
-2.  Item 2
-3.  Item 3
-
-
-> It's probably important that images look okay here by default as well:
-
-<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/783px-Test-Logo.svg.png?20150906031702">
-
-### Code Blocks
-
-```python
-def hello_world():
-    print("Hello World!")
-```
-
-```rust
-fn main() {
-    println!("Hello World!");
-}
-```
-
-```javascript
-function helloWorld() {
-    console.log("Hello World!");
-}
-```
-
-```ruby
-def hello_world
-    puts "Hello World!"
-end
-```
-
-```dockerfile
-FROM rust
-RUN cargo build --release
-CMD ["./target/release/hello_world"]
-```
-
-```mermaid
-graph TD;
-    A-->B;
-    A-->C;
-    B-->D;
-    C-->D;
-```
\ No newline at end of file
diff --git a/src/app/components/loading.rs b/src/app/components/loading.rs
new file mode 100644
index 0000000..800aea9
--- /dev/null
+++ b/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>
+    }
+}
diff --git a/src/app/components/mod.rs b/src/app/components/mod.rs
index eda6e7e..0250873 100644
--- a/src/app/components/mod.rs
+++ b/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};
\ No newline at end of file
diff --git a/src/app/components/title.rs b/src/app/components/title.rs
new file mode 100644
index 0000000..b625c1d
--- /dev/null
+++ b/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>
+    }
+}
diff --git a/src/app/mod.rs b/src/app/mod.rs
index 798256a..d82e425 100644
--- a/src/app/mod.rs
+++ b/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>
     }
diff --git a/src/app/pages/posts.rs b/src/app/pages/posts.rs
index 9e79737..a246158 100644
--- a/src/app/pages/posts.rs
+++ b/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>
     }
 }
\ No newline at end of file
diff --git a/style/portfolio.css b/style/portfolio.css
index 5a57d00..93d166a 100644
--- a/style/portfolio.css
+++ b/style/portfolio.css
@@ -8,5 +8,6 @@
 @import './social_links.css';
 @import './tag.css';
 @import './timeline.css';
+@import './title.css';
 @import './top_component.css';
 /*@import './mermaid.css';*/
diff --git a/style/post.css b/style/post.css
index 01cdafd..5af4dd9 100644
--- a/style/post.css
+++ b/style/post.css
@@ -28,7 +28,7 @@
         }
 
         & h1, & h2, & h3, & h4, & h5, & h6 {
-            @apply my-5 font-bold;
+            @apply my-3 font-bold;
         }
 
         & p {
@@ -67,7 +67,7 @@
     .post {
         & > div {
             @apply mx-auto max-w-3xl;
-            @apply flex flex-col gap-5;
+            @apply flex flex-col;
         }
 
         & pre > code {
diff --git a/style/title.css b/style/title.css
new file mode 100644
index 0000000..d62f9dc
--- /dev/null
+++ b/style/title.css
@@ -0,0 +1,9 @@
+@layer components {
+    header {
+        @apply flex flex-row items-center justify-between flex-wrap mx-5;
+
+        & h1 {
+            @apply text-center text-6xl mb-5 flex-1;
+        }
+    }
+}