blabla article display and nav

build/webpack.config.dev.js

@@ -13,18 +13,20 @@ module.exports = merge(baseConfig, {
       {
         test: /\.css$/,
         use: [
-          process.env.NODE_ENV !== 'production'
-            ? 'vue-style-loader'
-            : MiniCssExtractPlugin.loader,
+          // process.env.NODE_ENV !== 'production'
+          //   ? 'vue-style-loader'
+          //   : MiniCssExtractPlugin.loader,
+          MiniCssExtractPlugin.loader,
           // 'vue-style-loader',
           'css-loader'
         ]
       }, {
         test: /\.scss$/,
         use: [
-          process.env.NODE_ENV !== 'production'
-            ? 'vue-style-loader'
-            : MiniCssExtractPlugin.loader,
+          // process.env.NODE_ENV !== 'production'
+          //   ? 'vue-style-loader'
+          //   : MiniCssExtractPlugin.loader,
+          MiniCssExtractPlugin.loader,
           // 'vue-style-loader',
           'css-loader',
           'sass-loader'

config/sync/block.block.header.yml

@@ -0,0 +1,27 @@
+uuid: d16db992-5c92-4832-a386-69b50313a3e9
+langcode: en
+status: true
+dependencies:
+  config:
+    - system.menu.header
+  module:
+    - menu_block
+  theme:
+    - materiotheme
+id: header
+theme: materiotheme
+region: header_right
+weight: -1
+provider: null
+plugin: 'menu_block:header'
+settings:
+  id: 'menu_block:header'
+  label: Header
+  provider: menu_block
+  label_display: '0'
+  level: 1
+  depth: 0
+  expand: 0
+  parent: 'header:'
+  suggestion: header
+visibility: {  }

config/sync/block.block.languageswitcher.yml

@@ -9,7 +9,7 @@ dependencies:
 id: languageswitcher
 theme: materiotheme
 region: header_right
-weight: -1
+weight: 0
 provider: null
 plugin: 'language_block:language_interface'
 settings:

config/sync/core.entity_form_display.taxonomy_term.showroom.default.yml

@@ -8,11 +8,14 @@ dependencies:
     - field.field.taxonomy_term.showroom.field_public_address
     - field.field.taxonomy_term.showroom.field_public_email
     - field.field.taxonomy_term.showroom.field_public_phone
+    - field.field.taxonomy_term.showroom.field_visuels
     - field.field.taxonomy_term.showroom.field_workflow
+    - image.style.thumbnail
     - taxonomy.vocabulary.showroom
   module:
     - address
     - field_group
+    - image
     - telephone
     - text
     - workflow
@@ -22,6 +25,7 @@ third_party_settings:
       children:
         - group_contents
         - group_info
+        - group_media
       parent_name: ''
       weight: 1
       format_type: tabs
@@ -79,6 +83,20 @@ third_party_settings:
         required_fields: true
       label: Contents
       region: content
+    group_media:
+      children:
+        - field_visuels
+      parent_name: group_tabs
+      weight: 22
+      format_type: tab
+      format_settings:
+        id: ''
+        classes: ''
+        description: ''
+        formatter: closed
+        required_fields: true
+      label: media
+      region: content
 id: taxonomy_term.showroom.default
 targetEntityType: taxonomy_term
 bundle: showroom
@@ -127,6 +145,14 @@ content:
     third_party_settings: {  }
     type: telephone_default
     region: content
+  field_visuels:
+    weight: 22
+    settings:
+      progress_indicator: throbber
+      preview_image_style: thumbnail
+    third_party_settings: {  }
+    type: image_image
+    region: content
   field_workflow:
     weight: 6
     settings: {  }

config/sync/core.entity_view_display.node.article.default.yml

@@ -15,29 +15,20 @@ dependencies:
     - field.field.node.article.field_video
     - field.field.node.article.field_visuel
     - field.field.node.article.field_workflow
+    - image.style.card_medium
     - node.type.article
   module:
     - datetime_range
     - image
-    - link
-    - text
     - user
-    - video_embed_field
 id: node.article.default
 targetEntityType: node
 bundle: article
 mode: default
 content:
-  body:
-    label: hidden
-    type: text_default
-    weight: 0
-    settings: {  }
-    third_party_settings: {  }
-    region: content
   field_date:
-    weight: 6
-    label: above
+    weight: 2
+    label: hidden
     settings:
       separator: '-'
       format_type: medium
@@ -45,78 +36,34 @@ content:
     third_party_settings: {  }
     type: daterange_default
     region: content
-  field_linked_materials:
-    weight: 7
-    label: above
-    settings:
-      link: true
-    third_party_settings: {  }
-    type: entity_reference_label
-    region: content
-  field_source:
-    weight: 1
-    label: above
-    settings:
-      trim_length: 80
-      url_only: false
-      url_plain: false
-      rel: ''
-      target: ''
-    third_party_settings: {  }
-    type: link
-    region: content
-  field_tags:
-    weight: 5
-    label: above
-    settings:
-      link: true
-    third_party_settings: {  }
-    type: entity_reference_label
-    region: content
-  field_thesaurus:
-    weight: 4
-    label: above
-    settings:
-      link: true
-    third_party_settings: {  }
-    type: entity_reference_label
-    region: content
-  field_video:
-    weight: 3
-    label: above
-    settings:
-      responsive: true
-      width: 854
-      height: 480
-      autoplay: true
-    third_party_settings: {  }
-    type: video_embed_field_video
-    region: content
   field_visuel:
-    weight: 2
-    label: above
+    weight: 1
+    label: hidden
     settings:
-      image_style: ''
+      image_style: card_medium
       image_link: ''
     third_party_settings: {  }
     type: image
     region: content
-  links:
-    weight: 8
-    region: content
-    settings: {  }
-    third_party_settings: {  }
   title:
     label: hidden
     type: string
-    weight: -5
+    weight: 0
     region: content
     settings:
       link_to_entity: false
     third_party_settings: {  }
 hidden:
+  body: true
+  field_linked_materials: true
   field_memo: true
   field_migration: true
   field_showroom: true
+  field_source: true
+  field_tags: true
+  field_thesaurus: true
+  field_video: true
   field_workflow: true
   langcode: true
+  links: true
+  search_api_excerpt: true

config/sync/core.entity_view_display.node.article.teaser.yml

@@ -30,14 +30,14 @@ content:
   body:
     label: hidden
     type: text_summary_or_trimmed
-    weight: 0
+    weight: 1
     settings:
       trim_length: 200
     third_party_settings: {  }
     region: content
   field_visuel:
     type: image_delta_formatter
-    weight: 1
+    weight: 2
     region: content
     label: hidden
     settings:
@@ -46,15 +46,10 @@ content:
       image_link: content
       deltas_reversed: 0
     third_party_settings: {  }
-  links:
-    weight: 2
-    region: content
-    settings: {  }
-    third_party_settings: {  }
   title:
     label: hidden
     type: string
-    weight: -5
+    weight: 0
     region: content
     settings:
       link_to_entity: false
@@ -71,3 +66,5 @@ hidden:
   field_video: true
   field_workflow: true
   langcode: true
+  links: true
+  search_api_excerpt: true

config/sync/core.entity_view_display.node.frontpage.default.yml

@@ -10,8 +10,105 @@ dependencies:
     - field.field.node.frontpage.field_what_is_materio
     - node.type.frontpage
   module:
+    - field_group
     - text
     - user
+third_party_settings:
+  field_group:
+    group_intro:
+      children:
+        - title
+        - field_what_is_materio
+      parent_name: ''
+      weight: 0
+      format_type: html_element
+      format_settings:
+        element: section
+        show_label: false
+        label_element: h3
+        label_element_classes: ''
+        attributes: ''
+        effect: none
+        speed: fast
+        id: ''
+        classes: home-intro
+      label: intro
+      region: content
+    group_database:
+      children:
+        - field_a_database
+        - computed_materials_reference
+      parent_name: ''
+      weight: 1
+      format_type: html_element
+      format_settings:
+        element: section
+        show_label: false
+        label_element: h3
+        label_element_classes: ''
+        attributes: ''
+        effect: none
+        speed: fast
+        id: ''
+        classes: home-database
+      label: database
+      region: content
+    group_showrooms:
+      children:
+        - field_showrooms
+        - computed_showrooms_reference
+      parent_name: ''
+      weight: 2
+      format_type: html_element
+      format_settings:
+        element: section
+        show_label: false
+        label_element: h3
+        label_element_classes: ''
+        attributes: ''
+        effect: none
+        speed: fast
+        id: ''
+        classes: home-showrooms
+      label: showrooms
+      region: content
+    group_blabla:
+      children:
+        - field_blabla
+        - computed_articles_reference
+      parent_name: ''
+      weight: 3
+      format_type: html_element
+      format_settings:
+        element: section
+        show_label: false
+        label_element: h3
+        label_element_classes: ''
+        attributes: ''
+        effect: none
+        speed: fast
+        id: ''
+        classes: home-blabla
+      label: blabla
+      region: content
+    group_pricing:
+      children:
+        - field_pricing
+      parent_name: ''
+      weight: 4
+      format_type: html_element
+      format_settings:
+        element: section
+        show_label: false
+        label_element: h3
+        label_element_classes: ''
+        attributes: ''
+        effect: none
+        speed: fast
+        id: ''
+        classes: home-pricing
+      label: pricing
+      region: content
 id: node.frontpage.default
 targetEntityType: node
 bundle: frontpage
@@ -19,10 +116,10 @@ mode: default
 content:
   computed_articles_reference:
     label: hidden
-    weight: 7
+    weight: 5
     region: content
     settings:
-      view_mode: teaser
+      view_mode: card_medium
       link: false
     third_party_settings: {  }
     type: entity_reference_entity_view
@@ -30,17 +127,17 @@ content:
     weight: 3
     region: content
     settings:
-      view_mode: teaser
+      view_mode: card_medium
       link: false
     third_party_settings: {  }
     type: entity_reference_entity_view
     label: hidden
   computed_showrooms_reference:
     label: hidden
-    weight: 5
+    weight: 4
     region: content
     settings:
-      view_mode: default
+      view_mode: home
       link: false
     third_party_settings: {  }
     type: entity_reference_entity_view
@@ -52,28 +149,28 @@ content:
     type: text_default
     region: content
   field_blabla:
-    weight: 6
-    label: above
-    settings: {  }
-    third_party_settings: {  }
-    type: text_default
-    region: content
-  field_pricing:
-    weight: 8
-    label: above
-    settings: {  }
-    third_party_settings: {  }
-    type: text_default
-    region: content
-  field_showrooms:
     weight: 4
     label: above
     settings: {  }
     third_party_settings: {  }
     type: text_default
     region: content
+  field_pricing:
+    weight: 5
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: text_default
+    region: content
+  field_showrooms:
+    weight: 3
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: text_default
+    region: content
   field_what_is_materio:
-    weight: 1
+    weight: 2
     label: above
     settings: {  }
     third_party_settings: {  }
@@ -81,7 +178,7 @@ content:
     region: content
   title:
     type: string
-    weight: 0
+    weight: 1
     region: content
     label: hidden
     settings:
@@ -90,3 +187,4 @@ content:
 hidden:
   langcode: true
   links: true
+  search_api_excerpt: true

config/sync/core.entity_view_display.node.materiau.card_big.yml

@@ -0,0 +1,211 @@
+uuid: cc2be770-7536-4bce-a840-86a37e5e7198
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.node.card_big
+    - field.field.node.materiau.body
+    - field.field.node.materiau.field_attachments
+    - field.field.node.materiau.field_distributor
+    - field.field.node.materiau.field_famille
+    - field.field.node.materiau.field_index
+    - field.field.node.materiau.field_linked_articles
+    - field.field.node.materiau.field_linked_materials
+    - field.field.node.materiau.field_localisation_old
+    - field.field.node.materiau.field_manufacturer
+    - field.field.node.materiau.field_materiau_images
+    - field.field.node.materiau.field_memo
+    - field.field.node.materiau.field_migration
+    - field.field.node.materiau.field_reference
+    - field.field.node.materiau.field_samples
+    - field.field.node.materiau.field_short_description
+    - field.field.node.materiau.field_tags
+    - field.field.node.materiau.field_thesaurus
+    - field.field.node.materiau.field_video
+    - field.field.node.materiau.field_workflow
+    - node.type.materiau
+  module:
+    - computed_field
+    - file
+    - image
+    - materio_samples
+    - options
+    - text
+    - user
+    - video_embed_field
+id: node.materiau.card_big
+targetEntityType: node
+bundle: materiau
+mode: card_big
+content:
+  body:
+    label: hidden
+    type: text_default
+    weight: 101
+    settings: {  }
+    third_party_settings: {  }
+    region: content
+  field_attachments:
+    weight: 109
+    label: above
+    settings:
+      use_description_as_link_text: true
+    third_party_settings: {  }
+    type: file_default
+    region: content
+  field_distributor:
+    weight: 108
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_famille:
+    weight: 113
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: list_default
+    region: content
+  field_index:
+    weight: 114
+    label: above
+    settings:
+      cache_unit: -1
+      cache_duration: 1
+      thousand_separator: ''
+      prefix_suffix: true
+    third_party_settings: {  }
+    type: computed_integer
+    region: content
+  field_linked_articles:
+    weight: 120
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_linked_materials:
+    weight: 110
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_localisation_old:
+    weight: 119
+    label: above
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+    type: string
+    region: content
+  field_manufacturer:
+    weight: 107
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_materiau_images:
+    weight: 105
+    label: above
+    settings:
+      image_style: ''
+      image_link: ''
+    third_party_settings: {  }
+    type: image
+    region: content
+  field_memo:
+    weight: 112
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: basic_string
+    region: content
+  field_migration:
+    weight: 117
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: list_default
+    region: content
+  field_reference:
+    weight: 115
+    label: above
+    settings:
+      sanitized: true
+      cache_unit: -1
+      cache_duration: 1
+    third_party_settings: {  }
+    type: computed_string
+    region: content
+  field_samples:
+    weight: 118
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: materio_samples_default_formatter
+    region: content
+  field_short_description:
+    weight: 102
+    label: above
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+    type: string
+    region: content
+  field_tags:
+    weight: 104
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_thesaurus:
+    weight: 103
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_video:
+    weight: 106
+    label: above
+    settings:
+      responsive: true
+      width: 854
+      height: 480
+      autoplay: true
+    third_party_settings: {  }
+    type: video_embed_field_video
+    region: content
+  field_workflow:
+    weight: 116
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: list_default
+    region: content
+  links:
+    weight: 100
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  title:
+    label: hidden
+    type: string
+    weight: -5
+    region: content
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+hidden:
+  langcode: true
+  search_api_excerpt: true

config/sync/core.entity_view_display.node.materiau.card_full.yml

@@ -0,0 +1,211 @@
+uuid: 1092f6d4-d300-4863-ad65-dfcf5acb7b92
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.node.card_full
+    - field.field.node.materiau.body
+    - field.field.node.materiau.field_attachments
+    - field.field.node.materiau.field_distributor
+    - field.field.node.materiau.field_famille
+    - field.field.node.materiau.field_index
+    - field.field.node.materiau.field_linked_articles
+    - field.field.node.materiau.field_linked_materials
+    - field.field.node.materiau.field_localisation_old
+    - field.field.node.materiau.field_manufacturer
+    - field.field.node.materiau.field_materiau_images
+    - field.field.node.materiau.field_memo
+    - field.field.node.materiau.field_migration
+    - field.field.node.materiau.field_reference
+    - field.field.node.materiau.field_samples
+    - field.field.node.materiau.field_short_description
+    - field.field.node.materiau.field_tags
+    - field.field.node.materiau.field_thesaurus
+    - field.field.node.materiau.field_video
+    - field.field.node.materiau.field_workflow
+    - node.type.materiau
+  module:
+    - computed_field
+    - file
+    - image
+    - materio_samples
+    - options
+    - text
+    - user
+    - video_embed_field
+id: node.materiau.card_full
+targetEntityType: node
+bundle: materiau
+mode: card_full
+content:
+  body:
+    label: hidden
+    type: text_default
+    weight: 101
+    settings: {  }
+    third_party_settings: {  }
+    region: content
+  field_attachments:
+    weight: 109
+    label: above
+    settings:
+      use_description_as_link_text: true
+    third_party_settings: {  }
+    type: file_default
+    region: content
+  field_distributor:
+    weight: 108
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_famille:
+    weight: 113
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: list_default
+    region: content
+  field_index:
+    weight: 114
+    label: above
+    settings:
+      cache_unit: -1
+      cache_duration: 1
+      thousand_separator: ''
+      prefix_suffix: true
+    third_party_settings: {  }
+    type: computed_integer
+    region: content
+  field_linked_articles:
+    weight: 120
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_linked_materials:
+    weight: 110
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_localisation_old:
+    weight: 119
+    label: above
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+    type: string
+    region: content
+  field_manufacturer:
+    weight: 107
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_materiau_images:
+    weight: 105
+    label: above
+    settings:
+      image_style: ''
+      image_link: ''
+    third_party_settings: {  }
+    type: image
+    region: content
+  field_memo:
+    weight: 112
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: basic_string
+    region: content
+  field_migration:
+    weight: 117
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: list_default
+    region: content
+  field_reference:
+    weight: 115
+    label: above
+    settings:
+      sanitized: true
+      cache_unit: -1
+      cache_duration: 1
+    third_party_settings: {  }
+    type: computed_string
+    region: content
+  field_samples:
+    weight: 118
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: materio_samples_default_formatter
+    region: content
+  field_short_description:
+    weight: 102
+    label: above
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+    type: string
+    region: content
+  field_tags:
+    weight: 104
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_thesaurus:
+    weight: 103
+    label: above
+    settings:
+      link: true
+    third_party_settings: {  }
+    type: entity_reference_label
+    region: content
+  field_video:
+    weight: 106
+    label: above
+    settings:
+      responsive: true
+      width: 854
+      height: 480
+      autoplay: true
+    third_party_settings: {  }
+    type: video_embed_field_video
+    region: content
+  field_workflow:
+    weight: 116
+    label: above
+    settings: {  }
+    third_party_settings: {  }
+    type: list_default
+    region: content
+  links:
+    weight: 100
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  title:
+    label: hidden
+    type: string
+    weight: -5
+    region: content
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+hidden:
+  langcode: true
+  search_api_excerpt: true

config/sync/core.entity_view_display.node.materiau.card_medium.yml

@@ -0,0 +1,90 @@
+uuid: b2406930-5d1a-4926-a849-4379a595b5d0
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.node.card_medium
+    - field.field.node.materiau.body
+    - field.field.node.materiau.field_attachments
+    - field.field.node.materiau.field_distributor
+    - field.field.node.materiau.field_famille
+    - field.field.node.materiau.field_index
+    - field.field.node.materiau.field_linked_articles
+    - field.field.node.materiau.field_linked_materials
+    - field.field.node.materiau.field_localisation_old
+    - field.field.node.materiau.field_manufacturer
+    - field.field.node.materiau.field_materiau_images
+    - field.field.node.materiau.field_memo
+    - field.field.node.materiau.field_migration
+    - field.field.node.materiau.field_reference
+    - field.field.node.materiau.field_samples
+    - field.field.node.materiau.field_short_description
+    - field.field.node.materiau.field_tags
+    - field.field.node.materiau.field_thesaurus
+    - field.field.node.materiau.field_video
+    - field.field.node.materiau.field_workflow
+    - image.style.card_medium
+    - node.type.materiau
+  module:
+    - image_delta_formatter
+    - options
+    - user
+id: node.materiau.card_medium
+targetEntityType: node
+bundle: materiau
+mode: card_medium
+content:
+  field_famille:
+    type: list_default
+    weight: 0
+    region: content
+    label: hidden
+    settings: {  }
+    third_party_settings: {  }
+  field_materiau_images:
+    type: image_delta_formatter
+    weight: 2
+    region: content
+    label: hidden
+    settings:
+      deltas: '0'
+      image_style: card_medium
+      image_link: ''
+      deltas_reversed: 0
+    third_party_settings: {  }
+  field_short_description:
+    type: string
+    weight: 1
+    region: content
+    label: hidden
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+  title:
+    type: string
+    weight: 3
+    region: content
+    label: hidden
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+hidden:
+  body: true
+  field_attachments: true
+  field_distributor: true
+  field_index: true
+  field_linked_articles: true
+  field_linked_materials: true
+  field_localisation_old: true
+  field_manufacturer: true
+  field_memo: true
+  field_migration: true
+  field_reference: true
+  field_samples: true
+  field_tags: true
+  field_thesaurus: true
+  field_video: true
+  field_workflow: true
+  langcode: true
+  links: true
+  search_api_excerpt: true

config/sync/core.entity_view_display.node.materiau.card_small.yml

@@ -0,0 +1,90 @@
+uuid: 67321572-ce60-4640-8385-da325147ec2d
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.node.card_small
+    - field.field.node.materiau.body
+    - field.field.node.materiau.field_attachments
+    - field.field.node.materiau.field_distributor
+    - field.field.node.materiau.field_famille
+    - field.field.node.materiau.field_index
+    - field.field.node.materiau.field_linked_articles
+    - field.field.node.materiau.field_linked_materials
+    - field.field.node.materiau.field_localisation_old
+    - field.field.node.materiau.field_manufacturer
+    - field.field.node.materiau.field_materiau_images
+    - field.field.node.materiau.field_memo
+    - field.field.node.materiau.field_migration
+    - field.field.node.materiau.field_reference
+    - field.field.node.materiau.field_samples
+    - field.field.node.materiau.field_short_description
+    - field.field.node.materiau.field_tags
+    - field.field.node.materiau.field_thesaurus
+    - field.field.node.materiau.field_video
+    - field.field.node.materiau.field_workflow
+    - image.style.card_small
+    - node.type.materiau
+  module:
+    - image_delta_formatter
+    - options
+    - user
+id: node.materiau.card_small
+targetEntityType: node
+bundle: materiau
+mode: card_small
+content:
+  field_famille:
+    weight: 2
+    label: hidden
+    settings: {  }
+    third_party_settings: {  }
+    type: list_default
+    region: content
+  field_materiau_images:
+    weight: 3
+    label: hidden
+    settings:
+      deltas: '0'
+      image_style: card_small
+      image_link: content
+      deltas_reversed: 0
+    third_party_settings: {  }
+    type: image_delta_formatter
+    region: content
+  field_short_description:
+    weight: 1
+    label: hidden
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+    type: string
+    region: content
+  title:
+    label: hidden
+    type: string
+    weight: 0
+    region: content
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+hidden:
+  body: true
+  field_attachments: true
+  field_distributor: true
+  field_index: true
+  field_linked_articles: true
+  field_linked_materials: true
+  field_localisation_old: true
+  field_manufacturer: true
+  field_memo: true
+  field_migration: true
+  field_reference: true
+  field_samples: true
+  field_tags: true
+  field_thesaurus: true
+  field_video: true
+  field_workflow: true
+  langcode: true
+  links: true
+  search_api_excerpt: true

config/sync/core.entity_view_display.node.materiau.default.yml

@@ -197,5 +197,14 @@ content:
     region: content
     settings: {  }
     third_party_settings: {  }
+  title:
+    label: hidden
+    type: string
+    weight: -5
+    region: content
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
 hidden:
   langcode: true
+  search_api_excerpt: true

config/sync/core.entity_view_display.node.materiau.teaser.yml

@@ -23,7 +23,7 @@ dependencies:
     - field.field.node.materiau.field_thesaurus
     - field.field.node.materiau.field_video
     - field.field.node.materiau.field_workflow
-    - image.style.card_medium
+    - image.style.card_small
     - node.type.materiau
   module:
     - image_delta_formatter
@@ -35,20 +35,28 @@ mode: teaser
 content:
   field_materiau_images:
     type: image_delta_formatter
-    weight: 1
+    weight: 2
     region: content
     label: hidden
     settings:
       deltas: '0'
-      image_style: card_medium
+      image_style: card_small
       image_link: ''
       deltas_reversed: 0
     third_party_settings: {  }
+  field_short_description:
+    type: string
+    weight: 1
+    region: content
+    label: above
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
   title:
     type: string
     weight: 0
     region: content
-    label: hidden
+    label: above
     settings:
       link_to_entity: false
     third_party_settings: {  }
@@ -68,10 +76,10 @@ hidden:
   field_migration: true
   field_reference: true
   field_samples: true
-  field_short_description: true
   field_tags: true
   field_thesaurus: true
   field_video: true
   field_workflow: true
   langcode: true
   links: true
+  search_api_excerpt: true

config/sync/core.entity_view_display.taxonomy_term.showroom.default.yml

@@ -8,10 +8,12 @@ dependencies:
     - field.field.taxonomy_term.showroom.field_public_address
     - field.field.taxonomy_term.showroom.field_public_email
     - field.field.taxonomy_term.showroom.field_public_phone
+    - field.field.taxonomy_term.showroom.field_visuels
     - field.field.taxonomy_term.showroom.field_workflow
     - taxonomy.vocabulary.showroom
   module:
     - address
+    - image
     - telephone_formatter
     - text
 id: taxonomy_term.showroom.default
@@ -50,8 +52,18 @@ content:
     third_party_settings: {  }
     type: telephone_formatter
     region: content
+  field_visuels:
+    weight: 4
+    label: above
+    settings:
+      image_style: ''
+      image_link: ''
+    third_party_settings: {  }
+    type: image
+    region: content
 hidden:
   field_memo: true
   field_migration: true
   field_workflow: true
   langcode: true
+  search_api_excerpt: true

config/sync/core.entity_view_display.taxonomy_term.showroom.home.yml

@@ -0,0 +1,64 @@
+uuid: 9b2818fb-e53c-4ae4-80c0-89649b9845d6
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.taxonomy_term.home
+    - field.field.taxonomy_term.showroom.field_memo
+    - field.field.taxonomy_term.showroom.field_migration
+    - field.field.taxonomy_term.showroom.field_public_address
+    - field.field.taxonomy_term.showroom.field_public_email
+    - field.field.taxonomy_term.showroom.field_public_phone
+    - field.field.taxonomy_term.showroom.field_visuels
+    - field.field.taxonomy_term.showroom.field_workflow
+    - image.style.home_showroom
+    - taxonomy.vocabulary.showroom
+  module:
+    - address
+    - image
+    - telephone_formatter
+id: taxonomy_term.showroom.home
+targetEntityType: taxonomy_term
+bundle: showroom
+mode: home
+content:
+  field_public_address:
+    type: address_default
+    weight: 1
+    region: content
+    label: hidden
+    settings: {  }
+    third_party_settings: {  }
+  field_public_email:
+    type: email_mailto
+    weight: 3
+    region: content
+    label: hidden
+    settings: {  }
+    third_party_settings: {  }
+  field_public_phone:
+    type: telephone_formatter
+    weight: 2
+    region: content
+    label: hidden
+    settings:
+      format: 1
+      link: true
+      default_country: null
+    third_party_settings: {  }
+  field_visuels:
+    weight: 0
+    label: hidden
+    settings:
+      image_style: home_showroom
+      image_link: ''
+    third_party_settings: {  }
+    type: image
+    region: content
+hidden:
+  description: true
+  field_memo: true
+  field_migration: true
+  field_workflow: true
+  langcode: true
+  search_api_excerpt: true

config/sync/core.entity_view_mode.node.card_big.yml

@@ -0,0 +1,10 @@
+uuid: cab3c14f-2849-4436-9867-27de743a799b
+langcode: en
+status: true
+dependencies:
+  module:
+    - node
+id: node.card_big
+label: card-big
+targetEntityType: node
+cache: true

config/sync/core.entity_view_mode.node.card_full.yml

@@ -0,0 +1,10 @@
+uuid: 2b71b232-6d76-4a9c-916e-f28e51feda32
+langcode: en
+status: true
+dependencies:
+  module:
+    - node
+id: node.card_full
+label: card-full
+targetEntityType: node
+cache: true

config/sync/core.entity_view_mode.node.card_medium.yml

@@ -0,0 +1,10 @@
+uuid: 0cc55609-bd6d-4e43-8c7b-afd637b04a2e
+langcode: en
+status: true
+dependencies:
+  module:
+    - node
+id: node.card_medium
+label: card-medium
+targetEntityType: node
+cache: true

config/sync/core.entity_view_mode.node.card_small.yml

@@ -0,0 +1,10 @@
+uuid: cfb0ddfc-2b42-4de5-9ecc-ff1eb5abd962
+langcode: en
+status: true
+dependencies:
+  module:
+    - node
+id: node.card_small
+label: card-small
+targetEntityType: node
+cache: true

config/sync/core.entity_view_mode.taxonomy_term.home.yml

@@ -0,0 +1,10 @@
+uuid: c8f0acee-3e1b-4406-a536-cd4e3b9501da
+langcode: en
+status: true
+dependencies:
+  module:
+    - taxonomy
+id: taxonomy_term.home
+label: home
+targetEntityType: taxonomy_term
+cache: true

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/field.field.taxonomy_term.showroom.field_visuels.yml

@@ -0,0 +1,38 @@
+uuid: eaaaf871-5745-4395-84f7-3713639a2940
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.taxonomy_term.field_visuels
+    - taxonomy.vocabulary.showroom
+  module:
+    - image
+id: taxonomy_term.showroom.field_visuels
+field_name: field_visuels
+entity_type: taxonomy_term
+bundle: showroom
+label: Visuels
+description: ''
+required: false
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings:
+  file_directory: '[date:custom:Y]-[date:custom:m]'
+  file_extensions: 'png gif jpg jpeg'
+  max_filesize: ''
+  max_resolution: ''
+  min_resolution: ''
+  alt_field: true
+  alt_field_required: false
+  title_field: true
+  title_field_required: false
+  default_image:
+    uuid: ''
+    alt: ''
+    title: ''
+    width: null
+    height: null
+  handler: 'default:file'
+  handler_settings: {  }
+field_type: image

config/sync/field.storage.taxonomy_term.field_visuels.yml

@@ -0,0 +1,30 @@
+uuid: 5041a549-2a8e-4994-b00a-fb3761fa6491
+langcode: en
+status: true
+dependencies:
+  module:
+    - file
+    - image
+    - taxonomy
+id: taxonomy_term.field_visuels
+field_name: field_visuels
+entity_type: taxonomy_term
+type: image
+settings:
+  uri_scheme: public
+  default_image:
+    uuid: ''
+    alt: ''
+    title: ''
+    width: null
+    height: null
+  target_type: file
+  display_field: false
+  display_default: false
+module: image
+locked: false
+cardinality: 5
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false

config/sync/image.style.card_big.yml

@@ -0,0 +1,15 @@
+uuid: ed3fc572-5f86-4c90-b356-473f5350d2af
+langcode: en
+status: true
+dependencies: {  }
+name: card_big
+label: 'card-big (430x240)'
+effects:
+  84451f7d-4b5d-41ae-ac3e-bf75aebad1e7:
+    uuid: 84451f7d-4b5d-41ae-ac3e-bf75aebad1e7
+    id: image_scale_and_crop
+    weight: 1
+    data:
+      width: 430
+      height: 340
+      anchor: center-center

config/sync/image.style.card_full.yml

@@ -0,0 +1,15 @@
+uuid: fa3fff88-3b7d-43cf-9bc9-df5588735554
+langcode: en
+status: true
+dependencies: {  }
+name: card_full
+label: 'card-full (425x610)'
+effects:
+  31bf30ba-8cec-4232-8675-41b41765e52e:
+    uuid: 31bf30ba-8cec-4232-8675-41b41765e52e
+    id: image_scale_and_crop
+    weight: 1
+    data:
+      width: 425
+      height: 610
+      anchor: center-center

config/sync/image.style.home_showroom.yml

@@ -0,0 +1,15 @@
+uuid: 156ca012-5278-4c4c-805b-78819a5aa9bd
+langcode: en
+status: true
+dependencies: {  }
+name: home_showroom
+label: 'home-showroom (800x534)'
+effects:
+  87ca0333-c2de-4d98-91e1-d65b0263a31e:
+    uuid: 87ca0333-c2de-4d98-91e1-d65b0263a31e
+    id: image_scale_and_crop
+    weight: 1
+    data:
+      width: 800
+      height: 450
+      anchor: center-center

config/sync/rest.resource.entity.entity_view_display.yml

@@ -0,0 +1,17 @@
+uuid: 3838a066-6532-40df-8bc0-28848bedab7d
+langcode: en
+status: false
+dependencies:
+  module:
+    - serialization
+    - user
+id: entity.entity_view_display
+plugin_id: 'entity:entity_view_display'
+granularity: resource
+configuration:
+  methods:
+    - GET
+  formats:
+    - json
+  authentication:
+    - cookie

config/sync/rest.resource.entity.node_type.yml

@@ -0,0 +1,18 @@
+uuid: 6c0bad4c-4cb1-4203-ab2f-f0e35207286f
+langcode: en
+status: false
+dependencies:
+  module:
+    - node
+    - serialization
+    - user
+id: entity.node_type
+plugin_id: 'entity:node_type'
+granularity: resource
+configuration:
+  methods:
+    - GET
+  formats:
+    - json
+  authentication:
+    - cookie

config/sync/system.menu.header.yml

@@ -0,0 +1,8 @@
+uuid: b00f8fd5-4940-4760-abeb-39cdb74ec895
+langcode: und
+status: true
+dependencies: {  }
+id: header
+label: Header
+description: ''
+locked: false

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
-              default_sort_order: asc
+              sortable: true
+              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.admin_taxo.yml

@@ -8,8 +8,10 @@ dependencies:
     - field.storage.taxonomy_term.field_public_address
     - field.storage.taxonomy_term.field_public_email
     - field.storage.taxonomy_term.field_synonyms
+    - field.storage.taxonomy_term.field_visuels
     - field.storage.taxonomy_term.field_website
     - field.storage.taxonomy_term.field_workflow
+    - image.style.medium
     - taxonomy.vocabulary.company
     - taxonomy.vocabulary.showroom
     - taxonomy.vocabulary.tags
@@ -19,6 +21,7 @@ dependencies:
   module:
     - address
     - content_lock
+    - image
     - link
     - options
     - pagerer
@@ -98,12 +101,11 @@ display:
           description: ''
           columns:
             views_bulk_operations_bulk_form: views_bulk_operations_bulk_form
+            field_visuels: name
             tid: name
             name: name
             operations: name
             field_public_address: field_public_address
-            field_public_email: field_public_email
-            field_website: field_website
             translation_count: translation_count
             langcode_1: langcode_1
             is_locked: is_locked
@@ -117,6 +119,11 @@ display:
               separator: ''
               empty_column: false
               responsive: ''
+            field_visuels:
+              align: ''
+              separator: ''
+              empty_column: false
+              responsive: ''
             tid:
               sortable: false
               default_sort_order: asc
@@ -143,18 +150,6 @@ display:
               separator: ''
               empty_column: false
               responsive: ''
-            field_public_email:
-              sortable: false
-              default_sort_order: asc
-              align: ''
-              separator: ''
-              empty_column: false
-              responsive: ''
-            field_website:
-              align: ''
-              separator: ''
-              empty_column: false
-              responsive: ''
             translation_count:
               sortable: false
               default_sort_order: asc
@@ -198,6 +193,8 @@ display:
               empty_column: false
               responsive: ''
             field_memo:
+              sortable: false
+              default_sort_order: asc
               align: ''
               separator: ''
               empty_column: false
@@ -3129,6 +3126,70 @@ display:
           entity_type: taxonomy_term
           entity_field: name
           plugin_id: term_name
+        field_visuels:
+          id: field_visuels
+          table: taxonomy_term__field_visuels
+          field: field_visuels
+          relationship: none
+          group_type: group
+          admin_label: ''
+          label: Visuels
+          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: target_id
+          type: image
+          settings:
+            image_style: medium
+            image_link: ''
+          group_column: ''
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 1
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+          plugin_id: field
         operations:
           id: operations
           table: taxonomy_term_data
@@ -3668,6 +3729,7 @@ display:
         - 'config:field.storage.taxonomy_term.field_memo'
         - 'config:field.storage.taxonomy_term.field_migration'
         - 'config:field.storage.taxonomy_term.field_public_address'
+        - 'config:field.storage.taxonomy_term.field_visuels'
         - 'config:field.storage.taxonomy_term.field_workflow'
   page_3:
     display_plugin: page

config/sync/views.view.blabla.yml

@@ -0,0 +1,809 @@
+uuid: e116ba1e-828b-40a6-80e1-b7b2e9b4d37b
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.node.teaser
+    - field.storage.node.body
+    - field.storage.node.field_date
+    - field.storage.node.field_visuel
+    - image.style.card_medium
+    - node.type.article
+    - system.menu.header
+  module:
+    - datetime_range
+    - image
+    - node
+    - rest
+    - serialization
+    - smart_trim
+    - taxonomy
+    - user
+    - workflow
+id: blabla
+label: Blabla
+module: views
+description: ''
+tag: ''
+base_table: node_field_data
+base_field: nid
+core: 8.x
+display:
+  default:
+    display_plugin: default
+    id: default
+    display_title: Master
+    position: 0
+    display_options:
+      access:
+        type: perm
+        options:
+          perm: 'access content'
+      cache:
+        type: tag
+        options: {  }
+      query:
+        type: views_query
+        options:
+          disable_sql_rewrite: false
+          distinct: false
+          replica: false
+          query_comment: ''
+          query_tags: {  }
+      exposed_form:
+        type: basic
+        options:
+          submit_button: Apply
+          reset_button: false
+          reset_button_label: Reset
+          exposed_sorts_label: 'Sort by'
+          expose_sort_order: true
+          sort_asc_label: Asc
+          sort_desc_label: Desc
+      pager:
+        type: mini
+        options:
+          items_per_page: 10
+          offset: 0
+          id: 0
+          total_pages: null
+          expose:
+            items_per_page: false
+            items_per_page_label: 'Items per page'
+            items_per_page_options: '5, 10, 25, 50'
+            items_per_page_options_all: false
+            items_per_page_options_all_label: '- All -'
+            offset: false
+            offset_label: Offset
+          tags:
+            previous: ‹‹
+            next: ››
+      style:
+        type: default
+      row:
+        type: 'entity:node'
+        options:
+          view_mode: teaser
+      fields:
+        title:
+          id: title
+          table: node_field_data
+          field: title
+          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: false
+            ellipsis: false
+            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: string
+          settings:
+            link_to_entity: false
+          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: title
+          plugin_id: field
+        body:
+          id: body
+          table: node__body
+          field: body
+          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: smart_trim
+          settings:
+            trim_length: 100
+            trim_type: chars
+            trim_suffix: ...
+            wrap_output: false
+            wrap_class: trimmed
+            more_link: false
+            more_text: More
+            more_class: more-link
+            summary_handler: full
+            trim_options:
+              text: true
+              trim_zero: false
+          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
+          plugin_id: field
+        uuid:
+          id: uuid
+          table: node
+          field: uuid
+          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: string
+          settings:
+            link_to_entity: false
+          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: uuid
+          plugin_id: field
+        field_visuel:
+          id: field_visuel
+          table: node__field_visuel
+          field: field_visuel
+          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: target_id
+          type: image
+          settings:
+            image_style: card_medium
+            image_link: ''
+          group_column: ''
+          group_columns: {  }
+          group_rows: true
+          delta_limit: 1
+          delta_offset: 0
+          delta_reversed: false
+          delta_first_last: false
+          multi_type: separator
+          separator: ', '
+          field_api_classes: false
+          plugin_id: field
+        term_node_tid:
+          id: term_node_tid
+          table: node_field_data
+          field: term_node_tid
+          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
+          type: separator
+          separator: ', '
+          link_to_taxonomy: false
+          limit: false
+          vids:
+            company: '0'
+            showroom: '0'
+            tags: '0'
+            thesaurus: '0'
+          entity_type: node
+          plugin_id: taxonomy_index_tid
+        field_date:
+          id: field_date
+          table: node__field_date
+          field: field_date
+          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: daterange_default
+          settings:
+            timezone_override: ''
+            format_type: html_date
+            separator: '-'
+          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
+          plugin_id: field
+        view_node:
+          id: view_node
+          table: node
+          field: view_node
+          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
+          text: view
+          output_url_as_text: true
+          absolute: false
+          entity_type: node
+          plugin_id: entity_link
+        created:
+          id: created
+          table: node_field_data
+          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
+          field: type
+          value:
+            article: article
+          entity_type: node
+          entity_field: type
+          plugin_id: bundle
+        langcode:
+          id: langcode
+          table: node_field_data
+          field: langcode
+          relationship: none
+          group_type: group
+          admin_label: ''
+          operator: in
+          value:
+            '***LANGUAGE_language_interface***': '***LANGUAGE_language_interface***'
+          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: {  }
+          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
+          relationship: none
+          group_type: group
+          admin_label: ''
+          order: DESC
+          exposed: false
+          expose:
+            label: ''
+          granularity: minute
+          entity_type: node
+          entity_field: created
+          plugin_id: date
+      title: Blabla
+      header: {  }
+      footer: {  }
+      empty: {  }
+      relationships: {  }
+      arguments: {  }
+      display_extenders: {  }
+    cache_metadata:
+      max-age: -1
+      contexts:
+        - 'languages:language_content'
+        - 'languages:language_interface'
+        - url.query_args
+        - 'user.node_grants:view'
+        - user.permissions
+      tags:
+        - 'config:field.storage.node.body'
+        - 'config:field.storage.node.field_date'
+        - 'config:field.storage.node.field_visuel'
+  page_1:
+    display_plugin: page
+    id: page_1
+    display_title: Page
+    position: 1
+    display_options:
+      display_extenders:
+        views_ef_fieldset: {  }
+      path: blabla
+      menu:
+        type: normal
+        title: Blabla
+        description: ''
+        expanded: false
+        parent: ''
+        weight: 0
+        context: '0'
+        menu_name: header
+    cache_metadata:
+      max-age: -1
+      contexts:
+        - 'languages:language_content'
+        - 'languages:language_interface'
+        - url.query_args
+        - 'user.node_grants:view'
+        - user.permissions
+      tags:
+        - 'config:field.storage.node.body'
+        - 'config:field.storage.node.field_date'
+        - 'config:field.storage.node.field_visuel'
+  rest_export_1:
+    display_plugin: rest_export
+    id: rest_export_1
+    display_title: 'REST export'
+    position: 2
+    display_options:
+      display_extenders:
+        views_ef_fieldset: {  }
+      path: blabla_rest
+      style:
+        type: serializer
+        options:
+          formats:
+            json: json
+      defaults:
+        style: false
+        row: false
+      row:
+        type: data_field
+        options:
+          field_options:
+            title:
+              alias: ''
+              raw_output: false
+      pager:
+        type: mini
+        options:
+          items_per_page: 20
+          offset: 0
+          id: 0
+          total_pages: null
+          tags:
+            previous: ‹‹
+            next: ››
+          expose:
+            items_per_page: false
+            items_per_page_label: 'Items per page'
+            items_per_page_options: '5, 10, 25, 50'
+            items_per_page_options_all: false
+            items_per_page_options_all_label: '- All -'
+            offset: false
+            offset_label: Offset
+      rendering_language: '***LANGUAGE_entity_translation***'
+    cache_metadata:
+      max-age: -1
+      contexts:
+        - 'languages:language_content'
+        - 'languages:language_interface'
+        - request_format
+        - url.query_args
+        - 'user.node_grants:view'
+        - user.permissions
+      tags:
+        - 'config:field.storage.node.body'
+        - 'config:field.storage.node.field_date'
+        - 'config:field.storage.node.field_visuel'

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,72 @@
+<?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;
+  $entity_uuid = 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/modules/custom/materio_home/src/Plugin/Field/FieldType/ComputedArticlesReferences.php

@@ -38,7 +38,8 @@ class ComputedArticlesReferences extends EntityReferenceFieldItemList
     $query = \Drupal::entityQuery('node')
         ->condition('status', 1)
         ->sort('created', 'DESC')
-        ->range(0,5)
+        ->exists('field_visuel')
+        ->range(0,6)
         ->condition('type', 'article');
     $nids = $query->execute();
     foreach ($nids as $key => $nid) {

web/modules/custom/materio_home/src/Plugin/Field/FieldType/ComputedMaterialsReferences.php

@@ -40,10 +40,12 @@ class ComputedMaterialsReferences extends EntityReferenceFieldItemList
     $query = \Drupal::entityQuery('node')
         ->condition('status', 1)
         ->condition('type', 'materiau')
+        ->exists('field_materiau_images')
+        ->condition('field_materiau_images.%delta', 3)
         ->sort('created', 'DESC')
         ->range(0,200);
     $results = $query->execute();
-    $nids = array_rand($results, 20);
+    $nids = array_rand($results, 30);
     foreach ($nids as $key => $nid) {
       $this->list[$key] = $this->createItem($key, $nid);
     }

web/modules/custom/materio_home/src/Plugin/Field/FieldType/ComputedShowroomsReferences.php

@@ -8,6 +8,8 @@ use Drupal\Core\Field\FieldItemList;
 use Drupal\Core\TypedData\TypedDataInterface;
 use Drupal\Core\Field\BaseFieldDefinition;
 use Drupal\Core\TypedData\ComputedItemListTrait;
+use Drupal\workflow\Entity\WorkflowManager;
+
 
 // https://www.drupal.org/node/2112677
 // https://www.cornel.co/article/entity-reference-computed-field-example-drupal
@@ -38,9 +40,15 @@ class ComputedShowroomsReferences extends EntityReferenceFieldItemList
     $query = \Drupal::entityQuery('taxonomy_term')
         ->condition('status', 1)
         ->condition('vid', 'showroom');
+        // remove masqué
+
+
     $tids = $query->execute();
     shuffle($tids);
     foreach ($tids as $key => $tid) {
+      $term = \Drupal::entityTypeManager()->getStorage('taxonomy_term')->load($tid);
+      $sid = WorkflowManager::getCurrentStateId($term, 'field_workflow');
+      if($sid != 'workflow_visible') continue;
       $this->list[$key] = $this->createItem($key, $tid);
     }
   }

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

@@ -28,7 +28,9 @@ import 'theme/assets/styles/main.scss'
 
   var MaterioTheme = function(){
 
-    var _v_sitebranding_block, _v_pagetitle_block, _v_user_block, _v_main_content, _v_search_block;
+    var _v_sitebranding_block, _v_user_block, _v_header_menu
+      , _v_pagetitle_block, _v_search_block
+      , _v_main_content;
     var _is_front = drupalSettings.path.isFront;
 
     console.log('drupalSettings', drupalSettings);
@@ -43,13 +45,67 @@ import 'theme/assets/styles/main.scss'
     }
 
     function initVues(){
+      initVRouter();
       initVSiteBrandingBlock()
       initVPagetitleBlock()
       initVUserBlock()
+      initVHeaderMenu()
       initVMainContent()
       initVSearchBlock()
     }
 
+    function initVRouter(){
+      // we need this to update the title and body classes while using history nav
+      router.beforeEach((to, from, next) => {
+        // console.log('router beforeEach to ', to);
+        // commit new title to store
+        let title = null;
+        switch (to.name) {
+          case 'home':
+            title = null
+            break;
+          case 'article':
+            title = false
+            break;
+          default:
+            title = to.name
+        }
+        if (title !== false) {
+          store.commit('Common/setPagetitle', title)
+        }
+
+        // remove all path related body classes
+        let body_classes = document.querySelector('body').classList;
+        let classes_to_rm = [];
+        for (var i = 0; i < body_classes.length; i++) {
+          if(body_classes[i].startsWith('path-')){
+            classes_to_rm.push(body_classes[i]);
+          }
+        }
+        document.querySelector('body').classList.remove(...classes_to_rm);
+        // add new path classes to body
+        let classes = [];
+        if(to.path == '/'){
+          classes.push('path-home');
+        }else{
+          let path_parts = to.path.replace(/^\//, '').split('/');
+          for (var i = 0; i < path_parts.length; i++) {
+            if(i == 0){
+              var c = "path-" + path_parts[i];
+            }else if (path_parts[i] !== ''){
+              var c = classes[i-1] +'-'+ path_parts[i];
+            }
+            classes.push(c)
+          }
+
+        }
+        document.querySelector('body').classList.add(...classes);
+
+        // trigger router
+        next();
+      })
+    }
+
     function initVSiteBrandingBlock(){
       _v_sitebranding_block = new Vue({
         store,
@@ -61,7 +117,8 @@ import 'theme/assets/styles/main.scss'
             let href = event.target.getAttribute('href');
             // console.log("Clicked on logo href", href);
             this.$router.push(href)
-            this.$store.commit('Common/setPagetitle', null)
+            // replaced by router.beforeEach
+            // this.$store.commit('Common/setPagetitle', null)
           }
         }
       })
@@ -127,6 +184,33 @@ import 'theme/assets/styles/main.scss'
       // console.log('initVUserBlock', _v_user_block);
     }
 
+    function initVHeaderMenu(){
+      // console.log('initVHeaderMenu');
+      // adding vuejs attributes has it wont work on twig template (see menu--header.html.twig)
+      // not working : String contains an invalid character
+      // document.querySelectorAll(`#block-header a`).forEach(link => {
+      //   console.log(link);
+      //   link.setAttribute('@click.prevent', 'onclick')
+      // });
+
+      _v_header_menu = new Vue({
+        store,
+        router,
+        el: `#block-header`,
+        methods: {
+          onclick(event){
+            // console.log("Clicked on header menu link", event);
+            let href = event.target.getAttribute('href');
+            // let title = event.target.innerText;
+            // console.log("Clicked on header menu link : href", href);
+            this.$router.push(href)
+            // replaced by router.beforeEach
+            // this.$store.commit('Common/setPagetitle', title)
+          }
+        }
+      })
+    }
+
     function initVMainContent(){
       let id = "main-content"
       let $main_content = document.querySelector('#'+id)
@@ -136,7 +220,6 @@ import 'theme/assets/styles/main.scss'
         store,
         render: h => h(VMainContent, {props:{id:id, html:main_html, isfront:drupalSettings.path.isFront}})
       }).$mount('#'+id)
-      // console.log('initTestVContent', v_test_content);
     }
 
     function initVSearchBlock(){

web/themes/custom/materiotheme/assets/styles/base/_colors.scss

@@ -1 +1,5 @@
 $transparent-bg: rgba(255,255,255, 0.95);
+
+$color-base:#69cdcf;
+$color-showrooms:#50aa3c;
+$color-blabla:#9458aa;

web/themes/custom/materiotheme/assets/styles/base/_reset.scss

@@ -8,3 +8,28 @@ a{
 }
 a, a:focus, a:active { outline: none; }
 a:focus{ -moz-outline-style: none; }
+
+ul{
+	margin:0;
+	padding:0;
+	li{
+		margin:0;
+		padding:0;
+		list-style: none;
+	}
+}
+
+h1,h2,h3,h4,h5,h6{
+	margin:0;
+}
+
+p a{
+	position: relative;
+	&:after{
+		content:'';
+		position: absolute;
+		top:1em; left:0;
+		width:100%;
+		border-bottom: 1px dotted #000;
+	}
+}

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -33,6 +33,13 @@ aside.messages{
 
 header[role="banner"]{
   padding:0.2em 0 0 0;
+
+  %header-fs{
+    font-size: 0.9em;
+    // line-height: 1;
+    font-weight: 400;
+  }
+
   #block-sitebranding{
     h1{
       margin:0;
@@ -42,12 +49,13 @@ header[role="banner"]{
 
   #block-userlogin{
     position: relative;
-    width:8em;
+    // width:8em;
+    padding:0 1em;
     overflow: visible;
     h2{
+      @extend %header-fs;
+      line-height: 1.38;
       margin: 0;
-      font-size: 1em;
-      font-weight: 400;
     }
     &>section{
       background-color: #fff;
@@ -117,6 +125,26 @@ header[role="banner"]{
     }
   }
 
+  // menu
+  #block-header{
+    margin-right: 1em;
+    padding-left: 1em;
+    border-left: 1px solid #000;
+    ul.menu{
+      margin:0;
+      li{
+        padding:0;
+        display: inline-block;
+        &:not(:first-of-type){
+          margin-left: 0.5em;
+        }
+        a{
+          @extend %header-fs;
+        }
+      }
+    }
+  }
+
   #block-languageswitcher{
     text-align: right;
     h2{
@@ -171,7 +199,6 @@ header[role="banner"]{
 
   }
 
-
   // header bottom
   #block-pagetitle{
     float: left;
@@ -181,10 +208,25 @@ header[role="banner"]{
       font-size: 1.512em;
       text-transform: capitalize;
       font-weight: 300;
+
+      body:not(.path-home) & {
+        padding:0.5em 1em;
+      }
+      body.path-blabla & {
+        color: #fff;
+        background-color: $color-blabla;
+      }
+      body.path-showrooms & {
+        color: #fff;
+        background-color: $color-showrooms;
+      }
+      body.path-base & {
+        color: #fff;
+        background-color: $color-base;
+      }
     }
   }
 
-
   #block-materiosapisearchblock{
     float:right;
     display:inline-block;
@@ -238,39 +280,217 @@ aside.messages{
 // }
 
 
-// front
+//   __             _
+//  / _|_ _ ___ _ _| |_
+// |  _| '_/ _ \ ' \  _|
+// |_| |_| \___/_||_\__|
+
 article.node--type-frontpage{
-  .node__content{
-    .field--name-field-what-is-materio,
-    .field--name-field-a-database,
-    .field--name-field-showrooms,
-    .field--name-field-blabla,
-    .field--name-field-pricing{
-      &:not(:nth-child(1)){
-        margin-top: 1em;
-      }
+
+  %front-col-field__label{
+    font-size: 3.5em;
+    line-height: 1;
+  }
+  %front-col-descritpion{
+    font-size: 0.9em;
+    line-height: 1.3;
+  }
+
+  %part-centered-layout{
+    padding:1.5em 0;
+    background-color: #fff;
+    >div:nth-child(1){
+      width:80%;
+      margin: 0 auto;
+      text-align: center;
       .field__label{
-        font-size: 2.2em;
-        font-weight: bold;
+        @extend %front-col-field__label;
+      }
+      .field__item{
+        @extend %front-col-descritpion;
       }
     }
+  }
 
-    // .field--name-computed-materials-reference,
-    .field--name-computed-showrooms-reference,
-    .field--name-computed-articles-reference{
-      // outline: 1px green solid;
-      margin:0; padding:0;
-      width: calc(100% + #{$column_goutiere});
-
+  %part-columned-layout{
+    display:grid;
+    grid-template-columns: 300px 1fr;
+    grid-column-gap: 2em;
+    padding:2em 1em;
+    >div:nth-child(1){
+      color: #fff;
+      grid-column: 1;
+      .field__label{
+        @extend %front-col-field__label;
+      }
       .field__item{
-        display: inline-block;
-        vertical-align: top;
-        width:210px;
-        margin:0 $column_goutiere $column_goutiere 0; padding:0;
-        p{
-          margin:0;
+        @extend %front-col-descritpion;
+      }
+    }
+    >div:nth-child(2){
+      grid-column: 2;
+    }
+  }
+
+  .node__content{
+
+    &>section{
+      &.home-intro{
+        @extend %part-centered-layout;
+      }
+      &.home-database{
+        background-color: $color-base;
+        @extend %part-columned-layout;
+        .field--name-field-a-database{}
+        .cards-list-home{
+          position: relative;
+          // max-height: (130px*1.4)*3;
+          max-height: 580px;
+          overflow-y: hidden;
+          ul{
+            width:100%;
+            margin:0; padding:0;
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(50px, 130px));
+            grid-template-rows: 1fr;
+            grid-gap: 1em;
+            justify-content:start;
+            li{
+              position: relative;
+              list-style: none;
+              margin:0; padding:0;
+              padding-top: 140%;
+              .card{
+                position:absolute;
+                top:0; bottom:0;
+                left:0; right:0;
+                width: auto;
+                height: auto;
+                .field--name-field-short-description{
+                  font-size: 0.756em;
+                  line-height: 0.9;
+                }
+              }
+            }
+          }
         }
       }
+      &.home-showrooms{
+        background-color: $color-showrooms;
+        @extend %part-columned-layout;
+        .field--name-field-showrooms{
+        }
+        .field--name-computed-showrooms-reference{
+          position:relative;
+          // height:550px;
+          display: grid;
+          grid-template-rows: 1fr;
+          $bp: ($column_width + $column_goutiere )*7;
+
+          @media only screen and (max-width: $bp){
+            grid-template-columns: 1fr;
+            >.field__item{
+              grid-column: 1;
+            }
+          }
+          @media only screen and (min-width: $bp + 1px){
+            grid-template-columns: 1fr 1fr;
+            grid-gap: 1em;
+            >.field__item:nth-child(odd){
+              grid-column: 1;
+            }
+            >.field__item:nth-child(even){
+              grid-column: 2;
+            }
+          }
+
+          >.field__item{
+            grid-row: 1;
+            // position: absolute;
+            // top:0; left:0;
+            // width:100%; height:100%;
+            // overflow: hidden;
+            .taxonomy-term{
+              position: relative;
+              width:100%; height:100%;
+              div.visuel{
+                width:100%;
+                padding-bottom: 10em;
+                img{
+                  max-width: 100%;
+                  height: auto;
+                }
+              }
+              section.text{
+                position: absolute;
+                bottom:0; left:0;
+                width:100%;
+                box-sizing:border-box;
+                padding:1em 0;
+                background-color:$color-showrooms;
+                color: #fff;
+                >*{
+                  // display: inline-block;
+                  font-size: 0.9em;
+                }
+                h2,p{
+                  margin:0;
+                }
+
+              }
+            }
+          }
+        }
+      }
+      &.home-blabla{
+        background-color: $color-blabla;
+        @extend %part-columned-layout;
+
+        .cards-list-home{
+          position: relative;
+          $bp: ($column_width + $column_goutiere );
+          overflow-y: hidden;
+
+          @media only screen and (max-width: $bp * 6){
+            max-height: 630px;
+          }
+          @media only screen and (min-width: ($bp * 6) + 1px){
+            max-height: 310px;
+          }
+
+          ul{
+            width:100%;
+            margin:0; padding:0;
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(80px, 220px));
+            // grid-template-rows: 1fr;
+            grid-gap: 1em;
+            justify-content:start;
+            li{
+              position: relative;
+              list-style: none;
+              margin:0; padding:0;
+              padding-top: 140%;
+              overflow: hidden;
+              .card{
+                position:absolute;
+                top:0; bottom:0;
+                left:0; right:0;
+                width: auto;
+                height: auto;
+                .field--name-title{
+                  font-size: 0.756em;
+                  line-height: 0.9;
+                }
+              }
+            }
+          }
+        }
+      }
+      &.home-pricing{
+        @extend %part-centered-layout;
+
+      }
     }
   }
 }
@@ -314,10 +534,17 @@ article.node--type-frontpage{
 
 article.card{
   position: relative;
-  width:$column_width; height:295px;
   box-shadow: 0 0 5px rgba(0,0,0,0.2);
+  width:$column_width; height:295px;
+  // &.card-small{
+  //   width:100px; height:140px;
+  // }
   // focused
   // box-shadow: 0 0 7px rgba(0,0,0,0.9);
+  // &.article{
+  //   width: $column_width * 2 + $column_goutiere;
+  //
+  // }
   header{
     position: absolute;
     bottom:0;
@@ -331,7 +558,7 @@ article.card{
     h1{
       font-size: 1.3em;
       font-weight: 700;
-      line-height: 0.8;
+      line-height: 0.85;
       margin-bottom: 0.2em;
     }
     h4{
@@ -368,3 +595,125 @@ article.card{
     }
   }
 }
+
+
+
+ //  ___ _      _    _
+ // | _ ) |__ _| |__| |__ _
+ // | _ \ / _` | '_ \ / _` |
+ // |___/_\__,_|_.__/_\__,_|
+#blabla{
+
+}
+
+#main-content > article.article{
+  section.taxonomy{
+    ul{
+      margin:1em 0 0;
+    }
+    li{
+      display:inline-block;
+      padding:0 0.5em 0 0;
+    }
+  }
+  section.visuels{
+    width:calc(100% + #{$column_goutiere});
+    figure{
+      display: inline-block;
+      vertical-align: top;
+      width:$column_width;
+      margin:0 $column_goutiere 0 0;
+      img{
+        width:100%;
+      }
+    }
+  }
+  aside.linked-materials{
+    ul{
+      width:calc(100% + #{$column_goutiere});
+      li{
+        display: inline-block;
+        vertical-align: top;
+        width:$column_width;
+        margin:0 $column_goutiere 0 0;
+      }
+    }
+    h3.field__label{
+      font-size: 1em;
+      font-weight: 500;
+      margin: 2em 0 1em 0;
+    }
+    h1.title{
+      font-size: 1em;
+      font-weight: 400;
+    }
+    h3.ref{
+      font-size: 0.756em;
+      font-weight: 600;
+    }
+    h2.description{
+      font-size: 0.756em;
+      font-weight: 400;
+    }
+  }
+  nav.prevnext{
+    &.bottom{
+      margin:2em 0;
+    }
+    ul{
+      padding:0;
+      margin:0;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+    }
+    li{
+      padding:0;
+      margin:0;
+      list-style: none;
+      a{
+        font-size: 0.756em;
+        font-weight: 700;
+      }
+      &:nth-child(1){
+        grid-column: 1;
+        a:before{
+          content:'< ';
+        }
+      }
+      &:nth-child(2){
+        grid-column: 2;
+        text-align: right;
+        a:after{
+          content:' >';
+        }
+      }
+    }
+  }
+}
+
+ //  ___ _
+ // / __| |_  _____ __ ___ _ ___  ___ _ __  ___
+ // \__ \ ' \/ _ \ V  V / '_/ _ \/ _ \ '  \(_-<
+ // |___/_||_\___/\_/\_/|_| \___/\___/_|_|_/__/
+#showrooms{
+  width: calc(100% + #{$column_goutiere});
+  article.showroom{
+    width: $column_width * 2 + $column_goutiere;
+    display: inline-block;
+    vertical-align: top;
+    margin: 0 $column_goutiere $column_goutiere 0;
+
+    h1{
+      margin:0;
+      font-weight: 4;
+    }
+    p{ margin:0; }
+    figure{
+      margin:0;
+      img{
+        max-width: 100%;
+      }
+    }
+  }
+
+}

web/themes/custom/materiotheme/materiotheme.info.yml

@@ -11,7 +11,6 @@ libraries:
 regions:
   header: Header
   header_left: 'Header left'
-  header_middle: 'Header middle'
   header_right: 'Header right'
   header_bottom: 'Header bottom'
   content_top: 'Content Top'

web/themes/custom/materiotheme/materiotheme.libraries.yml

@@ -4,7 +4,7 @@ global-css:
     theme:
       assets/fonts/ubuntu/ubuntu.css: {}
       assets/styles/mdi/css/materialdesignicons.min.css: {}
-      # assets/dist/main.css: {}
+      assets/dist/main.css: {}
 
 global-js:
   version: VERSION

web/themes/custom/materiotheme/materiotheme.theme

@@ -138,3 +138,15 @@ function materiotheme_form_user_login_form_alter(&$form, FormStateInterface $for
 //   //   $vars['links'][$lang_code]['link']['#title'] = $lang_code;
 //   // }
 // }
+
+
+function materiotheme_theme_suggestions_taxonomy_term_alter(&$suggestions, &$vars){
+  // ksm($suggestions);
+  // ksm($vars);
+  $original = $vars['theme_hook_original'];
+  $bundle = $vars['elements']['#taxonomy_term']->bundle();
+  $viewmode = $vars['elements']["#view_mode"];
+  $suggestions[] = $original.'__'.$bundle.'__'.$viewmode;
+
+  // dsm($suggestions);
+}

web/themes/custom/materiotheme/templates/content/field--node--computed-articles-reference--frontpage.html.twig

@@ -43,7 +43,7 @@
     label_display == 'visually_hidden' ? 'visually-hidden',
   ]
 %}
-<div class="cards-list">
+<div class="cards-list-home">
   {% if label_hidden %}
       <ul{{ attributes }}>
         {% for item in items %}
@@ -64,4 +64,4 @@
       {% endif %}
     </div>
   {% endif %}
-</div>
+</div>

web/themes/custom/materiotheme/templates/content/field--node--computed-materials-reference--frontpage.html.twig

@@ -0,0 +1,67 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set title_classes = [
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+<div class="cards-list-home">
+  {% if label_hidden %}
+      <ul{{ attributes }}>
+        {% for item in items %}
+          <li{{ item.attributes }}>{{ item.content }}</li>
+        {% endfor %}
+      </ul>
+  {% else %}
+    <div{{ attributes }}>
+      <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
+      {% if multiple %}
+        <ul>
+      {% endif %}
+      {% for item in items %}
+        <li{{ item.attributes }}>{{ item.content }}</li>
+      {% endfor %}
+      {% if multiple %}
+    </ul>
+      {% endif %}
+    </div>
+  {% endif %}
+</div>

web/themes/custom/materiotheme/templates/content/node--article--card-medium.html.twig

@@ -0,0 +1,96 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a node.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: (optional) The title of the node.
+ * - content: All node items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: (optional) Themed creation date field.
+ * - author_name: (optional) Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ * - readmore: Flag for more state. Will be true if the teaser content of the
+ *   node cannot hold the main body content.
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_node()
+ *
+ * @todo Remove the id attribute (or make it a class), because if that gets
+ *   rendered twice on a page this is invalid CSS for example: two lists
+ *   in different view modes.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'node',
+    'node--type-' ~ node.bundle|clean_class,
+    node.isPromoted() ? 'node--promoted',
+    node.isSticky() ? 'node--sticky',
+    not node.isPublished() ? 'node--unpublished',
+    view_mode ? view_mode|clean_class,
+    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
+    'card'
+  ]
+%}
+
+<article{{ attributes.addClass(classes) }}>
+  <header>
+    {{ label }}
+    {{ content.field_date }}
+  </header>
+  <section class="images">
+    {{ content.field_visuel }}
+  </section>
+</article>

web/themes/custom/materiotheme/templates/content/node--materiau--card-medium.html.twig

@@ -72,11 +72,22 @@
  * @ingroup themeable
  */
 #}
-<article{{ attributes.addClass('card') }}>    
+{%
+  set classes = [
+    'node',
+    'node--type-' ~ node.bundle|clean_class,
+    node.isPromoted() ? 'node--promoted',
+    node.isSticky() ? 'node--sticky',
+    not node.isPublished() ? 'node--unpublished',
+    view_mode ? view_mode|clean_class,
+    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
+    'card'
+  ]
+%}
+
+<article{{ attributes.addClass(classes) }}>
   <header>
-    <h1>{{ label }}</h1>
-    <!-- <h4>{{ content.field_description }}</h4>
-    <span class="ref">{{ content.field_reference }}</span> -->
+    {{ content.field_short_description }}
   </header>
   <section class="images">
     {{ content.field_materiau_images }}

web/themes/custom/materiotheme/templates/content/node--materiau--card-small.html.twig

@@ -0,0 +1,98 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a node.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: (optional) The title of the node.
+ * - content: All node items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: (optional) Themed creation date field.
+ * - author_name: (optional) Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ * - readmore: Flag for more state. Will be true if the teaser content of the
+ *   node cannot hold the main body content.
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_node()
+ *
+ * @todo Remove the id attribute (or make it a class), because if that gets
+ *   rendered twice on a page this is invalid CSS for example: two lists
+ *   in different view modes.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'node',
+    'node--type-' ~ node.bundle|clean_class,
+    node.isPromoted() ? 'node--promoted',
+    node.isSticky() ? 'node--sticky',
+    not node.isPublished() ? 'node--unpublished',
+    view_mode ? view_mode|clean_class,
+    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
+    'card'
+  ]
+%}
+
+<article{{ attributes.addClass(classes) }}>
+  <header>
+    {# <h1>{{ label }}</h1> #}
+    <h2>{{ content.field_familly }}</h2>
+    <h4>{{ content.field_short_description }}</h4>
+    {# <span class="ref">{{ content.field_reference }}</span> #}
+  </header>
+  <section class="images">
+    {{ content.field_materiau_images }}
+  </section>
+</article>

web/themes/custom/materiotheme/templates/content/taxonomy-term--showroom--home.html.twig

@@ -0,0 +1,40 @@
+{#
+/**
+ * @file
+ * Theme override to display a taxonomy term.
+ *
+ * Available variables:
+ * - url: URL of the current term.
+ * - name: Name of the current term.
+ * - content: Items for the content of the term (fields and description).
+ *   Use 'content' to print them all, or print a subset such as
+ *   'content.description'. Use the following code to exclude the
+ *   printing of a given child element:
+ *   @code
+ *   {{ content|without('description') }}
+ *   @endcode
+ * - attributes: HTML attributes for the wrapper.
+ * - page: Flag for the full page state.
+ * - term: The taxonomy term entity, including:
+ *   - id: The ID of the taxonomy term.
+ *   - bundle: Machine name of the current vocabulary.
+ * - view_mode: View mode, e.g. 'full', 'teaser', etc.
+ *
+ * @see template_preprocess_taxonomy_term()
+ */
+#}
+{%
+  set classes = [
+    'taxonomy-term',
+    'vocabulary-' ~ term.bundle|clean_class,
+  ]
+%}
+<div{{ attributes.setAttribute('id', 'taxonomy-term-' ~ term.id).addClass(classes) }}>
+  <div class="visuel">
+    {{ content.field_visuels }}
+  </div>
+  <section class="text">
+    <h2><a href="{{ url }}">{{ name }}</a></h2>
+    {{ content|without('field_visuels') }}
+  </section>
+</div>

web/themes/custom/materiotheme/templates/layout/page.html.twig

@@ -46,12 +46,7 @@
           {{ page.header_left}}
         {% endif %}
       </div>
-      <div class="header-block header-middle col-4">
-        {% if page.header_middle %}
-          {{ page.header_middle}}
-        {% endif %}
-      </div>
-      <div class="header-block header-right col-4">
+      <div class="header-block header-right col-8">
         {% if page.header_right %}
           {{ page.header_right}}
         {% endif %}

web/themes/custom/materiotheme/templates/menu/menu--header.html.twig

@@ -0,0 +1,58 @@
+{#
+/**
+ * @file
+ * Theme override to display a menu.
+ *
+ * Available variables:
+ * - menu_name: The machine name of the menu.
+ * - items: A nested list of menu items. Each menu item contains:
+ *   - attributes: HTML attributes for the menu item.
+ *   - below: The menu item child items.
+ *   - title: The menu link title.
+ *   - url: The menu link url, instance of \Drupal\Core\Url
+ *   - localized_options: Menu link localized options.
+ *   - is_expanded: TRUE if the link has visible children within the current
+ *     menu tree.
+ *   - is_collapsed: TRUE if the link has children within the current menu tree
+ *     that are not currently visible.
+ *   - in_active_trail: TRUE if the link is in the active trail.
+ */
+#}
+{% import _self as menus %}
+
+{#
+  We call a macro which calls itself to render the full tree.
+  @see https://twig.symfony.com/doc/1.x/tags/macro.html
+#}
+{{ menus.menu_links(items, attributes, 0) }}
+
+{% macro menu_links(items, attributes, menu_level) %}
+  {% import _self as menus %}
+  {% if items %}
+    {% if menu_level == 0 %}
+      <ul{{ attributes.addClass('menu') }}>
+    {% else %}
+      <ul class="menu">
+    {% endif %}
+    {% for item in items %}
+      {%
+        set classes = [
+          'menu-item',
+          item.is_expanded ? 'menu-item--expanded',
+          item.is_collapsed ? 'menu-item--collapsed',
+          item.in_active_trail ? 'menu-item--active-trail',
+        ]
+      %}
+      <li{{ item.attributes.addClass(classes) }}>
+        {# this does not work because of the '@' #}
+        {# we have to do it via js | not working neither #}
+        {#{{ link(item.title, item.url, {'@click.prevent':['onclick']}) }}#}
+        <a href="{{ item.url }}" @click.prevent='onclick'>{{ item.title }}</a>
+        {% if item.below %}
+          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
+        {% endif %}
+      </li>
+    {% endfor %}
+    </ul>
+  {% endif %}
+{% endmacro %}

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/Card.vue

@@ -2,8 +2,8 @@
   <article class="card">
     <header>
       <h1>{{ item.title }}</h1>
-      <h4>{{ item.description }}</h4>
-      <span class="ref">{{ item.reference }}</span>
+      <h4>{{ item.field_short_description }}</h4>
+      <span class="ref">{{ item.field_reference }}</span>
     </header>
     <section class="images" v-switcher>
       <figure

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

@@ -0,0 +1,37 @@
+<template>
+  <article class="showroom">
+    <header>
+      <h1 v-html="item.name" />
+    </header>
+    <section class="images">
+      <figure v-html="item.field_visuels"></figure>
+    </section>
+    <section class="content">
+      <address v-html="item.field_public_address" />
+      <div class="phone" v-html="item.field_public_phone" />
+      <div class="email" v-html="item.field_public_email" />
+    </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: "Showroom",
+  router,
+  props: ['item'],
+  // data(){
+  //   return {
+  //     alias: this.item.view_node.replace(/^.?\/showroom\//g, '')
+  //   }
+  // },
+  // methods:{}
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -0,0 +1,288 @@
+<template>
+  <div class="loading" v-if="!content || loading">
+    <span>Loading ...</span>
+  </div>
+  <article class="article" v-else>
+    <nav class="prevnext top">
+      <ul>
+        <li>
+          <a
+            @click.prevent="onPrev"
+            href="#"
+            v-if="prevnext.prev"
+            v-html="prevnext.prev.title"
+          />
+        </li>
+        <li>
+          <a
+            @click.prevent="onNext"
+            href="#"
+            v-if="prevnext.next"
+            v-html="prevnext.next.title"
+          />
+        </li>
+      </ul>
+    </nav>
+    <section 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>
+    </section>
+    <section class="body" v-html="content.body"></section>
+    <section 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>
+    </section>
+    <aside class="linked-materials">
+      <h3 class="field__label">Linked Materials</h3>
+      <div class="card-list">
+        <ul class="">
+          <li v-for="node in content.field_linked_materials" v-bind:key="node.id">
+            <Card :item="node" />
+          </li>
+        </ul>
+      </div>
+    </aside>
+    <nav class="prevnext bottom">
+      <ul>
+        <li>
+          <a
+            @click.prevent="onPrev"
+            href="#"
+            v-if="prevnext.prev"
+            v-html="prevnext.prev.title"
+          />
+        </li>
+        <li>
+          <a
+            @click.prevent="onNext"
+            href="#"
+            v-if="prevnext.next"
+            v-html="prevnext.next.title"
+          />
+        </li>
+      </ul>
+    </nav>
+  </article>
+</template>
+
+<script>
+import router from 'vuejs/route'
+import store from 'vuejs/store'
+import { JSONAPI } from 'vuejs/api/json-axios'
+import qs from 'querystring'
+import Card from 'vuejs/components/Content/Card'
+
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: "Article",
+  router,
+  store,
+  props: ['item'],
+  data(){
+    return {
+      index:-1,
+      prevnext:{},
+      uuid:null,
+      content:null,
+      loading:true,
+    }
+  },
+  computed: {
+    ...mapState({
+      items: state => state.Blabla.items
+    })
+  },
+  created(){
+    this.getArticle()
+  },
+  methods: {
+    ...mapActions({
+      getItems: 'Blabla/getItems',
+      getItemIndex: 'Blabla/getItemIndex',
+      getPrevNextItems: 'Blabla/getPrevNextItems'
+    }),
+    getArticle(){
+      console.log(this.$route);
+      // get the article uuid
+      if(this.$route.query.uuid){
+        // we come from internal link with vuejs
+        // directly record uuid
+        this.uuid = this.$route.query.uuid
+      }else if(drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'article'){
+        // we landed in an internal page
+        // get the uuid from drupalDeclouped, provided by materio_decoupled.module
+        this.uuid = drupalDecoupled.entity_uuid
+      }
+
+      if(this.uuid){
+        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
+        this.$route.replace('home')
+      }
+    },
+    getIndex(){
+      console.log("Article getIndex");
+      this.getItemIndex(this.uuid).then((index) => {
+        this.index = index
+        // console.log('article index', index, this);
+        this.getPrevNextItems(index).then((pn) => {
+          this.prevnext = pn
+        })
+      })
+    },
+    loadArticle(){
+      console.log('loadArticle', this.uuid)
+      this.loading = true;
+      let params = {
+        include:'field_linked_materials.images,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 relation_obj = relations[key]
+        console.log('typeof relation_obj.data', typeof relation_obj.data);
+        // skip relation_obj if data is not array
+        if(!Array.isArray(relation_obj.data)) continue
+        // create empty field array
+        this.content[key] = []
+        // parse relationship values using included
+        let field = {}
+        // loop through all relation items
+        relation_obj.data.forEach((e) => {
+          // get the included values for each item using id
+          let included = inc.find((i) => { return i.id == e.id })
+          // if we not found an included item skip the item
+          if(typeof included != 'undefined'){
+            // fill the item 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':
+                field = included.attributes
+                field.id = included.id
+                // get the linked material included images
+                field.images = [];
+                included.relationships.images.data.forEach((img) => {
+                  // console.log('href', img.meta.imageDerivatives.links.card_medium.href);
+                  field.images.push({
+                    title:img.meta.title,
+                    url:img.meta.imageDerivatives.links.card_medium.href
+                  })
+                })
+                break;
+              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)
+          }
+        })
+      }
+
+      // update main page title
+      this.$store.commit('Common/setPagetitle', this.content.title)
+
+      this.loading = false;
+      console.log('article.content',this.content);
+    },
+    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 }
+      })
+    }
+  },
+  components: {
+    Card
+  },
+  watch: {
+    '$route' (to, from) {
+      console.log('route change')
+      this.getArticle()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -0,0 +1,53 @@
+<template>
+  <div id="blabla">
+    <div class="loading" v-if="!items.length">
+      <span>Loading ...</span>
+    </div>
+    <div class="cards-list" v-else>
+      <ul>
+        <li v-for="item in items" v-bind:key="item.uuid">
+          <ArticleCard :item="item"/>
+        </li>
+      </ul>
+      <infinite-loading @infinite="nextPage">
+        <div slot="no-more">No more articles</div>
+      </infinite-loading>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import ArticleCard from 'vuejs/components/Content/ArticleCard'
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: "Blabla",
+  // data() {
+  //   return {
+  //     items:[],
+  //     page:0
+  //   }
+  // },
+  computed: {
+    ...mapState({
+      items: state => state.Blabla.items
+    })
+  },
+  created(){
+    if(!this.items.length)
+      this.getItems()
+  },
+  methods: {
+    ...mapActions({
+      getItems: 'Blabla/getItems',
+      nextPage: 'Blabla/nextPage'
+    })
+  },
+  components: {
+    ArticleCard
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

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

@@ -0,0 +1,48 @@
+<template>
+  <div id="showrooms">
+    <div class="loading" v-if="!items.length">
+      <span>Loading ...</span>
+    </div>
+    <Showroom
+      v-else
+      v-for="item in items"
+      v-bind:key="item.uuid"
+      :item="item"
+    />
+  </div>
+</template>
+
+<script>
+
+import Showroom from 'vuejs/components/Content/Showroom'
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: "Showrooms",
+  // data() {
+  //   return {
+  //     items:[],
+  //     page:0
+  //   }
+  // },
+  computed: {
+    ...mapState({
+      items: state => state.Showrooms.items
+    })
+  },
+  created(){
+    if(!this.items.length)
+      this.getItems()
+  },
+  methods: {
+    ...mapActions({
+      getItems: 'Showrooms/getItems'
+    })
+  },
+  components: {
+    Showroom
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

web/themes/custom/materiotheme/vuejs/components/User/UserTools.vue

@@ -46,8 +46,8 @@ export default {
 <style lang="css" scoped>
 #user-tools{
   margin-right:0.5em;
-  padding-right:0.5em;
-  border-right:1px solid #222;
+  /* padding-right:0.5em; */
+  /* border-right:1px solid #222; */
 }
 h4{
   margin:0;

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

@@ -1,8 +1,11 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
-import Home from 'vuejs/components/Content/Home'
-import Base from 'vuejs/components/Content/Base'
+import Home from 'vuejs/components/Pages/Home'
+import Base from 'vuejs/components/Pages/Base'
+import Blabla from 'vuejs/components/Pages/Blabla'
+import Article from 'vuejs/components/Pages/Article'
+import Showrooms from 'vuejs/components/Pages/Showrooms'
 
 Vue.use(VueRouter)
 
@@ -10,8 +13,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'];
-console.log('path aliases', (() => languages.map(l => `/${l}/base`))() );
+// const languages = ['en', 'fr'];
+// console.log('path aliases', (() => languages.map(l => `/${l}/base`))() );
 
 let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
 
@@ -37,6 +40,34 @@ const routes = [
     // }
   },
   // {
+  //   name:'blabla',
+  //   path: `${basePath}blabla`,
+  //   component: Blabla,
+  //   children: [
+  //     {
+  //       path: `${basePath}blabla/:alias`,
+  //       component: Article
+  //     }
+  //   ]
+  // }
+  {
+    name:'blabla',
+    path: `${basePath}blabla`,
+    component: Blabla
+  },
+  {
+    name:'article',
+    path: `${basePath}blabla/:alias`,
+    component: Article,
+    // meta: { uuid:null }
+  },
+  {
+    name:'showrooms',
+    path: `${basePath}showrooms`,
+    component: Showrooms,
+    // meta: { uuid:null }
+  }
+  // {
   //   path: '*',
   //   name: 'notfound',
   //   components: {

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

@@ -3,6 +3,8 @@ import Vuex from 'vuex'
 import Common from './modules/common'
 import User from './modules/user'
 import Search from './modules/search'
+import Blabla from './modules/blabla'
+import Showrooms from './modules/showrooms'
 
 // https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart
 
@@ -11,6 +13,8 @@ export default new Vuex.Store({
   modules: {
     Common,
     User,
-    Search
+    Search,
+    Blabla,
+    Showrooms
   }
 })

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

@@ -0,0 +1,84 @@
+import { JSONAPI } from 'vuejs/api/json-axios'
+import { REST } from 'vuejs/api/rest-axios'
+import { MA } from 'vuejs/api/ma-axios'
+import qs from 'querystring'
+
+export default {
+  namespaced: true,
+
+  // initial state
+  state : {
+    contenttype:null,
+    items: [],
+    page: 0,
+    // infinteState will come from vue-infinite-loading plugin
+    // implemented in vuejs/components/Content/Base.vue
+    infiniteLoadingState: null
+  },
+
+  // getters
+  getters : {},
+
+  // mutations
+  mutations : {
+    setItems (state, items) {
+      state.items = state.items.concat(items)
+    },
+    incrementPage(state){
+      state.page += 1;
+    },
+    setInfiniteState(state, infiniteLoadingstate){
+      state.infiniteLoadingState = infiniteLoadingstate
+    }
+  },
+
+  // actions
+  actions : {
+    getItems({ dispatch, commit, state }){
+      // if(!state.contenttype){
+      //   REST.get('/entity/node_type/article?_format=json', {})
+      //   .then(({ data }) => {
+      //     console.log('blabla REST contenttype : data', data);
+      //   })
+      //   .catch(( error ) => {
+      //       console.warn('Issue with blabla contenttype', error)
+      //       Promise.reject(error)
+      //   })
+      // }
+      return REST.get(`/blabla_rest?_format=json&page=${state.page}`, {})
+        .then(({ data }) => {
+          console.log('blabla REST: data', data)
+          if(data.length){
+            commit('setItems',data)
+            // console.log('items.length', this.items.length);
+            if(state.infiniteLoadingState)
+              state.infiniteLoadingState.loaded()
+          }else{
+            if(state.infiniteLoadingState)
+              state.infiniteLoadingState.complete()
+          }
+        })
+        .catch(( error ) => {
+            console.warn('Issue with blabla getitems', error)
+            Promise.reject(error)
+        })
+    },
+    nextPage ({ dispatch, commit, state }, $infiniteLoadingstate) {
+      console.log("blabla nextPage", $infiniteLoadingstate);
+      commit('incrementPage')
+      commit('setInfiniteState', $infiniteLoadingstate)
+      dispatch('getItems')
+    },
+    getItemIndex({ dispatch, commit, state}, uuid) {
+      return state.items.findIndex((e) =>{
+        return e.uuid == uuid
+      })
+    },
+    getPrevNextItems({ dispatch, commit, state }, index) {
+      return {
+        prev:state.items[index-1],
+        next:state.items[index+1]
+      }
+    }
+  }
+}

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

@@ -142,9 +142,9 @@ export default {
         let item = {
           uuid: uuid,
           title: attrs.title,
-          description: attrs.field_short_description,
+          field_short_description: attrs.field_short_description,
           body: attrs.body,
-          reference: attrs.field_reference,
+          field_reference: attrs.field_reference,
         }
 
         // get images included values

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

@@ -0,0 +1,38 @@
+import { JSONAPI } from 'vuejs/api/json-axios'
+import { REST } from 'vuejs/api/rest-axios'
+import { MA } from 'vuejs/api/ma-axios'
+import qs from 'querystring'
+
+export default {
+  namespaced: true,
+
+  // initial state
+  state : {
+    items: [],
+  },
+
+  // getters
+  getters : {},
+
+  // mutations
+  mutations : {
+    setItems (state, items) {
+      state.items = state.items.concat(items)
+    }
+  },
+
+  // actions
+  actions : {
+    getItems({ dispatch, commit, state }){
+      REST.get(`/showrooms_rest?_format=json`, {})
+        .then(({ data }) => {
+          console.log('showrooms REST: data', data)
+          commit('setItems',data)
+        })
+        .catch(( error ) => {
+            console.warn('Issue with showrooms', error)
+            Promise.reject(error)
+        })
+    }
+  }
+}