From 146b452d3fde8ae0700a8cb4832fba4b72b2ef11 Mon Sep 17 00:00:00 2001
From: Jakob Schrettenbrunner <dev@schrej.net>
Date: Wed, 1 Aug 2018 00:23:27 +0200
Subject: [PATCH] add SlickCarousel directly to theme to fix shitty compile
 errors and the gallery

---
 .vuepress/theme/Home.vue          |   4 +-
 .vuepress/theme/SlickCarousel.vue | 176 ++++++++++++++++++++++++++++++
 package.json                      |   2 +-
 yarn.lock                         |   8 +-
 4 files changed, 180 insertions(+), 10 deletions(-)
 create mode 100644 .vuepress/theme/SlickCarousel.vue

diff --git a/.vuepress/theme/Home.vue b/.vuepress/theme/Home.vue
index e6091484..1b4e7c64 100644
--- a/.vuepress/theme/Home.vue
+++ b/.vuepress/theme/Home.vue
@@ -126,10 +126,10 @@
 
 <script>
     import NavLink from './NavLink.vue';
-    // import Slick from 'vue-slick';
+    import Slick from './SlickCarousel.vue';
 
     export default {
-        components: { NavLink },
+        components: { NavLink, Slick },
         data() {
             return {
                 slickOptions: {
diff --git a/.vuepress/theme/SlickCarousel.vue b/.vuepress/theme/SlickCarousel.vue
new file mode 100644
index 00000000..0826d2aa
--- /dev/null
+++ b/.vuepress/theme/SlickCarousel.vue
@@ -0,0 +1,176 @@
+/* from https://github.com/staskjs/vue-slick */
+
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+<script>
+import Vue from 'vue';
+import $ from 'jquery';
+
+// Check if the request came from the browser and is not server rendered
+if (typeof window !== 'undefined') {
+    const slick = require('slick-carousel');
+}
+
+export default {
+  props: {
+    options: {
+      type: Object,
+      default: function() {
+        return {};
+      },
+    },
+  },
+
+  mounted: function() {
+    this.create();
+  },
+
+  destroyed: function() {
+    $(this.$el).slick('unslick');
+  },
+
+  methods: {
+    create: function() {
+      const $slick = $(this.$el);
+
+      $slick.on('afterChange', this.onAfterChange);
+      $slick.on('beforeChange', this.onBeforeChange);
+      $slick.on('breakpoint', this.onBreakpoint);
+      $slick.on('destroy', this.onDestroy);
+      $slick.on('edge', this.onEdge);
+      $slick.on('init', this.onInit);
+      $slick.on('reInit', this.onReInit);
+      $slick.on('setPosition', this.onSetPosition);
+      $slick.on('swipe', this.onSwipe);
+      $slick.on('lazyLoaded', this.onLazyLoaded);
+      $slick.on('lazyLoadError', this.onLazyLoadError);
+
+      $slick.slick(this.options);
+    },
+
+    destroy: function() {
+      const $slick = $(this.$el);
+
+      $slick.off('afterChange', this.onAfterChange);
+      $slick.off('beforeChange', this.onBeforeChange);
+      $slick.off('breakpoint', this.onBreakpoint);
+      $slick.off('destroy', this.onDestroy);
+      $slick.off('edge', this.onEdge);
+      $slick.off('init', this.onInit);
+      $slick.off('reInit', this.onReInit);
+      $slick.off('setPosition', this.onSetPosition);
+      $slick.off('swipe', this.onSwipe);
+      $slick.off('lazyLoaded', this.onLazyLoaded);
+      $slick.off('lazyLoadError', this.onLazyLoadError);
+      $(this.$el).slick('unslick');
+    },
+
+    reSlick: function() {
+      this.destroy();
+      this.create();
+    },
+
+    next: function() {
+      $(this.$el).slick('slickNext');
+    },
+
+    prev: function() {
+      $(this.$el).slick('slickPrev');
+    },
+
+    pause: function() {
+      $(this.$el).slick('slickPause');
+    },
+
+    play: function() {
+      $(this.$el).slick('slickPlay');
+    },
+
+    goTo: function(index, dontAnimate) {
+      $(this.$el).slick('slickGoTo', index, dontAnimate);
+    },
+
+    currentSlide: function() {
+      return $(this.$el).slick('slickCurrentSlide');
+    },
+
+    add: function(element, index, addBefore) {
+      $(this.$el).slick('slickAdd', element, index, addBefore);
+    },
+
+    remove: function(index, removeBefore) {
+      $(this.$el).slick('slickRemove', index, removeBefore);
+    },
+
+    filter: function(filterData) {
+      $(this.$el).slick('slickFilter', filterData);
+    },
+
+    unfilter: function() {
+      $(this.$el).slick('slickUnfilter');
+    },
+
+    getOption: function(option) {
+      $(this.$el).slick('slickGetOption', option);
+    },
+
+    setOption: function(option, value, refresh) {
+      $(this.$el).slick('slickSetOption', option, value, refresh);
+    },
+
+    setPosition: function() {
+      $(this.$el).slick('setPosition');
+    },
+
+    // Events
+    onAfterChange: function(event, slick, currentSlide) {
+      this.$emit('afterChange', event, slick, currentSlide);
+    },
+
+    onBeforeChange: function(event, slick, currentSlide, nextSlide) {
+      this.$emit('beforeChange', event, slick, currentSlide, nextSlide);
+    },
+
+    onBreakpoint: function(event, slick, breakpoint) {
+      this.$emit('breakpoint', event, slick, breakpoint);
+    },
+
+    onDestroy: function(event, slick) {
+      this.$emit('destroy', event, slick);
+    },
+
+    onEdge: function(event, slick, direction) {
+      this.$emit('edge', event, slick, direction);
+    },
+
+    onInit: function(event, slick) {
+      this.$emit('init', event, slick);
+    },
+
+    onReInit: function(event, slick) {
+      this.$emit('reInit', event, slick);
+    },
+
+    onSetPosition: function(event, slick) {
+      this.$emit('setPosition', event, slick);
+    },
+
+    onSwipe: function(event, slick, direction) {
+      this.$emit('swipe', event, slick, direction);
+    },
+
+    onLazyLoaded: function(event, slick, image, imageSource) {
+      this.$emit('lazyLoaded', event, slick, image, imageSource);
+    },
+
+    onLazyLoadError: function(event, slick, image, imageSource) {
+      this.$emit('lazyLoadError', event, slick, image, imageSource);
+    },
+  },
+
+};
+</script>
+
diff --git a/package.json b/package.json
index 117eba32..cf0328b3 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "dependencies": {
     "jquery": "^3.3.1",
-    "vue-slick": "^1.1.13",
+    "slick-carousel": "^1.8.1",
     "vuepress": "^0.13.0"
   },
   "scripts": {
diff --git a/yarn.lock b/yarn.lock
index 63904c0b..42dc4f6a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5873,7 +5873,7 @@ slice-ansi@1.0.0:
   dependencies:
     is-fullwidth-code-point "^2.0.0"
 
-slick-carousel@^1.6.0:
+slick-carousel@^1.8.1:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.8.1.tgz#a4bfb29014887bb66ce528b90bd0cda262cc8f8d"
 
@@ -6619,12 +6619,6 @@ vue-server-renderer@^2.5.16:
     serialize-javascript "^1.3.0"
     source-map "0.5.6"
 
-vue-slick@^1.1.13:
-  version "1.1.13"
-  resolved "https://registry.yarnpkg.com/vue-slick/-/vue-slick-1.1.13.tgz#e7555c49f7e70880aa3b85b91422154667d5218f"
-  dependencies:
-    slick-carousel "^1.6.0"
-
 vue-style-loader@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.1.tgz#7c1d051b24f60b1707602b549ed50b4c8111d316"