aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorMark Powers <markppowers0@gmail.com>2019-03-19 21:21:35 -0400
committerMark Powers <markppowers0@gmail.com>2019-03-19 21:21:35 -0400
commit334ab41cc872d35ecad4f1758458210ab4649701 (patch)
tree567ec589a5c08a5fe9c3837bfbfc179c09626ec6 /src
parent3d682ea13ab9d83f453fa85ea88fc28163c6b259 (diff)
Add markdown support for blog
Diffstat (limited to 'src')
-rw-r--r--src/css/styles.css6
-rw-r--r--src/html/blog.html7
-rw-r--r--src/html/feed.html2
3 files changed, 12 insertions, 3 deletions
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>