updates...

Former-commit-id: 2d19655aac80ec7033829b0b3d708bf86986252c [formerly b8bb006bd1a5492960c1d4793e15e80775ddc5fd] [formerly 4641277c14953bdb2ddab89ba866cf63f3dac0f9 [formerly 95b91a64a3c648e1414c7feb4b597bf0da195664]]
Former-commit-id: 5a6e07758bbe67fd202effa5b2975c65227eaebd [formerly 9a161548d270750b8da949189ad6f3b641779bfc]
Former-commit-id: 84e0bbcbbead53c5e91987574d5c854a9792515f

_assets/src/App.vue

@@ -0,0 +1,70 @@
+<template>
+  <div id="app">
+    <header>
+      <div id="top-bar">
+            <img src="./assets/logo.svg" alt="File Manager">
+            <search></search>
+        </div>
+        <div id="bottom-bar">
+    
+        </div>
+        <div id="click-overlay"></div>
+    </header>
+    <nav id="sidebar">
+      <a class="action" :href="baseURL()">
+        <i class="material-icons">folder</i>
+        <span>My Files</span>
+      </a>
+      <div class="action" id="logout" tabindex="0" role="button" aria-label="Log out">
+        <i class="material-icons" title="Logout">exit_to_app</i>
+        <span>Logout</span>
+      </div>
+    </nav>
+    <main>
+      <listing v-if="Kind == 'listing'"></listing> 
+    </main>
+
+    <preview v-if="Kind == 'preview'"></preview> 
+
+    <div class="overlay"></div>
+    <!-- TODO: show on listing and allowedit -->
+    <div class="floating">
+        <div tabindex="0" role="button" class="action" id="new">
+            <i class="material-icons" title="New file or directory">add</i>
+        </div>
+    </div>
+
+    <!-- TODO ??? -->
+     <div id="multiple-selection" class="mobile-only">
+        <p>Multiple selection enabled</p>
+        <div tabindex="0" role="button" class="action" id="multiple-selection-cancel">
+            <i class="material-icons" title="Clear">clear</i>
+        </div>
+    </div>
+
+     <footer>Served with <a rel="noopener noreferrer" href="https://github.com/hacdias/caddy-filemanager">File Manager</a>.</footer>
+  </div>
+</template>
+
+<script>
+import Search from './components/Search'
+import Preview from './components/Preview'
+import Listing from './components/Listing'
+
+export default {
+  name: 'app',
+  components: { Search, Preview, Listing },
+  data: function () {
+    return window.page
+  },
+  methods: {
+    baseURL: function () {
+      return window.data.baseURL + '/'
+    }
+  }
+}
+</script>
+
+<style>
+@import './css/styles.css';
+</style>

_assets/src/assets/logo.svg

@@ -0,0 +1,5 @@
+<svg id="content" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144">
+    <circle cx="72" cy="72" r="72" fill="#2979ff"/>
+    <circle cx="72" cy="72" r="48" fill="#40c4ff"/>
+    <circle cx="72" cy="72" r="24" fill="#fff"/>
+</svg>

_assets/src/components/Listing.vue

@@ -0,0 +1,77 @@
+<template>
+    <div id="listing" :class="Data.Display">
+        <div>
+            <div class="item header">
+                <div></div>
+                <div>
+                    <p v-bind:class="{ active: Data.Sort === 'name' }" class="name"><span>Name</span>
+                        <a v-if="Data.Sort === 'name' && Data.Order != 'asc'" href="?sort=name&order=asc"><i class="material-icons">arrow_upward</i></a>
+                        <a v-else href="?sort=name&order=desc"><i class="material-icons">arrow_downward</i></a>
+                    </p>
+
+                    <p v-bind:class="{ active: Data.Sort === 'size' }" class="size"><span>Size</span>
+                        <a v-if="Data.Sort === 'size' && Data.Order != 'asc'" href="?sort=size&order=asc"><i class="material-icons">arrow_upward</i></a>
+                        <a v-else href="?sort=size&order=desc"><i class="material-icons">arrow_downward</i></a>
+                    </p>
+
+                    <p class="modified">Last modified</p>
+                </div>
+            </div>
+        </div>
+
+        <h2 v-if="(Data.NumDirs + Data.NumFiles) == 0" class="message">It feels lonely here :'(</h2>
+
+        <h2 v-if="Data.NumDirs !== 0">Folders</h2>
+        <div v-if="Data.NumDirs !== 0">
+          <item
+            v-for="(item, index) in Data.Items"
+            v-if="item.IsDir"
+            :key="base64(item.Name)"
+            :id="base64(item.Name)"
+            v-bind:name="item.Name"
+            v-bind:isDir="item.IsDir"
+            v-bind:url="item.URL"
+            v-bind:modified="item.ModTime"  
+            v-bind:type="item.Type"
+            v-bind:size="item.Size">
+          </item>
+        </div>
+
+        <h2 v-if="Data.NumItems !== 0">Files</h2>
+        <div v-if="Data.NumItems !== 0">
+          <item
+            v-for="(item, index) in Data.Items"
+            v-if="!item.IsDir"
+            :key="base64(item.Name)"
+            :id="base64(item.Name)"
+            v-bind:name="item.Name"
+            v-bind:isDir="item.IsDir"
+            v-bind:modified="item.ModTime"  
+            v-bind:url="item.URL"
+            v-bind:type="item.Type"
+            v-bind:size="item.Size">
+          </item>
+        </div>
+
+        <!--
+          <input style="display:none" type="file" id="upload-input" onchange="listing.handleFiles(this.files, '')" value="Upload" multiple>
+          -->
+    </div>
+</template>
+
+<script>
+import Item from './ListingItem'
+
+export default {
+  name: 'preview',
+  components: { Item },
+  data: function () {
+    return window.page
+  },
+  methods: {
+    base64: function (name) {
+      return window.btoa(name)
+    }
+  }
+}
+</script>

_assets/src/components/ListingItem.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="item" 
+        draggable="true"
+        :id="base64()"
+        :data-dir="isDir" 
+        :data-url="url" >
+        <div>
+            <i class="material-icons">{{ icon() }}</i>
+        </div>
+
+        <div>
+            <p class="name">{{ name }}</p>
+
+            <p v-if="isDir" class="size" data-order="-1">&mdash;</p>
+            <p v-else class="size" :data-order="humanSize()">{{ humanSize() }}</p>
+
+            <p class="modified">
+                <time :datetime="modified">{{ humanTime() }}</time>
+            </p>
+        </div>
+    </div>
+</template>
+
+<script>
+import filesize from 'filesize'
+import moment from 'moment'
+
+export default {
+  name: 'item',
+  props: ['name', 'isDir', 'url', 'type', 'size', 'modified'],
+  methods: {
+    icon: function () {
+      if (this.isDir) return 'folder'
+      if (this.type === 'image') return 'insert_photo'
+      if (this.type === 'audio') return 'volume_up'
+      if (this.type === 'video') return 'movie'
+      return 'insert_drive_file'
+    },
+    humanSize: function () {
+      return filesize(this.size)
+    },
+    humanTime: function () {
+      return moment(this.modified).fromNow()
+    },
+    base64: function () {
+      return window.btoa(this.name)
+    }
+  }
+}
+</script>

_assets/src/components/Preview.vue

@@ -0,0 +1,37 @@
+<template>
+    <div id="previewer">
+        <div class="bar">
+            <button class="action" aria-label="Close Preview" id="close">
+                <i class="material-icons">close</i>
+            </button>
+            <!-- TODO: add more buttons -->
+        </div>
+
+        <div class="preview">
+            <img v-if="Data.Type == 'image'" :src="raw()">
+            <audio v-else-if="Data.Type == 'audio'" :src="raw()" controls></audio>
+            <video v-else-if="Data.Type == 'video'" :src="raw()" controls>
+                Sorry, your browser doesn't support embedded videos,
+                but don't worry, you can <a href="?download=true">download it</a>
+                and watch it with your favorite video player!
+            </video>
+            <object v-else-if="Data.Extension == '.pdf'" class="pdf" :data="raw()"></object>
+            <a v-else-if="Data.Type == 'blob'" href="?download=true"><h2 class="message">Download <i class="material-icons">file_download</i></h2></a>
+            <pre v-else >{{ Data.Content }}</pre>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'preview',
+  data: function () {
+    return window.page
+  },
+  methods: {
+    raw: function () {
+      return this.Data.URL + '?raw=true'
+    }
+  }
+}
+</script>

_assets/src/components/Search.vue

@@ -0,0 +1,140 @@
+<template>
+    <div id="search" v-on:mouseleave="hover = false" v-on:click="click" v-bind:class="{ active: focus || hover }">
+        <i class="material-icons" title="Search">search</i>
+        <input type="text"
+            v-on:focus="focus = true"
+            v-on:blur="focus = false"
+            v-on:keyup="keyup"
+            v-on:keyup.enter="submit"
+            aria-label="Write here to search" 
+            placeholder="Search or execute a command...">
+            <div v-on:mouseover="hover = true">
+        <div>Loading...</div>
+            <p><i class="material-icons spin">autorenew</i></p>
+        </div>
+    </div>
+</template>
+
+<script>
+
+// Remove the last directory of an url
+var removeLastDirectoryPartOf = function (url) {
+  var arr = url.split('/')
+  if (arr.pop() === '') {
+    arr.pop()
+  }
+  return (arr.join('/'))
+}
+
+var data = window.data
+var ssl = window.ssl
+
+export default {
+  name: 'search',
+  data: function () {
+    return {
+      hover: false,
+      focus: false,
+      scrollable: null,
+      box: null,
+      input: null
+    }
+  },
+  mounted: function () {
+    this.scrollable = document.querySelector('#search > div')
+    this.box = document.querySelector('#search > div div')
+    this.input = document.querySelector('#search input')
+    this.reset()
+  },
+  methods: {
+    reset: function () {
+      if (data.user.AllowCommands && data.user.Commands.length > 0) {
+        this.box.innerHTML = `Search or use one of your supported commands: ${data.user.Commands.join(', ')}.`
+      } else {
+        this.box.innerHTML = 'Type and press enter to search.'
+      }
+    },
+    supported: function () {
+      let value = this.input.value
+      let pieces = value.split(' ')
+
+      for (let i = 0; i < data.user.Commands.length; i++) {
+        if (pieces[0] === data.user.Commands[0]) {
+          return true
+        }
+      }
+
+      return false
+    },
+    click: function (event) {
+      event.currentTarget.classList.add('active')
+      this.$el.querySelector('input').focus()
+    },
+    keyup: function (event) {
+      let el = event.currentTarget
+
+      if (el.value.length === 0) {
+        this.reset()
+        return
+      }
+
+      if (!this.supported() || !data.user.AllowCommands) {
+        this.box.innerHTML = 'Press enter to search.'
+      } else {
+        this.box.innerHTML = 'Press enter to execute.'
+      }
+    },
+    submit: function (event) {
+      this.box.innerHTML = ''
+      this.$el.classList.add('ongoing')
+
+      let url = window.location.host + window.location.pathname
+
+      if (document.getElementById('editor')) {
+        url = removeLastDirectoryPartOf(url)
+      }
+
+      let protocol = ssl ? 'wss:' : 'ws:'
+
+      if (this.supported() && data.user.AllowCommands) {
+        let conn = new window.WebSocket(`${protocol}//${url}?command=true`)
+
+        conn.onopen = () => {
+          conn.send(this.input.value)
+        }
+
+        conn.onmessage = (event) => {
+          this.box.innerHTML = event.data
+          this.scrollable.scrollTop = this.scrollable.scrollHeight
+        }
+
+        conn.onclose = (event) => {
+          this.$el.classList.remove('ongoing')
+          // TODO: if is listing!
+          // listing.reload()
+        }
+
+        return
+      }
+
+      this.box.innerHTML = '<ul></ul>'
+
+      let ul = this.box.querySelector('ul')
+      let conn = new window.WebSocket(`${protocol}//${url}?search=true`)
+
+      conn.onopen = () => {
+        conn.send(this.input.value)
+      }
+
+      conn.onmessage = (event) => {
+        ul.innerHTML += `<li><a href=".${event.data}">${event.data}</a></li>`
+        this.scrollable.scrollTop = this.scrollable.scrollHeight
+      }
+
+      conn.onclose = () => {
+        this.$el.classList.remove('ongoing')
+      }
+    }
+  }
+}
+</script>

_assets/src/css/fonts.css

@@ -0,0 +1,137 @@
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/roboto/normal-cyrillic-ext.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/roboto/normal-cyrillic.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/roboto/normal-greek-ext.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/roboto/normal-greek.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/roboto/normal-vietnamese.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/roboto/normal-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/roboto/normal-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/roboto/medium-cyrillic-ext.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/roboto/medium-cyrillic.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/roboto/medium-greek-ext.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/roboto/medium-greek.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/roboto/medium-vietnamese.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/roboto/medium-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/roboto/medium-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons'), local('MaterialIcons-Regular'), url(../fonts/material/icons.woff2) format('woff2');
+}
+
+.prompt .file-list ul li:before,
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: 'liga';
+}

_assets/src/css/header.css

