Migrate some part of site to Vue 3
This commit is contained in:
Mikołaj Pich
parent
c18f6f8d6b
commit
08fa98eceb
13 changed files with 6553 additions and 14435 deletions
|
|
@ -1,5 +1,5 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@vue/app',
|
||||
'@vue/cli-plugin-babel/preset',
|
||||
],
|
||||
};
|
||||
|
|
|
|||
20764
package-lock.json
generated
20764
package-lock.json
generated
File diff suppressed because it is too large
Load diff
26
package.json
26
package.json
|
|
@ -10,36 +10,36 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@mdi/font": "^6.6.96",
|
||||
"@vue/compat": "^3.2.33",
|
||||
"babel-runtime": "^6.26.0",
|
||||
"github-markdown-css": "^5.1.0",
|
||||
"moment": "^2.29.2",
|
||||
"prerender-spa-plugin": "^3.4.0",
|
||||
"sass": "^1.50.0",
|
||||
"vue": "^2.6.14",
|
||||
"vue": "^3.2.33",
|
||||
"vue-analytics": "^5.22.1",
|
||||
"vue-markdown": "^2.2.4",
|
||||
"vue-material-design-icons": "^4.13.0",
|
||||
"vue-mq": "^1.0.1",
|
||||
"vue-material-design-icons": "^5.0.0",
|
||||
"vue-resource": "^1.5.3",
|
||||
"vue-router": "^3.5.3"
|
||||
"vue-router": "^4.0.14",
|
||||
"vue3-mq": "^3.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/eslint-parser": "^7.17.0",
|
||||
"@vue/cli-plugin-babel": "^4.5.15",
|
||||
"@vue/cli-plugin-babel": "~5.0.4",
|
||||
"@vue/cli-plugin-eslint": "^5.0.4",
|
||||
"@vue/cli-service": "^4.5.15",
|
||||
"@vue/eslint-config-airbnb": "^5.3.0",
|
||||
"cache-loader": "^4.1.0",
|
||||
"@vue/cli-service": "~5.0.4",
|
||||
"@vue/eslint-config-airbnb": "^6.0.0",
|
||||
"core-js": "^3.22.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint": "^8.13.0",
|
||||
"eslint-plugin-import": "^2.26.0",
|
||||
"eslint-plugin-vue": "^8.6.0",
|
||||
"html-webpack-plugin": "^4.5.2",
|
||||
"lint-staged": "^11.2.6",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"lint-staged": "^12.3.8",
|
||||
"raw-loader": "^4.0.2",
|
||||
"sass-loader": "^10.2.0",
|
||||
"sass-loader": "^12.6.0",
|
||||
"vue-cli-plugin-sitemap": "^2.3.0",
|
||||
"vue-template-compiler": "^2.6.14",
|
||||
"webpack": "^4.46.0"
|
||||
"webpack": "^5.72.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,30 +2,36 @@
|
|||
<div id="contact" class="contact home-section">
|
||||
<h2 class="contact__title">Kontakt</h2>
|
||||
<form class="contact__form" action="https://formspree.io/xdonynaz" method="POST">
|
||||
<label for="contact__form-email" class="contact__form-label">Twój adres email:</label>
|
||||
<input
|
||||
type="email"
|
||||
id="contact__form-email"
|
||||
class="contact__form-email"
|
||||
name="_replyto"
|
||||
required
|
||||
>
|
||||
<label for="contact__form-subject" class="contact__form-label">Temat:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="contact__form-subject"
|
||||
class="contact__form-subject"
|
||||
name="_subject"
|
||||
required
|
||||
>
|
||||
<label for="contact__form-message" class="contact__form-label">Wiadomość:</label>
|
||||
<textarea
|
||||
name="message"
|
||||
id="contact__form-message"
|
||||
class="contact__form-message"
|
||||
rows="5"
|
||||
required
|
||||
></textarea>
|
||||
<label for="contact-form-email" class="contact__form-label">
|
||||
Twój adres email:
|
||||
<input
|
||||
type="email"
|
||||
id="contact-form-email"
|
||||
class="contact__form-email"
|
||||
name="_replyto"
|
||||
required
|
||||
>
|
||||
</label>
|
||||
<label for="contact__form-subject" class="contact__form-label">
|
||||
Temat:
|
||||
<input
|
||||
type="text"
|
||||
id="contact__form-subject"
|
||||
class="contact__form-subject"
|
||||
name="_subject"
|
||||
required
|
||||
>
|
||||
</label>
|
||||
<label for="contact__form-message" class="contact__form-label">
|
||||
Wiadomość:
|
||||
<textarea
|
||||
name="message"
|
||||
id="contact__form-message"
|
||||
class="contact__form-message"
|
||||
rows="5"
|
||||
required
|
||||
></textarea>
|
||||
</label>
|
||||
<input type="submit" class="contact__form-submit" value="Wyślij">
|
||||
</form>
|
||||
<div class="contact__direct">
|
||||
|
|
|
|||
|
|
@ -14,14 +14,14 @@
|
|||
:href="github"
|
||||
title="GitHub"
|
||||
@click="githubClick">
|
||||
<span class="mdi mdi-github-circle"></span>
|
||||
<span class="mdi mdi-github-circle">Pobierz</span>
|
||||
</a>
|
||||
<a
|
||||
class="download-button"
|
||||
:href="download"
|
||||
title="Pobierz"
|
||||
@click="downloadClick">
|
||||
<span class="mdi mdi-download"></span>
|
||||
<span class="mdi mdi-download">Pobierz</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,14 +22,14 @@
|
|||
:href="github"
|
||||
title="GitHub"
|
||||
@click="githubClick">
|
||||
<span class="mdi mdi-github-circle"></span>
|
||||
<span class="mdi mdi-github-circle">Pobierz</span>
|
||||
</a>
|
||||
<a
|
||||
class="download-button"
|
||||
:href="download"
|
||||
title="Pobierz"
|
||||
@click="downloadClick">
|
||||
<span class="mdi mdi-download"></span>
|
||||
<span class="mdi mdi-download">Pobierz</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
:href="download"
|
||||
title="Pobierz"
|
||||
@click="downloadClick">
|
||||
<span class="mdi mdi-download"></span>
|
||||
<span class="mdi mdi-download">Pobierz</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div class="download-version-switcher">
|
||||
<span
|
||||
<button
|
||||
class="section-name section-name-beta"
|
||||
:class="{ active: active === 'beta' }"
|
||||
@click="active = 'beta'">STABILNA</span>
|
||||
<span
|
||||
@click="active = 'beta'">STABILNA</button>
|
||||
<button
|
||||
class="section-name section-name-dev"
|
||||
:class="{ active: active === 'dev' }"
|
||||
@click="active = 'dev'">DEV</span>
|
||||
@click="active = 'dev'">DEV</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -41,11 +41,12 @@
|
|||
:class="wulkanowy ? 'features-table__cell--wulkanowy' : ''"
|
||||
title="Nie dotyczy"
|
||||
>
|
||||
<minus-icon
|
||||
title="Nie dotyczy"
|
||||
:size="wulkanowy ? 36 : 28"
|
||||
fillColor="#000000"
|
||||
/>
|
||||
<minus-icon
|
||||
title="Nie dotyczy"
|
||||
:size="wulkanowy ? 36 : 28"
|
||||
fillColor="#000000"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
v-else
|
||||
class="features-table__cell features-table__cell--feature features-table__cell--other"
|
||||
|
|
|
|||
54
src/main.js
54
src/main.js
|
|
@ -1,33 +1,31 @@
|
|||
import Vue from 'vue';
|
||||
import VueResource from 'vue-resource';
|
||||
import VueMq from 'vue-mq';
|
||||
import VueAnalytics from 'vue-analytics';
|
||||
import { createApp } from 'vue';
|
||||
// import VueResource from 'vue-resource';
|
||||
import { Vue3Mq } from 'vue3-mq';
|
||||
// import VueAnalytics from 'vue-analytics';
|
||||
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
|
||||
Vue.use(VueResource);
|
||||
Vue.use(VueMq, {
|
||||
breakpoints: {
|
||||
md: 875,
|
||||
lg: Infinity,
|
||||
},
|
||||
});
|
||||
Vue.use(VueAnalytics, {
|
||||
id: 'UA-99646499-3',
|
||||
debug: {
|
||||
enabled: window.location.hostname === 'localhost',
|
||||
sendHitTask: window.location.hostname !== 'localhost',
|
||||
},
|
||||
});
|
||||
Vue.$ga.page(window.location.pathname);
|
||||
// Vue.$ga.page(window.location.pathname);
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
render: (h) => h(App),
|
||||
mounted() {
|
||||
document.dispatchEvent(new Event('x-app-rendered'));
|
||||
},
|
||||
}).$mount('#app');
|
||||
createApp(App)
|
||||
.use(router)
|
||||
// .use(VueAnalytics, {
|
||||
// id: 'UA-99646499-3',
|
||||
// debug: {
|
||||
// enabled: window.location.hostname === 'localhost',
|
||||
// sendHitTask: window.location.hostname !== 'localhost',
|
||||
// },
|
||||
// })
|
||||
.use(Vue3Mq, {
|
||||
breakpoints: {
|
||||
xs: 0,
|
||||
md: 875,
|
||||
lg: Infinity,
|
||||
},
|
||||
})
|
||||
// .use(VueResource) // todo
|
||||
// .mounted(() => {
|
||||
// document.dispatchEvent(new Event('x-app-rendered'));
|
||||
// })
|
||||
.mount('#app');
|
||||
|
|
|
|||
|
|
@ -1,15 +1,12 @@
|
|||
import Vue from 'vue';
|
||||
import Router from 'vue-router';
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import routes from './routes';
|
||||
|
||||
Vue.use(Router);
|
||||
|
||||
export default new Router({
|
||||
mode: 'history',
|
||||
export default createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
if (to.hash) return { selector: to.hash };
|
||||
if (savedPosition) return savedPosition;
|
||||
return null;
|
||||
},
|
||||
routes,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -32,8 +32,8 @@ module.exports = [{
|
|||
// path: '*.html',
|
||||
// redirect: (to) => to.params.pathMatch,
|
||||
// },
|
||||
{
|
||||
path: '*',
|
||||
redirect: '/',
|
||||
},
|
||||
// {
|
||||
// path: '*',
|
||||
// redirect: '/',
|
||||
// },
|
||||
];
|
||||
|
|
|
|||
|
|
@ -18,31 +18,31 @@ module.exports = {
|
|||
},
|
||||
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',
|
||||
}),
|
||||
}),
|
||||
// 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')
|
||||
.test(/\.md$/)
|
||||
.use('raw-loader')
|
||||
.loader('raw-loader')
|
||||
.test(/\.md$/)
|
||||
.use('raw-loader')
|
||||
.loader('raw-loader')
|
||||
.end();
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue