diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/css/styles.css | 9 | ||||
| -rw-r--r-- | src/html/blog.html | 1 | ||||
| -rw-r--r-- | src/html/feed.html | 2 | ||||
| -rw-r--r-- | src/html/tags.html | 40 | ||||
| -rw-r--r-- | src/js/feed.js | 1 | ||||
| -rw-r--r-- | src/server.js | 49 |
6 files changed, 81 insertions, 21 deletions
diff --git a/src/css/styles.css b/src/css/styles.css index a455835..fdb2551 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -6,7 +6,7 @@ --btn-color: #2d2; --btn-text: #000; --btn-hover: #0a0; - --light-text: #aaa + --light-text: #aaa; } @@ -46,13 +46,6 @@ footer { padding: 10px; } -.item { - margin: 10px; - border: 2px solid #777; - border-radius: 5px; - padding: 7px; -} - img { image-orientation: from-image; } diff --git a/src/html/blog.html b/src/html/blog.html index 01cd2f6..a0a9361 100644 --- a/src/html/blog.html +++ b/src/html/blog.html @@ -11,7 +11,6 @@ <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> --> <script> window.onload = loadFeed(function () { - console.log("callback!"); var feed = new Vue({ el: '.feed', data: { diff --git a/src/html/feed.html b/src/html/feed.html index 358ef61..5b8cccd 100644 --- a/src/html/feed.html +++ b/src/html/feed.html @@ -9,7 +9,7 @@ <p class="date"> {{ post.createdAt.substring(0,10) }} <span v-for="tag in post.tags"> - <a class="tag" href="#">{{tag}}</a> + <a class="tag" v-bind:href="'/tags#'+tag">{{tag}}</a> </span> </p> </div> diff --git a/src/html/tags.html b/src/html/tags.html new file mode 100644 index 0000000..9c6174d --- /dev/null +++ b/src/html/tags.html @@ -0,0 +1,40 @@ +<!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="/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> + window.onload = window.onhashchange = function () { + loadFeed(function () { + var feed = new Vue({ + el: '#view', + data: { + posts: [], + tag: window.location.hash + }, + created() { + console.log(this.tag); + var tag = window.location.hash.substring(1); + fetch(new Request(`/tags/${tag}`)).then(response => response.json()) + .then(response => this.posts = response); + } + }); + }) + } + </script> +</head> + +<body> + <div id="view"> + <h1>Selecting: {{tag}}</h1> + <div id="feed"></div> + </div> +</body> + +</html>
\ No newline at end of file diff --git a/src/js/feed.js b/src/js/feed.js index a80af9c..87302f3 100644 --- a/src/js/feed.js +++ b/src/js/feed.js @@ -3,7 +3,6 @@ function loadFeed(callback){ fetch(myRequest).then(function(response) { return response.text(); }).then(function(response) { - console.log(response); document.getElementById("feed").innerHTML = response; callback() }); diff --git a/src/server.js b/src/server.js index 1f0573c..adcc846 100644 --- a/src/server.js +++ b/src/server.js @@ -4,6 +4,8 @@ const cookieParser = require('cookie-parser'); const request = require('request'); const crypto = require('crypto'); +const Op = require('sequelize').Op; + const multer = require('multer'); var storage = multer.diskStorage({ destination: function (req, file, cb) { @@ -23,6 +25,15 @@ const server = express(); server.use(cookieParser()) server.use(bodyParser.urlencoded({ extended: true })); +async function addImagesAndTagsToPosts(models, posts){ + for (const post of posts) { + const images = await models.pictures.findAll({ attributes: ["source"], where: { postId: post.id } }).map(x => x.source); + post.images = images; + const tags = await models.tags.findAll({ attributes: ["text"], where: { postId: post.id } }).map(x => x.text); + post.tags= tags; + } +} + function listen(port) { server.listen(port, () => console.info(`Listening on port ${port}!`)); } @@ -67,6 +78,7 @@ function setUpRoutes(models, jwtFunctions, database) { server.get('/login', (req, res) => res.sendFile(__dirname + "/html/login.html")) server.get('/bread', (req, res) => res.sendFile(__dirname + "/html/bread.html")); server.get('/blog', (req, res) => res.sendFile(__dirname + "/html/blog.html")); + server.get('/tags', (req, res) => res.sendFile(__dirname + "/html/tags.html")); server.get('/feed', (req, res) => res.sendFile(__dirname + "/html/feed.html")); server.get('/essay', (req, res) => res.sendFile(__dirname + "/html/essay.html")); server.get('/snake', (req, res) => res.sendFile(__dirname + "/html/snake.html")); @@ -85,20 +97,37 @@ function setUpRoutes(models, jwtFunctions, database) { } }) server.get('/blog/:id', async (req, res, next) => { - - }); + // TODO add single page blog posts + }) + server.get('/tags/:name', async (req, res, next) => { + console.log("TAGS/NAME"); + try { + const { name } = req.params; + const postsWithTag = await models.tags.findAll({ attributes: ["postId"], where: { text: name } }) + .map(function(x) { + return {id: x.postId} + }); + var posts = await models.posts.findAll({ + where: { [Op.or]: postsWithTag }, order: [['createdAt', 'DESC']] + }); + posts = posts.map(x => x.get({ plain: true })); + await addImagesAndTagsToPosts(models, posts) + console.log(posts); + res.status(200).send(posts); + next(); + } catch (e) { + console.error(e); + res.status(400).send(e.message); + } + }) server.get('/posts/:type', async (req, res, next) => { try { const { type } = req.params; - var posts = await models.posts.findAll({ where: { type: type }, order: [['createdAt', 'DESC']] }); + var posts = await models.posts.findAll({ + where: { type: type }, order: [['createdAt', 'DESC']] + }); posts = posts.map(x => x.get({ plain: true })); - for (const post of posts) { - const images = await models.pictures.findAll({ attributes: ["source"], where: { postId: post.id } }).map(x => x.source); - post.images = images; - const tags = await models.tags.findAll({ attributes: ["text"], where: { postId: post.id } }).map(x => x.text); - console.log(tags); - post.tags= tags; - } + await addImagesAndTagsToPosts(models, posts) res.status(200).send(posts); next(); } catch (e) { |