Enhancement/issue 4 create webapp

package.json

@@ -13,7 +13,10 @@
     "serve": "npm run clean && npm run build && http-server ./build -o"
   },
   "dependencies": {
-    "vue": "^2.4.2"
+    "bootstrap": "4.0.0-alpha.6",
+    "moment": "^2.18.1",
+    "vue": "^2.4.2",
+    "vue-router": "^2.7.0"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",
@@ -26,7 +29,9 @@
     "html-loader": "^0.5.1",
     "html-webpack-plugin": "^2.30.1",
     "http-server": "^0.10.0",
+    "node-sass": "^4.5.3",
     "rimraf": "^2.6.1",
+    "sass-loader": "^6.0.6",
     "url-loader": "^0.5.9",
     "vue-html-loader": "^1.2.4",
     "vue-loader": "^13.0.4",
@@ -36,4 +41,4 @@
     "webpack-md5-hash": "^0.0.5",
     "webpack-merge": "^4.1.0"
   }
-}
+}

src/components/bootstrap/Bootstrap.vue

@@ -0,0 +1,56 @@
+<template>
+
+  <div id="bootstrap">
+    <section>
+      <tgh-header></tgh-header>
+    </section>
+
+    <section>
+      <router-view></router-view>
+    </section>
+
+    <section>
+      <tgh-footer></tgh-footer>
+    </section>
+  </div>
+
+</template>
+
+<script>
+  import Footer from '../footer/Footer';
+  import Header from '../header/Header';
+
+  export default {
+    data: function() {
+      return {};
+    },
+    components: {
+      'tgh-header': Header,
+      'tgh-footer': Footer
+    }
+  };
+</script>
+
+<style lang="scss">
+
+  @import '~bootstrap/scss/bootstrap';
+  @import url('https://fonts.googleapis.com/css?family=Baloo+Bhaina');
+
+  //variables
+  $white: #efefef;
+  $black: #020202;
+
+  $primary: #6d0202;
+  $bg-primary: #c2b08b;
+  $bg-secondary: #ae996b;
+  $bg-tertiary: #d3c6ae;
+
+  $font-family-primary: 'Baloo Bhaina', cursive;
+  $font-color-primary: $white;
+  $font-color-secondary: #316291;
+
+  #bootstrap {
+    font-family: $font-family-primary;
+  }
+
+</style>

src/components/footer/Footer.vue

@@ -0,0 +1,33 @@
+<template>
+
+  <footer class="col-xs-12">
+
+    <p class="copyright-text">&copy; {{ year }} - <a href="http://www.thegreenhouse.io">The Greenhouse</a></p>
+
+  </footer>
+
+</template>
+
+<script>
+  export default {
+    data: function() {
+      return {
+        year: 2017
+      };
+    }
+  };
+</script>
+
+<style lang="scss">
+
+  /* TODO get variables to work */
+
+  footer {
+    .copyright-text {
+      margin: 10px auto;
+      text-align: center;
+      color: #020202;
+    }
+  }
+
+</style>

src/components/header/Header.vue

@@ -0,0 +1,45 @@
+<template>
+
+  <header class="col-xs-12">
+
+    <router-link to="/home">
+      <h2 class="hidden-md-up header-text ">The Greenhouse</h2>
+      <div class="hidden-sm-down header-banner"></div>
+      <p class="io-text">.io</p>
+    </router-link>
+
+  </header>
+
+</template>
+
+<script>
+  export default {
+    data: function() {
+      return {};
+    }
+  };
+</script>
+
+<style lang="scss">
+  header {
+    margin-bottom: 20px;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .header-text {
+    margin: 0 auto;
+  }
+
+  .header-banner {
+    background: url('images/banner.gif');
+    background-repeat: no-repeat;
+    background-position: center;
+    height: 250px;
+  }
+
+  .io-text {
+    width: 50px;
+    margin: 0 auto;
+  }
+</style>

src/components/posts-lists/PostsLists.vue

@@ -0,0 +1,66 @@
+<template>
+
+  <div>
+
+    <h2>Latest Posts</h2>
+
+    <div v-for="(post, index) in posts">
+
+      <div v-if="index < maxPosts" class="post">
+        <h4 class="post-header">{{post.title}}
+          <span class="post-time">[ {{ post.createdTimeFormatted }} ]</span>
+        </h4>
+
+        <details v-html="post.summary" class="post-summary"></details>
+
+        <router-link :to="{ path: `/posts/${post.id}`}">Click for full details</router-link>
+
+        <hr/>
+      </div>
+
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+  import _ from 'moment';
+  import PostsService from '../../services/posts-service';
+
+  const posts = new PostsService().getPosts();
+
+  function formatTimeForPosts(posts) {
+    let formattedPosts = [];
+
+    posts.forEach(post => {
+      post.createdTimeFormatted = _.unix(post.createdTime).format('MMMM Do YYYY, h:mm:ss a');
+
+      formattedPosts.push(post);
+    });
+
+    return posts;
+  }
+
+  export default {
+    data: function() {
+      return {
+        maxPosts: 2,
+        posts: formatTimeForPosts(posts)
+      };
+    }
+  };
+</script>
+
+<style lang="scss">
+  .post {
+    .post-header {
+      text-decoration: underline;
+    }
+
+    .post-time {
+      font-size: .7em;
+      text-decoration: none;
+    }
+  }
+</style>

src/index.js

@@ -1,9 +1,26 @@
 import Vue from 'vue';
+import VueRouter from 'vue-router';
 
-import Bootstrap from './components/Bootstrap.vue';
+import Bootstrap from './components/bootstrap/Bootstrap';
+import HomeView from './views/home/Home';
+import PostDetailsView from './views/posts/PostDetails.vue';
+import PostsView from './views/posts/Posts';
 
-new Vue({ // eslint-disable-line no-new
-  el: '#app',
-  components: { Bootstrap },
-  render: h => h(Bootstrap)
+// https://router.vuejs.org/en/essentials/getting-started.html
+Vue.use(VueRouter);
+
+const routes = [
+  { path: '/', component: HomeView },
+  { path: '/home', component: HomeView },
+  { path: '/posts', component: PostsView },
+  { path: '/posts/:id', component: PostDetailsView }
+];
+
+const router = new VueRouter({
+  routes // short for `routes: routes`
 });
+
+new Vue({ // eslint-disable-line no-new
+  router,
+  render: createElement => createElement(Bootstrap)
+}).$mount('#app');

src/services/posts-service.js

@@ -0,0 +1,36 @@
+export default class PostsService {
+  constructor() {
+    this.posts = [{
+      id: 1,
+      title: 'Post 1 Title',
+      summary: '<p>Analog is playing at <a href="https://www.facebook.com/tankedatthetank" target="">The Tankard</a> this Saturday, with opening act Sean Daley.  Please come join as we prevew some of the new songs on the album.</p>',
+      createdTime: 1472091258
+    }, {
+      id: 2,
+      title: 'Post 2 Title',
+      summary: 'Post 2 Summary',
+      createdTime: 1471989627
+    }, {
+      id: 3,
+      title: 'Post 3 Title',
+      summary: 'Post 3 Summary',
+      createdTime: 1471959311
+    }]
+  }
+
+  getPosts(postId) {
+
+    if(postId){
+
+      return this.posts.filter((post) => {
+        if(post.id === postId){
+          return post;
+        }
+      })[0];
+
+    }
+
+    return this.posts;
+  }
+
+}

src/vendor.js

@@ -1 +1,2 @@
+import 'moment';
 import 'vue';