Write posts in Markdown

Cargo.lock

  "async-std",
  "chrono",
  "dotenv",
+ "pulldown-cmark",
  "serde 1.0.115",
  "serde_json",
  "tera",
  "unicode-xid",
 ]
 
+[[package]]
+name = "pulldown-cmark"
+version = "0.7.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ca36dea94d187597e104a5c8e4b07576a8a45aa5db48a65e12940d3eb7461f55"
+dependencies = [
+ "bitflags",
+ "memchr",
+ "unicase",
+]
+
 [[package]]
 name = "quote"
 version = "1.0.7"
  "unic-common",
 ]
 
+[[package]]
+name = "unicase"
+version = "2.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "50f37be617794602aabbeee0be4f259dc1778fabe05e2d67ee8f79326d5cb4f6"
+dependencies = [
+ "version_check",
+]
+
 [[package]]
 name = "unicode-bidi"
 version = "0.3.4"

microblog-lib/Cargo.toml

 async-std = { version = "1.6.0", features = ["attributes"] }
 chrono = { version = "0.4", features = ["serde", "rustc-serialize"] }
 dotenv = "0.15.0"
+pulldown-cmark = { version = "0.7", default-features = false }
 serde = "1.0.115"
 serde_json = "1.0.57"
 tera = "1.5.0"

microblog-lib/src/lib.rs

 mod middleware;
 mod post;
 mod routes;
+mod util;
 
 use middleware::*;
 
         .with(require_guest)
         .get(routes::login_page)
         .post(routes::login);
+    app.at("/preview")
+        .with(require_auth)
+        .post(routes::preview_post);
     app.at("/logout").with(require_auth).post(routes::logout);
 
     Ok(app)

microblog-lib/src/post.rs

 use serde_json;
 use std::io::{Error, ErrorKind};
 
-use crate::fs;
+use crate::{fs, util};
 
 #[derive(Debug, Serialize, Deserialize)]
 pub struct Post {
     pub id: String,
     pub title: String,
     pub body: String,
+    pub html: String,
     pub date: String,
 }
 
         fs::write_post_to_disk(self)
     }
 
+    pub fn generate_html(&mut self) -> String {
+        util::generate_html(&self.body)
+    }
+
     pub fn from_str(blob: &str) -> Result<Post, Error> {
-        let mut post: Post = match serde_json::from_str(blob) {
+        let post: Post = match serde_json::from_str(blob) {
             Ok(p) => Ok(p),
             Err(_) => Err(Error::new(
                 ErrorKind::Other,
                 format!("Error deserializing post"),
             )),
         }?;
-        post.body = post.body.replace("\n", "<br>");
         Ok(post)
     }
 }

microblog-lib/src/routes.rs

 
 use std::env;
 
-use crate::{fs, post::Post, State};
+use crate::{fs, post::Post, util, State};
 
 #[derive(Debug, Serialize, Deserialize)]
 struct User {
     let post_id = req.param("id")?;
     let mut post = fs::get_one_post(post_id).await?;
     post.body = post.body.replace("<br>", "\n");
+    post.html = post.generate_html();
     context.insert("post", &post);
     render_html_response("edit.html", &context, req)
 }
     post.id = Uuid::new_v4().to_string();
     post.date = Local::now().date().naive_local().to_string();
     post.body = post.body.trim().to_owned();
+    post.html = post.generate_html();
     post.save().await?;
     Ok(Redirect::new("/").into())
 }
 
 pub async fn update_post(mut req: Request<State>) -> Result {
     let mut post: Post = req.body_form().await?;
+    post.html = post.generate_html();
     post.save().await?;
     req.session_mut()
         .insert("flash_success", String::from("Post updated successfully"))?;
     render_json_response(json!({ "success": "true" }))
 }
 
+pub async fn preview_post(mut req: Request<State>) -> Result {
+    let body: String = req.body_string().await?;
+    let html = util::generate_html(&body);
+    render_json_response(json!({ "body": html }))
+}
+
 pub async fn login_page(req: Request<State>) -> Result {
     render_html_response("login.html", &Context::new(), req)
 }

microblog-lib/src/util.rs

+use pulldown_cmark::{html, Options, Parser};
+
+pub fn generate_html(s: &str) -> String {
+    let options = Options::all();
+    let parser = Parser::new_ext(s, options);
+    let mut html_output = String::new();
+    html::push_html(&mut html_output, parser);
+    html_output
+}

static/script.js

 
     const form = document.querySelector('#post-form');
     const textarea = form.querySelector('[name=body]');
-    const preview = document.createElement('div');
-    const content = document.createElement('div');
-    preview.id = 'preview';
+    const previewContainer = document.createElement('div');
+    const contentContainer = document.createElement('div');
+    const content = textarea.value.trim();
+    previewContainer.id = 'preview';
 
-    if (textarea.value.trim().length === 0) {
+    if (content.length === 0) {
       return;
     }
 
     const closeButton = createCloseButton();
 
-    content.innerHTML = textarea.value;
-    preview.append(closeButton);
-    preview.append(content);
-    form.append(preview);
+    fetch('/preview', {
+      method: 'POST',
+      body: content,
+    }).then((r) =>
+      r.json().then((r) => {
+        contentContainer.innerHTML = r.body;
+        previewContainer.append(closeButton);
+        previewContainer.append(contentContainer);
+        form.append(previewContainer);
+      }),
+    );
   });
 }

static/style.css

   font-size: 18px;
 }
 
+#preview {
+  margin: 1em 0;
+}
+
 @media (max-width: 500px) {
   .form__button {
     width: 100%;

templates/components.html

     </div>
   </h3>
   <div class="post__body">
-    {{ post.body | safe }}
+    {{ post.html | safe }}
   </div>
 </div>
 {% endmacro %} {% macro form(post=false, action) %}
     name="date"
     value="{% if post %}{{ post.date }}{% endif %}"
   />
+  <input type="hidden" name="html" />
   <div class="form__field">
     <label for="title" class="form__label">Title</label>
     <input