Add blog page css

Cargo.toml

@@ -37,7 +37,7 @@ actix-files = { version = "0.6", optional = true }
 actix-web = { version = "4", features = ["macros"], optional = true }
 futures = { version = "0.3", optional = true }
 simple_logger = { version = "4.2", optional = true }
-pulldown-cmark = { version = "0.9", optional = true } # markdown parser
+pulldown-cmark = { version = "0.9", optional = true } # Markdown parser
 gray_matter = { version = "0.2", optional = true } # frontmatter parser
 
 [features]

src/app/mod.rs

@@ -13,15 +13,15 @@ pub fn App() -> impl IntoView {
     view! {
         <Stylesheet id="leptos" href="/pkg/portfolio.css"/>
         <Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
+        <Link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark-dimmed.min.css"/>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
         <Router>
             <Routes>
                 <Route path="" view=pages::Home/>
                 <Route path="posts" view=pages::PostList/>
                 <Route path="posts/:slug" view=|| view! {
-                        <Link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css"/>
+                    <script>hljs.highlightAll();</script>
-                        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+                    <pages::PostElement/>
-                        <script>hljs.highlightAll();</script>
-                        <pages::PostElement/>
                 }/>
             </Routes>
         </Router>

src/app/pages/posts.rs

@@ -1,7 +1,6 @@
 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> {
@@ -32,7 +31,7 @@ pub fn PostList() -> impl IntoView {
         posts.and_then(|posts| {
             posts.iter()
                 .map(|post| view! {
-                                <div>
+                                <a href=format!("posts/{}", post.slug.clone())>
                                     <img src={post.metadata.image_path.clone()} alt=format!("Image {}", post.metadata.title)/>
 
                                     <div>
@@ -40,7 +39,7 @@ pub fn PostList() -> impl IntoView {
                                         <p>{post.metadata.description.clone()}</p>
                                         <span>{post.metadata.date.clone()}</span>
                                     </div>
-                                </div>
+                                </a>
                             })
                 .collect_view()
         })
@@ -75,7 +74,7 @@ pub fn PostElement() -> impl IntoView {
     view! {
         <main class="post">
             <Suspense fallback=move || view! { <p>"Chargement des posts..."</p> }>
-                {post_view}
+                <div>{post_view}</div>
             </Suspense>
         </main>
     }

style/post.css

@@ -3,8 +3,28 @@
         @apply bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface;
         @apply min-h-screen py-5;
 
-        & > h1 {
+        & h1 {
-            @apply font-bold text-3xl text-center;
+            @apply font-bold text-3xl;
+        }
+
+        & h2 {
+            @apply font-bold text-2xl;
+        }
+
+        & h3 {
+            @apply font-bold text-xl;
+        }
+
+        & h4 {
+            @apply font-bold text-lg;
+        }
+
+        & h5 {
+            @apply font-bold text-base;
+        }
+
+        & h6 {
+            @apply font-bold text-sm;
         }
     }
 
@@ -12,7 +32,7 @@
         & > .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 {
+            & > a {
                 @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;
@@ -23,12 +43,19 @@
 
                 & > div {
                     @apply p-5 flex flex-col gap-3;
-
-                    & > h2 {
-                        @apply font-bold text-2xl;
-                    }
                 }
             }
         }
     }
+
+    .post {
+        & > div {
+            @apply mx-auto max-w-3xl;
+            @apply flex flex-col gap-5;
+        }
+
+        & pre > code {
+            @apply rounded-md my-2;
+        }
+    }
 }