add basic markdown support

Author: The-DevBlog

devblog/devblog/client/Cargo.lock

@@ -7,17 +7,13 @@ edition = "2021"
 
 [dependencies]
 chrono = { version = "0.4.33", features = ["serde"] }
-cookie = "0.18.0"
 gloo = "0.11.0"
 gloo-net = "0.5.0"
-reqwasm = "0.5.0"
 serde = "1.0.196"
-serde-wasm-bindgen = "0.6.3"
 serde_json = "1.0.113"
 stylist = { version = "0.13.0", features = ["yew", "parser"] }
 wasm-bindgen = "0.2.90"
 wasm-bindgen-futures = "0.4.40"
-wasm-cookies = "0.2.1"
 web-sys = { version = "0.3.67", features = ["HtmlInputElement"] }
 yew = { version = "0.21.0", features = ["csr"] }
 yew-router = "0.18.0"

devblog/devblog/client/Cargo.toml

@@ -0,0 +1,30 @@
+use yew::{function_component, html, Html, Properties};
+
+#[derive(Properties, PartialEq, Clone)]
+pub struct Props {
+    pub content: String,
+}
+
+#[function_component(Markdown)]
+pub fn markdown(props: &Props) -> Html {
+    let html = props.content.lines().map(|line| match line {
+        l if l.starts_with("# ") => html! {<h1>{&l[1..]}</h1>},
+        l if l.starts_with("## ") => html! {<h2>{&l[2..]}</h2>},
+        l if l.starts_with("### ") => html! {<h3>{&l[3..]}</h3>},
+        l if l.starts_with("#### ") => html! {<h4>{&l[4..]}</h4>},
+        l if l.starts_with("```") => {
+            html! {<p><code lang="rust">{line.replace("```", "")}</code></p>}
+        }
+        l if l.starts_with("---") => html! {<hr/>},
+        l if l.starts_with("___") => html! {<hr/>},
+        l if l.starts_with("-") => html! {<li>{&l[1..]}</li>},
+        l if l.is_empty() => html! {<br/>},
+        _ => html! {<p>{line}</p>},
+    });
+
+    html! {
+        <div>
+            {for html}
+        </div>
+    }
+}

devblog/devblog/client/src/components/markdown.rs

@@ -4,6 +4,7 @@ pub mod comment_delete;
 pub mod comment_edit;
 pub mod footer;
 pub mod items;
+pub mod markdown;
 pub mod navbar;
 pub mod notifications;
 pub mod pager;

devblog/devblog/client/src/components/mod.rs

@@ -1,11 +1,12 @@
 use crate::{
     components::{
-        comment::Comment, comment_add::AddComment, post_delete::DeletePost, post_edit::EditPost,
-        vote::Vote,
+        comment::Comment, comment_add::AddComment, markdown::Markdown, post_delete::DeletePost,
+        post_edit::EditPost, vote::Vote,
     },
     CommentModel, PostModel,
 };
 use chrono::{Local, TimeZone};
+use gloo::console::log;
 use std::ops::Deref;
 use stylist::Style;
 use yew::{function_component, html, use_effect_with, use_state, Callback, Html, Properties};
@@ -46,6 +47,7 @@ pub fn post(props: &Props) -> Html {
         Callback::from(move |id| {
             let mut new_comments = comments_clone.deref().clone();
             if let Some(idx) = new_comments.iter().position(|c| c.id == id) {
+                log!("IDXXXX: ", idx);
                 new_comments.remove(idx);
                 comments_clone.set(new_comments);
             }
@@ -88,7 +90,10 @@ pub fn post(props: &Props) -> Html {
                 <Vote up_votes={props.post.up_votes.len()} down_votes={props.post.down_votes.len()} post_id={props.post.id}/>
 
                 // DESCRIPTION
-                <div class="description">{description.deref()}</div>
+                // <div class="description">{description.deref()}</div>
+                <div class="description">
+                    <Markdown content={description.deref().clone()}/>
+                </div>
 
                 // COMMENTS
                 <AddComment post_id={props.post.id} on_comment_add={&on_comment_add}/>

devblog/devblog/client/src/components/post.rs

@@ -1,4 +1,4 @@
-use crate::{helpers, store::Store, Api};
+use crate::{components::markdown::Markdown, helpers, store::Store, Api};
 use gloo_net::http::Method;
 use std::ops::Deref;
 use stylist::{css, Style};
@@ -199,9 +199,7 @@ pub fn add_post() -> Html {
                             <p>{"Preview:"}</p>
                             <div class="post-preview">
                                 <span>{"preview content:"}</span>
-                                <p>
-                                    // {parser}
-                                </p>
+                                <Markdown content={description.deref().clone()}/>
                             </div>
                             <button>{"Create Post"}</button>
                         </div>

devblog/devblog/client/src/pages/post_add.rs

@@ -0,0 +1,3 @@
+# hello world
+
+---