fixed webpack prod, fixed language prefix negociation in vue-router
This commit is contained in:
parent
082e011fbb
commit
f0120ba10b
|
@ -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: {
|
||||
cacheGroups: {
|
||||
commons: {
|
||||
test: /[\\/]node_modules[\\/]/,
|
||||
name: "vendor",
|
||||
chunks: "all",
|
||||
},
|
||||
},
|
||||
},
|
||||
minimizer: [
|
||||
new UglifyJSPlugin({
|
||||
uglifyOptions: {
|
||||
// Eliminate comments
|
||||
comments: false,
|
||||
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',
|
||||
|
|
File diff suppressed because it is too large
Load Diff
23
package.json
23
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",
|
||||
"vuex": "^3.1.0"
|
||||
"vue-router": "^3.0.6",
|
||||
"vuex": "^3.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.4.0",
|
||||
"@babel/preset-env": "^7.4.2",
|
||||
"@babel/core": "^7.4.5",
|
||||
"@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-loader": "^8.0.5",
|
||||
"copy-webpack-plugin": "^5.0.2",
|
||||
"babel-jest": "^24.8.0",
|
||||
"babel-loader": "^8.0.6",
|
||||
"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-cli": "^3.3.0",
|
||||
"webpack": "^4.33.0",
|
||||
"webpack-cli": "^3.3.2",
|
||||
"webpack-merge": "^4.2.1"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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; }
|
||||
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -43,9 +43,11 @@ import 'theme/assets/styles/main.scss'
|
|||
router,
|
||||
el: '#block-sitebranding',
|
||||
methods: {
|
||||
onclick(){
|
||||
console.log("Clicked on logo");
|
||||
this.$router.push({name:'home'})
|
||||
onclick(event){
|
||||
// console.log("Clicked on logo event", event);
|
||||
let href = event.target.getAttribute('href');
|
||||
// console.log("Clicked on logo href", href);
|
||||
this.$router.push(href)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
<template lang="html">
|
||||
<div :id="id">
|
||||
<router-view name="home" :html="home_template_src"></router-view>
|
||||
<router-view name="base"></router-view>
|
||||
<!-- <router-view name="home" :html="home_template_src"></router-view> -->
|
||||
<!-- <router-view name="base"></router-view> -->
|
||||
<router-view :html="home_template_src"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -8,22 +8,33 @@ Vue.use(VueRouter)
|
|||
|
||||
// https://www.lullabot.com/articles/decoupled-hard-problems-routing
|
||||
|
||||
export default new VueRouter({
|
||||
mode: 'history',
|
||||
routes: [
|
||||
// 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`))() );
|
||||
|
||||
let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
components: {
|
||||
'home': Home
|
||||
}
|
||||
path: basePath,
|
||||
// path: '/',
|
||||
// alias: (() => languages.map(l => `/${l}`))(),
|
||||
component: Home
|
||||
// components: {
|
||||
// 'home': Home
|
||||
// }
|
||||
},
|
||||
{
|
||||
path: '/base',
|
||||
name:'base',
|
||||
components: {
|
||||
'base': Base
|
||||
}
|
||||
path: `${basePath}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
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue