refactor: switch to poi compiler

.babelrc

@@ -1,5 +1,5 @@
 {
-  "comments": false,
+  "comments": true,
   "presets": [
     ["env", {
       "targets": {

assets/svg/login-bg-dark.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 1500 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
-    <path d="M1500,543c0,0 -135.753,54.677 -252.197,101.577c-106.023,42.702 -223.596,47.2 -332.571,12.724c-56.088,-17.745 -118.404,-37.46 -173.999,-55.048c-103.773,-32.831 -216.376,-22.709 -312.631,28.103c0,0 0,0.001 0,0.001c-94.821,50.055 -206.441,57.476 -307.053,20.415c-63.317,-23.322 -121.549,-44.772 -121.549,-44.772l0,417l1500,0l0,-480Z" style="fill:#2d2d2d;fill-opacity:0.282609;"/>
-    <path d="M1510,580c0,0 -144.155,47.882 -252.311,83.806c-74.651,24.796 -156.199,17.958 -225.679,-18.923c0,0 0,0 0,0c-62.207,-33.021 -133.629,-44.415 -203.023,-32.389c-98.381,17.051 -244.859,42.438 -352.664,61.121c-92.259,15.99 -187.076,8.079 -275.41,-22.977c-93.342,-32.818 -200.913,-70.638 -200.913,-70.638l0,466l1500,0l10,-466Z" style="fill:#2d2d2d;fill-opacity:0.550725;"/>
-    <path d="M1500,650c0,0 -143.367,28.581 -239.425,47.731c-56.087,11.181 -113.694,12.508 -170.237,3.922c-74.75,-11.351 -183.318,-27.838 -261.719,-39.743c-65.252,-9.909 -131.707,-8.759 -196.577,3.4c-49.655,9.308 -109.704,20.564 -158.992,29.803c-63.125,11.833 -127.839,12.479 -191.188,1.911c-111.875,-18.665 -281.862,-47.024 -281.862,-47.024l0,430l1500,0l0,-430Z" style="fill:#2d2d2d;"/>
-</svg>

assets/svg/login-bg-motif-error.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="80" height="105" viewBox="0 0 80 105">
-    <g fill-rule="evenodd">
-        <g id="death-star" fill="#000000" fill-opacity="0.05">
-            <path d="M20 10a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V10zm15 35a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zM20 75a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V75zm30-65a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V10zm0 65a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V75zM35 10a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10zM5 45a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zm0-35a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10zm60 35a5 5 0 0 1 10 0v50a5 5 0 0 1-10 0V45zm0-35a5 5 0 0 1 10 0v20a5 5 0 0 1-10 0V10z" />
-        </g>
-    </g>
-</svg>

client/js/app.js

@@ -12,7 +12,6 @@ import { ApolloClient } from 'apollo-client'
 import { HttpLink } from 'apollo-link-http'
 import { InMemoryCache } from 'apollo-cache-inmemory'
 import store from './store'
-import icons from '../svg/icons.svg'
 
 // ====================================
 // Load Modules
@@ -172,5 +171,7 @@ document.addEventListener('DOMContentLoaded', ev => {
   // Load Icons
   // ====================================
 
-  document.body.insertAdjacentHTML('beforeend', icons)
+  import(/* webpackChunkName: "icons" */ '../svg/icons.svg').then(icons => {
+    document.body.insertAdjacentHTML('beforeend', icons)
+  })
 })

client/js/components/login.vue

@@ -196,3 +196,323 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+  .login {
+    background-color: mc('blue', '800');
+    background-image: url('../../static/svg/login-bg-motif.svg');
+    background-repeat: repeat;
+    background-size: 200px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: loginBgReveal 20s linear infinite;
+
+    @include keyframes(loginBgReveal) {
+      0% {
+        background-position-y: 0;
+      }
+      100% {
+        background-position-y: -800px;
+      }
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      background-image: url('../../static/svg/login-bg.svg');
+      background-position: center bottom;
+      background-size: cover;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+
+      @include until($tablet) {
+        display: none;
+      }
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      background-image: linear-gradient(to bottom, rgba(mc('blue', '800'), 1) 0%, rgba(mc('blue', '800'), 0) 100%);
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 25vh;
+    }
+
+    &-container {
+      position: relative;
+      display: flex;
+      width: 400px;
+      align-items: stretch;
+      box-shadow: 0 14px 28px rgba(0,0,0,0.2);
+      border-radius: 6px;
+      animation: zoomIn .5s ease;
+
+      &::after {
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+        content: " ";
+        @include spinner(mc('blue', '500'),0.5s,16px);
+        display: none;
+      }
+
+      &.is-expanded {
+        width: 650px;
+
+        .login-frame {
+          border-radius: 0 6px 6px 0;
+          border-left: none;
+
+          @include until($tablet) {
+            border-radius: 0;
+          }
+        }
+      }
+
+      &.is-loading::after {
+        display: block;
+      }
+
+      @include until($tablet) {
+        width: 100%;
+        border-radius: 0;
+
+        &.is-expanded {
+          width: 100%;
+        }
+      }
+    }
+
+    &-providers {
+      display: flex;
+      flex-direction: column;
+      width: 250px;
+
+      border-right: none;
+      border-radius: 6px 0 0 6px;
+      z-index: 1;
+      overflow: hidden;
+
+      @include until($tablet) {
+        width: 50px;
+        border-radius: 0;
+      }
+
+      button {
+        flex: 0 1 50px;
+        padding: 5px 15px;
+        border: none;
+        color: #FFF;
+        // background: linear-gradient(to right, rgba(mc('light-blue', '800'), .7), rgba(mc('light-blue', '800'), 1));
+        // border-top: 1px solid rgba(mc('light-blue', '900'), .5);
+        background: linear-gradient(to right, rgba(0,0,0, .5), rgba(0,0,0, .7));
+        border-top: 1px solid rgba(0,0,0, .2);
+        font-family: $core-font-standard;
+        font-weight: 600;
+        text-align: left;
+        min-height: 40px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        transition: all .4s ease;
+
+        &:focus {
+          outline: none;
+        }
+
+        @include until($tablet) {
+          justify-content: center;
+        }
+
+        &:hover {
+          background-color: rgba(0,0,0, .4);
+        }
+
+        &:first-child {
+          border-top: none;
+
+          &.is-active {
+            border-top: 1px solid rgba(255,255,255, .5);
+          }
+        }
+
+        &.is-active {
+          background-image: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,.77) 100%);
+          color: mc('grey', '800');
+          cursor: default;
+
+          &:hover {
+            background-color: transparent;
+          }
+
+          svg path {
+            fill: mc('grey', '800');
+          }
+        }
+
+        i {
+          margin-right: 10px;
+          font-size: 16px;
+
+          @include until($tablet) {
+            margin-right: 0;
+            font-size: 20px;
+          }
+        }
+
+        svg {
+          margin-right: 10px;
+          width: auto;
+          height: 20px;
+          max-width: 18px;
+          max-height: 20px;
+
+          path {
+            fill: #FFF;
+          }
+
+          @include until($tablet) {
+            margin-right: 0;
+            font-size: 20px;
+          }
+        }
+
+        span {
+          font-weight: 600;
+
+          @include until($tablet) {
+            display: none;
+          }
+        }
+      }
+
+      &-fill {
+        flex: 1 1 0;
+        background: linear-gradient(to right, rgba(mc('light-blue', '800'), .7), rgba(mc('light-blue', '800'), 1));
+      }
+    }
+
+    &-frame {
+      background-image: radial-gradient(circle at top center, rgba(255,255,255,1) 5%,rgba(255,255,255,.6) 100%);
+      border: 1px solid rgba(255,255,255, .5);
+      border-radius: 6px;
+      width: 400px;
+      padding: 1rem;
+      color: mc('grey', '700');
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      text-align: center;
+
+      @include until($tablet) {
+        width: 100%;
+        border-radius: 0;
+        border: none;
+      }
+
+      h1 {
+        font-size: 2rem;
+        font-weight: 600;
+        color: mc('light-blue', '700');
+        text-shadow: 1px 1px 0 #FFF;
+        padding: 0;
+        margin: 0;
+      }
+
+      h2 {
+        font-size: 1.5rem;
+        font-weight: 300;
+        color: mc('grey', '700');
+        text-shadow: 1px 1px 0 #FFF;
+        padding: 0;
+        margin: 0 0 25px 0;
+      }
+
+      form {
+        display: flex;
+        flex-direction: column;
+      }
+
+      input[type=text], input[type=password] {
+        width: 100%;
+        border: 1px solid rgba(mc('blue-grey','500'), .5);
+        border-radius: 3px;
+        background-color: rgba(255,255,255,.9);
+        box-shadow: inset 0 0 0 3px rgba(255,255,255, .25);
+        padding: 0 15px;
+        height: 40px;
+        margin: 0 0 10px 0;
+        color: mc('grey', '700');
+        font-weight: 600;
+        font-size: .8rem;
+        transition: all 0.4s ease;
+        text-align: center;
+
+        &:focus {
+          outline: none;
+          border-color: mc('light-blue','500');
+          background-color: rgba(255,255,255,1);
+          box-shadow: inset 0 0 8px rgba(mc('light-blue','500'), .5);
+          color: mc('light-blue', '800');
+        }
+
+      }
+
+      .button {
+        background-image: linear-gradient(to bottom, mc('blue', '400') 0%, mc('blue', '600') 50%, mc('blue', '700') 100%);
+        background-repeat: no-repeat;
+        background-size: 100% 200%;
+
+        &:hover {
+          background-position-y: 100%;
+        }
+      }
+
+    }
+
+    &-tfa {
+      position: relative;
+      display: flex;
+      width: 400px;
+      align-items: stretch;
+      box-shadow: 0 14px 28px rgba(0,0,0,0.2);
+      border-radius: 6px;
+      animation: zoomIn .5s ease;
+    }
+
+    &-copyright {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      left: 0;
+      bottom: 10vh;
+      width: 100%;
+      z-index: 2;
+      color: mc('grey', '500');
+      font-weight: 400;
+
+      a {
+        font-weight: 600;
+        color: mc('blue', '500');
+        margin-left: .25rem;
+
+        @include until($tablet) {
+          color: mc('blue', '200');
+        }
+      }
+
+      @include until($tablet) {
+        color: mc('blue', '50');
+      }
+
+    }
+  }
+</style>

client/scss/app.scss

@@ -1,14 +1,4 @@
-@charset "utf-8";
-
-$primary: 'indigo';
-
-@import "base/variables";
-@import "base/material";
-@import "base/reset";
-@import "base/mixins";
-@import "base/fonts";
-@import "base/icons";
-@import "base/base";
+@import "global";
 
 @import "libs/animate";
 
@@ -21,7 +11,6 @@ $primary: 'indigo';
 @import 'components/grid';
 @import 'components/hero';
 @import 'components/history';
-@import 'components/login';
 @import 'components/markdown-content';
 @import 'components/modal';
 @import 'components/nav';

client/scss/components/setup.scss

@@ -1,6 +1,6 @@
 .setup {
   background-color: #1565c0;
-  background-image: url('../svg/config-bg.svg');
+  background-image: url('../static/svg/config-bg.svg');
   width: 100%;
   min-height: 100%;
   padding-top: 1rem;

client/scss/global.scss

@@ -0,0 +1,11 @@
+@charset "utf-8";
+
+$primary: 'indigo';
+
+@import "base/variables";
+@import "base/material";
+@import "base/reset";
+@import "base/mixins";
+@import "base/fonts";
+@import "base/icons";
+@import "base/base";

package.json

@@ -7,8 +7,8 @@
     "start": "node wiki start",
     "stop": "node wiki stop",
     "restart": "node wiki restart",
-    "build": "node dev/fuse --build",
-    "dev:client": "node dev/fuse --dev",
+    "build": "poi build",
+    "dev:client": "poi watch",
     "dev:server": "nodemon",
     "dev:server:alt": "node-dev server --no-deps --respawn --no-notify",
     "test": "eslint --ext .js,.vue . && jest"
@@ -168,8 +168,13 @@
     "node-dev": "3.1.3",
     "node-sass": "4.7.2",
     "nodemon": "1.14.3",
+    "poi": "9.6.12",
     "postcss-selector-parser": "3.1.1",
     "pug-lint": "2.5.0",
+    "raw-loader": "0.5.1",
+    "sass-loader": "6.0.6",
+    "sass-resources-loader": "1.3.1",
+    "svg-sprite-loader": "3.6.2",
     "twemoji-awesome": "1.0.6",
     "typescript": "2.6.2",
     "uglify-es": "3.2.2",

poi.config.js

@@ -0,0 +1,75 @@
+const path = require('path')
+const _ = require('lodash')
+const SpriteLoaderPlugin = require('svg-sprite-loader/plugin')
+
+module.exports = {
+  entry: 'client/index.js',
+  dist: 'assets',
+  staticFolder: 'client/static',
+  filename: {
+    js: 'js/[name].js',
+    css: 'css/bundle.css',
+    images: 'images/[name].[ext]',
+    fonts: 'fonts/[name].[ext]',
+    chunk: 'js/[name].chunk.js'
+  },
+  autoprefixer: {
+    browsers: [
+      'last 6 Chrome major versions',
+      'last 6 Firefox major versions',
+      'last 4 Safari major versions',
+      'last 4 Edge major versions',
+      'last 3 iOS major versions',
+      'last 3 Android major versions',
+      'last 2 ChromeAndroid major versions',
+      'Explorer 11'
+    ]
+  },
+  html: false,
+  hash: false,
+  sourceMap: true,
+  extendWebpack (config) {
+    // Vue - Default SCSS Imports
+    config.module.rule('vue')
+      .use('vue-loader')
+      .tap(opts => {
+        opts.loaders.scss.push({
+          loader: 'sass-resources-loader',
+          options: {
+            resources: path.join(__dirname, './client/scss/global.scss')
+          }
+        })
+        return opts
+      })
+
+    // SVG Loader
+    config.module.rule('svg')
+      .exclude.add(path.join(__dirname, './client/svg')).end()
+      .use('file-loader')
+      .tap(opts => {
+        opts.name = '[name].[ext]'
+        opts.outputPath = 'svg/'
+        return opts
+      })
+    config.module.rule('svgSymbols')
+      .include.add(path.join(__dirname, './client/svg')).end()
+      .use('raw-loader')
+      .loader('raw-loader')
+
+    // config.module.rule('svg').uses.delete('file-loader')
+    // config.module.rule('svg')
+    //   .use('svg-sprite-loader')
+    //   .loader('svg-sprite-loader', {
+    //     extract: true,
+    //     spriteFilename: 'svg/symbols.svg'
+    //   })
+    // config.plugin('svg-sprite-loader')
+    //   .use(SpriteLoaderPlugin)
+
+    // Vue with Compiler Alias
+    config.resolve.alias.set('vue$', 'vue/dist/vue.common.js')
+  },
+  webpack (config) {
+    return config
+  }
+}

server/views/master.pug

@@ -22,8 +22,9 @@ html
       var siteConfig = !{JSON.stringify(config.site)}
 
     //- JS / CSS
-    script(type='text/javascript', src=config.site.path + 'js/libs.js')
-    script(type='text/javascript', src=config.site.path + 'js/app.js')
+    script(type='text/javascript', src=config.site.path + 'js/manifest.js')
+    script(type='text/javascript', src=config.site.path + 'js/vendor.js')
+    script(type='text/javascript', src=config.site.path + 'js/client.js')
 
     block head