Begin add PostPage

src/app/mod.rs

@@ -16,11 +16,12 @@ pub fn App() -> impl IntoView {
         <Router>
             <Routes>
                 <Route path="" view=pages::Home />
-                <Route path="posts" view=|| view! {
+                <Route path="posts" view=|| view! { <pages::PostList folder="posts".to_string() /> } />
+                <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 src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
                     <script>hljs.highlightAll();</script>
-                    <pages::PostList folder="posts".to_string() />
+                    <pages::PostElement folder="posts".to_string() />
                 } />
                 <Route path="/*any" view=|| view! { <h1>"Not Found"</h1> }/>
             </Routes>

src/app/models/post.rs

@@ -11,6 +11,7 @@ pub struct PostMetadata {
 
 #[derive(Clone, Serialize, Deserialize, Debug)]
 pub struct Post {
+    pub slug : String,
     pub metadata: PostMetadata,
     pub content: String,
 }
@@ -26,6 +27,7 @@ cfg_if::cfg_if! {
                     .parse_with_struct::<PostMetadata>(&content)?;
 
                 let metadata = post_data.data;
+                let slug = format!("{}_{}", metadata.date, metadata.title.to_lowercase().replace(' ', "_"));
                 let content = post_data.content;
 
                 use pulldown_cmark::{Parser, Options, html};
@@ -34,6 +36,7 @@ cfg_if::cfg_if! {
                 html::push_html(&mut html_output, parser);
 
                 Some(Self {
+                    slug,
                     metadata,
                     content: html_output,
                 })

src/app/pages/mod.rs

@@ -2,4 +2,4 @@ mod home;
 pub use home::Home;
 
 mod posts;
-pub use posts::PostList;
+pub use posts::{PostList, PostElement};

src/app/pages/posts.rs

@@ -11,6 +11,20 @@ pub async fn get_posts(
     Ok(posts)
 }
 
+#[server]
+pub async fn get_post(
+    folder: String,
+    slug: String
+) -> Result<Post, ServerFnError> {
+    let posts = Post::get_all(&folder)
+        .map_err(|e| ServerFnError::ServerError(e.to_string()))?;
+
+    let post = posts.into_iter().find(|post| post.slug == slug)
+        .ok_or(ServerFnError::ServerError("Post not found".to_string()))?;
+
+    Ok(post)
+}
+
 #[component]
 pub fn PostList(
     folder: String
@@ -22,8 +36,7 @@ pub fn PostList(
             posts.iter()
                 .map(|post| view! {
                                 <li>
-                                    {post.metadata.title.clone()}
-                                    <div inner_html=post.content.clone() />
+                                    <a href={format!("/posts/{}", post.slug.clone())}>{post.metadata.title.clone()}</a>
                                 </li>
                             })
                 .collect_view()
@@ -39,4 +52,27 @@ pub fn PostList(
             </Suspense>
         </main>
     }
+}
+
+#[component]
+pub fn PostElement(
+    folder: String,
+) -> impl IntoView {
+    let post = create_resource(|| (), |_| get_post("posts".to_string(), "2023-11-26_testing_layout".to_string()));
+
+    let post_view = move || {
+        post.and_then(|post| {
+            view! {
+                <div inner_html={post.content.clone()}></div>
+            }
+        })
+    };
+
+    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> }>
+                {post_view}
+            </Suspense>
+        </main>
+    }
 }