fixed webpack prod, fixed language prefix negociation in vue-router

build/webpack.config.prod.js

@@ -1,21 +1,37 @@
 'use strict'
 
+const webpack = require('webpack')
 const merge = require('webpack-merge')
 const baseConfig = require('./webpack.config.base')
 const MiniCssExtractPlugin  = require('mini-css-extract-plugin')
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 
 module.exports = merge(baseConfig, {
   mode: 'production',
   optimization: {
-    splitChunks: {
+    minimizer: [
-      cacheGroups: {
+      new UglifyJSPlugin({
-        commons: {
+        uglifyOptions: {
-          test: /[\\/]node_modules[\\/]/,
+          // Eliminate comments
-          name: "vendor",
+          comments: false,
-          chunks: "all",
+          compress: {
-        },
+            // remove warnings
-      },
+            warnings: false,
-    },
+            // Drop console statements
+            drop_console: true,
+          }
+        }
+      })
+    ]
+  //   splitChunks: {
+  //     cacheGroups: {
+  //       commons: {
+  //         test: /[\\/]node_modules[\\/]/,
+  //         name: "vendor",
+  //         chunks: "all",
+  //       },
+  //     },
+  //   },
   },
   module: {
     rules: [
@@ -26,7 +42,7 @@ module.exports = merge(baseConfig, {
           'css-loader'
         ]
       }, {
-        test: /\.styl(us)?$/,
+        test: /\.scss?$/,
         use: [
           MiniCssExtractPlugin.loader,
           'css-loader',

package.json

@@ -18,26 +18,26 @@
   "author": "Bachir Soussi Chiadmi",
   "license": "MIT",
   "dependencies": {
-    "axios": "^0.18.0",
+    "axios": "^0.18.1",
     "vue": "^2.6.10",
     "vue-meta": "^1.6.0",
-    "vue-router": "^3.0.2",
+    "vue-router": "^3.0.6",
-    "vuex": "^3.1.0"
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.4.0",
+    "@babel/core": "^7.4.5",
-    "@babel/preset-env": "^7.4.2",
+    "@babel/preset-env": "^7.4.5",
     "@vue/test-utils": "^1.0.0-beta.29",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.5.0",
+    "babel-jest": "^24.8.0",
-    "babel-loader": "^8.0.5",
+    "babel-loader": "^8.0.6",
-    "copy-webpack-plugin": "^5.0.2",
+    "copy-webpack-plugin": "^5.0.3",
     "css-loader": "^2.1.1",
     "eslint": "^5.15.3",
     "eslint-config-standard": "^12.0.0",
     "eslint-loader": "^2.1.2",
-    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-import": "^2.17.3",
     "eslint-plugin-node": "^8.0.1",
     "eslint-plugin-promise": "^4.0.1",
     "eslint-plugin-standard": "^4.0.0",
@@ -48,14 +48,15 @@
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
     "uglify-es": "^3.3.9",
+    "uglifyjs-webpack-plugin": "^2.1.3",
     "url-loader": "^1.1.2",
     "vue-jest": "^3.0.4",
     "vue-loader": "^15.7.0",
     "vue-server-renderer": "^2.6.10",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.10",
-    "webpack": "^4.29.6",
+    "webpack": "^4.33.0",
-    "webpack-cli": "^3.3.0",
+    "webpack-cli": "^3.3.2",
     "webpack-merge": "^4.2.1"
   }
 }

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

@@ -1,3 +1,16 @@
+
+
+#user-tools[data-v-4e9a834e]{
+  margin-right:0.5em;
+  padding-right:0.5em;
+  border-right:1px solid #222;
+}
+h4[data-v-4e9a834e]{
+  margin:0;
+  display:inline-block;
+  font-size:inherited;
+}
+
 body {
   background: white; }
 
@@ -996,10 +1009,13 @@ header[role="banner"] {
   header[role="banner"] .wrapper .header-block {
     min-height: 15px;
     font-size: 0; }
+    header[role="banner"] .wrapper .header-block.header-right {
+      text-align: right; }
     header[role="banner"] .wrapper .header-block > * {
       display: inline-block;
       vertical-align: top;
-      font-size: 16px; }
+      font-size: 16px;
+      text-align: left; }
 
 main[role="main"] {
   padding-top: 80px; }
@@ -1014,24 +1030,127 @@ body {
 aside.messages {
   border: none; }
 
+header[role="banner"] {
+  padding: 0.2em 0 0 0; }
   header[role="banner"] #block-sitebranding h1 {
-  margin: 0; }
+    margin: 0;
-
+    line-height: 1; }
+  header[role="banner"] #block-userlogin {
+    position: relative;
+    width: 8em;
+    overflow: visible; }
     header[role="banner"] #block-userlogin h2 {
-  margin: 0; }
+      margin: 0;
-
+      font-size: 1em;
+      font-weight: 400; }
     header[role="banner"] #block-userlogin > section {
       background-color: #fff;
       overflow: hidden;
+      width: 11em;
       height: 1px;
       padding: 0.01em 1em;
       box-sizing: content-box;
       transition: all 0.4s ease-in-out;
-  transition-delay: 2s; }
+      transition-delay: 2s;
-
+      position: absolute;
+      right: 0;
+      top: 1.7em;
+      box-sizing: content-box; }
     header[role="banner"] #block-userlogin:hover > section {
       transition-delay: 0s;
-  height: 16em;
+      height: 12em;
       padding: 1em 1em;
       box-shadow: 0 0 10px #ccc; }
+    header[role="banner"] #block-userlogin .form-item {
+      margin: 0;
+      position: relative;
+      width: 100%; }
+      header[role="banner"] #block-userlogin .form-item.form-item-name {
+        margin: 2px 0 0.5em 0; }
+        header[role="banner"] #block-userlogin .form-item.form-item-name input {
+          width: 90%;
+          padding: 0;
+          box-sizing: content-box; }
+      header[role="banner"] #block-userlogin .form-item.form-item-pass {
+        margin: 0 0 0.5em 0; }
+        header[role="banner"] #block-userlogin .form-item.form-item-pass input {
+          width: 90%;
+          padding: 0;
+          box-sizing: content-box; }
+      header[role="banner"] #block-userlogin .form-item.form-item-persistent-login {
+        font-size: 0.756em; }
+        header[role="banner"] #block-userlogin .form-item.form-item-persistent-login label {
+          vertical-align: top; }
+    header[role="banner"] #block-userlogin #edit-actions {
+      margin: 0; }
+    header[role="banner"] #block-userlogin .item-list ul {
+      margin: 0; }
+      header[role="banner"] #block-userlogin .item-list ul li {
+        list-style: none;
+        margin: 0; }
+        header[role="banner"] #block-userlogin .item-list ul li a {
+          font-size: 0.756em; }
+  header[role="banner"] #block-languageswitcher h2 {
+    margin: 0.1em 0 0 0;
+    font-size: 0.756em;
+    font-weight: 400;
+    padding: 0.1em 0.4em 0.2em;
+    border-radius: 3px;
+    background-color: #444;
+    color: #fff;
+    display: inline-block;
+    vertical-align: top; }
+  header[role="banner"] #block-languageswitcher > ul.links {
+    overflow: hidden;
+    width: 5em;
+    height: 1px;
+    padding: 0.01em 0;
+    margin: 0;
+    box-sizing: content-box;
+    transition: all 0.4s ease-in-out; }
+  header[role="banner"] #block-languageswitcher:hover > ul.links {
+    transition-delay: 0s;
+    height: 2em;
+    padding: 0.3em 0; }
+  header[role="banner"] #block-languageswitcher li {
+    list-style: none;
+    padding: 0; }
+    header[role="banner"] #block-languageswitcher li.is-active {
+      display: none; }
+    header[role="banner"] #block-languageswitcher li a {
+      margin: 0;
+      font-size: 0.756em;
+      font-weight: 400;
+      padding: 0.2em 0.4em;
+      border-radius: 3px;
+      background-color: #444;
+      color: #fff; }
+
+aside.messages {
+  padding: 0; }
+
+#materio-sapi-search-form .form-item, #materio-sapi-search-form input.button {
+  display: inline-block; }
+
+article.node--type-frontpage .node__content .field--name-field-what-is-materio:not(:nth-child(1)),
+article.node--type-frontpage .node__content .field--name-field-a-database:not(:nth-child(1)),
+article.node--type-frontpage .node__content .field--name-field-showrooms:not(:nth-child(1)),
+article.node--type-frontpage .node__content .field--name-field-blabla:not(:nth-child(1)),
+article.node--type-frontpage .node__content .field--name-field-pricing:not(:nth-child(1)) {
+  margin-top: 1em; }
+
+article.node--type-frontpage .node__content .field--name-field-what-is-materio .field__label,
+article.node--type-frontpage .node__content .field--name-field-a-database .field__label,
+article.node--type-frontpage .node__content .field--name-field-showrooms .field__label,
+article.node--type-frontpage .node__content .field--name-field-blabla .field__label,
+article.node--type-frontpage .node__content .field--name-field-pricing .field__label {
+  font-size: 2.2em;
+  font-weight: bold; }
+
+article.node--type-frontpage .node__content .field--name-computed-materials-reference .field__item,
+article.node--type-frontpage .node__content .field--name-computed-showrooms-reference .field__item,
+article.node--type-frontpage .node__content .field--name-computed-articles-reference .field__item {
+  display: inline-block;
+  vertical-align: top;
+  max-width: 250px; }
 

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

@@ -43,9 +43,11 @@ import 'theme/assets/styles/main.scss'
         router,
         el: '#block-sitebranding',
         methods: {
-          onclick(){
+          onclick(event){
-            console.log("Clicked on logo");
+            // console.log("Clicked on logo event", event);
-            this.$router.push({name:'home'})
+            let href = event.target.getAttribute('href');
+            // console.log("Clicked on logo href", href);
+            this.$router.push(href)
           }
         }
       })

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

@@ -20,9 +20,6 @@ import { mapState, mapActions } from 'vuex'
 
 export default {
   name: "Base",
-  data: () => ({
-
-  }),
   computed: {
     ...mapState({
       items: state => state.Search.items
@@ -34,19 +31,17 @@ export default {
     })
   },
   created() {
-    // laucnh a search if params exists in url query
+    // at first page load or first route entering launch a search if params exists in url query
     console.log('Base created() location',window.location);
     let params = new URLSearchParams(window.location.search)
-    if(params.has('keys')){
+    if(params.has('keys') || params.has('term')){
       this.$store.commit('Search/setKeys', params.get('keys'))
+      this.$store.commit('Search/setTerm', params.get('term'))
       this.newSearch()
     }
   },
-  // beforeRouteEnter (to, from, next) {
-  //   console.log('Base beforeRouteEnter');//, to, from, next);
-  //   next()
-  // },
   beforeRouteUpdate (to, from, next) {
+    // when query change launch a new search
     console.log('Base beforeRouteUpdate', to, from, next);
     this.$store.commit('Search/setKeys', to.query.keys)
     this.$store.commit('Search/setTerm', to.query.term)

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

@@ -1,7 +1,8 @@
 <template lang="html">
   <div :id="id">
-    <router-view name="home" :html="home_template_src"></router-view>
+    <!-- <router-view name="home" :html="home_template_src"></router-view> -->
-    <router-view name="base"></router-view>
+    <!-- <router-view name="base"></router-view> -->
+    <router-view :html="home_template_src"/>
   </div>
 </template>
 

web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue

@@ -13,7 +13,8 @@ export default {
     return {
       template: null,
       typed: null,
-      autocomplete: null
+      autocomplete: null,
+      // basePath: drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix
     }
   },
   computed: {
@@ -24,9 +25,13 @@ export default {
   },
   methods: {
     submit() {
-      console.log("search clicked", this.keys, this.autocomplete);
+      console.log("search clicked", this.typed, this.autocomplete);
       // New search is triggered by Base.vue with router (which will also fill the store)
       this.$router.push({name:'base', query:{keys:this.typed,term:this.autocomplete}})
+      // this.$router.push({
+      //   path:`${this.basePath}/base`,
+      //   query:{keys:this.typed,term:this.autocomplete}
+      // })
     },
     onAutoCompleteSelect(event, ui){
       event.preventDefault();

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

@@ -8,22 +8,33 @@ Vue.use(VueRouter)
 
 // https://www.lullabot.com/articles/decoupled-hard-problems-routing
 
-export default new VueRouter({
+// We could use aliases to never reload the page on language changement
-  mode: 'history',
+// BUT beforeupdate is not triggered when push alias instead of path or name
-  routes: [
+const languages = ['en', 'fr'];
+console.log('path aliases', (() => languages.map(l => `/${l}/base`))() );
+
+let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
+
+const routes = [
   {
-      path: '/',
     name: 'home',
-      components: {
+    path: basePath,
-        'home': Home
+    // path: '/',
-      }
+    // alias: (() => languages.map(l => `/${l}`))(),
+    component: Home
+    // components: {
+    //   'home': Home
+    // }
   },
   {
-      path: '/base',
     name:'base',
-      components: {
+    path: `${basePath}base`,
-        'base': Base
+    // path: `/base`,
-      }
+    // alias: (() => languages.map(l => `/${l}/base`))(),
+    component: Base,
+    // components: {
+    //   'base': Base
+    // }
   },
   // {
   //   path: '*',
@@ -33,4 +44,8 @@ export default new VueRouter({
   //   }
   // }
 ]
+
+export default new VueRouter({
+  mode: 'history',
+  routes: routes
 })