Markdown preview

assets/js/index.js

@@ -1,8 +1,28 @@
-document.querySelector('[data-generate-button]').addEventListener('click',
-  function (e) {
+document
+  .querySelector('[data-generate-button]')
+  .addEventListener('click', function(e) {
     var r = confirm('Are you sure? This will overwrite any existing content.');
     if (!r) {
       e.preventDefault();
     }
+  });
+
+var iframe = document.querySelector('iframe');
+var contentTextArea = document.querySelector('#content[name=content]');
+if (iframe && contentTextArea) {
+  var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+  var styleNode = document.createElement('style');
+  styleNode.innerText = 'body { margin: 0; }';
+  iframeDocument.head.appendChild(styleNode);
+  var preview = iframeDocument.querySelector('body');
+  if (preview) {
+    var timeout;
+    preview.innerHTML = marked(contentTextArea.value);
+    contentTextArea.addEventListener('input', function(e) {
+      clearTimeout(timeout);
+      timeout = setTimeout(function() {
+        preview.innerHTML = marked(e.target.value);
+      }, 500);
+    });
   }
-);
+}

assets/scss/style.scss

@@ -41,6 +41,10 @@ body {
   min-height: 100vh;
 }
 
+iframe {
+  border: none;
+}
+
 .heading {
   border-bottom: 1px solid $black;
   font-size: $heading-font-size;

yird/app.py

@@ -24,8 +24,9 @@ yird_settings = Settings()
 
 
 @app.context_processor
-def inject_site_name():
+def inject_settings():
     return {
+        "show_markdown_preview": yird_settings.MARKDOWN_PREVIEW,
         "site_name": yird_settings.SITE_NAME
     }
 

yird/settings.py

@@ -12,3 +12,4 @@ class Settings:
             settings_file = json.loads(f.read())
             self.PUBLIC_PATH = settings_file['PUBLIC_PATH']
             self.SITE_NAME = settings_file['SITE_NAME']
+            self.MARKDOWN_PREVIEW = settings_file['MARKDOWN_PREVIEW']

yird/templates/layout.html.j2

@@ -51,6 +51,7 @@
       {% block content %}{% endblock %}
     </main>
   </div>
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <script src="{{ url_for('static', filename=asset_url_for('app_js.js')) }}"></script>
 </body>
 </html>

yird/templates/posts/form.html.j2

@@ -24,5 +24,13 @@
     <div class="form__field form__field--submit">
       <input type="submit" value="Submit" class="form__submit button">
     </div>
+
+    {% if show_markdown_preview %}
+      <h3 class="heading">
+        Preview
+      </h3>
+      <iframe src="about:blank" width="100%">
+      </iframe>
+    {% endif %}
   </form>
 {% endblock %}