diff options
| author | Mark Powers <markppowers0@gmail.com> | 2019-01-28 12:12:13 -0500 |
|---|---|---|
| committer | Mark Powers <markppowers0@gmail.com> | 2019-01-28 12:12:13 -0500 |
| commit | 80ee170990e78753d07779d59bdfe516c399d254 (patch) | |
| tree | d058cb57340e4eb0b349b8ac65afd105760c7dd0 | |
| parent | a6f52178eb79da9415d2770f2245f2cea8a05808 (diff) | |
Make home page a feed
| -rw-r--r-- | src/html/bread.html | 19 | ||||
| -rw-r--r-- | src/html/index.html | 29 | ||||
| -rw-r--r-- | src/index.js | 8 | ||||
| -rw-r--r-- | src/server.js | 7 |
4 files changed, 45 insertions, 18 deletions
diff --git a/src/html/bread.html b/src/html/bread.html index 37abee8..8004803 100644 --- a/src/html/bread.html +++ b/src/html/bread.html @@ -8,17 +8,20 @@ <link rel="stylesheet" type="text/css" href="/css/bootstrap.css"> <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> window.onload = function () { - fetch(new Request('/posts.json')).then(response => response.json()) - .then(response => { - var feed = new Vue({ - el: '.feed', - data: { posts: response.data } - }) - }); + var feed = new Vue({ + el: '.feed', + data: { + posts: [] + }, + created() { + fetch(new Request('/bread/posts.json')).then(response => response.json()) + .then(response => this.posts = response.data); + } + }); } - </script> </head> diff --git a/src/html/index.html b/src/html/index.html index 565bb73..7a1d5d5 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -8,6 +8,22 @@ <link rel="stylesheet" type="text/css" href="/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="/css/styles.css"> <link rel="shortcut icon" href="/favicon.ico"> + <script src="https://cdn.jsdelivr.net/npm/vue"></script> + <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> --> + <script> + window.onload = function () { + var feed = new Vue({ + el: '.feed', + data: { + posts: [] + }, + created() { + fetch(new Request('/index/posts.json')).then(response => response.json()) + .then(response => this.posts = response.data); + } + }); + } + </script> </head> <body> @@ -21,13 +37,14 @@ </nav> <div class="feed"> - <div class="card item"> - <div class="card-body"> - <p class="card-text"> - Welcome to marks.kitchen. Check out my <a href="/bread">bread</a>! - </p> + <div class="card" v-for="post in posts"> + <p class="card-text">{{ 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">Dec 10, 2018</p> + <p class="date">{{ post.createdAt.substring(0,10) }}</p> </div> </div> </div> diff --git a/src/index.js b/src/index.js index 1dd00a0..fdcef74 100644 --- a/src/index.js +++ b/src/index.js @@ -34,8 +34,12 @@ function setUpModels(){ const models = { "posts": database.define('posts', { description: { - type: Sequelize.STRING, - allowNull: false, + type: Sequelize.TEXT, + allowNull: false, + }, + type: { + type: Sequelize.STRING, + allowNull: false, }, }), "pictures": database.define('pictures', { diff --git a/src/server.js b/src/server.js index c94a91c..4a2a581 100644 --- a/src/server.js +++ b/src/server.js @@ -18,9 +18,12 @@ function setUpRoutes(models){ request(`http://localhost:8000?${req.url.split("?")[1]}`, function(error, response, body) { }); }) - server.get('/posts.json', async (req, res, next) => { + server.get('/:type/posts.json', async (req, res, next) => { try { - var posts = await models.posts.findAll(); + const { type } = req.params; + console.log(type); + console.log(req.params); + var posts = await models.posts.findAll({where: { type: type }}); 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); |