Add Custom vue tags

This commit is contained in:
Patrick Neff 2019-05-02 05:51:46 +02:00
parent 349a400368
commit 508ef6d534
13 changed files with 451 additions and 165 deletions

1
.gitignore vendored
View File

@ -1,3 +1,4 @@
.vscode/*
resources/_gen/*
public/*
hokus.toml

View File

@ -0,0 +1,8 @@
+++
title = "Katalog"
date = "2019-01-10T04:14:10+01:00"
draft = false
type = "catalog"
keywords = []
+++

View File

@ -0,0 +1,2 @@
[[entry]]
name = "Hallo"

View File

@ -0,0 +1,20 @@
{{- define "title" -}}
{{ .Title }} • {{ .Site.Title }}
{{- end -}}
{{ define "main" }}
<main id="list">
{{- with .Content -}}
<div class="content flex column">
<div class="padding">
{{ . }}
</div>
</div>
{{- end -}}
<ul class="list-unstyled flex column">
{{- range .Pages -}}
{{- .Render "li" -}}
{{- end -}}
</ul>
<my-catalog-similar hello="test"></my-catalog-similar>
{{ end }}

View File

@ -797,6 +797,101 @@
"integrity": "sha512-eqz8c/0kwNi/OEHQfvIuJVLTst3in0e7uTKeuY+WL/zfKn0xVujOTp42bS/vUUokhK5P2BppLd9JXMOMHcgbjA==",
"dev": true
},
"@vue/component-compiler-utils": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-2.6.0.tgz",
"integrity": "sha512-IHjxt7LsOFYc0DkTncB7OXJL7UzwOLPPQCfEUNyxL2qt+tF12THV+EO33O1G2Uk4feMSWua3iD39Itszx0f0bw==",
"dev": true,
"requires": {
"consolidate": "^0.15.1",
"hash-sum": "^1.0.2",
"lru-cache": "^4.1.2",
"merge-source-map": "^1.1.0",
"postcss": "^7.0.14",
"postcss-selector-parser": "^5.0.0",
"prettier": "1.16.3",
"source-map": "~0.6.1",
"vue-template-es2015-compiler": "^1.9.0"
},
"dependencies": {
"chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"dev": true,
"requires": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
},
"dependencies": {
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
"lru-cache": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
"integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
"dev": true,
"requires": {
"pseudomap": "^1.0.2",
"yallist": "^2.1.2"
}
},
"postcss": {
"version": "7.0.14",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.14.tgz",
"integrity": "sha512-NsbD6XUUMZvBxtQAJuWDJeeC4QFsmWsfozWxCJPWf3M55K9iu2iMDaKqyoOdTJ1R4usBXuxlVFAIo8rZPQD4Bg==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
"source-map": "^0.6.1",
"supports-color": "^6.1.0"
}
},
"prettier": {
"version": "1.16.3",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-1.16.3.tgz",
"integrity": "sha512-kn/GU6SMRYPxUakNXhpP0EedT/KmaPzr0H5lIsDogrykbaxOpOfAFfk5XA7DZrJyMAv1wlMV3CPcZruGXVVUZw==",
"dev": true
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
},
"supports-color": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
"integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
},
"yallist": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
"dev": true
}
}
},
"@vue/web-component-wrapper": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.2.0.tgz",
"integrity": "sha512-Xn/+vdm9CjuC9p3Ae+lTClNutrVhsXpzxvoTXXtoys6kVRX9FkueSUAqSWAyZntmVLlR4DosBV4pH8y5Z/HbUw==",
"dev": true
},
"@webassemblyjs/ast": {
"version": "1.7.11",
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.11.tgz",
@ -2373,6 +2468,15 @@
"integrity": "sha1-oJX+B7IEZZVfL6/Si11yvM2UnUQ=",
"dev": true
},
"consolidate": {
"version": "0.15.1",
"resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.15.1.tgz",
"integrity": "sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==",
"dev": true,
"requires": {
"bluebird": "^3.1.1"
}
},
"constants-browserify": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@ -2866,6 +2970,12 @@
"integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=",
"dev": true
},
"de-indent": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
"integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=",
"dev": true
},
"debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@ -4806,6 +4916,12 @@
"safe-buffer": "^5.0.1"
}
},
"hash-sum": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
"integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
"dev": true
},
"hash.js": {
"version": "1.1.7",
"resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
@ -4816,6 +4932,12 @@
"minimalistic-assert": "^1.0.1"
}
},
"he": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
"dev": true
},
"hex-color-regex": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
@ -6032,6 +6154,23 @@
}
}
},
"merge-source-map": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/merge-source-map/-/merge-source-map-1.1.0.tgz",
"integrity": "sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==",
"dev": true,
"requires": {
"source-map": "^0.6.1"
},
"dependencies": {
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true
}
}
},
"microbuffer": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/microbuffer/-/microbuffer-1.0.0.tgz",
@ -7773,6 +7912,12 @@
"integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
"dev": true
},
"prettier": {
"version": "1.17.0",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-1.17.0.tgz",
"integrity": "sha512-sXe5lSt2WQlCbydGETgfm1YBShgOX4HxQkFPvbxkcwgDvGDeqVau8h+12+lmSVlP3rHPz0oavfddSZg/q+Szjw==",
"dev": true
},
"private": {
"version": "0.1.8",
"resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@ -10024,6 +10169,56 @@
"indexof": "0.0.1"
}
},
"vue": {
"version": "2.6.10",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
"integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
},
"vue-hot-reload-api": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz",
"integrity": "sha512-KmvZVtmM26BQOMK1rwUZsrqxEGeKiYSZGA7SNWE6uExx8UX/cj9hq2MRV/wWC3Cq6AoeDGk57rL9YMFRel/q+g==",
"dev": true
},
"vue-loader": {
"version": "15.7.0",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.7.0.tgz",
"integrity": "sha512-x+NZ4RIthQOxcFclEcs8sXGEWqnZHodL2J9Vq+hUz+TDZzBaDIh1j3d9M2IUlTjtrHTZy4uMuRdTi8BGws7jLA==",
"dev": true,
"requires": {
"@vue/component-compiler-utils": "^2.5.1",
"hash-sum": "^1.0.2",
"loader-utils": "^1.1.0",
"vue-hot-reload-api": "^2.3.0",
"vue-style-loader": "^4.1.0"
}
},
"vue-style-loader": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
"integrity": "sha512-0ip8ge6Gzz/Bk0iHovU9XAUQaFt/G2B61bnWa2tCcqqdgfHs1lF9xXorFbE55Gmy92okFT+8bfmySuUOu13vxQ==",
"dev": true,
"requires": {
"hash-sum": "^1.0.2",
"loader-utils": "^1.0.2"
}
},
"vue-template-compiler": {
"version": "2.6.10",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz",
"integrity": "sha512-jVZkw4/I/HT5ZMvRnhv78okGusqe0+qH2A0Em0Cp8aq78+NK9TII263CDVz2QXZsIT+yyV/gZc/j/vlwa+Epyg==",
"dev": true,
"requires": {
"de-indent": "^1.0.2",
"he": "^1.1.0"
}
},
"vue-template-es2015-compiler": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
"watchpack": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

View File

@ -11,12 +11,14 @@
"license": "MIT",
"dependencies": {
"@babel/polyfill": "^7.2.5",
"@fortawesome/fontawesome-free": "^5.6.3"
"@fortawesome/fontawesome-free": "^5.6.3",
"vue": "^2.6.10"
},
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3",
"@vue/web-component-wrapper": "^1.2.0",
"autoprefixer": "^9.4.3",
"babel-loader": "^8.0.4",
"clean-webpack-plugin": "^1.0.0",
@ -31,10 +33,13 @@
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.5.0",
"prettier": "^1.17.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^2.1.1",
"url-loader": "^1.1.2",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2"
}

View File

@ -0,0 +1,9 @@
import Vue from "vue"
import CatalogSimilar from "../vue/CatalogSimilar.vue"
import wrap from '@vue/web-component-wrapper'
const myCatalogSimilar = wrap(Vue, CatalogSimilar)
window.customElements.define('my-catalog-similar', myCatalogSimilar)

View File

@ -1,3 +1,5 @@
import './cookies';
import './lightbox';
import './scrollspy';
import "./cookies"
import "./lightbox"
import "./scrollspy"
import "./catalogSimilar"

View File

@ -40,7 +40,6 @@ window.addEventListener('scroll', (e) => {
menuLinks.forEach((el) => {
el.addEventListener('click', () => {
console.log('hello');
checkbox.checked = false;
})
})

View File

@ -0,0 +1,15 @@
<template>
<div>{{ msg }}{{ hello }}</div>
</template>
<script>
export default {
name: 'catalog-similar',
props: ['hello'],
data() {
return {
msg: 'Hello World'
}
}
}
</script>

View File

@ -0,0 +1,11 @@
<template>
<div>
Hello World
</div>
</template>
<script>
export default {
name: 'app'
};
</script>

View File

@ -0,0 +1,5 @@
import Hello from './Hello.vue'
export default {
hello: Hello
}

View File

@ -1,21 +1,23 @@
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CleanWebpackPlugin = require("clean-webpack-plugin")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
const VueLoaderPlugin = require("vue-loader/lib/plugin")
const path = require("path")
module.exports = {
entry: {
bundle: ['./src/js/main.js'],
images: ['./src/js/images.js'],
style: ['./src/scss/main.scss'],
bundle: ["./src/js/main.js"],
images: ["./src/js/images.js"],
style: ["./src/scss/main.scss"]
},
mode: 'production',
devtool: 'source-map',
mode: "development",
devtool: "source-map",
context: __dirname,
devtool: "source-map",
output: {
filename: 'js/[name].js',
path: __dirname + '/assets',
filename: "js/[name].js",
path: __dirname + "/assets"
},
module: {
rules: [
@ -24,7 +26,7 @@ module.exports = {
exclude: /node_modules/,
use: [
{
loader: 'babel-loader'
loader: "babel-loader"
}
]
},
@ -34,7 +36,7 @@ module.exports = {
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../',
publicPath: "../",
sourceMap: true
}
},
@ -55,18 +57,23 @@ module.exports = {
options: {
sourceMap: true
}
},
}
]
},
{
test: /\.vue$/,
loader: "vue-loader",
options: {}
},
{
test: /\.woff2?(\?v=\d+\.\d+\.\d+)?$/,
loader: "url-loader",
options: {
limit: 1000,
mimetype: 'application/font-woff',
name: '[name].[ext]',
outputPath: '../static/fonts',
publicPath: '../fonts'
mimetype: "application/font-woff",
name: "[name].[ext]",
outputPath: "../static/fonts",
publicPath: "../fonts"
}
},
{
@ -74,19 +81,19 @@ module.exports = {
loader: "url-loader",
options: {
limit: 1000,
mimetype: 'application/octet-stream',
name: '[name].[ext]',
outputPath: '../static/fonts',
publicPath: '../fonts'
mimetype: "application/octet-stream",
name: "[name].[ext]",
outputPath: "../static/fonts",
publicPath: "../fonts"
}
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader",
options: {
name: '[name].[ext]',
outputPath: '../static/fonts',
publicPath: '../fonts'
name: "[name].[ext]",
outputPath: "../static/fonts",
publicPath: "../fonts"
}
},
{
@ -94,24 +101,24 @@ module.exports = {
loader: "url-loader",
options: {
limit: 1000,
mimetype: 'image/svg+xml',
name: '[name].[ext]',
outputPath: '../static/fonts',
publicPath: '../fonts'
mimetype: "image/svg+xml",
name: "[name].[ext]",
outputPath: "../static/fonts",
publicPath: "../fonts"
}
},
{
test: /\/src\/img\/.*\.(ico|svg|ico|gif|jpe?g|png)$/,
use: [
{
loader: 'file-loader',
loader: "file-loader",
options: {
name: '../static/img/[2].[ext]',
regExp: /(src\/img)+\/(.*).(gif|svg|ico|gif|jpe?g|png)$/,
name: "../static/img/[2].[ext]",
regExp: /(src\/img)+\/(.*).(gif|svg|ico|gif|jpe?g|png)$/
}
},
{
loader: 'image-webpack-loader',
loader: "image-webpack-loader",
options: {
mozjpeg: {
progressive: true,
@ -119,29 +126,36 @@ module.exports = {
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
enabled: false
},
pngquant: {
quality: '65-90',
quality: "65-90",
speed: 4
},
gifsicle: {
interlaced: false,
},
interlaced: false
}
}
}
]
},
}
]
},
plugins: [
new CleanWebpackPlugin(['assets/css/*', 'assets/js/*', 'static/fonts/*', 'static/img/*']),
new CleanWebpackPlugin([
"assets/css/*",
"assets/js/*",
"static/fonts/*",
"static/img/*"
]),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "css/[name].css",
chunkFilename: "css/[id].css",
})
chunkFilename: "css/[id].css"
}),
// make sure to include the plugin!
new VueLoaderPlugin()
],
optimization: {
usedExports: true,
@ -161,4 +175,4 @@ module.exports = {
})
]
}
};
}