diff options
Diffstat (limited to 'src/html')
| -rw-r--r-- | src/html/bread.html | 19 | ||||
| -rw-r--r-- | src/html/index.html | 29 |
2 files changed, 34 insertions, 14 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> |