Refactor Title And Loading
This commit is contained in:
parent
8845db8993
commit
f8c9888d80
10 changed files with 76 additions and 100 deletions
|
@ -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
|
||||||
|
|
|
@ -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
14
src/app/components/loading.rs
Normal 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>
|
||||||
|
}
|
||||||
|
}
|
|
@ -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};
|
16
src/app/components/title.rs
Normal file
16
src/app/components/title.rs
Normal 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>
|
||||||
|
}
|
||||||
|
}
|
|
@ -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>
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -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';*/
|
||||||
|
|
|
@ -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
9
style/title.css
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue