drafted article display, added materio_decoupled module

config/sync/core.extension.yml

@@ -90,6 +90,7 @@ module:
   mailgun: 0
   maillog: 0
   mailsystem: 0
+  materio_decoupled: 0
   materio_home: 0
   materio_jsonapi: 0
   materio_migrate: 0

config/sync/views.view.admin_nodes.yml

@@ -5149,6 +5149,73 @@ display:
           separator: ', '
           field_api_classes: false
           plugin_id: field
+        created:
+          id: created
+          table: node_field_data
+          field: created
+          relationship: none
+          group_type: group
+          admin_label: ''
+          label: 'Authored on'
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: true
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: value
+          type: timestamp
+          settings:
+            date_format: html_date
+            custom_date_format: ''
+            timezone: ''
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+          entity_type: node
+          entity_field: created
+          plugin_id: field
         changed:
           id: changed
           table: node_field_data
@@ -5557,6 +5624,7 @@ display:
             field_linked_materials: field_linked_materials
             field_workflow: field_workflow
             field_migration: field_migration
+            created: created
             changed: changed
             field_memo: field_memo
           info:
@@ -5618,14 +5686,23 @@ display:
               separator: ''
               empty_column: false
               responsive: ''
+            created:
+              sortable: true
+              default_sort_order: desc
+              align: ''
+              separator: ''
+              empty_column: false
+              responsive: ''
             changed:
-              sortable: false
+              sortable: true
-              default_sort_order: asc
+              default_sort_order: desc
               align: ''
               separator: ''
               empty_column: false
               responsive: ''
             field_memo:
+              sortable: false
+              default_sort_order: asc
               align: ''
               separator: ''
               empty_column: false

config/sync/views.view.blabla.yml

@@ -19,6 +19,7 @@ dependencies:
     - smart_trim
     - taxonomy
     - user
+    - workflow
 id: blabla
 label: Blabla
 module: views
@@ -476,18 +477,127 @@ display:
           separator: ', '
           field_api_classes: false
           plugin_id: field
-      filters:
+        view_node:
-        status:
+          id: view_node
-          value: '1'
+          table: node
-          table: node_field_data
+          field: view_node
-          field: status
+          relationship: none
-          plugin_id: boolean
+          group_type: group
+          admin_label: ''
+          label: ''
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          text: view
+          output_url_as_text: true
+          absolute: false
           entity_type: node
-          entity_field: status
+          plugin_id: entity_link
-          id: status
+        created:
-          expose:
+          id: created
-            operator: ''
+          table: node_field_data
-          group: 1
+          field: created
+          relationship: none
+          group_type: group
+          admin_label: ''
+          label: ''
+          exclude: false
+          alter:
+            alter_text: false
+            text: ''
+            make_link: false
+            path: ''
+            absolute: false
+            external: false
+            replace_spaces: false
+            path_case: none
+            trim_whitespace: false
+            alt: ''
+            rel: ''
+            link_class: ''
+            prefix: ''
+            suffix: ''
+            target: ''
+            nl2br: false
+            max_length: 0
+            word_boundary: true
+            ellipsis: true
+            more_link: false
+            more_link_text: ''
+            more_link_path: ''
+            strip_tags: false
+            trim: false
+            preserve_tags: ''
+            html: false
+          element_type: ''
+          element_class: ''
+          element_label_type: ''
+          element_label_class: ''
+          element_label_colon: false
+          element_wrapper_type: ''
+          element_wrapper_class: ''
+          element_default_classes: true
+          empty: ''
+          hide_empty: false
+          empty_zero: false
+          hide_alter_empty: true
+          click_sort_column: value
+          type: timestamp
+          settings:
+            date_format: html_date
+            custom_date_format: ''
+            timezone: ''
+          group_column: value
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 0
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+          entity_type: node
+          entity_field: created
+          plugin_id: field
+      filters:
         type:
           id: type
           table: node_field_data
@@ -537,22 +647,61 @@ display:
           entity_type: node
           entity_field: langcode
           plugin_id: language
+        field_workflow_value:
+          id: field_workflow_value
+          table: node__field_workflow
+          field: field_workflow_value
+          relationship: none
+          group_type: group
+          admin_label: ''
+          operator: or
+          value:
+            workflow_visible: workflow_visible
+          group: 1
+          exposed: false
+          expose:
+            operator_id: ''
+            label: ''
+            description: ''
+            use_operator: false
+            operator: ''
+            identifier: ''
+            required: false
+            remember: false
+            multiple: false
+            remember_roles:
+              authenticated: authenticated
+            reduce: false
+          is_grouped: false
+          group_info:
+            label: ''
+            description: ''
+            identifier: ''
+            optional: true
+            widget: select
+            multiple: false
+            remember: false
+            default_group: All
+            default_group_multiple: {  }
+            group_items: {  }
+          reduce_duplicates: false
+          plugin_id: workflow_state
       sorts:
         created:
           id: created
           table: node_field_data
           field: created
