Finalize

.babelrc

@@ -0,0 +1,14 @@
+{
+    "presets": [
+      ["env", { "modules": false }],
+      "stage-2"
+    ],
+    "plugins": ["transform-runtime"],
+    "comments": false,
+    "env": {
+      "test": {
+        "presets": ["env", "stage-2"],
+        "plugins": [ "istanbul" ]
+      }
+    }
+  }

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintignore

@@ -0,0 +1,2 @@
+build/*.js
+config/*.js

.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+    root: true,
+    parser: 'babel-eslint',
+    parserOptions: {
+      sourceType: 'module'
+    },
+    env: {
+      browser: true,
+    },
+    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+    extends: 'standard',
+    // required to lint *.vue files
+    plugins: [
+      'html'
+    ],
+    // add your custom rules here
+    'rules': {
+      // allow paren-less arrow functions
+      'arrow-parens': 0,
+      // allow async-await
+      'generator-star-spacing': 0,
+      // allow debugger during development
+      'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+    }
+  }

.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.postcssrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+    "plugins": {
+      // to edit target browsers: use "browserlist" field in package.json
+      "autoprefixer": {}
+    }
+  }

src/App.vue

@@ -18,11 +18,11 @@
 
       <div class="phone-viewport">
         <md-list>
-          <md-list-item @click.native="toggleSideNavLeft('/')">
+          <md-list-item @click="toggleSideNavLeft('/')">
             <md-icon>home</md-icon>
             <span>Home</span>
           </md-list-item>
-          <md-list-item @click.native="toggleSideNavLeft('/post')">
+          <md-list-item @click="toggleSideNavLeft('/post')">
             <md-icon>add</md-icon>
             <span>New Post</span>
           </md-list-item>
@@ -37,15 +37,15 @@
 </template>
 
 <script>
-export {
-  name: 'app'
+export default {
+  name: 'app',
   methods: {
-    toggleSideNavLeft(route) {
-      if (typeof (route) == 'object') {
+    toggleSideNavLeft (route) {
+      if (typeof (route) === 'object') {
         this.$refs.leftSidenav.toggle()
       } else {
         this.$refs.leftSidenav.toggle()
-        this.router.push(route)
+        this.$router.push(route)
       }
     }
   }

src/components/Detail.vue

@@ -23,9 +23,9 @@ export default {
     return {
       cat: {
         asObject: true,
-        source: this.$db.ref('cats').child(this.id),
+        source: this.$db.ref('cats').child(this.id)
       }
-    },
+    }
   }
 }
 </script>

src/components/Home.vue

@@ -1,17 +1,18 @@
 <template lang="html">
   <div id="home">
     <h1>Home</h1>
+    <!-- {{latestCats}} -->
     <md-card v-for="cat in latestCats" :key="cat['.key']">
       <md-card-media>
-        <img src="cat.url" :alt="cat.comment">
+        <img :src="cat.url" :alt="cat.comment">
       </md-card-media>
 
       <md-card-header>
         <div class="md-title">{{ cat.comment }}</div>
       </md-card-header>
 
       <md-card-actions>
-        <router-link to="'/detail/'+cat['.key']">
+        <router-link :to="'/detail/'+cat['.key']">
           <md-button>Details</md-button>
         </router-link>
       </md-card-actions>
@@ -22,13 +23,13 @@
 <script>
 export default {
   firebase () {
-    {
-      cats: this.$db.ref('cats');
+    return {
+      cats: this.$db.ref('cats')
     }
   },
   computed: {
-    latestCats: {
-      this.cats.reverse()
+    latestCats: function () {
+      return this.cats.reverse()
     }
   }
 }

src/components/Post.vue

@@ -43,28 +43,30 @@ export default {
         detail: ''
       },
       loading: true,
-      err: false,
+      err: false
     }
   },
   methods: {
-    getCat() {
-      this.$http.get('http://random.cat/meow')
+    getCat () {
+      // this.$http.get('http://random.cat/meow')
+      this.$http.get('https://yesno.wtf/api')
         .then((response) => {
-          this.randomCat.url = response.data.file
+          // this.randomCat.url = response.data.file
+          this.randomCat.url = response.data.image
           setTimeout(() => { this.loading = false }, 1000)
         })
         .catch((err) => {
           this.err = err
         })
     },
-    postCat() {
+    postCat () {
       console.log('postCat ', this.randomCat)
       this.$db.ref('cats').push(this.randomCat, () => {
-        this.$router.push('/');
+        this.$router.push('/')
       })
     }
   },
-  mounted: {
+  mounted: function () {
     this.getCat()
   }
 }

src/main.js

@@ -4,7 +4,7 @@ import Vue from 'vue'
 import VueFire from 'vuefire'
 import axios from 'axios'
 import App from './App'
-import router from 'router'
+import router from './router'
 import VueMaterial from 'vue-material'
 import 'vue-material/dist/vue-material.css'
 import firebase from 'firebase'