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:
-
-
-
-### 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
+) -> impl IntoView {
+ view! {
+
+
{title}
+
+
+ }
+}
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
+) -> impl IntoView {
+ view! {
+
+ }
+}
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! {
+
+
+
+
+
-
-
-
-
-
-
- }/>
+
}
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, ServerFnError> {
@@ -46,13 +51,13 @@ pub fn PostList() -> impl IntoView {
};
view! {
-
- Blog
+ }>
+
+
- "Chargement des posts..." }>
{posts_view}
-
-
+
+
}
}
@@ -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>
+ </>
}
})
};
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;
+ }
+ }
+}