-          order: DESC
-          entity_type: node
-          entity_field: created
-          plugin_id: date
           relationship: none
           group_type: group
           admin_label: ''
+          order: DESC
           exposed: false
           expose:
             label: ''
-          granularity: second
+          granularity: minute
+          entity_type: node
+          entity_field: created
+          plugin_id: date
       title: Blabla
       header: {  }
       footer: {  }
@@ -614,7 +763,6 @@ display:
       style:
         type: serializer
         options:
-          uses_fields: false
           formats:
             json: json
       defaults:
@@ -645,6 +793,7 @@ display:
             items_per_page_options_all_label: '- All -'
             offset: false
             offset_label: Offset
+      rendering_language: '***LANGUAGE_entity_translation***'
     cache_metadata:
       max-age: -1
       contexts:

web/modules/custom/materio_decoupled/materio_decoupled.info.yml

@@ -0,0 +1,5 @@
+name: 'materio_decoupled'
+type: module
+description: 'helpers for progressive decoupling'
+core: 8.x
+package: 'Materio'

web/modules/custom/materio_decoupled/materio_decoupled.module

@@ -0,0 +1,71 @@
+<?php
+
+/**
+ * @file
+ * Contains materio_decoupled.module.
+ */
+
+use Drupal\Core\Routing\RouteMatchInterface;
+
+/**
+ * Implements hook_help().
+ */
+function materio_decoupled_help($route_name, RouteMatchInterface $route_match) {
+  switch ($route_name) {
+    // Main module help for the materio_decoupled module.
+    case 'help.page.materio_decoupled':
+      $output = '';
+      $output .= '<h3>' . t('About') . '</h3>';
+      $output .= '<p>' . t('helpers for progressive decoupling') . '</p>';
+      return $output;
+
+    default:
+  }
+}
+
+
+/**
+ * Implements hook_page_attachments().
+ * @param array $attachments
+ */
+function materio_decoupled_page_attachments(array &$attachments) {
+  $current_path = \Drupal::service('path.current')->getPath();
+  $current_language = \Drupal::languageManager()->getCurrentLanguage()->getId();
+  $is_front = \Drupal::service('path.matcher')->isFrontPage();
+
+  $entity_type = null;
+  $entity_bundle = null;
+  $entity_id = null;
+  foreach (['node', 'taxonomy_term'] as $type) {
+    $entity = \Drupal::routeMatch()->getParameter($type);
+    if($entity){
+      $entity_type = $type;
+      $entity_bundle = $entity->bundle();
+      $entity_id = $entity->id();
+      $entity_uuid = $entity->uuid();
+      break;
+    }
+  }
+
+  $js_str = "var drupalDecoupled = {\n
+    sys_path:'".$current_path."',\n
+    is_front:".($is_front ? 'true':'false').",\n
+    lang_code:'".$current_language."',\n
+    entity_type:'".$entity_type."',\n
+    entity_bundle:'".$entity_bundle."',\n
+    entity_id:'".$entity_id."',\n
+    entity_uuid:'".$entity_uuid."',\n
+  };";
+
+  $attachments['#attached']['html_head'][] = [
+    [
+      '#type' => 'html_tag',
+      '#tag' => 'script',
+      '#value' => $js_str,
+      '#weight' => -999,
+      '#group' => 'decoupled'
+    ],
+    // A key, to make it possible to recognize this HTML  element when altering.
+    'decoupled',
+  ];
+}

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

