Add animation, blog, and feed template

11 files changed, 188 insertions, 41 deletions

diff --git a/src/css/styles.css b/src/css/styles.css
index 9a7d048..a455835 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -1,5 +1,39 @@
+:root {
+    --background: #fff;
+    --background-accent: #f0f0f0;
+    --accent: #ada;
+    --text: #000;
+    --btn-color: #2d2;
+    --btn-text: #000;
+    --btn-hover: #0a0;
+    --light-text: #aaa
+}
+  
+
 body {
     padding: 15px;
+    background-color: var(--background); 
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+h1 {
+    font-size: 30pt;
+    font-weight: 150;
+    margin-bottom: 0;
+}
+
+@keyframes zoom-left {
+    0%   {left: 100%; }
+    100% {left: 0;}
+}
+
+footer {
+    text-align: center;
+    padding-top: 1em;
+    padding-bottom: 2em;
+    border-top: 1px solid var(--light-text);
+    color: var(--light-text);
+    background-color: var(--background-accent);
 }
 
 .essay{
@@ -7,14 +41,14 @@ body {
 }
 
 .figure {
-    border: 1px solid #777777; 
-    background-color: #dddddd;
+    border: 1px solid #777; 
+    background-color: #ddd;
     padding: 10px;
 }
 
 .item {
     margin: 10px;
-    border: 2px solid #777777;
+    border: 2px solid #777;
     border-radius: 5px;
     padding: 7px;
 }
@@ -26,15 +60,17 @@ img {
 .card {
     margin: 1em;
     padding: 2%;
-    border: 1px solid #aaaaaa;
+    border: 1px solid var(--text);
+    border-radius: 3px;
     display: inline;
     min-width: 200px;
+    background-color: var(--background-accent);
 }
 
 .card img {
     width: 100%;
-    padding: 2%;
-    
+    margin: 2%;
+    border: 2px solid #888;
 }
 
 .main-page{
@@ -42,10 +78,22 @@ img {
     flex-direction: row;
 }
 
+#feed {
+    width: 100%;
+}
 .feed {
     width: 90%;
     display: flex;
     flex-direction: column;
+    margin-top: 8px;
+    animation-name: zoom-left;
+    animation-duration: .5s;
+    animation-iteration-count: 1;
+    position: relative;
+}
+
+p {
+    margin-top: 0;
 }
 
 @media screen and (min-width: 900px) {
@@ -60,14 +108,20 @@ img {
 }
 
 .sidebar {
-    height: 100vh; 
+    /* height: 50vh;  */
+    height: 100%;
     width: 100px; 
     margin: 20px;
+    padding: 20px;
+    border: 1px solid var(--text);
+    border-radius: 3px;
+    background-color: var(--background-accent);
 }
 
 .sidebar ul {
     list-style: none;
     padding: 0;
+    margin-top: 0;
 }
 
 .sidebar ul li {
@@ -77,18 +131,46 @@ img {
     margin-right: auto;
 }
 
-.btn-primary {
+.btn {
+    display: inline-block;
+    padding: 1px 3px;
+    border: 1px solid var(--btn-text);
+    border-radius: 3px;
     width: 100%;
-    height: 2em;
-    border-radius: 0;
+    max-width: 100px;
+    line-height: 2em;
     text-align: center;
+    vertical-align: middle;
+    white-space: nowrap;
+    text-decoration: none;
+}
+
+.btn-primary {
+    height: 2em;
     font-size: 20px;
+    background-color: var(--btn-color);
+    color: var(--btn-text);
+}
+
+.btn-primary:hover{
+    background-color: var(--btn-hover);
 }
 
 .date {
     font-style: italic;
     margin: 0em;
 }
+.tag {
+    font-style: normal;
+    padding-left: 1em;
+    font-weight: lighter;
+    font-size: .8em;
+    text-decoration: none;
+    color: var(--light-text);
+}
+.tag::before{
+    content: "#";
+}
 
 .url-table, .ip-table {
     width: 30%;
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>
 
diff --git a/src/index.js b/src/index.js
index c689779..5315c8d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -57,6 +57,9 @@ function setUpModels(){
         "pictures": database.define('pictures', {
             source: { type: Sequelize.TEXT, allowNull: false},
           }),
+        "tags": database.define('tags', {
+            text: { type: Sequelize.TEXT, allowNull: false},
+          }),
         "users": database.define('user', {
             username: {
               type: Sequelize.STRING,
@@ -73,6 +76,7 @@ function setUpModels(){
         })
     }
     models.pictures.belongsTo(models.posts);
+    models.tags.belongsTo(models.posts);
     return models;
 }
 
diff --git a/src/js/feed.js b/src/js/feed.js
new file mode 100644
index 0000000..a80af9c
--- /dev/null
+++ b/src/js/feed.js
@@ -0,0 +1,10 @@
+function loadFeed(callback){
+  var myRequest = new Request('/feed');
+  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 5bbb980..1f0573c 100644
--- a/src/server.js
+++ b/src/server.js
@@ -66,6 +66,8 @@ function setUpRoutes(models, jwtFunctions, database) {
     server.get('/admin', (req, res) => res.sendFile(__dirname + "/html/admin.html"));
     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('/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"));
     server.get('/setScore', (req, res) => {
@@ -82,6 +84,9 @@ function setUpRoutes(models, jwtFunctions, database) {
             res.status(400).send(e.message);
         }
     })
+    server.get('/blog/:id', async (req, res, next) => {
+
+    });
     server.get('/posts/:type', async (req, res, next) => {
         try {
             const { type } = req.params;
@@ -90,6 +95,9 @@ function setUpRoutes(models, jwtFunctions, database) {
             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;
             }
             res.status(200).send(posts);
             next();
@@ -105,6 +113,9 @@ function setUpRoutes(models, jwtFunctions, database) {
                 await models.pictures.create({ "source": "uploads/" + file.filename, "postId": newPost.id });
                 console.log("uploaded ", file.path);
             })
+            req.body.tags.split(" ").forEach(async (tag) => {
+                await models.tags.create({ "text": tag, "postId": newPost.id});
+            })
             console.log(newPost);
             res.redirect(`/${type}`);
             next();
@@ -137,6 +148,9 @@ function setUpRoutes(models, jwtFunctions, database) {
     server.get('/essay/:id', (req, res) => {
         res.sendFile(__dirname + "/html/essay/" + req.params.id);
     });
+    server.get('/js/:id', (req, res) => {
+        res.sendFile(__dirname + "/js/" + req.params.id);
+    });
 
 }