Refactor Title And Loading

This commit is contained in:
Florian RICHER 2023-12-09 16:49:05 +01:00
parent 8845db8993
commit f8c9888d80
10 changed files with 76 additions and 100 deletions

View file

@ -6,8 +6,6 @@ description: Testing the layout of the site.
project_link: none project_link: none
--- ---
### Heading Tags
# Heading 1 # Heading 1
## Heading 2 ## Heading 2
### Heading 3 ### Heading 3

View file

@ -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;
```

View file

@ -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>
}
}

View file

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

View file

@ -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>
}
}

View file

@ -15,18 +15,16 @@ pub fn App() -> impl IntoView {
view! { view! {
<Stylesheet id="leptos" href="/pkg/portfolio.css"/> <Stylesheet id="leptos" href="/pkg/portfolio.css"/>
<Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/> <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> <Router>
<Routes> <Routes>
<Route path="" view=pages::Home/> <Route path="" view=pages::Home/>
<Route path="posts" view=pages::PostList/> <Route path="posts" view=pages::PostList/>
<Route path="posts/:slug" view=|| view! { <Route path="posts/:slug" view=pages::PostElement/>
<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/>
}/>
</Routes> </Routes>
</Router> </Router>
} }

View file

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

View file

@ -8,5 +8,6 @@
@import './social_links.css'; @import './social_links.css';
@import './tag.css'; @import './tag.css';
@import './timeline.css'; @import './timeline.css';
@import './title.css';
@import './top_component.css'; @import './top_component.css';
/*@import './mermaid.css';*/ /*@import './mermaid.css';*/

View file

@ -28,7 +28,7 @@
} }
& h1, & h2, & h3, & h4, & h5, & h6 { & h1, & h2, & h3, & h4, & h5, & h6 {
@apply my-5 font-bold; @apply my-3 font-bold;
} }
& p { & p {
@ -67,7 +67,7 @@
.post { .post {
& > div { & > div {
@apply mx-auto max-w-3xl; @apply mx-auto max-w-3xl;
@apply flex flex-col gap-5; @apply flex flex-col;
} }
& pre > code { & pre > code {

9
style/title.css Normal file
View file

@ -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;
}
}
}