@@ -0,0 +1,236 @@
+header {
+    z-index: 1000;
+    background-color: #fff;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.075);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 0;
+}
+
+header a,
+header a:hover {
+    color: inherit;
+}
+
+header>div {
+    display: flex;
+    width: 100%;
+    padding: 0.5em 0.5em 0.5em 1em;
+    align-items: center;
+}
+
+header .action span {
+    display: none;
+}
+
+header>div div {
+    vertical-align: middle;
+    position: relative;
+}
+
+/* * * * * * * * * * * * * * * *
+ *            TOP BAR          *
+ * * * * * * * * * * * * * * * */
+
+#top-bar {
+    height: 4em;
+}
+
+#top-bar img {
+    height: 2.5em;
+    margin-right: 1em;
+    vertical-align: middle;
+}
+
+
+/* * * * * * * * * * * * * * * *
+ *          SEARCH BAR         *
+ * * * * * * * * * * * * * * * */
+
+#search {
+    position: relative;
+    display: flex;
+    height: 100%;
+    padding: 0.75em;
+    vertical-align: middle;
+    border-radius: 0.3em;
+    background-color: #f5f5f5;
+    transition: .1s ease all;
+    width: 100%;
+    max-width: 25em;
+}
+
+#search.active {
+    background-color: #fff;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
+}
+
+#search.active i,
+#search.active input {
+    color: #212121;
+}
+
+#search i,
+#search input {
+    vertical-align: middle;
+}
+
+#search i {
+    margin-right: 0.3em;
+    user-select: none;
+}
+
+#search input {
+    width: 100%;
+    border: 0;
+    outline: 0;
+    background-color: transparent;
+}
+
+#search.active div {
+    visibility: visible;
+    opacity: 1;
+    top: 100%;
+}
+
+#search ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+#search li {
+    margin-bottom: .5em;
+}
+
+#search>div {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    left: 0;
+    z-index: 999999;
+    background-color: #fff;
+    text-align: left;
+    color: #ccc;
+    box-shadow: 0 2px 3px rgba(0, 0, 0, .06), 0 2px 2px rgba(0, 0, 0, .12);
+    padding: .5em;
+    border-bottom-left-radius: .3em;
+    border-bottom-right-radius: .3em;
+    transition: .1s ease all;
+    visibility: hidden;
+    opacity: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: 50vh;
+}
+
+#search>div div {
+    white-space: pre-wrap;
+    white-space: -moz-pre-wrap;
+    white-space: -pre-wrap;
+    white-space: -o-pre-wrap;
+    word-wrap: break-word;
+}
+
+#search>div p {
+    width: 100%;
+    text-align: center;
+    display: none;
+    margin: 0;
+    max-width: none;
+}
+
+#search.ongoing p {
+    display: block;
+}
+
+#search.active div i,
+#sidebar #search.active div i {
+    color: #ccc;
+    text-align: center;
+    margin: 0 auto;
+    display: table;
+}
+
+#search::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, .5);
+}
+
+#search:-moz-placeholder {
+    opacity: 1;
+    color: rgba(255, 255, 255, .5);
+}
+
+#search::-moz-placeholder {
+    opacity: 1;
+    color: rgba(255, 255, 255, .5);
+}
+
+#search:-ms-input-placeholder {
+    color: rgba(255, 255, 255, .5);
+}
+
+
+/* * * * * * * * * * * * * * * *
+ *          BOTTOM BAR         *
+ * * * * * * * * * * * * * * * */
+
+#bottom-bar {
+    border-top: 1px solid rgba(0, 0, 0, 0.075);
+    height: 3.8em;
+}
+
+#bottom-bar>div:first-child>* {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+#bottom-bar>div:first-child>i {
+    margin-right: .3em;
+}
+
+#bottom-bar>*:first-child {
+    margin-right: auto;
+    max-width: calc(100% - 25em);
+    width: 100%;
+}
+
+#bottom-bar p {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: calc(100% - 3em);
+    white-space: nowrap;
+}
+
+#more {
+    display: none;
+}
+
+#file-only {
+    display: inline-block;
+    border-right: 1px solid rgba(0, 0, 0, 0.075);
+    padding-right: .3em;
+    margin-right: .3em;
+    transition: .2s ease opacity, visibility;
+    visibility: visible;
+}
+
+#file-only.disabled {
+    opacity: 0;
+    visibility: hidden;
+}
+
+#download ul.active {
+    top: 0;
+    right: 0;
+}
+
+#more ul.active {
+    right: .5em;
+    top: 4.5em;
+}

_assets/src/css/normalize.css

@@ -0,0 +1,447 @@
+/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+
+figcaption,
+figure,
+main { /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: sans-serif; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+  display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+  display: none;
+}

_assets/src/main.js

@@ -0,0 +1,16 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+
+window.data = (window.data || window.alert('Something is wrong, please refresh!'))
+window.ssl = (window.location.protocol === 'https:')
+
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  template: '<App/>',
+  components: { App }
+})