diff options
Diffstat (limited to 'src/html')
| -rw-r--r-- | src/html/admin.html | 5 | ||||
| -rw-r--r-- | src/html/blog.html | 36 | ||||
| -rw-r--r-- | src/html/bread.html | 18 | ||||
| -rw-r--r-- | src/html/essay.html | 1 | ||||
| -rw-r--r-- | src/html/feed.html | 16 | ||||
| -rw-r--r-- | src/html/index.html | 22 | ||||
| -rw-r--r-- | src/html/login.html | 1 |
7 files changed, 68 insertions, 31 deletions
diff --git a/src/html/admin.html b/src/html/admin.html index 1ec7e15..0f98eea 100644 --- a/src/html/admin.html +++ b/src/html/admin.html @@ -5,7 +5,6 @@ <title>Mark's Kitchen - Admin</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/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> --> @@ -36,12 +35,16 @@ <textarea rows="4" cols="50" name="description"></textarea> </div> <div> + <span>Tags: <input type="text" name="tags"/></span> + </div> + <div> Images: <input type="file" name="images" multiple> </div> <div> <select name="type"> <option value="" disabled selected>Select...</option> <option value="bread">Bread</option> + <option value="blog">Blog</option> <option value="index">Index</option> </select> </div> diff --git a/src/html/blog.html b/src/html/blog.html new file mode 100644 index 0000000..01cd2f6 --- /dev/null +++ b/src/html/blog.html @@ -0,0 +1,36 @@ +<!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 = loadFeed(function () { + console.log("callback!"); + var feed = new Vue({ + el: '.feed', + data: { + posts: [] + }, + created() { + fetch(new Request('/posts/blog')).then(response => response.json()) + .then(response => this.posts = response); + } + }); + }) + </script> +</head> + +<body> + <div> + <h1>Blog</h1> + <div id="feed"></div> + </div> +</body> + +</html>
\ No newline at end of file diff --git a/src/html/bread.html b/src/html/bread.html index 1ce1478..0658e11 100644 --- a/src/html/bread.html +++ b/src/html/bread.html @@ -5,12 +5,12 @@ <title>Mark's Kitchen - Bread</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/bootstrap.css"> <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 = function () { + window.onload = loadFeed(function () { var feed = new Vue({ el: '.feed', data: { @@ -21,7 +21,7 @@ .then(response => this.posts = response); } }); - } + }) </script> </head> @@ -29,17 +29,7 @@ <div> <h1>Bread</h1> Some highlights (and lowlights) of breadmaking - <div class="feed"> - <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">{{ post.createdAt.substring(0,10) }}</p> - </div> - </div> + <div id="feed"></div> </div> </body> diff --git a/src/html/essay.html b/src/html/essay.html index 7110df1..6152a4f 100644 --- a/src/html/essay.html +++ b/src/html/essay.html @@ -5,7 +5,6 @@ <title>Mark's Kitchen - Essays</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/bootstrap.css"> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> diff --git a/src/html/feed.html b/src/html/feed.html new file mode 100644 index 0000000..358ef61 --- /dev/null +++ b/src/html/feed.html @@ -0,0 +1,16 @@ +<div class="feed"> + <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"> + {{ post.createdAt.substring(0,10) }} + <span v-for="tag in post.tags"> + <a class="tag" href="#">{{tag}}</a> + </span> + </p> + </div> +</div>
\ No newline at end of file diff --git a/src/html/index.html b/src/html/index.html index 01f6e4e..73ed147 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -5,13 +5,13 @@ <title>Mark's Kitchen</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/bootstrap.css"> <link rel="stylesheet" type="text/css" href="/css/styles.css"> <link rel="shortcut icon" href="/favicon.ico"> + <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 = function () { + window.onload = loadFeed(function () { var feed = new Vue({ el: '.feed', data: { @@ -22,7 +22,7 @@ .then(response => this.posts = response); } }); - } + }) </script> </head> @@ -32,22 +32,16 @@ <nav class="float-left sidebar"> <ul> <li><a href="bread" class="btn btn-primary">Bread</a></li> + <li><a href="blog" class="btn btn-primary">Blog</a></li> <li><a href="essay" class="btn btn-primary">Essays</a></li> </ul> </nav> - <div class="feed"> - <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">{{ post.createdAt.substring(0,10) }}</p> - </div> - </div> + <div id="feed"></div> </div> + <footer> + <div>Mark Powers</div> + </footer> </body> </html>
\ No newline at end of file diff --git a/src/html/login.html b/src/html/login.html index 53a2d06..58ca2ae 100644 --- a/src/html/login.html +++ b/src/html/login.html @@ -5,7 +5,6 @@ <title>Mark's Kitchen - Login</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/bootstrap.css"> <link rel="stylesheet" type="text/css" href="/css/styles.css"> </head> |