update landing page new theme

js/main.js

@@ -0,0 +1,77 @@
+/* global $, Vue, axios */
+/* eslint no-undef: "error", semi: 2 */
+
+/**
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+ * ·······  Copy
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+ */
+
+new ClipboardJS('.btn-copy');
+
+/**
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+ * ·······  Functions
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+*/
+
+function lightOrDark(color) {
+  // Variables for red, green, blue values
+  var r, g, b, hsp;
+  // Check the format of the color, HEX or RGB?
+  if (color.match(/^rgb/)) {
+    // If RGB --> store the red, green, blue values in separate variables
+    color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
+    r = color[1];
+    g = color[2];
+    b = color[3];
+  } else {
+    // If hex --> Convert it to RGB: http://gist.github.com/983661
+    color = +('0x' + color.slice(1).replace(color.length < 5 && /./g, '$&$&'));
+    r = color >> 16;
+    g = color >> 8 & 255;
+    b = color & 255;
+  }
+  // HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html
+  hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));
+  // Using the HSP value, determine whether the color is light or dark
+  if (hsp > 127.5) {
+    return 'light';
+  } else {
+    return 'dark';
+  }
+}
+
+/**
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+ * ·······  Vue App
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+*/
+
+var $getUrl = 'https://raw.githubusercontent.com/Mayccoll/Gogh/master/data/themes.json';
+
+const $app = {
+  data () {
+    return {
+      themes: [],
+      filter: 'all'
+    };
+  },
+  created () {
+    axios.get($getUrl)
+      .then((response) => {
+        this.themes = response.data.themes;
+        this.themes.forEach((v) => {
+          v.category = lightOrDark(v.background);
+        });
+      });
+  },
+  methods: {
+    setFilter: function (f) {
+      this.filter = '';
+      setTimeout(() => { this.filter = f; }, 50);
+    }
+  }
+};
+
+Vue.createApp($app).mount('#js-vue-app');

js/main.min.js

@@ -1,8 +0,0 @@
-
-/**
- * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
- * ·······  Copy
- * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
- */
-
-new ClipboardJS('.btn-copy');

js/vue.js

@@ -1,21 +0,0 @@
-/* global $, fetch, console, Vue, $users */
-/* eslint no-undef: "error", semi: 2 */
-/* jshint esversion: 6 */
-
-Vue.component('terminal', {
-  template: '#template-terminal',
-  props: {
-    data: {
-      type: Object
-    }
-  }
-});
-
-var $app = new Vue({
-  el: '#js-vue-app',
-  data: function () {
-    return {
-      schemes_data: $schemes
-    }
-  }
-});