added vue-meta plugin, fixed article prev next, fixed page title on articles

config/sync/core.extension.yml

@@ -190,6 +190,7 @@ module:
   filefield_sources: 1
   menu_admin_per_menu: 1
   menu_link_content: 1
+  pathauto: 1
   content_translation: 10
   views: 10
   materio_id: 11

package-lock.json

@@ -5348,7 +5348,8 @@
     "deepmerge": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
-      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "dev": true
     },
     "define-properties": {
       "version": "1.1.3",
@@ -11807,6 +11808,7 @@
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/vue-meta/-/vue-meta-2.4.0.tgz",
       "integrity": "sha512-XEeZUmlVeODclAjCNpWDnjgw+t3WA6gdzs6ENoIAgwO1J1d5p1tezDhtteLUFwcaQaTtayRrsx7GL6oXp/m2Jw==",
+      "dev": true,
       "requires": {
         "deepmerge": "^4.2.2"
       }

package.json

@@ -23,7 +23,6 @@
     "vue-autofocus-directive": "^1.0.4",
     "vue-cool-lightbox": "^2.6.9",
     "vue-infinite-loading": "^2.4.5",
-    "vue-meta": "^2.4.0",
     "vue-router": "^3.4.9",
     "vue-vimeo-player": "^0.1.0",
     "vue-youtube-embed": "^2.2.2",
@@ -68,6 +67,7 @@
     "vue-jest": "^3.0.7",
     "vue-js-modal": "^2.0.0-rc.6",
     "vue-loader": "^15.9.5",
+    "vue-meta": "^2.4.0",
     "vue-server-renderer": "^2.6.12",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.12",

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -31,6 +31,9 @@ import router from 'vuejs/route'
 // import * as Locales from 'assets/i18n/locales.json'
 import { i18n, loadLanguageAsync } from 'vuejs/i18n'
 
+import VueMeta from 'vue-meta'
+Vue.use(VueMeta)
+
 import VUserBlock from 'vuejs/components/Block/UserBlock'
 import VMainContent from 'vuejs/components/Content/MainContent'
 import VSearchBlock from 'vuejs/components/Block/SearchBlock'
@@ -273,6 +276,12 @@ import 'theme/assets/styles/main.scss'
       _v_main_content = new Vue({
         store,
         i18n,
+        metaInfo: {
+          // if no subcomponents specify a metaInfo.title, this title will be used
+          title: "materiO'",
+          // all titles will be injected into this template
+          titleTemplate: "%s | materiO'"
+        },
         render: h => h(VMainContent, { props: { id: id, html: main_html, isfront: drupalSettings.path.isFront } })
       }).$mount('#' + id)
     }

web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue

@@ -7,18 +7,18 @@
       <ul>
         <li>
           <a
-            @click.prevent="onPrev"
-            href="#"
             v-if="prevnext.prev"
+            :href="prevnext.prev.view_node"
             v-html="prevnext.prev.title"
+            @click.prevent="onPrevNext(prevnext.prev.view_node)"
           />
         </li>
         <li>
           <a
-            @click.prevent="onNext"
-            href="#"
             v-if="prevnext.next"
+            :href="prevnext.next.view_node"
             v-html="prevnext.next.title"
+            @click.prevent="onPrevNext(prevnext.next.view_node)"
           />
         </li>
       </ul>
@@ -95,18 +95,18 @@
       <ul>
         <li>
           <a
-            @click.prevent="onPrev"
-            href="#"
             v-if="prevnext.prev"
+            :href="prevnext.prev.view_node"
             v-html="prevnext.prev.title"
+            @click.prevent="onPrevNext(prevnext.prev.view_node)"
           />
         </li>
         <li>
           <a
-            @click.prevent="onNext"
-            href="#"
             v-if="prevnext.next"
+            :href="prevnext.next.view_node"
             v-html="prevnext.next.title"
+            @click.prevent="onPrevNext(prevnext.next.view_node)"
           />
         </li>
       </ul>
@@ -142,13 +142,18 @@ export default {
       prevnext:{},
       nid:null,
       path: null,
-      article:null,
+      article:{},
       image_accroche: null,
       lightbox_items: null,
       loading:true,
       lightbox_index:null,
     }
   },
