From 334ab41cc872d35ecad4f1758458210ab4649701 Mon Sep 17 00:00:00 2001
From: Mark Powers <markppowers0@gmail.com>
Date: Tue, 19 Mar 2019 21:21:35 -0400
Subject: Add markdown support for blog

---
 src/css/styles.css | 6 +++++-
 src/html/blog.html | 7 ++++++-
 src/html/feed.html | 2 +-
 3 files changed, 12 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/css/styles.css b/src/css/styles.css
index f9e86ef..178adaf 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -196,4 +196,8 @@ textarea {
     border: 2px solid var(--background-accent);
     width: 100%;
     height: 10em;
-}
\ No newline at end of file
+}
+
+.feed h1 {
+    font-size: 24pt;
+}
diff --git a/src/html/blog.html b/src/html/blog.html
index a0a9361..4a35319 100644
--- a/src/html/blog.html
+++ b/src/html/blog.html
@@ -9,6 +9,7 @@
     <script src="/js/feed.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
     <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script>
         window.onload = loadFeed(function () {
             var feed = new Vue({
@@ -18,7 +19,11 @@
                 },
                 created() {
                     fetch(new Request('/posts/blog')).then(response => response.json())
-                        .then(response => this.posts = response);
+                        .then(response => { response.forEach(post => {
+                                post.description = marked(post.description)
+                                this.posts.push(post);
+                            });
+                        });
                 }
             });
         })
diff --git a/src/html/feed.html b/src/html/feed.html
index 5b8cccd..15a364d 100644
--- a/src/html/feed.html
+++ b/src/html/feed.html
@@ -1,6 +1,6 @@
 <div class="feed">
     <div class="card" v-for="post in posts">
-        <p class="card-text">{{ post.description }}</p>
+        <p class="card-text" v-html="post.description"></p>
         <div class="card-img">
             <span v-for="image in post.images">
                 <a v-bind:href="image"><img v-bind:src="image"></a>
-- 
cgit v1.2.3