diff options
| author | Mark Powers <markppowers0@gmail.com> | 2019-09-19 10:35:27 -0500 |
|---|---|---|
| committer | Mark Powers <markppowers0@gmail.com> | 2019-09-19 10:35:27 -0500 |
| commit | 0dcae858838d2a4bdd2324b31e6f771de6d68294 (patch) | |
| tree | 23e6151aa67bc7a34e12ca625e84d8521495eb7e | |
| parent | a73da0d736a50b7fb10f010b9ae4cc3e551c59e7 (diff) | |
Add single page blog posts
| -rw-r--r-- | src/css/styles.css | 5 | ||||
| -rw-r--r-- | src/html/blog-single.html | 61 | ||||
| -rw-r--r-- | src/html/blog.html | 27 | ||||
| -rw-r--r-- | src/html/bread.html | 5 | ||||
| -rw-r--r-- | src/html/email.html | 5 | ||||
| -rw-r--r-- | src/html/tags.html | 4 | ||||
| -rw-r--r-- | src/server.js | 2 |
7 files changed, 99 insertions, 10 deletions
diff --git a/src/css/styles.css b/src/css/styles.css index f0f90d2..07d674e 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -204,3 +204,8 @@ textarea { .feed h1 { font-size: 24pt; } + +a.navigation:visited, a.navigation:link { + color: var(--accent); + text-decoration: none; +}
\ No newline at end of file diff --git a/src/html/blog-single.html b/src/html/blog-single.html new file mode 100644 index 0000000..75cbf92 --- /dev/null +++ b/src/html/blog-single.html @@ -0,0 +1,61 @@ +<!doctype html> +<html lang="en"> + +<head> + <title>Mark's Kitchen - Blog</title> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <link rel="stylesheet" type="text/css" href="/css/styles.css"> + <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 = function () { + var feed = new Vue({ + el: '.feed', + data: { + posts: [] + }, + created() { + var id = parseInt(window.location.pathname.split("/")[2]); + fetch(new Request('/posts/blog')).then(response => response.json()) + .then(response => { response.forEach(post => { + if(post.id == id){ + post.description = marked(post.description) + this.posts.push(post); + } + }); + }); + } + }); + } + </script> +</head> + +<body> + <div> + <h1> + <a class="navigation" href="/" title="marks.kitchen"><</a> + <a class="navigation" href="/blog" title="marks.kitchen/blog"><</a> + Blog + </h1> + <div id="feed" class="feed"> + <div class="card" v-for="post in posts"> + <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> + </span> + </div> + <p class="date"> + <a v-bind:href="'/blog/'+post.id">{{ post.createdAt.substring(0,10) }}</a> + <span v-for="tag in post.tags"> + <a class="tag" v-bind:href="'/tags#'+tag">{{tag}}</a> + </span> + </p> + </div> + </div> + </div> +</body> + +</html>
\ No newline at end of file diff --git a/src/html/blog.html b/src/html/blog.html index 4a35319..c034711 100644 --- a/src/html/blog.html +++ b/src/html/blog.html @@ -6,12 +6,11 @@ <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" type="text/css" href="/css/styles.css"> - <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 () { + window.onload = function () { var feed = new Vue({ el: '.feed', data: { @@ -26,14 +25,32 @@ }); } }); - }) + } </script> </head> <body> <div> - <h1>Blog</h1> - <div id="feed"></div> + <h1> + <a class="navigation" href="/" title="marks.kitchen"><</a> + Blog + </h1> + <div id="feed" class="feed"> + <div class="card" v-for="post in posts"> + <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> + </span> + </div> + <p class="date"> + <a v-bind:href="'/blog/'+post.id">{{ post.createdAt.substring(0,10) }}</a> + <span v-for="tag in post.tags"> + <a class="tag" v-bind:href="'/tags#'+tag">{{tag}}</a> + </span> + </p> + </div> + </div> </div> </body> diff --git a/src/html/bread.html b/src/html/bread.html index 0658e11..aa52655 100644 --- a/src/html/bread.html +++ b/src/html/bread.html @@ -27,7 +27,10 @@ <body> <div> - <h1>Bread</h1> + <h1> + <a class="navigation" href="/" title="marks.kitchen"><</a> + Bread + </h1> Some highlights (and lowlights) of breadmaking <div id="feed"></div> </div> diff --git a/src/html/email.html b/src/html/email.html index dfd9b51..13f34d5 100644 --- a/src/html/email.html +++ b/src/html/email.html @@ -22,7 +22,10 @@ <body> <div> - <h1>Email</h1> + <h1> + <a class="navigation" href="/" title="marks.kitchen"><</a> + Email + </h1> <p>Sign up to receive Mark's email newsletter</p> <h2 id="status" v-if='show'>Success, thank you!</h2> <div class="form"> diff --git a/src/html/tags.html b/src/html/tags.html index 9c6174d..7f2cb16 100644 --- a/src/html/tags.html +++ b/src/html/tags.html @@ -8,7 +8,7 @@ <link rel="stylesheet" type="text/css" href="/css/styles.css"> <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/vue/dist/vue.js"></script> <script> window.onload = window.onhashchange = function () { loadFeed(function () { @@ -32,7 +32,7 @@ <body> <div id="view"> - <h1>Selecting: {{tag}}</h1> + <h1>Viewing: {{tag}}</h1> <div id="feed"></div> </div> </body> diff --git a/src/server.js b/src/server.js index 9899736..4355adf 100644 --- a/src/server.js +++ b/src/server.js @@ -108,7 +108,7 @@ function setUpRoutes(models, jwtFunctions, database) { } }) server.get('/blog/:id', async (req, res, next) => { - // TODO add single page blog posts + res.sendFile(__dirname + "/html/blog-single.html"); }) server.get('/tags/:name', async (req, res, next) => { console.log("TAGS/NAME"); |