+  metaInfo () {
+    return {
+      title: this.article.title
+    }
+  },
   computed: {
     ...mapState({
       items: state => state.Blabla.items
@@ -187,17 +192,6 @@ export default {
 
       if(this.path){
         this.loadArticle()
-        // get the prev next items
-        if(!this.items.length){
-          // if items list not yet loaded preload them
-          this.getItems().then(() => {
-            // then get the index
-            this.getIndex()
-          })
-        }else{
-          // or directly get the index
-          this.getIndex()
-        }
       }else{
         // if for any reason we dont have the uuid
         // redirect to home
@@ -205,10 +199,10 @@ export default {
       }
     },
     getIndex(){
-      console.log("Article getIndex");
+      console.log("Article getIndex article.id:", this.article.id);
-      this.getItemIndex(this.nid).then((index) => {
+      this.getItemIndex(this.article.id).then((index) => {
         this.index = index
-        // console.log('article index', index, this);
+        console.log('article index', index, this);
         this.getPrevNextItems(index).then((pn) => {
           this.prevnext = pn
         })
@@ -218,13 +212,6 @@ export default {
       console.log('loadArticle')
       this.loading = true
 
-      // let ast = gql`{
-      //   article(id: ${this.nid}) {
-      //     ...ArticleFields
-      //   }
-      // }
-      // ${ articleFields }
-      // `
       let ast = gql`{
         route(path: "${this.path}") {
           ...ArticleFields
@@ -232,7 +219,6 @@ export default {
       }
       ${ articleFields }
       `
-
       MGQ.post('', { query: print(ast)
       })
         .then(({ data:{data:{route}}}) => {
@@ -248,6 +234,18 @@ export default {
       console.log('parseDataGQL article', article)
       this.article = article
 
+      // get the prev next items
+      if(!this.items.length){
+        // if items list not yet loaded preload them
+        this.getItems().then(() => {
+          // then get the index
+          this.getIndex()
+        })
+      }else{
+        // or directly get the index
+        this.getIndex()
+      }
+
       this.image_accroche = article.images[0]
 
       this.lightbox_items = [];
@@ -296,24 +294,34 @@ export default {
 
       this.loading = false;
     },
-    onNext(){
+    onPrevNext(a){
       // console.log('clicked on next', this.prevnext.next);
-      let alias = this.prevnext.next.view_node.replace(/^.?\/blabla\//g, '')
+      // let alias = this.prevnext.next.view_node.replace(/^.?\/blabla\//g, '')
+      let alias = a.replace(/^.?\/blabla\//g, '')
       this.$router.push({
         name:`article`,
-        params: { alias:alias },
+        params: { alias:alias }
-        query: { uuid: this.prevnext.next.uuid }
+        // query: { uuid: this.prevnext.next.uuid }
-      })
-    },
-    onPrev(){
-      // console.log('clicked on prev', this.prevnext.next);
-      let alias = this.prevnext.prev.view_node.replace(/^.?\/blabla\//g, '')
-      this.$router.push({
-        name:`article`,
-        params: { alias:alias },
-        query: { uuid: this.prevnext.prev.uuid }
       })
     },
+    // onNext(){
+    //   // console.log('clicked on next', this.prevnext.next);
+    //   let alias = this.prevnext.next.view_node.replace(/^.?\/blabla\//g, '')
+    //   this.$router.push({
+    //     name:`article`,
+    //     params: { alias:alias }
+    //     // query: { uuid: this.prevnext.next.uuid }
+    //   })
+    // },
+    // onPrev(){
+    //   // console.log('clicked on prev', this.prevnext.next);
+    //   let alias = this.prevnext.prev.view_node.replace(/^.?\/blabla\//g, '')
+    //   this.$router.push({
+    //     name:`article`,
+    //     params: { alias:alias }
+    //     // query: { uuid: this.prevnext.prev.uuid }
+    //   })
+    // },
     setLightboxIndex(index) {
       this.lightbox_index = index
     }

web/themes/custom/materiotheme/vuejs/store/modules/blabla.js

@@ -68,11 +68,14 @@ export default {
       dispatch('getItems')
     },
     getItemIndex ({ dispatch, commit, state }, nid) {
+      console.log('getItemIndex nid', nid)
       return state.items.findIndex((e) => {
-        return e.nid == nid
+        // console.log('findIndex', e, nid);
+        return e.nid === nid
       })
     },
     getPrevNextItems ({ dispatch, commit, state }, index) {
+      // TODO: preload prev and next items
       return {
         prev: state.items[index - 1],
         next: state.items[index + 1]