md-parser/package.json

@@ -14,7 +14,6 @@
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-markdown": "^2.2.4",
-    "vue-material": "^1.0.0-beta-15",
     "vue-resource": "^1.5.1",
     "vue-router": "^3.3.4",
     "vuex": "^3.5.1"

md-parser/src/App.vue

@@ -15,13 +15,10 @@
       <router-view id='sub-content'></router-view>
     </transition>
   </div>
-</template>
+</template>s
 
 <script>
 
-import 'vue-material/dist/vue-material.min.css'
-import 'vue-material/dist/theme/default.css'
-
 export default {
   name: 'App',
   components: {
@@ -64,30 +61,15 @@ export default {
 
 #top-band {
   width:100%;
-  height:10px;
-  background-color: yellow;
+  height:40px;
+  background : linear-gradient(#e6e6ff, #ffffff);
 }
 
 .fade-enter-active, .fade-leave-active {
   transition: opacity .5s;
 }
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
-{
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
 }
 
-.nav {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.nav-link {
-  display: inline-block;
-  width: 30em;
-  vertical-align: top;
-  max-width: 300px;
-  text-align: center;
-}
-
-</style>
+</style>

md-parser/src/components/ArticleForm.vue

@@ -7,16 +7,16 @@
       <div class='form-group'>
         <label for='date-published'>Publication date</label>
         <input v-model='date_created' type='date' name='date-published' id='date-published' class='form-control form-control-sm'>
-        <input type='button' class='btn btn-default today-button' @click.prevent="setToday('date-published')" value='today'><br>
+        <input type='button' class='btn btn-default today-button' @click.prevent="setToday(1)" value='today'><br>
       </div>
 
       <div class='form-group'>
         <label for='date-modified'>Modification date</label>
         <input v-model='date_modified' type='date' name='date-modified' id='date-modified' class='form-control form-control-sm'>
-        <input type='button' class='btn btn-default today-button' @click.prevent="setToday('date-modified')" value='today'><br>
+        <input type='button' class='btn btn-default today-button' @click.prevent="setToday(2)" value='today'><br>
       </div>
       <div class='form-group'>
-        <label for='meta-title'>Title</label>
+        <label for='meta-title'>meta title</label>
         <input v-model='title' type='text' name='meta-title' id='meta-title' placeholder="What's up ?" class='form-control form-control-lg'>
       </div>
     </form>
@@ -47,14 +47,6 @@ export default {
         "date_modified": this.date_modified,
         "title": this.title
       }
-    },
-    // Input-ready current day.
-    // Based on https://gomakethings.com/setting-a-date-input-to-todays-date-with-vanilla-js/.
-    today (){
-      let obj = new Date()
-      return obj.getFullYear().toString() + "-"
-        + (obj.getMonth() +1).toString().padStart(2,0) + "-"
-        + obj.getDate().toString().padStart(2,0)
     }
   },
   watch: {
@@ -72,11 +64,14 @@ export default {
     },
   },
   methods : {
+    // WIP : sets meta date to today.
+    // params: date= 1 => set date_created
+    //         date = 2 => set date_modified
+    setToday : function(date) {
+      this.$store.commit('today', date)
+    },
     sendMeta: function(){
       this.$store.commit('updateMeta', this.meta)
-    },
-    setToday(id){
-      document.getElementById(id).value = this.today
     }
   }
 

md-parser/src/components/UserInput.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <textarea v-model="userInput" placeholder="edit me" id='textbox' value='this.articleText'></textarea>
+        <textarea v-model='userInput' placeholder="edit me" id='textbox'></textarea>
     </div>
 </template>
 
@@ -11,26 +11,19 @@ export default {
   },
   data: function(){
     return {
-      userInput: ""
+      userInput: this.articleText
+    }
+  },
+  computed :{
+    articleText () {
+      return this.$store.state.article.content
     }
   },
-  // computed :{
-  //   articleText () {
-  //     let var_content = this.$store.getters.getContent
-  //     console.log('getting article text in user input' + var_content)
-  //     return this.$store.getters.getContent()
-  //   }
-  // },
   watch: {
     // commits a mutation to the store at each change of the text to update global state
-    userInput : function(){
-      this.$emit('articleUpdate')
-      this.$store.commit('updateText', this.userInput)
+    userInput: function(){
+        this.$store.commit('updateText', this.userInput)
     }
-  },
-  mounted: function(){
-    this.userInput = this.$store.getters.getContent
-    console.log("Mounted ! " + this.$store.getters.getContent)
   }
 }
 </script>

md-parser/src/components/UserInputPage.vue

@@ -1,8 +1,8 @@
 <template>
     <div>
         <article-form></article-form>
-        <UserInput class="input-area column" @articleUpdate="articleUpate"></UserInput>
-        <vue-markdown :source='userText' class="column" id='render-area'></vue-markdown>
+        <UserInput class="input-area column"></UserInput>
+        <vue-markdown :source='articleText' class="column" id='render-area'></vue-markdown>
         <publish-button @update='articleUpate'></publish-button>
     </div>
 </template>
@@ -25,21 +25,19 @@ export default {
   },
   data: function() {
     return{
-      userText: '',
+      usertext: '',
+    }
+  },
+  computed: {
+    articleText() {
+      return this.$store.state.article.content
     }
   },
   methods: {
     // saves article content
     articleUpate : function() {
-      console.log('updating in UserInputPage')
-      this.userText = this.$store.getters.getContent
-    },
-    articlePublish: function(){
       this.$router.push('/published')
-    }
-  },
-  mounted: function(){
-    this.userText = this.$store.getters.getContent
+    },
   }
 }
 </script>

md-parser/src/main.js

@@ -10,15 +10,12 @@ import VueResource from 'vue-resource'
 import { store } from './store/store'
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
-import VueMaterial from 'vue-material'
 
 Vue.use(VueRouter)
 Vue.use(BootstrapVue)
 Vue.use(VueResource)
 Vue.use(Vuex)
 
-Vue.use(VueMaterial)
-
 Vue.config.productionTip = false
 
 const routes = [

md-parser/src/store/store.js

@@ -16,7 +16,7 @@ export const store = new Vuex.Store({
     }
   },
   getters: {
-    getContent(state) {
+    getContent (state) {
       return state.article.content
     }
   },
@@ -43,4 +43,4 @@ export const store = new Vuex.Store({
       state.article.content = ""
     }
   }
-})
+})