Convert to vue cli (#42)
This commit is contained in:
Dominik Korsa
GitHub
parent
fcd5feb7dd
commit
7838fb4e47
15 changed files with 625 additions and 1793 deletions
|
|
@ -7,6 +7,11 @@ module.exports = {
|
|||
'plugin:vue/essential',
|
||||
'@vue/airbnb',
|
||||
],
|
||||
settings: {
|
||||
'import/resolver': {
|
||||
node: {},
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||
|
|
|
|||
2088
package-lock.json
generated
2088
package-lock.json
generated
File diff suppressed because it is too large
Load diff
22
package.json
22
package.json
|
|
@ -3,8 +3,8 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
|
||||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint",
|
||||
"sitemap": "vue-cli-service sitemap"
|
||||
},
|
||||
|
|
@ -12,14 +12,13 @@
|
|||
"@mdi/font": "^4.7.95",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"github-markdown-css": "^3.0.1",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"html-webpack-plugin": "^4.2.0",
|
||||
"moment": "^2.24.0",
|
||||
"path": "^0.12.7",
|
||||
"prerender-spa-plugin": "^3.4.0",
|
||||
"sass": "^1.24.0",
|
||||
"vue": "^2.6.11",
|
||||
"vue-analytics": "^5.20.2",
|
||||
"vue-async-computed": "^3.8.2",
|
||||
"vue-loader": "^15.8.3",
|
||||
"vue-markdown": "^2.2.4",
|
||||
"vue-material-design-icons": "^4.4.0",
|
||||
"vue-mq": "^1.0.1",
|
||||
|
|
@ -33,22 +32,13 @@
|
|||
"@vue/eslint-config-airbnb": "^5.0.0",
|
||||
"babel-eslint": "^10.0.3",
|
||||
"core-js": "^3.6.1",
|
||||
"cross-env": "^6.0.3",
|
||||
"eslint": "^6.8.0",
|
||||
"eslint-plugin-vue": "^6.1.2",
|
||||
"html-loader": "^0.5.5",
|
||||
"lint-staged": "^9.5.0",
|
||||
"markdown-loader": "^5.1.0",
|
||||
"node-sass": "^4.13.0",
|
||||
"prerender-spa-plugin": "^3.4.0",
|
||||
"raw-loader": "^4.0.0",
|
||||
"sass-loader": "^8.0.0",
|
||||
"style-loader": "^1.1.2",
|
||||
"vue-cli-plugin-sitemap": "^1.0.4",
|
||||
"vue-style-loader": "^4.1.2",
|
||||
"vue-template-compiler": "^2.6.11",
|
||||
"webpack": "latest",
|
||||
"webpack-cli": "^3.3.10"
|
||||
"vue-cli-plugin-sitemap": "^2.1.1",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"gitHooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script>
|
||||
// ====================================================================================================================
|
||||
// This text is simply to make sure the 404.html file is bigger than 512 bytes, else, internet explorer will ignore it.
|
||||
// Thank you internet explorer for requiring such awesome workarounds in order to work properly
|
||||
// ====================================================================================================================
|
||||
sessionStorage.redirect = location.pathname;
|
||||
</script>
|
||||
<meta http-equiv="refresh" content="0;URL='/'">
|
||||
</head>
|
||||
</html>
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Przekierowywanie...</title>
|
||||
<script>
|
||||
// ====================================================================================================================
|
||||
// This text is simply to make sure the 404.html file is bigger than 512 bytes, else, internet explorer will ignore it.
|
||||
// This text is simply to make sure the file is bigger than 512 bytes, else, internet explorer will ignore it.
|
||||
// Thank you internet explorer for requiring such awesome workarounds in order to work properly
|
||||
// ====================================================================================================================
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -118,9 +118,9 @@
|
|||
text-decoration: none;
|
||||
color: #000;
|
||||
box-shadow:
|
||||
0px 5px 5px -3px rgba(0, 0, 0, 0.2),
|
||||
0px 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||
0px 3px 14px 2px rgba(0, 0, 0, 0.12);
|
||||
0 5px 5px -3px rgba(0, 0, 0, 0.2),
|
||||
0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||
0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
||||
transition: box-shadow 150ms;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
flex-direction: row;
|
||||
|
|
@ -192,7 +192,6 @@
|
|||
|
||||
&__form-email, &__form-message, &__form-subject {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
border: 1px solid #fff;
|
||||
|
|
|
|||
|
|
@ -101,8 +101,8 @@
|
|||
border-radius: 4px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
|
||||
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
|
||||
0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 16px;
|
||||
|
|
|
|||
|
|
@ -85,9 +85,9 @@
|
|||
background-color: #ffffffcc;
|
||||
border-radius: 3px;
|
||||
box-shadow:
|
||||
0px 2px 4px -1px rgba(0, 0, 0, 0.2),
|
||||
0px 4px 5px 0px rgba(0, 0, 0, 0.14),
|
||||
0px 1px 10px 0px rgba(0, 0, 0, 0.12);
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.2),
|
||||
0 4px 5px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
&__cell {
|
||||
|
|
|
|||
|
|
@ -115,7 +115,10 @@
|
|||
width: 768px;
|
||||
max-width: 90vw;
|
||||
display: block;
|
||||
filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.2)) drop-shadow(0px 8px 10px rgba(0, 0, 0, 0.14)) drop-shadow(0px 3px 14px rgba(0, 0, 0, 0.12));
|
||||
filter:
|
||||
drop-shadow(0 5px 5px rgba(0, 0, 0, 0.2))
|
||||
drop-shadow(0 8px 10px rgba(0, 0, 0, 0.14))
|
||||
drop-shadow(0 3px 14px rgba(0, 0, 0, 0.12));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,14 +29,7 @@ Vue.config.productionTip = false;
|
|||
new Vue({
|
||||
router,
|
||||
render: (h) => h(App),
|
||||
created() {
|
||||
if (sessionStorage.redirect) {
|
||||
const { redirect } = sessionStorage;
|
||||
delete sessionStorage.redirect;
|
||||
router.push(redirect);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.dispatchEvent(new Event('render-event'));
|
||||
document.dispatchEvent(new Event('x-app-rendered'));
|
||||
},
|
||||
}).$mount('#app');
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
const faqMap = require('./assets/faq-map.json');
|
||||
|
||||
const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue');
|
||||
const PrivacyPolicy = () => import(/* webpackChunkName: "privacy-policy" */ './views/PrivacyPolicy.vue');
|
||||
const FAQ = () => import(/* webpackChunkName: "faq" */ './views/FAQ.vue');
|
||||
|
|
@ -21,6 +23,11 @@ module.exports = [
|
|||
{
|
||||
path: '/czesto-zadawane-pytania/:question_id',
|
||||
component: FAQ,
|
||||
meta: {
|
||||
sitemap: {
|
||||
slugs: faqMap.map((item) => item.id),
|
||||
},
|
||||
},
|
||||
},
|
||||
// {
|
||||
// path: '*.html',
|
||||
|
|
|
|||
|
|
@ -1,10 +1,21 @@
|
|||
<template>
|
||||
<div class="faq">
|
||||
<div class="header">
|
||||
<router-link to="/czesto-zadawane-pytania" v-if="window.width <= 850 && faqCurrent" class="header__back">←</router-link>
|
||||
<router-link
|
||||
to="/czesto-zadawane-pytania"
|
||||
v-if="faqCurrent"
|
||||
class="header__back mobile-only"
|
||||
>
|
||||
←
|
||||
</router-link>
|
||||
<router-link to="/" class="header__wulkanowy"><img src="../assets/wulkanowy-small-flat.svg" alt="" /></router-link>
|
||||
</div>
|
||||
<div class="questions" v-if="window.width > 850 || !faqCurrent">
|
||||
<div
|
||||
class="questions"
|
||||
:class="{
|
||||
'desktop-only': faqCurrent,
|
||||
}"
|
||||
>
|
||||
<router-link
|
||||
class="questions__link"
|
||||
v-for="question in faqMap"
|
||||
|
|
@ -14,7 +25,7 @@
|
|||
{{ question.name }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="answer answer--no-question-selected" v-if="!faqCurrent && window.width > 850">
|
||||
<div class="answer answer--no-question-selected desktop-only" v-if="!faqCurrent">
|
||||
<h1>Żadne pytanie nie jest wybrane</h1>
|
||||
</div>
|
||||
<div class="answer answer--question-selected" v-if="faqCurrent">
|
||||
|
|
@ -40,26 +51,11 @@
|
|||
faqMap,
|
||||
faqAnswers: {},
|
||||
faqCurrent: null,
|
||||
window: {
|
||||
width: 0,
|
||||
height: 0,
|
||||
},
|
||||
}),
|
||||
created() {
|
||||
window.addEventListener('resize', this.handleWindowResize);
|
||||
this.handleWindowResize();
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('resize', this.handleWindowResize);
|
||||
},
|
||||
methods: {
|
||||
importFaqAnswers(r) {
|
||||
r.keys().forEach((key) => { this.faqAnswers[key] = r(key); });
|
||||
},
|
||||
handleWindowResize() {
|
||||
this.window.width = window.innerWidth;
|
||||
this.window.height = window.innerHeight;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.importFaqAnswers(require.context('../assets/faq-answers', true, /\.md$/));
|
||||
|
|
@ -88,16 +84,20 @@
|
|||
<style lang="scss">
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
|
||||
|
||||
@media screen and (max-width: 850px) {
|
||||
.desktop-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 851px) {
|
||||
.mobile-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background:
|
||||
linear-gradient(
|
||||
rgba(0, 0, 0, 0.6),
|
||||
rgba(0, 0, 0, 0.6)
|
||||
),
|
||||
url("../assets/wallpaper.jpg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.faq {
|
||||
|
|
@ -105,6 +105,15 @@
|
|||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: 1fr auto minmax(auto, 850px) 1fr;
|
||||
background:
|
||||
linear-gradient(
|
||||
rgba(0, 0, 0, 0.6),
|
||||
rgba(0, 0, 0, 0.6)
|
||||
),
|
||||
url("../assets/wallpaper.jpg");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
|
||||
@media screen and (max-width: 850px) {
|
||||
grid-template-columns: 1fr;
|
||||
|
|
@ -112,10 +121,6 @@
|
|||
.header {
|
||||
grid-column: 1;
|
||||
margin: 4px;
|
||||
|
||||
&__back {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.questions {
|
||||
|
|
@ -163,6 +168,7 @@
|
|||
width: 32px;
|
||||
padding: 8px;
|
||||
margin: 8px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&__wulkanowy {
|
||||
|
|
@ -189,9 +195,9 @@
|
|||
min-width: 320px;
|
||||
max-width: 480px;
|
||||
box-shadow:
|
||||
0px 2px 4px -1px rgba(0, 0, 0, 0.2),
|
||||
0px 4px 5px 0px rgba(0, 0, 0, 0.14),
|
||||
0px 1px 10px 0px rgba(0, 0, 0, 0.12);
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.2),
|
||||
0 4px 5px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.questions__link {
|
||||
|
|
@ -229,8 +235,8 @@
|
|||
overflow-y: auto;
|
||||
box-shadow:
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.2),
|
||||
0px 4px 5px 0px rgba(0, 0, 0, 0.14),
|
||||
0px 1px 10px 0px rgba(0, 0, 0, 0.12);
|
||||
0 4px 5px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
font-family: 'Roboto', sans-serif;
|
||||
|
||||
&--question-selected {
|
||||
|
|
@ -254,8 +260,8 @@
|
|||
border-radius: 4px;
|
||||
box-shadow:
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.2),
|
||||
0px 4px 5px 0px rgba(0, 0, 0, 0.14),
|
||||
0px 1px 10px 0px rgba(0, 0, 0, 0.12);
|
||||
0 4px 5px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 10px 0 rgba(0, 0, 0, 0.12);
|
||||
margin: 12px auto 32px;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
|
|
@ -275,6 +281,10 @@
|
|||
font-weight: 300;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 850px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -30,11 +30,5 @@
|
|||
|
||||
body {
|
||||
margin: 0;
|
||||
scroll-behavior: smooth;
|
||||
scroll-snap-type: y proximity;
|
||||
}
|
||||
|
||||
.home .home-section {
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
const PrerenderSPAPlugin = require('prerender-spa-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const path = require('path');
|
||||
const routes = require('./src/routes');
|
||||
const faqMap = require('./src/assets/faq-map.json');
|
||||
|
||||
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
|
||||
|
||||
module.exports = {
|
||||
publicPath: '/',
|
||||
|
|
@ -10,6 +16,27 @@ module.exports = {
|
|||
routes,
|
||||
},
|
||||
},
|
||||
configureWebpack: {
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: 'public/index.html',
|
||||
filename: path.resolve(__dirname, 'dist/index.html'),
|
||||
favicon: 'public/favicon.ico',
|
||||
}),
|
||||
new PrerenderSPAPlugin({
|
||||
staticDir: path.join(__dirname, 'dist'),
|
||||
routes: [
|
||||
'/polityka-prywatnosci',
|
||||
'/czesto-zadawane-pytania',
|
||||
...faqMap.map((item) => `/czesto-zadawane-pytania/${item.id}`),
|
||||
],
|
||||
renderer: new Renderer({
|
||||
headless: true,
|
||||
renderAfterDocumentEvent: 'x-app-rendered',
|
||||
}),
|
||||
}),
|
||||
],
|
||||
},
|
||||
chainWebpack: (config) => {
|
||||
config.module
|
||||
.rule('md')
|
||||
|
|
|
|||
|
|
@ -1,130 +0,0 @@
|
|||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const PrerenderSPAPlugin = require('prerender-spa-plugin');
|
||||
|
||||
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
|
||||
const VueLoaderPlugin = require('vue-loader/lib/plugin');
|
||||
|
||||
module.exports = {
|
||||
mode: process.env.NODE_ENV,
|
||||
entry: './src/main.js',
|
||||
output: {
|
||||
path: path.resolve(__dirname, './dist'),
|
||||
publicPath: '/',
|
||||
filename: 'build.js',
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.md$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'raw-loader',
|
||||
},
|
||||
{
|
||||
loader: 'markdown-loader',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel-loader',
|
||||
exclude: /node_modules/,
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|gif|svg|eot|woff|woff2|ttf)$/,
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]?[hash]',
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.s?css$/,
|
||||
use: [
|
||||
'vue-style-loader',
|
||||
'css-loader',
|
||||
'sass-loader',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
vue$: 'vue/dist/vue.esm.js',
|
||||
},
|
||||
},
|
||||
devServer: {
|
||||
historyApiFallback: true,
|
||||
noInfo: false,
|
||||
},
|
||||
devtool: '#eval-source-map',
|
||||
plugins: [
|
||||
new VueLoaderPlugin(),
|
||||
],
|
||||
};
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
module.exports.devtool = '#source-map';
|
||||
module.exports.plugins = (module.exports.plugins || []).concat([
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: '"production"',
|
||||
},
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
title: 'PRODUCTION prerender-spa-plugin',
|
||||
template: 'public/index.html',
|
||||
filename: path.resolve(__dirname, 'dist/index.html'),
|
||||
favicon: 'public/favicon.ico',
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
template: 'public/polityka-prywatnosci.html',
|
||||
filename: path.resolve(__dirname, 'dist/polityka-prywatnosci.html'),
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
template: 'public/404.html',
|
||||
filename: path.resolve(__dirname, 'dist/404.html'),
|
||||
}),
|
||||
new PrerenderSPAPlugin({
|
||||
staticDir: path.join(__dirname, 'dist'),
|
||||
routes: [
|
||||
'/polityka-prywatnosci',
|
||||
'/czesto-zadawane-pytania',
|
||||
'/czesto-zadawane-pytania/czym-jest-wulkanowy',
|
||||
'/czesto-zadawane-pytania/dlaczego-nie-moge-sie-zalogowac',
|
||||
'/czesto-zadawane-pytania/co-jesli-nie-pamietam-hasla',
|
||||
'/czesto-zadawane-pytania/co-to-jest-symbol',
|
||||
'/czesto-zadawane-pytania/jaki-wybrac-dziennik',
|
||||
'/czesto-zadawane-pytania/czym-roznia-sie-wersje-beta-i-dev',
|
||||
],
|
||||
|
||||
renderer: new Renderer({
|
||||
inject: {
|
||||
foo: 'bar',
|
||||
},
|
||||
headless: true,
|
||||
renderAfterDocumentEvent: 'render-event',
|
||||
}),
|
||||
}),
|
||||
]);
|
||||
} else {
|
||||
// NODE_ENV === 'development'
|
||||
module.exports.plugins = (module.exports.plugins || []).concat([
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: '"development"',
|
||||
},
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
title: 'DEVELOPMENT prerender-spa-plugin',
|
||||
template: 'public/index.html',
|
||||
filename: 'index.html',
|
||||
favicon: 'public/favicon.ico',
|
||||
}),
|
||||
]);
|
||||
}
|
||||
Loading…
Reference in a new issue