feat: updated icons to Nucleo

client/js/components/editor-codeblock.vue

@@ -27,100 +27,102 @@
 </template>
 
 <script>
-  let codeEditor
-  let ace
+let codeEditor
+let ace
 
-  export default {
-    name: 'editor-codeblock',
-    data () {
-      return {
-        modes: [],
-        modeSelected: 'text',
-        modelistLoaded: [],
-        isLoading: false
-      }
-    },
-    computed: {
-      content () {
-        return this.$store.state.editorCodeblock.content
-      },
-      isShown () {
-        return this.$store.state.editorCodeblock.shown
-      }
-    },
-    watch: {
-      modeSelected(val, oldVal) {
-        this.loadMode(val)
-      }
+export default {
+  name: 'editor-codeblock',
+  data() {
+    return {
+      modes: [],
+      modeSelected: 'text',
+      modelistLoaded: [],
+      isLoading: false
+    }
+  },
+  computed: {
+    content() {
+      return this.$store.state.editorCodeblock.content
     },
-    methods: {
-      init () {
-        let self = this
-        self._.delay(() => {
-          codeEditor = ace.edit('codeblock-editor')
-          codeEditor.setTheme('ace/theme/tomorrow_night')
-          codeEditor.getSession().setMode('ace/mode/' + self.modeSelected)
-          codeEditor.setOption('fontSize', '14px')
-          codeEditor.setOption('hScrollBarAlwaysVisible', false)
-          codeEditor.setOption('wrap', true)
-          codeEditor.setOption('showPrintMargin', false)
+    isShown() {
+      return this.$store.state.editorCodeblock.shown
+    }
+  },
+  watch: {
+    modeSelected(val, oldVal) {
+      this.loadMode(val)
+    }
+  },
+  methods: {
+    init() {
+      let self = this
+      self._.delay(() => {
+        codeEditor = ace.edit('codeblock-editor')
+        codeEditor.setTheme('ace/theme/tomorrow_night')
+        codeEditor.getSession().setMode('ace/mode/' + self.modeSelected)
+        codeEditor.setOption('fontSize', '14px')
+        codeEditor.setOption('hScrollBarAlwaysVisible', false)
+        codeEditor.setOption('wrap', true)
+        codeEditor.setOption('useSoftTabs', true)
+        codeEditor.setOption('tabSize', 2)
+        codeEditor.setOption('showPrintMargin', false)
 
-          codeEditor.setValue(self.content)
+        codeEditor.setValue(self.content)
 
-          codeEditor.focus()
-          codeEditor.renderer.updateFull()
-        }, 100)
-      },
-      loadMode (m) {
-        let self = this
-        if (self._.includes(self.modelistLoaded, m)) {
-          codeEditor.getSession().setMode('ace/mode/' + m)
-        } else {
-          self.isLoading = true
-          self.$http.get('/js/ace/mode-' + m + '.js').then(resp => {
-            if(resp.ok) {
-              eval(resp.bodyText)
-              self.modelistLoaded.push(m)
-              ace.acequire('ace/mode/' + m)
-              codeEditor.getSession().setMode('ace/mode/' + m)
-              self._.delay(() => { self.isLoading = false }, 500)
-            } else {
-              this.$store.dispatch('alert', {
-                style: 'red',
-                icon: 'square-cross',
-                msg: self.$t('editor.codeblockloadingerror')
-              })
-            }
-          }).catch(err => {
-            his.$store.dispatch('alert', {
+        codeEditor.focus()
+        codeEditor.renderer.updateFull()
+      }, 100)
+    },
+    loadMode(m) {
+      let self = this
+      if (self._.includes(self.modelistLoaded, m)) {
+        codeEditor.getSession().setMode('ace/mode/' + m)
+      } else {
+        self.isLoading = true
+        self.$http.get('/js/ace/mode-' + m + '.js').then(resp => {
+          if (resp.ok) {
+            eval(resp.bodyText)
+            self.modelistLoaded.push(m)
+            ace.acequire('ace/mode/' + m)
+            codeEditor.getSession().setMode('ace/mode/' + m)
+            self._.delay(() => { self.isLoading = false }, 500)
+          } else {
+            this.$store.dispatch('alert', {
               style: 'red',
               icon: 'square-cross',
-              msg: 'Error: ' + err.body.msg
+              msg: self.$t('editor.codeblockloadingerror')
             })
+          }
+        }).catch(err => {
+          his.$store.dispatch('alert', {
+            style: 'red',
+            icon: 'square-cross',
+            msg: 'Error: ' + err.body.msg
           })
-        }
-      },
-      cancel () {
-        codeEditor.destroy()
-        this.$store.dispatch('editorCodeblock/close')
-      },
-      insertCode () {
-        let codeBlockText = '\n```' + this.modeSelected + '\n' + codeEditor.getValue() + '\n```\n'
-        this.$store.dispatch('editor/insert', codeBlockText)
-        this.$store.dispatch('alert', {
-          style: 'blue',
-          icon: 'inbox',
-          msg: this.$t('editor.codeblocksuccess')
         })
-        this.cancel()
       }
     },
-    mounted() {
-      FuseBox.import('/js/ace/ace.js', (acePkg) => {
-        ace = acePkg
-        this.modes = ace.acequire('ace/ext/modelist').modesByName
+    cancel() {
+      codeEditor.destroy()
+      this.$store.dispatch('editorCodeblock/close')
+    },
+    insertCode() {
+      let codeBlockText = '\n```' + this.modeSelected + '\n' + codeEditor.getValue() + '\n```\n'
+      this.$store.dispatch('editor/insert', codeBlockText)
+      this.$store.dispatch('alert', {
+        style: 'blue',
+        icon: 'inbox',
+        msg: this.$t('editor.codeblocksuccess')
       })
-      this.$root.$on('editorCodeblock/init', this.init)
+      this.cancel()
     }
+  },
+  mounted() {
+    FuseBox.import('/js/ace/ace.js', (acePkg) => {
+      ace = acePkg
+      this.modes = ace.acequire('ace/ext/modelist').modesByName
+    })
+    this.$root.$on('editorCodeblock/init', this.init)
   }
+}
 </script>

client/js/components/editor-file.vue

@@ -13,15 +13,15 @@
                 i
             .modal-toolbar.is-green
               a.button(@click='newFolder')
-                i.icon-folder2
+                i.nc-icon-outline.files_folder-14
                 span {{ $t('editor.newfolder') }}
               a.button#btn-editor-file-upload
-                i.icon-cloud-upload
+                i.nc-icon-outline.arrows-1_cloud-upload-94
                 span {{ (mode === 'file') ? $t('editor.fileupload') : $t('editor.imageupload') }}
                 label
                   input(type='file', multiple, :disabled='isLoading', ref='editorFileUploadInput')
               a.button(v-if='mode === "image"', @click='fetchFromUrl')
-                i.icon-cloud-download
+                i.nc-icon-outline.arrows-1_cloud-download-93
                 span Fetch from URL
             section.is-gapless
               .columns.is-stretched
@@ -30,7 +30,7 @@
                   ul.model-sidebar-list
                     li(v-for='fld in folders')
                       a(@click='selectFolder(fld)', :class='{ "is-active": currentFolder === fld }')
-                        i.icon-folder2
+                        i.nc-icon-outline.files_folder-17
                         span / {{ fld }}
                   .model-sidebar-header(v-if='mode === "image"') Alignment
                   .model-sidebar-content(v-if='mode === "image"')

client/js/components/editor.component.js

@@ -81,37 +81,37 @@ export default {
             name: 'heading-1',
             action: SimpleMDE.toggleHeading1,
             className: 'icon-header fa-header-x fa-header-1',
-            title: 'Big Heading'
+            title: 'Header (Level 1)'
           },
           {
             name: 'heading-2',
             action: SimpleMDE.toggleHeading2,
             className: 'icon-header fa-header-x fa-header-2',
-            title: 'Medium Heading'
+            title: 'Header (Level 2)'
           },
           {
             name: 'heading-3',
             action: SimpleMDE.toggleHeading3,
             className: 'icon-header fa-header-x fa-header-3',
-            title: 'Small Heading'
+            title: 'Header (Level 3)'
           },
           {
             name: 'quote',
             action: SimpleMDE.toggleBlockquote,
-            className: 'icon-quote-left',
+            className: 'nc-icon-outline text_quote',
             title: 'Quote'
           },
           '|',
           {
             name: 'unordered-list',
             action: SimpleMDE.toggleUnorderedList,
-            className: 'icon-th-list',
+            className: 'nc-icon-outline text_list-bullet',
             title: 'Bullet List'
           },
           {
             name: 'ordered-list',
             action: SimpleMDE.toggleOrderedList,
-            className: 'icon-list-ol',
+            className: 'nc-icon-outline text_list-numbers',
             title: 'Numbered List'
           },
           '|',
@@ -121,7 +121,7 @@ export default {
               window.alert('Coming soon!')
               // todo
             },
-            className: 'icon-link2',
+            className: 'nc-icon-outline ui-2_link-68',
             title: 'Insert Link'
           },
           {
@@ -129,7 +129,7 @@ export default {
             action: (editor) => {
               self.$store.dispatch('editorFile/open', { mode: 'image' })
             },
-            className: 'icon-image',
+            className: 'nc-icon-outline design_image',
             title: 'Insert Image'
           },
           {
@@ -137,7 +137,7 @@ export default {
             action: (editor) => {
               self.$store.dispatch('editorFile/open', { mode: 'file' })
             },
-            className: 'icon-paper',
+            className: 'nc-icon-outline files_zip-54',
             title: 'Insert File'
           },
           {
@@ -145,7 +145,7 @@ export default {
             action: (editor) => {
               self.$store.dispatch('editorVideo/open')
             },
-            className: 'icon-video-camera2',
+            className: 'nc-icon-outline media-1_video-64',
             title: 'Insert Video Player'
           },
           '|',
@@ -165,7 +165,7 @@ export default {
               })
               editor.codemirror.doc.replaceSelections(curSel)
             },
-            className: 'icon-terminal',
+            className: 'nc-icon-outline arrows-4_enlarge-46',
             title: 'Inline Code'
           },
           {
@@ -175,7 +175,7 @@ export default {
                 initialContent: (mde.codemirror.doc.somethingSelected()) ? mde.codemirror.doc.getSelection() : ''
               })
             },
-            className: 'icon-code',
+            className: 'nc-icon-outline design_code',
             title: 'Code Block'
           },
           '|',
@@ -185,13 +185,13 @@ export default {
               window.alert('Coming soon!')
               // todo
             },
-            className: 'icon-table',
+            className: 'nc-icon-outline ui-2_grid-square',
             title: 'Insert Table'
           },
           {
             name: 'horizontal-rule',
             action: SimpleMDE.drawHorizontalRule,
-            className: 'icon-minus2',
+            className: 'nc-icon-outline design_distribute-vertical',
             title: 'Horizontal Rule'
           }
         ],

client/scss/app.scss

@@ -27,6 +27,7 @@ $primary: 'indigo';
 @import 'components/table';
 @import 'components/typography';
 
+@import 'libs/nucleo-icons';
 @import 'libs/twemoji-awesome';
 @import 'libs/jquery-contextmenu';
 @import 'node_modules/highlight.js/styles/atom-one-dark';

client/scss/base/mixins.scss

@@ -140,3 +140,23 @@
     @content;
   }
 }
+
+// Nucleo Icons
+
+@mixin nc-rotate($degrees, $rotation) {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
+  -webkit-transform: rotate($degrees);
+  -moz-transform: rotate($degrees);
+  -ms-transform: rotate($degrees);
+  -o-transform: rotate($degrees);
+  transform: rotate($degrees);
+}
+
+@mixin nc-flip($horiz, $vert, $rotation) {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
+  -webkit-transform: scale($horiz, $vert);
+  -moz-transform: scale($horiz, $vert);
+  -ms-transform: scale($horiz, $vert);
+  -o-transform: scale($horiz, $vert);
+  transform: scale($horiz, $vert);
+}

fuse.js

@@ -81,7 +81,7 @@ let globalTasks = require('./.build/_tasks')
 globalTasks.then(() => {
   let fuse = fsbx.FuseBox.init({
     homeDir: './client',
-    output: './assets/js/$name.min.js',
+    output: './assets/js/$name.js',
     alias: ALIASES,
     shim: SHIMS,
     plugins: [
@@ -90,10 +90,25 @@ globalTasks.then(() => {
       ['.scss', fsbx.SassPlugin({ outputStyle: (dev) ? 'nested' : 'compressed' }), fsbx.CSSPlugin()],
       fsbx.BabelPlugin({ comments: false, presets: ['es2015'] }),
       fsbx.JSONPlugin(),
-      !dev && fsbx.UglifyESPlugin({
-        compress: { unused: false },
-        output: { 'max_line_len': 1000000 }
-      })
+      /* !dev && fsbx.QuantumPlugin({
+        target: 'browser',
+        uglify: true,
+        api: (core) => {
+          core.solveComputed('default/js/components/editor-codeblock.vue', {
+            mapping: '/js/ace/ace.js',
+            fn: (statement, core) => {
+              statement.setExpression(`'/js/ace/ace.js'`)
+            }
+          })
+          core.solveComputed('default/js/components/editor.component.js', {
+            mapping: '/js/simplemde/simplemde.min.js',
+            fn: (statement, core) => {
+              statement.setExpression(`'/js/simplemde/simplemde.min.js'`)
+            }
+          })
+        }
+      }) */
+      !dev && fsbx.UglifyESPlugin()
     ],
     debug: false,
     log: true
@@ -101,6 +116,7 @@ globalTasks.then(() => {
 
   const bundleVendor = fuse.bundle('vendor').instructions('~ index.js') // eslint-disable-line no-unused-vars
   const bundleApp = fuse.bundle('app').instructions('!> [index.js]')
+  // const bundleApp = fuse.bundle('app').instructions('> index.js')
   const bundleSetup = fuse.bundle('configure').instructions('> configure.js')
 
   switch (mode) {

package.json

@@ -158,6 +158,7 @@
     "twemoji-awesome": "^1.0.6",
     "typescript": "^2.3.4",
     "uglify-es": "^3.0.15",
+    "uglify-js": "^3.0.15",
     "vee-validate": "^2.0.0-rc.5",
     "vue": "^2.3.4",
     "vue-clipboards": "^1.0.2",

server/libs/markdown.js

@@ -37,7 +37,7 @@ var mkdown = md({
   .use(mdAnchor, {
     slugify: _.kebabCase,
     permalink: true,
-    permalinkClass: 'toc-anchor icon-anchor',
+    permalinkClass: 'toc-anchor nc-icon-outline location_bookmark-add',
     permalinkSymbol: '',
     permalinkBefore: true
   })

server/views/auth/login.pug

@@ -18,8 +18,8 @@ html(data-logic='login')
     link(rel='manifest', href='/manifest.json')
 
     // JS / CSS
-    script(type='text/javascript', src='/js/vendor.min.js')
-    script(type='text/javascript', src='/js/app.min.js')
+    script(type='text/javascript', src=appconfig.host + '/js/vendor.js')
+    script(type='text/javascript', src=appconfig.host + '/js/app.js')
 
   body
     #bg

server/views/common/header.pug

@@ -5,7 +5,7 @@
       block rootNavLeft
         a.nav-item(href='/')
           h1
-            i.icon-layers
+            i.nc-icon-outline.ui-2_layers
             = appconfig.title
     .nav-center
       block rootNavCenter

server/views/error-forbidden.pug

@@ -6,25 +6,25 @@ html(data-logic='error')
     meta(name='viewport', content='width=device-width, initial-scale=1')
     meta(name='theme-color', content='#009688')
     meta(name='msapplication-TileColor', content='#009688')
-    meta(name='msapplication-TileImage', content='/favicons/ms-icon-144x144.png')
+    meta(name='msapplication-TileImage', content=appconfig.host + '/favicons/ms-icon-144x144.png')
     title= appconfig.title
 
     // Favicon
     each favsize in [57, 60, 72, 76, 114, 120, 144, 152, 180]
-      link(rel='apple-touch-icon', sizes=favsize + 'x' + favsize, href='/favicons/apple-icon-' + favsize + 'x' + favsize + '.png')
-    link(rel='icon', type='image/png', sizes='192x192', href='/favicons/android-icon-192x192.png')
+      link(rel='apple-touch-icon', sizes=favsize + 'x' + favsize, href=appconfig.host + '/favicons/apple-icon-' + favsize + 'x' + favsize + '.png')
+    link(rel='icon', type='image/png', sizes='192x192', href=appconfig.host + '/favicons/android-icon-192x192.png')
     each favsize in [32, 96, 16]
-      link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href='/favicons/favicon-' + favsize + 'x' + favsize + '.png')
-    link(rel='manifest', href='/manifest.json')
+      link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href=appconfig.host + '/favicons/favicon-' + favsize + 'x' + favsize + '.png')
+    link(rel='manifest', href=appconfig.host + '/manifest.json')
 
     // JS / CSS
-    script(type='text/javascript', src='/js/vendor.min.js')
-    script(type='text/javascript', src='/js/app.min.js')
+    script(type='text/javascript', src=appconfig.host + '/js/vendor.js')
+    script(type='text/javascript', src=appconfig.host + '/js/app.js')
 
   body(class='is-forbidden')
     .container
-      a(href='/'): img(src='/images/logo.png')
+      a(href='/'): img(src=appconfig.host + '/images/logo.png')
       h1= t('errors:forbidden')
       h2= t('errors:forbiddendetail')
-      a.button.is-amber.is-inverted(href='/')= t('errors:actions.gohome')
-      a.button.is-amber.is-inverted(href='/login')= t('errors:actions.loginas')
+      a.button.is-amber.is-inverted(href=appconfig.host + '/')= t('errors:actions.gohome')
+      a.button.is-amber.is-inverted(href=appconfig.host + '/login')= t('errors:actions.loginas')

server/views/error-notexist.pug

@@ -6,25 +6,25 @@ html(data-logic='error')
     meta(name='viewport', content='width=device-width, initial-scale=1')
     meta(name='theme-color', content='#009688')
     meta(name='msapplication-TileColor', content='#009688')
-    meta(name='msapplication-TileImage', content='/favicons/ms-icon-144x144.png')
+    meta(name='msapplication-TileImage', content=appconfig.host + '/favicons/ms-icon-144x144.png')
     title= appconfig.title
 
     // Favicon
     each favsize in [57, 60, 72, 76, 114, 120, 144, 152, 180]
-      link(rel='apple-touch-icon', sizes=favsize + 'x' + favsize, href='/favicons/apple-icon-' + favsize + 'x' + favsize + '.png')
-    link(rel='icon', type='image/png', sizes='192x192', href='/favicons/android-icon-192x192.png')
+      link(rel='apple-touch-icon', sizes=favsize + 'x' + favsize, href=appconfig.host + '/favicons/apple-icon-' + favsize + 'x' + favsize + '.png')
+    link(rel='icon', type='image/png', sizes='192x192', href=appconfig.host + '/favicons/android-icon-192x192.png')
     each favsize in [32, 96, 16]
-      link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href='/favicons/favicon-' + favsize + 'x' + favsize + '.png')
-    link(rel='manifest', href='/manifest.json')
+      link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href=appconfig.host + '/favicons/favicon-' + favsize + 'x' + favsize + '.png')
+    link(rel='manifest', href=appconfig.host + '/manifest.json')
 
     // JS / CSS
-    script(type='text/javascript', src='/js/vendor.min.js')
-    script(type='text/javascript', src='/js/app.min.js')
+    script(type='text/javascript', src=appconfig.host + '/js/vendor.js')
+    script(type='text/javascript', src=appconfig.host + '/js/app.js')
 
   body(class='is-notexist')
     .container
-      a(href='/'): img(src='/images/logo.png')
+      a(href='/'): img(src=appconfig.host + '/images/logo.png')
       h1 !{message}
       h2= t('errors:notexistdetail')
-      a.button.is-amber.is-inverted.is-featured(href='/create/' + newpath)= t('errors:actions.create')
-      a.button.is-amber.is-inverted(href='/')= t('errors:actions.gohome')
+      a.button.is-amber.is-inverted.is-featured(href=appconfig.host + '/create/' + newpath)= t('errors:actions.create')
+      a.button.is-amber.is-inverted(href=appconfig.host + '/')= t('errors:actions.gohome')

server/views/error.pug

@@ -6,27 +6,27 @@ html(data-logic='error')
     meta(name='viewport', content='width=device-width, initial-scale=1')
     meta(name='theme-color', content='#009688')
     meta(name='msapplication-TileColor', content='#009688')
-    meta(name='msapplication-TileImage', content='/favicons/ms-icon-144x144.png')
+    meta(name='msapplication-TileImage', content=appconfig.host + '/favicons/ms-icon-144x144.png')
     title= appconfig.title
 
     // Favicon
     each favsize in [57, 60, 72, 76, 114, 120, 144, 152, 180]
-      link(rel='apple-touch-icon', sizes=favsize + 'x' + favsize, href='/favicons/apple-icon-' + favsize + 'x' + favsize + '.png')
-    link(rel='icon', type='image/png', sizes='192x192', href='/favicons/android-icon-192x192.png')
+      link(rel='apple-touch-icon', sizes=favsize + 'x' + favsize, href=appconfig.host + '/favicons/apple-icon-' + favsize + 'x' + favsize + '.png')
+    link(rel='icon', type='image/png', sizes='192x192', href=appconfig.host + '/favicons/android-icon-192x192.png')
     each favsize in [32, 96, 16]
-      link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href='/favicons/favicon-' + favsize + 'x' + favsize + '.png')
-    link(rel='manifest', href='/manifest.json')
+      link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href=appconfig.host + '/favicons/favicon-' + favsize + 'x' + favsize + '.png')
+    link(rel='manifest', href=appconfig.host + '/manifest.json')
 
     // JS / CSS
-    script(type='text/javascript', src='/js/vendor.min.js')
-    script(type='text/javascript', src='/js/app.min.js')
+    script(type='text/javascript', src=appconfig.host + '/js/vendor.js')
+    script(type='text/javascript', src=appconfig.host + '/js/app.js')
 
   body(class='is-error')
     .container
-      a(href='/'): img(src='/images/logo.png')
+      a(href='/'): img(src=appconfig.host + '/images/logo.png')
       h1= message
       h2= t('errors:generic')
-      a.button.is-amber.is-inverted.is-featured(href='/')= t('errors:actions.gohome')
+      a.button.is-amber.is-inverted.is-featured(href=appconfig.host + '/')= t('errors:actions.gohome')
 
       if error.stack
         h3= t('errors:debugmsg')

server/views/layout.pug

@@ -6,16 +6,16 @@ html
     meta(name='viewport', content='width=device-width, initial-scale=1')
     meta(name='theme-color', content='#009688')
     meta(name='msapplication-TileColor', content='#009688')
-    meta(name='msapplication-TileImage', content='/favicons/ms-icon-144x144.png')
+    meta(name='msapplication-TileImage', content=appconfig.host + '/favicons/ms-icon-144x144.png')
     title= appconfig.title
 
     //- Favicon
     each favsize in [57, 60, 72, 76, 114, 120, 144, 152, 180]
-      link(rel='apple-touch-icon', sizes=favsize + 'x' + favsize, href='/favicons/apple-icon-' + favsize + 'x' + favsize + '.png')
-    link(rel='icon', type='image/png', sizes='192x192', href='/favicons/android-icon-192x192.png')
+      link(rel='apple-touch-icon', sizes=favsize + 'x' + favsize, href=appconfig.host + '/favicons/apple-icon-' + favsize + 'x' + favsize + '.png')
+    link(rel='icon', type='image/png', sizes='192x192', href=appconfig.host + '/favicons/android-icon-192x192.png')
     each favsize in [32, 96, 16]
-      link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href='/favicons/favicon-' + favsize + 'x' + favsize + '.png')
-    link(rel='manifest', href='/manifest.json')
+      link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href=appconfig.host + '/favicons/favicon-' + favsize + 'x' + favsize + '.png')
+    link(rel='manifest', href=appconfig.host + '/manifest.json')
 
     //- Site Lang
     script.
@@ -23,8 +23,8 @@ html
       var siteRoot = '!{appconfig.host}';
 
     //- JS / CSS
-    script(type='text/javascript', src='/js/vendor.min.js')
-    script(type='text/javascript', src='/js/app.min.js')
+    script(type='text/javascript', src=appconfig.host + '/js/vendor.js')
+    script(type='text/javascript', src=appconfig.host + '/js/app.js')
 
     block head
 

server/views/pages/admin/_layout.pug

@@ -7,7 +7,7 @@ block rootNavRight
   loading-spinner
   .nav-item
     a.button.btn-edit-discard(href='/')
-      i.icon-home
+      i.nc-icon-outline.ui-1_home-minimal
       span= t('nav.root')
 
 block content
@@ -24,7 +24,7 @@ block content
             ul.sidebar-menu
               li
                 a(href='/')
-                  i.icon-home
+                  i.nc-icon-outline.ui-1_home-minimal
                   span= t('nav.root')
 
           aside
@@ -33,20 +33,20 @@ block content
             ul.sidebar-menu
               li
                 a(href='/admin/profile')
-                  i.icon-user
+                  i.nc-icon-outline.users_circle-10
                   span= t('nav.myprofile')
               li
                 a(href='/admin/stats')
-                  i.icon-bar-graph-2
+                  i.nc-icon-outline.ui-3_chart-bars
                   span= t('nav.stats')
               if rights.manage
                 li
                   a(href='/admin/users')
-                    i.icon-users
+                    i.nc-icon-outline.users_multiple-19
                     span= t('nav.users')
                 li
                   a(href='/admin/settings')
-                    i.icon-cog
+                    i.nc-icon-outline.ui-1_settings-gear-63
                     span= t('nav.syssettings')
                 //-li
                   a(href='/admin/theme')
@@ -54,7 +54,7 @@ block content
                     span= t('nav.theme')
               li
                 a(href='/logout')
-                  i.icon-delete2
+                  i.nc-icon-outline.arrows-1_log-out
                   span= t('nav.logout')
 
         .column

server/views/pages/admin/profile.pug

@@ -29,21 +29,21 @@ block adminContent
             section
               label.label #{t('admin:profile.tfa')}: #[strong.is-red(v-cloak) {{ tfaStatus }}] 
               button.button.is-blue(@click='$store.dispatch("modalProfile2fa/open")', :disabled='tfaIsActive')
-                i.icon-circle-plus
+                i.nc-icon-outline.ui-1_circle-add
                 span= t('admin:profile.tfaenable')
               button.button.is-blue(@click='saveUser', :disabled='!tfaIsActive')
-                i.icon-circle-minus
+                i.nc-icon-outline.ui-1_circle-delete
                 span= t('admin:profile.tfadisable')
             section
               button.button.is-green(@click='saveUser')
-                i.icon-check
+                i.nc-icon-outline.ui-1_check
                 span= t('admin:profile.savechanges')
       .column
         .panel-aside
           label.label= t('admin:profile.provider')
           p.control.account-profile-provider
             case user.provider
-              when 'local': i.icon-server
+              when 'local': i.nc-icon-outline.ui-1_database
               when 'windowslive': i.icon-windows2.is-blue
               when 'azure': i.icon-windows2.is-blue
               when 'google': i.icon-google.is-blue

server/views/pages/admin/users-edit.pug

@@ -4,7 +4,7 @@ block rootNavRight
   loading-spinner
   .nav-item
     a.button(href='/admin/users')
-      i.icon-reply
+      i.nc-icon-outline.arrows-2_corner-left-round
       span= t('admin:users.returntousers')
 
 block adminContent
@@ -25,7 +25,7 @@ block adminContent
             td.is-centered= usr._id
             td.is-centered.has-icons
               case usr.provider
-                when 'local': i.icon-server
+                when 'local': i.nc-icon-outline.ui-1_database
                 when 'windowslive': i.icon-windows2.is-blue
                 when 'azure': i.icon-windows2.is-blue
                 when 'google': i.icon-google.is-blue
@@ -64,8 +64,8 @@ block adminContent
             tbody
               tr(v-for='(right, idx) in rights', v-cloak)
                 td.is-icon
-                  i.icon-marquee-plus.is-green(v-if='right.deny === false || right.deny === "false"')
-                  i.icon-marquee-minus.is-red(v-if='right.deny === true || right.deny === "true"')
+                  i.nc-icon-outline.ui-2_square-add-08.is-green(v-if='right.deny === false || right.deny === "false"')
+                  i.nc-icon-outline.ui-2_square-delete-10.is-red(v-if='right.deny === true || right.deny === "true"')
                 td
                   p.control.is-fullwidth
                     select(v-model='right.role')
@@ -94,7 +94,7 @@ block adminContent
                 td.is-centered.has-action-icons
           .table-actions
             button.button.is-blue(v-on:click='addRightsRow')
-              i.icon-plus
+              i.nc-icon-outline.ui-1_simple-add
               span Add New Row
         section
           label.label Role Override
@@ -106,16 +106,16 @@ block adminContent
           .column
             section
               button.button.is-green(v-on:click='saveUser')
-                i.icon-check
+                i.nc-icon-outline.ui-1_check
                 span Save Changes
               a.button.button.is-grey.is-outlined(href='/admin/users')
-                i.icon-cancel
+                i.nc-icon-outline.ui-1_simple-remove
                 span Discard
           .column.is-narrow
             section
               if usrOpts.canBeDeleted
                 button.button.is-red(v-on:click='$store.dispatch("modalDeleteUser/open")')
-                  i.icon-trash2
+                  i.nc-icon-outline.ui-1_trash
                   span Delete Account
 
   modal-delete-user(current-user=usr._id)

server/views/pages/admin/users.pug

@@ -4,7 +4,7 @@ block rootNavRight
   loading-spinner
   .nav-item
     a.button(v-on:click='$store.dispatch("modalCreateUser/open")')
-      i.icon-plus
+      i.nc-icon-outline.ui-1_simple-add
       span= t('admin:users.createauthorize')
 
 block adminContent
@@ -24,13 +24,13 @@ block adminContent
       each usr in usrs
         tr
           td.is-icon
-            i.icon-user.is-grey
+            i.nc-icon-outline.users_single-05.is-grey
           td
             a(href='/admin/users/' + usr._id)= usr.name
           td= usr.email
           td.is-centered.has-icons
             case usr.provider
-              when 'local': i.icon-server
+              when 'local': i.nc-icon-outline.ui-1_database
               when 'windowslive': i.icon-windows2.is-blue
               when 'azure': i.icon-windows2.is-blue
               when 'google': i.icon-google.is-blue

server/views/pages/all.pug

@@ -9,16 +9,16 @@ block content
         ul.sidebar-menu
           li
             a(href='/')
-              i.icon-home
+              i.nc-icon-outline.ui-1_home-minimal
               span= t('nav.root')
           if !isGuest
             li
               a(href='/admin')
-                i.icon-cog
+                i.nc-icon-outline.ui-1_settings-gear-63
                 span= t('nav.account')
           else
             li
               a(href='/login')
-                i.icon-unlock
+                i.nc-icon-outline.arrows-1_log-in
                 span= t('nav.login')
     tree

server/views/pages/create.pug

@@ -7,10 +7,10 @@ block rootNavRight
   loading-spinner
   span.nav-item
     a.button.is-outlined(v-on:click='$store.dispatch("modalDiscardPage/open")')
-      i.icon-cross
+      i.nc-icon-outline.ui-1_simple-remove
       span= t('nav.discard')
     a.button(v-on:click='$root.$emit("editor/save")')
-      i.icon-check
+      i.nc-icon-outline.ui-1_check
       span= t('nav.savedocument')
 
 block content

server/views/pages/edit.pug

@@ -7,10 +7,10 @@ block rootNavRight
   loading-spinner
   span.nav-item
     a.button.is-outlined(v-on:click='$store.dispatch("modalDiscardPage/open")')
-      i.icon-cross
+      i.nc-icon-outline.ui-1_simple-remove
       span= t('nav.discard')
     a.button(v-on:click='$root.$emit("editor/save")')
-      i.icon-check
+      i.nc-icon-outline.ui-1_check
       span= t('nav.savechanges')
 
 block content

server/views/pages/source.pug

@@ -8,17 +8,17 @@ block rootNavRight
   span.nav-item
     if rights.write && pageData.meta.path !== 'home'
       a.button.is-outlined(v-on:click='$store.dispatch("modalMovePage/open")')
-        i.icon-shuffle
+        i.nc-icon-outline.arrows-1_shuffle-98
         span= t('nav.move')
     a.button.is-outlined(href='/' + pageData.meta.path)
-      i.icon-loader
+      i.nc-icon-outline.ui-2_book
       span= t('nav.normalview')
     if rights.write
       a.button.is-orange(href='/edit/' + pageData.meta.path)
-        i.icon-document-text
+        i.nc-icon-outline.ui-1_edit-76
         span= t('nav.edit')
       a.button(v-on:click='$store.dispatch("modalCreatePage/open")')
-        i.icon-plus
+        i.nc-icon-outline.ui-1_simple-add
         span= t('nav.create')
 
 block content

server/views/pages/view.pug

@@ -13,20 +13,20 @@ block rootNavRight
   .nav-item
     if rights.write && pageData.meta.path !== 'home'
       a.button.is-outlined(v-on:click='$store.dispatch("modalMovePage/open")')
-        i.icon-shuffle
+        i.nc-icon-outline.arrows-1_shuffle-98
         span= t('nav.move')
     a.button.is-outlined(href='/source/' + pageData.meta.path)
-      i.icon-loader
+      i.nc-icon-outline.education_paper
       span= t('nav.source')
     //- a.button.is-outlined(href='/hist/' + pageData.meta.path)
       i.icon-clock
       span= t('nav.history')
     if rights.write
       a.button(href='/edit/' + pageData.meta.path)
-        i.icon-document-text
+        i.nc-icon-outline.ui-1_edit-76
         span= t('nav.edit')
       a.button(v-on:click='$store.dispatch("modalCreatePage/open")')
-        i.icon-plus
+        i.nc-icon-outline.ui-1_simple-add
         span= t('nav.create')
 
 block content
@@ -43,11 +43,11 @@ block content
             ul.sidebar-menu
               li
                 a(href='/')
-                  i.icon-home
+                  i.nc-icon-outline.ui-1_home-minimal
                   span= t('nav.root')
               li
                 a(href='/all')
-                  i.icon-paper
+                  i.nc-icon-outline.business_hierarchy-55
                   span= t('nav.allpages')
               if pageData.parent
                 li
@@ -57,12 +57,12 @@ block content
               if !isGuest
                 li
                   a(href='/admin')
-                    i.icon-cog
+                    i.nc-icon-outline.ui-1_settings-gear-63
                     span= t('nav.settings')
               else
                 li
                   a(href='/login')
-                    i.icon-unlock
+                    i.nc-icon-outline.arrows-1_log-in
                     span= t('nav.login')
           aside.sidebar-pagecontents
             .sidebar-label