Add Custom vue tags

.gitignore

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

content/katalog/_index.md

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

data/katalog/urnengrab/katalog.toml

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

themes/neff/layouts/catalog/list.html

@@ -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 }}

themes/neff/package-lock.json

@@ -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",

themes/neff/package.json

@@ -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"
   }

themes/neff/src/js/catalogSimilar.js

@@ -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)

themes/neff/src/js/main.js

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

themes/neff/src/js/scrollspy.js

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

themes/neff/src/vue/CatalogSimilar.vue

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

themes/neff/src/vue/components/Hello.vue

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

themes/neff/src/vue/components/index.js

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

themes/neff/webpack.config.js

@@ -1,21 +1,23 @@
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin")
-const CleanWebpackPlugin = require('clean-webpack-plugin');
+const CleanWebpackPlugin = require("clean-webpack-plugin")
-const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
+const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
-const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
-const path = require('path');
+const VueLoaderPlugin = require("vue-loader/lib/plugin")
+const path = require("path")
 
 module.exports = {
   entry: {
-        bundle: ['./src/js/main.js'],
+    bundle: ["./src/js/main.js"],
-        images: ['./src/js/images.js'],
+    images: ["./src/js/images.js"],
-        style: ['./src/scss/main.scss'],
+    style: ["./src/scss/main.scss"]
   },
-    mode: 'production',
+  mode: "development",
-    devtool: 'source-map',
+  devtool: "source-map",
   context: __dirname,
+  devtool: "source-map",
   output: {
-        filename: 'js/[name].js',
+    filename: "js/[name].js",
-        path: __dirname + '/assets',
+    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',
+          mimetype: "application/font-woff",
-                    name: '[name].[ext]',
+          name: "[name].[ext]",
-                    outputPath: '../static/fonts',
+          outputPath: "../static/fonts",
-                    publicPath: '../fonts'
+          publicPath: "../fonts"
         }
       },
       {
@@ -74,19 +81,19 @@ module.exports = {
         loader: "url-loader",
         options: {
           limit: 1000,
-                    mimetype: 'application/octet-stream',
+          mimetype: "application/octet-stream",
-                    name: '[name].[ext]',
+          name: "[name].[ext]",
-                    outputPath: '../static/fonts',
+          outputPath: "../static/fonts",
-                    publicPath: '../fonts'
+          publicPath: "../fonts"
         }
       },
       {
         test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
         loader: "file-loader",
         options: {
-                    name: '[name].[ext]',
+          name: "[name].[ext]",
-                    outputPath: '../static/fonts',
+          outputPath: "../static/fonts",
-                    publicPath: '../fonts'
+          publicPath: "../fonts"
         }
       },
       {
@@ -94,24 +101,24 @@ module.exports = {
         loader: "url-loader",
         options: {
           limit: 1000,
-                    mimetype: 'image/svg+xml',
+          mimetype: "image/svg+xml",
-                    name: '[name].[ext]',
+          name: "[name].[ext]",
-                    outputPath: '../static/fonts',
+          outputPath: "../static/fonts",
-                    publicPath: '../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]',
+              name: "../static/img/[2].[ext]",
-                            regExp: /(src\/img)+\/(.*).(gif|svg|ico|gif|jpe?g|png)$/,
+              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 = {
       })
     ]
   }
-};
+}