@@ -417,7 +417,19 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _jsonAxios = __webpack_require__(/*! vuejs/api/json-axios */ \"./web/themes/custom/materiotheme/vuejs/api/json-axios.js\");\n\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nvar _default = {\n  name: \"Article\",\n  props: ['item']\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Article.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nvar _jsonAxios = __webpack_require__(/*! vuejs/api/json-axios */ \"./web/themes/custom/materiotheme/vuejs/api/json-axios.js\");\n\nvar _querystring = _interopRequireDefault(__webpack_require__(/*! querystring */ \"./node_modules/querystring-es3/index.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nvar _default = {\n  name: \"Article\",\n  router: _route.default,\n  props: ['item'],\n  data: function data() {\n    return {\n      uuid: null,\n      content: null\n    };\n  },\n  created: function created() {\n    this.getArticle();\n  },\n  methods: {\n    getArticle: function getArticle() {\n      console.log(this.$route);\n\n      if (this.$route.query.uuid) {\n        // directly record uuid\n        this.uuid = this.$route.query.uuid;\n        this.loadArticle();\n      } else if (drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'article') {\n        // get the uuid from drupalDeclouped\n        // provided by materio_decoupled.module\n        // console.log(drupalDecoupled);\n        this.uuid = drupalDecoupled.entity_uuid;\n        this.loadArticle();\n      } else {\n        this.$route.replace('home');\n      }\n    },\n    loadArticle: function loadArticle() {\n      var _this = this;\n\n      console.log('loadArticle', this.uuid);\n      var params = {\n        include: 'field_linked_materials,field_showroom,field_tags,field_thesaurus,field_visuel,uid'\n      };\n\n      var q = _querystring.default.stringify(params);\n\n      _jsonAxios.JSONAPI.get(\"node/article/\".concat(this.uuid, \"?\").concat(q)).then(function (_ref) {\n        var data = _ref.data;\n        console.log('loadArticle data', data);\n\n        _this.parseData(data);\n      }).catch(function (error) {\n        console.warn('Issue with loadArticle', error);\n        Promise.reject(error);\n      });\n    },\n    parseData: function parseData(data) {\n      var _this2 = this;\n\n      var attrs = data.data.attributes;\n      var relations = data.data.relationships;\n      console.log('relations', relations);\n      var inc = data.included;\n      console.log('included', inc);\n      this.content = {\n        title: attrs.title,\n        body: attrs.body.value // parse all relationships\n\n      };\n\n      var _loop = function _loop(key) {\n        // skip loop if the property is from prototype\n        if (!relations.hasOwnProperty(key)) return \"continue\";\n        var obj = relations[key];\n        console.log('typeof obj.data', _typeof(obj.data)); // skip obj if data is not array\n\n        if (!Array.isArray(obj.data)) return \"continue\";\n        _this2.content[key] = []; // parse relationship values using included\n\n        var field = {};\n        obj.data.forEach(function (e) {\n          // get the included values\n          var included = inc.find(function (i) {\n            return i.id == e.id;\n          }); // fill the values\n\n          switch (key) {\n            case 'field_visuel':\n              field = e.meta;\n              field.id = e.id;\n              field.src = included.links.card_medium.href;\n              break;\n\n            case 'field_linked_materials':\n            case 'field_thesaurus':\n            case 'field_tags':\n              field = included.attributes;\n              field.id = included.id;\n              break;\n            // case 'field_showroom':\n            //   field = included.attributes\n            //   break\n\n            default:\n          }\n\n          _this2.content[key].push(field);\n        });\n      };\n\n      for (var key in relations) {\n        var _ret = _loop(key);\n\n        if (_ret === \"continue\") continue;\n      }\n\n      console.log('article.content', this.content);\n    }\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Article.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
+
+/***/ }),
+
+/***/ "./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=script&lang=js&":
+/*!********************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=script&lang=js& ***!
+  \********************************************************************************************************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _jsonAxios = __webpack_require__(/*! vuejs/api/json-axios */ \"./web/themes/custom/materiotheme/vuejs/api/json-axios.js\");\n\nvar _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nvar basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;\nvar _default = {\n  name: \"ArticleCard\",\n  router: _route.default,\n  props: ['item'],\n  data: function data() {\n    return {\n      alias: this.item.view_node.replace(/^.?\\/blabla\\//g, '')\n    };\n  },\n  methods: {\n    onclick: function onclick() {\n      console.log('clicked on article', this.alias);\n      this.$router.push({\n        name: \"article\",\n        params: {\n          alias: this.alias\n        },\n        query: {\n          uuid: this.item.uuid // meta: { uuid:this.item.uuid },\n\n        }\n      });\n    }\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -441,7 +453,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\n
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _restAxios = __webpack_require__(/*! vuejs/api/rest-axios */ \"./web/themes/custom/materiotheme/vuejs/api/rest-axios.js\");\n\nvar _Article = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Article */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Article.vue\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nvar _default = {\n  name: \"Blabla\",\n  data: function data() {\n    return {\n      items: [],\n      page: 1\n    };\n  },\n  beforeMount: function beforeMount() {\n    this.getArticles();\n  },\n  methods: {\n    getArticles: function getArticles($state) {\n      var _this = this;\n\n      _restAxios.REST.get(\"/blabla_rest?_format=json&page=\".concat(this.page), {}).then(function (_ref) {\n        var data = _ref.data;\n        console.log('blabla REST: data', data);\n\n        if (data.length) {\n          _this.items = _this.items.concat(data); // console.log('items.length', this.items.length);\n\n          _this.page += 1;\n          if ($state) $state.loaded();\n        } else {\n          if ($state) $state.complete();\n        }\n      }).catch(function (error) {\n        console.warn('Issue with blabla', error);\n        Promise.reject(error);\n      });\n    }\n  },\n  components: {\n    Article: _Article.default\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Blabla.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _restAxios = __webpack_require__(/*! vuejs/api/rest-axios */ \"./web/themes/custom/materiotheme/vuejs/api/rest-axios.js\");\n\nvar _ArticleCard = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/ArticleCard */ \"./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nvar _default = {\n  name: \"Blabla\",\n  data: function data() {\n    return {\n      items: [],\n      page: 0\n    };\n  },\n  created: function created() {\n    this.getArticles();\n  },\n  methods: {\n    getArticles: function getArticles($state) {\n      var _this = this;\n\n      _restAxios.REST.get(\"/blabla_rest?_format=json&page=\".concat(this.page), {}).then(function (_ref) {\n        var data = _ref.data;\n        console.log('blabla REST: data', data);\n\n        if (data.length) {\n          _this.items = _this.items.concat(data); // console.log('items.length', this.items.length);\n\n          _this.page += 1;\n          if ($state) $state.loaded();\n        } else {\n          if ($state) $state.complete();\n        }\n      }).catch(function (error) {\n        console.warn('Issue with blabla', error);\n        Promise.reject(error);\n      });\n    }\n  },\n  components: {\n    ArticleCard: _ArticleCard.default\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Blabla.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -685,7 +697,19 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"article\", { staticClass: \"card article\" }, [\n    _c(\"header\", [\n      _c(\"h1\", { domProps: { innerHTML: _vm._s(_vm.item.title) } }),\n      _vm._v(\" \"),\n      _c(\"h4\", {\n        staticClass: \"body\",\n        domProps: { innerHTML: _vm._s(_vm.item.body) }\n      })\n    ]),\n    _vm._v(\" \"),\n    _c(\"section\", { staticClass: \"images\" }, [\n      _c(\"figure\", { domProps: { innerHTML: _vm._s(_vm.item.field_visuel) } })\n    ])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Article.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return !_vm.content\n    ? _c(\"div\", { staticClass: \"loading\" }, [\n        _c(\"span\", [_vm._v(\"Loading ...\")])\n      ])\n    : _c(\"article\", { staticClass: \"article\" }, [\n        _c(\"header\", [\n          _c(\"h1\", [_vm._v(_vm._s(_vm.content.title))]),\n          _vm._v(\" \"),\n          _c(\"div\", { staticClass: \"taxonomy\" }, [\n            _c(\"div\", { staticClass: \"thesaurus\" }, [\n              _c(\n                \"ul\",\n                _vm._l(_vm.content.field_thesaurus, function(term) {\n                  return _c(\"li\", { key: term.id }, [_vm._v(_vm._s(term.name))])\n                }),\n                0\n              )\n            ]),\n            _vm._v(\" \"),\n            _c(\"div\", { staticClass: \"tags\" }, [\n              _c(\n                \"ul\",\n                _vm._l(_vm.content.field_tags, function(term) {\n                  return _c(\"li\", { key: term.id }, [_vm._v(_vm._s(term.name))])\n                }),\n                0\n              )\n            ])\n          ]),\n          _vm._v(\" \"),\n          _c(\"div\", {\n            staticClass: \"body\",\n            domProps: { innerHTML: _vm._s(_vm.content.body) }\n          }),\n          _vm._v(\" \"),\n          _c(\"div\", { staticClass: \"linked-materials\" }, [\n            _c(\n              \"ul\",\n              _vm._l(_vm.content.field_linked_materials, function(node) {\n                return _c(\"li\", { key: node.id }, [\n                  _c(\"section\", { attrs: { uuid: node.id } }, [\n                    _c(\"h1\", [_vm._v(_vm._s(node.title))]),\n                    _vm._v(\" \"),\n                    _c(\"h3\", [_vm._v(_vm._s(node.field_reference))]),\n                    _vm._v(\" \"),\n                    _c(\"h2\", [_vm._v(_vm._s(node.field_short_description))])\n                  ])\n                ])\n              }),\n              0\n            )\n          ]),\n          _vm._v(\" \"),\n          _c(\n            \"div\",\n            { staticClass: \"visuels\" },\n            _vm._l(_vm.content.field_visuel, function(visuel) {\n              return _c(\"figure\", { key: visuel.id }, [\n                _c(\"img\", {\n                  attrs: {\n                    src: visuel.src,\n                    alt: visuel.alt,\n                    title: visuel.title\n                  }\n                }),\n                _vm._v(\" \"),\n                _c(\"caption\")\n              ])\n            }),\n            0\n          )\n        ])\n      ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Article.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
+
+/***/ }),
+
+/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=template&id=08b811fe&scoped=true&":
+/*!**********************************************************************************************************************************************************************************************************************************************************!*\
+  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=template&id=08b811fe&scoped=true& ***!
+  \**********************************************************************************************************************************************************************************************************************************************************/
+/*! exports provided: render, staticRenderFns */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"article\", { staticClass: \"card article\" }, [\n    _c(\"header\", [\n      _c(\"h1\", [\n        _c(\"a\", {\n          attrs: { href: _vm.item.view_node },\n          domProps: { innerHTML: _vm._s(_vm.item.title) },\n          on: {\n            click: function($event) {\n              $event.preventDefault()\n              return _vm.onclick($event)\n            }\n          }\n        })\n      ]),\n      _vm._v(\" \"),\n      _c(\"aside\", { domProps: { innerHTML: _vm._s(_vm.item.created) } }),\n      _vm._v(\" \"),\n      _c(\"h4\", {\n        staticClass: \"body\",\n        domProps: { innerHTML: _vm._s(_vm.item.body) }\n      })\n    ]),\n    _vm._v(\" \"),\n    _c(\"section\", { staticClass: \"images\" }, [\n      _c(\"figure\", { domProps: { innerHTML: _vm._s(_vm.item.field_visuel) } })\n    ])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -709,7 +733,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { attrs: { id: \"blabla\" } }, [\n    !_vm.items.length\n      ? _c(\"div\", { staticClass: \"loading\" }, [\n          _c(\"span\", [_vm._v(\"Loading ...\")])\n        ])\n      : _c(\n          \"div\",\n          { staticClass: \"cards-list\" },\n          [\n            _c(\n              \"ul\",\n              _vm._l(_vm.items, function(item) {\n                return _c(\n                  \"li\",\n                  { key: item.uuid },\n                  [_c(\"Article\", { attrs: { item: item } })],\n                  1\n                )\n              }),\n              0\n            ),\n            _vm._v(\" \"),\n            _c(\"infinite-loading\", { on: { infinite: _vm.getArticles } }, [\n              _c(\"div\", { attrs: { slot: \"no-more\" }, slot: \"no-more\" }, [\n                _vm._v(\"No more results\")\n              ])\n            ])\n          ],\n          1\n        )\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Blabla.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"div\", { attrs: { id: \"blabla\" } }, [\n    !_vm.items.length\n      ? _c(\"div\", { staticClass: \"loading\" }, [\n          _c(\"span\", [_vm._v(\"Loading ...\")])\n        ])\n      : _c(\n          \"div\",\n          { staticClass: \"cards-list\" },\n          [\n            _c(\n              \"ul\",\n              _vm._l(_vm.items, function(item) {\n                return _c(\n                  \"li\",\n                  { key: item.uuid },\n                  [_c(\"ArticleCard\", { attrs: { item: item } })],\n                  1\n                )\n              }),\n              0\n            ),\n            _vm._v(\" \"),\n            _c(\"infinite-loading\", { on: { infinite: _vm.getArticles } }, [\n              _c(\"div\", { attrs: { slot: \"no-more\" }, slot: \"no-more\" }, [\n                _vm._v(\"No more results\")\n              ])\n            ])\n          ],\n          1\n        )\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/Blabla.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
 
 /***/ }),
 
@@ -1067,6 +1091,42 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _nod
 
 /***/ }),
 
+/***/ "./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue":
+/*!*********************************************************************************!*\
+  !*** ./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue ***!
+  \*********************************************************************************/
+/*! no static exports found */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _ArticleCard_vue_vue_type_template_id_08b811fe_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ArticleCard.vue?vue&type=template&id=08b811fe&scoped=true& */ \"./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=template&id=08b811fe&scoped=true&\");\n/* harmony import */ var _ArticleCard_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ArticleCard.vue?vue&type=script&lang=js& */ \"./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=script&lang=js&\");\n/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _ArticleCard_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _ArticleCard_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[key]; }) }(__WEBPACK_IMPORT_KEY__));\n/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ \"./node_modules/vue-loader/lib/runtime/componentNormalizer.js\");\n\n\n\n\n\n/* normalize component */\n\nvar component = Object(_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(\n  _ArticleCard_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n  _ArticleCard_vue_vue_type_template_id_08b811fe_scoped_true___WEBPACK_IMPORTED_MODULE_0__[\"render\"],\n  _ArticleCard_vue_vue_type_template_id_08b811fe_scoped_true___WEBPACK_IMPORTED_MODULE_0__[\"staticRenderFns\"],\n  false,\n  null,\n  \"08b811fe\",\n  null\n  \n)\n\n/* hot reload */\nif (false) { var api; }\ncomponent.options.__file = \"web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue\"\n/* harmony default export */ __webpack_exports__[\"default\"] = (component.exports);\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?");
+
+/***/ }),
+
+/***/ "./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=script&lang=js&":
+/*!**********************************************************************************************************!*\
+  !*** ./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=script&lang=js& ***!
+  \**********************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_ArticleCard_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../../../../node_modules/babel-loader/lib!../../../../../../../node_modules/vue-loader/lib??vue-loader-options!./ArticleCard.vue?vue&type=script&lang=js& */ \"./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=script&lang=js&\");\n/* harmony import */ var _node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_ArticleCard_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_ArticleCard_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__);\n/* harmony reexport (unknown) */ for(var __WEBPACK_IMPORT_KEY__ in _node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_ArticleCard_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__) if(__WEBPACK_IMPORT_KEY__ !== 'default') (function(key) { __webpack_require__.d(__webpack_exports__, key, function() { return _node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_ArticleCard_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__[key]; }) }(__WEBPACK_IMPORT_KEY__));\n /* harmony default export */ __webpack_exports__[\"default\"] = (_node_modules_babel_loader_lib_index_js_node_modules_vue_loader_lib_index_js_vue_loader_options_ArticleCard_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0___default.a); \n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?");
+
+/***/ }),
+
+/***/ "./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=template&id=08b811fe&scoped=true&":
+/*!****************************************************************************************************************************!*\
+  !*** ./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=template&id=08b811fe&scoped=true& ***!
+  \****************************************************************************************************************************/
+/*! exports provided: render, staticRenderFns */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_ArticleCard_vue_vue_type_template_id_08b811fe_scoped_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../../../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../../../../../node_modules/vue-loader/lib??vue-loader-options!./ArticleCard.vue?vue&type=template&id=08b811fe&scoped=true& */ \"./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?vue&type=template&id=08b811fe&scoped=true&\");\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_ArticleCard_vue_vue_type_template_id_08b811fe_scoped_true___WEBPACK_IMPORTED_MODULE_0__[\"render\"]; });\n\n/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_ArticleCard_vue_vue_type_template_id_08b811fe_scoped_true___WEBPACK_IMPORTED_MODULE_0__[\"staticRenderFns\"]; });\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?");
+
+/***/ }),
+
 /***/ "./web/themes/custom/materiotheme/vuejs/components/Content/Base.vue":
 /*!**************************************************************************!*\
   !*** ./web/themes/custom/materiotheme/vuejs/components/Content/Base.vue ***!
@@ -1315,7 +1375,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _nod
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nvar _vueRouter = _interopRequireDefault(__webpack_require__(/*! vue-router */ \"./node_modules/vue-router/dist/vue-router.esm.js\"));\n\nvar _Home = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Home */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Home.vue\"));\n\nvar _Base = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Base */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Base.vue\"));\n\nvar _Blabla = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Blabla */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Blabla.vue\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n_vue.default.use(_vueRouter.default); // https://www.lullabot.com/articles/decoupled-hard-problems-routing\n// We could use aliases to never reload the page on language changement\n// BUT beforeupdate is not triggered when push alias instead of path or name\n\n\nvar languages = ['en', 'fr'];\nconsole.log('path aliases', function () {\n  return languages.map(function (l) {\n    return \"/\".concat(l, \"/base\");\n  });\n}());\nvar basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;\nvar routes = [{\n  name: 'home',\n  path: basePath,\n  // path: '/',\n  // alias: (() => languages.map(l => `/${l}`))(),\n  component: _Home.default // components: {\n  //   'home': Home\n  // }\n\n}, {\n  name: 'base',\n  path: \"\".concat(basePath, \"base\"),\n  // path: `/base`,\n  // alias: (() => languages.map(l => `/${l}/base`))(),\n  component: _Base.default // components: {\n  //   'base': Base\n  // }\n\n}, {\n  name: 'blabla',\n  path: \"\".concat(basePath, \"blabla\"),\n  // path: `/base`,\n  // alias: (() => languages.map(l => `/${l}/base`))(),\n  component: _Blabla.default // components: {\n  //   'base': Base\n  // }\n\n}];\n\nvar _default = new _vueRouter.default({\n  mode: 'history',\n  routes: routes\n});\n\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/route/index.js?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nvar _vueRouter = _interopRequireDefault(__webpack_require__(/*! vue-router */ \"./node_modules/vue-router/dist/vue-router.esm.js\"));\n\nvar _Home = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Home */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Home.vue\"));\n\nvar _Base = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Base */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Base.vue\"));\n\nvar _Blabla = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Blabla */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Blabla.vue\"));\n\nvar _Article = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Article */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Article.vue\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n_vue.default.use(_vueRouter.default); // https://www.lullabot.com/articles/decoupled-hard-problems-routing\n// We could use aliases to never reload the page on language changement\n// BUT beforeupdate is not triggered when push alias instead of path or name\n// const languages = ['en', 'fr'];\n// console.log('path aliases', (() => languages.map(l => `/${l}/base`))() );\n\n\nvar basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;\nvar routes = [{\n  name: 'home',\n  path: basePath,\n  // path: '/',\n  // alias: (() => languages.map(l => `/${l}`))(),\n  component: _Home.default // components: {\n  //   'home': Home\n  // }\n\n}, {\n  name: 'base',\n  path: \"\".concat(basePath, \"base\"),\n  // path: `/base`,\n  // alias: (() => languages.map(l => `/${l}/base`))(),\n  component: _Base.default // components: {\n  //   'base': Base\n  // }\n\n}, // {\n//   name:'blabla',\n//   path: `${basePath}blabla`,\n//   component: Blabla,\n//   children: [\n//     {\n//       path: `${basePath}blabla/:alias`,\n//       component: Article\n//     }\n//   ]\n// }\n{\n  name: 'blabla',\n  path: \"\".concat(basePath, \"blabla\"),\n  component: _Blabla.default\n}, {\n  name: 'article',\n  path: \"\".concat(basePath, \"blabla/:alias\"),\n  component: _Article.default // meta: { uuid:null }\n  // {\n  //   path: '*',\n  //   name: 'notfound',\n  //   components: {\n  //     'notfound': NotFound\n  //   }\n  // }\n\n}];\n\nvar _default = new _vueRouter.default({\n  mode: 'history',\n  routes: routes\n});\n\nexports.default = _default;\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/route/index.js?");
 
 /***/ }),
 

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

@@ -1,21 +1,159 @@
 <template>
-  <article class="card article">
+  <div class="loading" v-if="!content">
+    <span>Loading ...</span>
+  </div>
+  <article class="article" v-else>
     <header>
-      <h1 v-html="item.title"></h1>
+      <h1>{{ content.title }}</h1>
-      <h4 class="body" v-html="item.body"></h4>
+      <div class="taxonomy">
+        <div class="thesaurus">
+          <ul>
+            <li
+              v-for="term in content.field_thesaurus" v-bind:key="term.id"
+              >{{ term.name }}</li>
+          </ul>
+        </div>
+        <div class="tags">
+          <ul>
+            <li
+              v-for="term in content.field_tags" v-bind:key="term.id"
+              >{{ term.name }}</li>
+          </ul>
+        </div>
+      </div>
+      <div class="body" v-html="content.body"></div>
+      <div class="linked-materials">
+        <ul>
+          <li v-for="node in content.field_linked_materials" v-bind:key="node.id">
+            <section :uuid="node.id">
+              <h1>{{ node.title }}</h1>
+              <h3>{{ node.field_reference }}</h3>
+              <h2>{{ node.field_short_description }}</h2>
+            </section>
+          </li>
+        </ul>
+      </div>
+      <div class="visuels">
+        <figure
+          v-for="visuel in content.field_visuel" v-bind:key="visuel.id"
+        >
+          <img
+            :src="visuel.src"
+            :alt="visuel.alt"
+            :title="visuel.title"
+          />
+          <caption></caption>
+        </figure>
+      </div>
     </header>
-    <section class="images">
-      <figure v-html="item.field_visuel"></figure>
-    </section>
   </article>
 </template>
 
 <script>
+import router from 'vuejs/route'
 import { JSONAPI } from 'vuejs/api/json-axios'
+import qs from 'querystring'
 
 export default {
   name: "Article",
-  props: ['item']
+  router,
+  props: ['item'],
+  data(){
+    return {
+      uuid:null,
+      content:null
+    }
+  },
+  created(){
+    this.getArticle()
+  },
+  methods: {
+    getArticle(){
+      console.log(this.$route);
+      if(this.$route.query.uuid){
+        // directly record uuid
+        this.uuid = this.$route.query.uuid
+        this.loadArticle()
+      }else if(drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'article'){
+        // get the uuid from drupalDeclouped
+        // provided by materio_decoupled.module
+        // console.log(drupalDecoupled);
+        this.uuid = drupalDecoupled.entity_uuid
+        this.loadArticle()
+      }else{
+        this.$route.replace('home')
+      }
+    },
+    loadArticle(){
+      console.log('loadArticle', this.uuid)
+      let params = {
+        include:'field_linked_materials,field_showroom,field_tags,field_thesaurus,field_visuel,uid'
+      }
+      let q = qs.stringify(params)
+      JSONAPI.get(`node/article/${this.uuid}?${q}`)
+        .then(({ data }) => {
+          console.log('loadArticle data', data)
+          this.parseData(data)
+        })
+        .catch(( error ) => {
+            console.warn('Issue with loadArticle', error)
+            Promise.reject(error)
+        })
+    },
+    parseData(data){
+      let attrs = data.data.attributes
+      let relations = data.data.relationships
+      console.log('relations', relations);
+      let inc = data.included
+      console.log('included', inc);
+
+      this.content = {
+        title:attrs.title,
+        body: attrs.body.value
+      }
+
+      // parse all relationships
+      for (let key in relations) {
+        // skip loop if the property is from prototype
+        if (!relations.hasOwnProperty(key)) continue;
+
+        let obj = relations[key]
+        console.log('typeof obj.data', typeof obj.data);
+        // skip obj if data is not array
+        if(!Array.isArray(obj.data)) continue
+
+        this.content[key] = []
+        // parse relationship values using included
+        let field = {}
+        obj.data.forEach((e) => {
+          // get the included values
+          let included = inc.find((i) => { return i.id == e.id })
+          // fill the values
+          switch (key) {
+            case 'field_visuel':
+              field = e.meta
+              field.id = e.id
+              field.src = included.links.card_medium.href
+              break;
+            case 'field_linked_materials':
+            case 'field_thesaurus':
+            case 'field_tags':
+              field = included.attributes
+              field.id = included.id
+              break;
+            // case 'field_showroom':
+            //   field = included.attributes
+            //   break
+            default:
+          }
+          this.content[key].push(field)
+        })
+      }
+
+
+      console.log('article.content',this.content);
+    }
+  }
 }
 </script>
 

web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue

@@ -0,0 +1,50 @@
+<template>
+  <article class="card article">
+    <header>
+      <h1>
+        <a
+          :href="item.view_node"
+          @click.prevent="onclick"
+          v-html="item.title"
+        ></a>
+      </h1>
+      <aside v-html="item.created"></aside>
+      <h4 class="body" v-html="item.body"></h4>
+    </header>
+    <section class="images">
+      <figure v-html="item.field_visuel"></figure>
+    </section>
+  </article>
+</template>
+
+<script>
+import { JSONAPI } from 'vuejs/api/json-axios'
+import router from 'vuejs/route'
+
+let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
+
+export default {
+  name: "ArticleCard",
+  router,
+  props: ['item'],
+  data(){
+    return {
+      alias: this.item.view_node.replace(/^.?\/blabla\//g, '')
+    }
+  },
+  methods:{
+    onclick(){
+      console.log('clicked on article', this.alias);
+      this.$router.push({
+        name:`article`,
+        params: { alias:this.alias },
+        query: { uuid: this.item.uuid }
+        // meta: { uuid:this.item.uuid },
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

web/themes/custom/materiotheme/vuejs/components/Content/Blabla.vue

@@ -6,7 +6,7 @@
     <div class="cards-list" v-else>
       <ul>
         <li v-for="item in items" v-bind:key="item.uuid">
-          <Article :item="item"/>
+          <ArticleCard :item="item"/>
         </li>
       </ul>
       <infinite-loading @infinite="getArticles">
@@ -19,17 +19,17 @@
 <script>
 
 import { REST } from 'vuejs/api/rest-axios'
-import Article from 'vuejs/components/Content/Article'
+import ArticleCard from 'vuejs/components/Content/ArticleCard'
 
 export default {
   name: "Blabla",
   data() {
     return {
       items:[],
-      page:1
+      page:0
     }
   },
-  beforeMount(){
+  created(){
     this.getArticles()
   },
   methods: {
@@ -55,7 +55,7 @@ export default {
     }
   },
   components: {
-    Article
+    ArticleCard
   }
 }
 </script>

web/themes/custom/materiotheme/vuejs/route/index.js

@@ -4,6 +4,7 @@ import VueRouter from 'vue-router'
 import Home from 'vuejs/components/Content/Home'
 import Base from 'vuejs/components/Content/Base'
 import Blabla from 'vuejs/components/Content/Blabla'
+import Article from 'vuejs/components/Content/Article'
 
 Vue.use(VueRouter)
 
@@ -11,8 +12,8 @@ Vue.use(VueRouter)
 
 // We could use aliases to never reload the page on language changement
 // BUT beforeupdate is not triggered when push alias instead of path or name
-const languages = ['en', 'fr'];
+// const languages = ['en', 'fr'];
-console.log('path aliases', (() => languages.map(l => `/${l}/base`))() );
+// console.log('path aliases', (() => languages.map(l => `/${l}/base`))() );
 
 let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
 
@@ -37,16 +38,28 @@ const routes = [
     //   'base': Base
     // }
   },
+  // {
+  //   name:'blabla',
+  //   path: `${basePath}blabla`,
+  //   component: Blabla,
+  //   children: [
+  //     {
+  //       path: `${basePath}blabla/:alias`,
+  //       component: Article
+  //     }
+  //   ]
+  // }
   {
     name:'blabla',
     path: `${basePath}blabla`,
-    // path: `/base`,
+    component: Blabla
-    // alias: (() => languages.map(l => `/${l}/base`))(),
-    component: Blabla,
-    // components: {
-    //   'base': Base
-    // }
   },
+  {
+    name:'article',
+    path: `${basePath}blabla/:alias`,
+    component: Article,
+    // meta: { uuid:null }
+  }
   // {
   //   path: '*',
   //   name: 'notfound',