initial commit

2019-12-06 17:09:08 +01:00
commit 90b9a3bca5
7 changed files with 209 additions and 0 deletions
@@ -0,0 +1 @@
+.idea
@@ -0,0 +1 @@
+lib
@@ -0,0 +1,26 @@
+{
+  "esversion": 6,
+  "maxerr": 999,
+  "indent": true,
+  "camelcase": true,
+  "eqeqeq": true,
+  "forin": true,
+  "immed": true,
+  "latedef": true,
+  "noarg": true,
+  "noempty": true,
+  "nonew": true,
+  "undef": true,
+  "unused": true,
+  "varstmt": true,
+  "sub": true,
+  "quotmark": "single",
+  "browser": true,
+  "devel": true,
+  "globals": {
+    "Vue": false,
+    "data": true,
+    "cookies": true,
+    "app": true
+  }
+}
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Change this you moron</title>
+    <link rel="stylesheet" href="style.css">
+    <script type="text/javascript" src="lib/vue.min.js"></script>
+    <script type="text/javascript" src="main.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- card related -->
+    <!--
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="og:title" content="">
+    <meta property="twitter:title" content="">
+    <meta property="og:description" content="">
+    <meta property="twitter:description" content="">
+    <meta property="og:image" content="https://.../preview_640x320.jpg">
+    <meta property="twitter:image" content="">
+    <meta property="org:url" content="https://...">
+    -->
+</head>
+<body>
+    <main id="app" style="display:none">
+        <h1>{{title}}</h1>
+        <br>
+        <p v-html="content"></p>
+        <br>
+        <small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="" target="_blank">Github Repository</a> - 2019</small>
+    </main>
+</body>
+</html>
@@ -0,0 +1,102 @@
+/* exported app, utils */
+
+const utils = {
+  ajax: {
+    proxy: 'cors-anywhere.herokuapp.com',
+    /**
+     * Define a get HTTP request to be executed with .then/.catch
+     * @param {string} url
+     * @param {Object} data
+     * @param {boolean} proxy - use cors proxy
+     * @returns {Promise<Object|string>} return JSON parsed data or string
+     */
+    get: (url, data, proxy = false) => {
+      return new Promise((resolve, reject) => {
+        if (data && Object.keys(data).length) {
+          url += '?' + Object.keys(data)
+            .map(k => k + '=' + encodeURIComponent(data[k]))
+            .join('&')
+            .replace(/%20/g, '+');
+        }
+        const xhr = new XMLHttpRequest();
+        if (proxy) {
+          const http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
+          url = `${http}//${utils.ajax.proxy}/${url}`;
+        }
+        xhr.open('GET', url);
+        xhr.onload = () => {
+          try {
+            resolve(JSON.parse(xhr.responseText));
+          } catch (ignored) {
+            resolve(xhr.responseText);
+          }
+        };
+        xhr.onerror = () => reject(xhr);
+        xhr.send();
+      });
+    },
+  },
+  cookies: {
+    /**
+     * Save a value in a cookie
+     * @param {string} name
+     * @param {string} value
+     * @param {number | undefined} days
+     */
+    set: function (name, value, days = undefined) {
+      const maxAge = !days ? undefined : days * 864e2;
+      document.cookie = `${name}=${encodeURIComponent(value)}${maxAge ? `;max-age=${maxAge};` : ''}`;
+    },
+    /**
+     * Get a value from a cookie
+     * @param {string} name
+     * @return {string} value from cookie or empty if not found
+     */
+    get: function (name) {
+      return document.cookie.split('; ').reduce(function (r, v) {
+        const parts = v.split('=');
+        return parts[0] === name ? decodeURIComponent(parts[1]) : r;
+      }, '');
+    },
+    /**
+     * Delete a cookie
+     * @param {string} name
+     */
+    delete: function (name) {
+      this.set(name, '', -1);
+    },
+    /**
+     * Clear all cookies
+     */
+    clear: function () {
+      const cookies = document.cookie.split(';');
+      for (let i = 0; i < cookies.length; i++) {
+        const cookie = cookies[i];
+        const eqPos = cookie.indexOf('=');
+        const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
+        document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT`;
+      }
+    }
+  }
+};
+
+let app = {
+  el: '#app',
+  data: {
+    title:'Vue-Boilerplate',
+    content: 'Fill this page with <i>whatever</i> you\'re going to develop.<br><b>Then enjoy!</b>'
+  },
+  methods: {
+
+  },
+  'mounted': () => {
+    console.log('app mounted');
+    setTimeout(() => {
+      document.getElementById('app').setAttribute('style', '');
+    });
+  }
+};
+
+window.onload = () => {
+  app = new Vue(app);
+};
@@ -0,0 +1,42 @@
+* {
+    box-sizing: border-box;
+    font-family: Verdana, serif;
+    color: #424242;
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    max-width: 100%;
+}
+
+body {
+    background-color: #F5F5F5;
+}
+
+main {
+    padding: 1.5rem;
+    margin: auto;
+    background-color: #EEEEEE;
+    min-height: 100%;
+}
+
+h1 {
+    margin-bottom: .5em;
+}
+
+table{
+    border-collapse: collapse;
+    width:100%;
+    font-size: .9em;
+}
+
+@media only screen and (min-width: 768px) {
+    main {
+        max-width: 42rem;
+    }
+    table{
+        font-size:inherit;
+    }
+}