Add animation, blog, and feed template

1 files changed, 4 insertions, 14 deletions

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>