Add blog list page css

markdowns/posts/test_2.md

@@ -0,0 +1,68 @@
+---
+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"]
+```

src/app/mod.rs

@@ -1,4 +1,4 @@
-mod components;
+pub mod components;
 pub mod models;
 mod pages;
 

src/app/pages/posts.rs

@@ -1,6 +1,7 @@
 use leptos::*;
 use leptos_router::*;
 use crate::app::models::Post;
+use crate::app::components::Link;
 
 #[server]
 pub async fn get_posts() -> Result<Vec<Post>, ServerFnError> {
@@ -31,20 +32,26 @@ pub fn PostList() -> impl IntoView {
         posts.and_then(|posts| {
             posts.iter()
                 .map(|post| view! {
-                                <li>
-                                    <a href={format!("/posts/{}", post.slug.clone())}>{post.metadata.title.clone()}</a>
-                                </li>
+                                <div>
+                                    <img src={post.metadata.image_path.clone()} alt=format!("Image {}", post.metadata.title)/>
+
+                                    <div>
+                                        <h2>{post.metadata.title.clone()}</h2>
+                                        <p>{post.metadata.description.clone()}</p>
+                                        <span>{post.metadata.date.clone()}</span>
+                                    </div>
+                                </div>
                             })
                 .collect_view()
         })
     };
 
     view! {
-        <main class="m-0 p-0 bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface">
-            <h1>"My Great Blog"</h1>
+        <main class="posts">
+            <h1>Blog</h1>
 
-            <Suspense fallback=move || view! { <p>"Loading posts..."</p> }>
-                <ul>{posts_view}</ul>
+            <Suspense fallback=move || view! { <p>"Chargement des posts..."</p> }>
+                <div class="posts__cards">{posts_view}</div>
             </Suspense>
         </main>
     }
@@ -66,8 +73,8 @@ pub fn PostElement() -> impl IntoView {
     };
 
     view! {
-        <main class="m-0 p-0 bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface">
-            <Suspense fallback=move || view! { <p>"Loading posts..."</p> }>
+        <main class="post">
+            <Suspense fallback=move || view! { <p>"Chargement des posts..."</p> }>
                 {post_view}
             </Suspense>
         </main>

style/portfolio.css

@@ -4,6 +4,7 @@
 
 @import './link.css';
 @import './project.css';
+@import './post.css';
 @import './social_links.css';
 @import './tag.css';
 @import './timeline.css';

style/post.css

@@ -0,0 +1,34 @@
+@layer components {
+    .posts, .post {
+        @apply bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface;
+        @apply min-h-screen py-5;
+
+        & > h1 {
+            @apply font-bold text-3xl text-center;
+        }
+    }
+
+    .posts {
+        & > .posts__cards {
+            @apply grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 m-5;
+
+            & > div {
+                @apply rounded-xl overflow-hidden relative;
+                @apply bg-primary/10 dark:bg-dark_primary/10;
+                @apply shadow-md shadow-primary/5 dark:shadow-dark_primary/5;
+
+                & > img {
+                    @apply w-full h-48 object-cover;
+                }
+
+                & > div {
+                    @apply p-5 flex flex-col gap-3;
+
+                    & > h2 {
+                        @apply font-bold text-2xl;
+                    }
+                }
+            }
+        }
+    }
+}