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

Refactor Title And Loading

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
markdowns/posts/test.md
View file

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

76
markdowns/posts/test_2.md
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;
```

14
src/app/components/loading.rs Normal file
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>
}
}

7
src/app/components/mod.rs
View file

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

16
src/app/components/title.rs Normal file
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>
}
}

14
src/app/mod.rs
View file

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

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

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

1
style/portfolio.css
View file

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

4
style/post.css
View file

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

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