cleaned, switched from stylus to sass

assets/css/app.scss

@@ -0,0 +1,15 @@
+.full-width{
+  width:100%;
+}
+
+
+.center-content{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+}
+
+*:focus{
+  outline: 1px dotted red;
+}

assets/css/app.styl

@@ -1,10 +0,0 @@
-.full-width
-  width 100%
-
-.center-content
-  display flex
-  justify-content center
-  align-items center
-
-*:focus
-  outline: 1px dotted red;

build/webpack.config.dev.js

@@ -4,7 +4,7 @@ const webpack = require('webpack')
 const merge = require('webpack-merge')
 const baseConfig = require('./webpack.config.base')
 
-const PORT = 8080
+const PORT = 8988
 
 module.exports = merge(baseConfig, {
   mode: 'development',
@@ -31,11 +31,11 @@ module.exports = merge(baseConfig, {
           'css-loader'
         ]
       }, {
-        test: /\.styl(us)?$/,
+        test: /\.scss$/,
         use: [
           'vue-style-loader',
           'css-loader',
-          'stylus-loader'
+          'sass-loader'
         ]
       }
     ]

build/webpack.config.prod.js

@@ -22,15 +22,15 @@ module.exports = merge(baseConfig, {
       {
         test: /\.css?$/,
         use: [
-          MiniCssExtractPlugin.loader, 
+          MiniCssExtractPlugin.loader,
           'css-loader'
         ]
       }, {
-        test: /\.styl(us)?$/,
+        test: /\.scss$/,
         use: [
-          MiniCssExtractPlugin.loader, 
-          'css-loader', 
-          'stylus-loader'
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'sass-loader'
         ]
       }
     ]

package.json

@@ -47,6 +47,8 @@
     "jest": "^24.5.0",
     "jest-serializer-vue": "^2.0.2",
     "mini-css-extract-plugin": "^0.5.0",
+    "node-sass": "^4.12.0",
+    "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",

src/App.vue

@@ -3,11 +3,10 @@
     <header role="banner">
       <h1
         tabindex="0"
-        @click="closePost()"
-        @keydown.enter="closePost()"
       >
         Les Guides de Paris
       </h1>
+      <HeaderMenu />
     </header>
     <section class="container center-content">
       <RouterView />
@@ -17,7 +16,8 @@
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex'
+import HeaderMenu from './components/nav/HeaderMenu'
+// import { mapState, mapActions } from 'vuex'
 
 export default {
   metaInfo: {
@@ -26,19 +26,18 @@ export default {
     // all titles will be injected into this template
     titleTemplate: '%s | Guides de Paris'
   },
-  computed: mapState({
-    opened: state => state.posts.opened
-  }),
-  methods: mapActions('posts', [
-    'closePost'
-  ])
+  components: {
+    HeaderMenu
+  }
 }
 </script>
 
-<style lang="stylus" scoped>
+<style lang="scss" scoped>
 
-.container
-  font-family 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
-  max-width 1200px
+.container{
+  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  max-width: 1200px;
+
+}
 
 </style>

src/api/datarest.js

@@ -1,21 +0,0 @@
-import { HTTP } from './http-axios'
-
-export default {
-  getPosts (cb) {
-    HTTP.get('posts')
-      .then(response => {
-        console.log('response', response)
-        cb(response.data)
-      })
-  },
-  getPost (id, cb) {
-    HTTP.get(`posts/` + id)
-      .then(response => {
-        console.log('response', response)
-        cb(response.data)
-      })
-      .catch(e => {
-        this.errors.push(e)
-      })
-  }
-}

src/components/Home/Posts.vue

@@ -1,52 +0,0 @@
-<template>
-  <section v-if="opened != null">
-    <h2>{{ opened.title }}</h2>
-    <p>{{ opened.body }}</p>
-    <a
-      href="#"
-      @click="closePost()"
-      @keydown.enter="closePost()"
-    >
-      close
-    </a>
-  </section>
-  <ul v-else>
-    <li
-      v-for="post in posts"
-      :key="post.id"
-    >
-      <h2>
-        <a
-          :href="'#post-'+post.id"
-          @click="openPost(post)"
-          @keydown.enter="openPost(post)"
-        >
-          {{ post.title }}
-        </a>
-      </h2>
-    </li>
-  </ul>
-</template>
-
-<script>
-import { mapState, mapActions } from 'vuex'
-
-export default {
-  computed: mapState({
-    opened: state => state.posts.opened,
-    posts: state => state.posts.all
-  }),
-  created () {
-    this.$store.dispatch('posts/getAllPosts')
-  },
-  methods: mapActions('posts', [
-    'openPost',
-    'closePost'
-  ]),
-  metaInfo () {
-    return {
-      title: this.opened !== null ? this.opened.title : 'home'
-    }
-  }
-}
-</script>

src/components/nav/HeaderMenu.vue

@@ -0,0 +1,19 @@
+<template>
+  <nav id="">
+    <ul>
+      <li><a href="#">Index</a></li>
+      <li><a href="#">Bibliographie</a></li>
+      <li><a href="#">Blog</a></li>
+    </ul>
+  </nav>
+</template>
+<script>
+export default {
+  name: 'HeaderMenu',
+  data: () => ({
+
+  })
+}
+</script>
+<style lang="scss" scoped>
+</style>

src/index.js

@@ -3,7 +3,7 @@ import router from './router'
 import store from './store'
 import Meta from 'vue-meta'
 import App from './App'
-import 'assets/css/app.styl'
+import 'assets/css/app.scss'
 
 Vue.use(Meta)
 

src/pages/Home.vue

@@ -1,15 +1,11 @@
 <template>
   <div class="full-width">
-    <Posts />
+    <h2>Home</h2>
   </div>
 </template>
 
 <script>
-import Posts from 'components/Home/Posts'
 
 export default {
-  components: {
-    Posts
-  }
 }
 </script>

src/router/index.js

@@ -7,6 +7,7 @@ Vue.use(Router)
 
 const routes = [
   {
+    name: 'home',
     path: '*',
     component: Home
   }

src/store/index.js

@@ -1,12 +1,11 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import posts from './modules/posts'
 
 // https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart
 
 Vue.use(Vuex)
 export default new Vuex.Store({
   modules: {
-    posts
+    // search
   }
 })

src/store/modules/posts.js

@@ -1,48 +0,0 @@
-import datarest from '../../api/datarest'
-
-// initial state
-const state = {
-  all: [],
-  opened: null
-}
-
-// getters
-const getters = {}
-
-// actions
-const actions = {
-  getAllPosts ({ commit }) {
-    datarest.getPosts(posts => {
-      commit('setPosts', posts)
-    })
-  },
-  openPost ({ commit }, post) {
-    datarest.getPost(post.id, post => {
-      commit('setOpened', post)
-    })
-  },
-  closePost ({ commit }) {
-    commit('clearOpened')
-  }
-}
-
-// mutations
-const mutations = {
-  setPosts (state, posts) {
-    state.all = posts
-  },
-  setOpened (state, post) {
-    state.opened = post
-  },
-  clearOpened (state) {
-    state.opened = null
-  }
-}
-
-export default {
-  namespaced: true,
-  state,
-  getters,
-  actions,
-  mutations
-}