completed the interface to write the posts

templates/admin/add_post.html.tera

@@ -1,17 +1,69 @@
 {% extends "base" %}
 
+{% block extracss %}
+<style>
+  div.container {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+  }
+
+  div.editable form {
+      height: 100%;
+  }
+
+  div.editable input#title {
+      width: 76%;
+      margin: 10px 10px 10px 0;
+  }
+
+  div.editable textarea {
+      width: 95%;
+      height: 85%;
+      box-sizing: border-box;
+  }
+</style>
+{% endblock extracss %}
+
 {% block content %}
+<div class="editable">
   <form action="" method="post">
-  <p>
-    <label for="">Título</label>
-    <input name="title" type="text"/>
-    <label for="">Publicar</label>
+    <input id="title" name="title" type="text"/>
+    <label for="">Visible</label>
     <input name="published" type="checkbox" value="true"/>
-  </p>
-  <p>
-    <label for="">Contenido</label>
-    <textarea cols="30" name="content" rows="10"></textarea>
-  </p>
+    <textarea id="content"name="content"></textarea>
     <button>Publicar</button>
   </form>
+</div>
+<div id="preview" class="preview">
+</div>
 {% endblock content %}
+
+{% block extrajs %}
+<script src="https://cdn.jsdelivr.net/npm/showdown@1.9.0/dist/showdown.min.js"></script>
+<script>
+  function delay(fn, ms) {
+      let timer = 0
+      return function(...args) {
+          clearTimeout(timer)
+          timer = setTimeout(fn.bind(this, ...args), ms || 0)
+      }
+  }
+
+  let converter = new showdown.Converter({
+      parseImgDimensions: true,
+      strikethrough: true,
+      tables: true,
+      tasklists: true,
+      emoji: true
+  });
+  document.getElementById("content").addEventListener("keyup", delay(() => {
+      let text = "# " + document.getElementById("title").value.trim() + "\n" + document.getElementById("content").value;
+      document.getElementById("preview").innerHTML = converter.makeHtml(text);
+  }, 500));
+
+  document.getElementById("title").addEventListener("keyup", delay(() => {
+      let text = "# " + document.getElementById("title").value.trim() + "\n" + document.getElementById("content").value;
+      document.getElementById("preview").innerHTML = converter.makeHtml(text);
+  }, 500));
+</script>
+{% endblock extrajs %}