Updates

_assets/build/webpack.base.conf.js

@@ -2,6 +2,8 @@ var path = require('path')
 var utils = require('./utils')
 var config = require('./config')
 var vueLoaderConfig = require('./vue-loader.conf')
+var CopyWebpackPlugin = require('copy-webpack-plugin')
+var UglifyJS = require('uglify-js')
 
 function resolve (dir) {
   return path.join(__dirname, '..', dir)
@@ -41,11 +43,6 @@ module.exports = {
         loader: 'vue-loader',
         options: vueLoaderConfig
       },
-      {
-        test: /\.css$/,
-        include: /node_modules/,
-        loader: 'style!css'
-      },
       {
         test: /\.js$/,
         loader: 'babel-loader',
@@ -68,5 +65,25 @@ module.exports = {
         }
       }
     ]
-  }
+  },
+  plugins: [
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.dev.assetsSubDirectory,
+        ignore: ['.*']
+      },
+      {
+        from: path.resolve(__dirname, '../node_modules/codemirror/mode/*/*'),
+        to: path.join(config.build.assetsSubDirectory, 'js/codemirror/mode/[name]/[name].js'),
+        transform: function (source, path) {
+          let result = UglifyJS.minify(source.toString('utf8'))
+          if (result.error !== undefined) {
+            return source
+          }
+          return result.code
+        }
+      }
+    ])
+  ]
 }

_assets/build/webpack.dev.conf.js

@@ -5,7 +5,6 @@ var webpack = require('webpack')
 var config = require('./config')
 var merge = require('webpack-merge')
 var baseWebpackConfig = require('./webpack.base.conf')
-var CopyWebpackPlugin = require('copy-webpack-plugin')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
 var ExtractTextPlugin = require('extract-text-webpack-plugin')
 var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
@@ -65,14 +64,6 @@ module.exports = merge(baseWebpackConfig, {
     new webpack.optimize.CommonsChunkPlugin({
       name: 'manifest',
       chunks: ['vendor']
-    }),
+    })
-    // copy custom static assets
-    new CopyWebpackPlugin([
-      {
-        from: path.resolve(__dirname, '../static'),
-        to: config.dev.assetsSubDirectory,
-        ignore: ['.*']
-      }
-    ])
   ]
 })

_assets/build/webpack.prod.conf.js

@@ -88,14 +88,6 @@ var webpackConfig = merge(baseWebpackConfig, {
       name: 'manifest',
       chunks: ['vendor']
     }),
-    // copy custom static assets
-    new CopyWebpackPlugin([
-      {
-        from: path.resolve(__dirname, '../static'),
-        to: config.build.assetsSubDirectory,
-        ignore: ['.*']
-      }
-    ]),
     // service worker caching
     new SWPrecacheWebpackPlugin({
       cacheId: 'File Manager',

_assets/package.json

@@ -12,8 +12,8 @@
   "dependencies": {
     "codemirror": "^5.27.4",
     "filesize": "^3.5.10",
-    "hammerjs": "^2.0.8",
     "moment": "^2.18.1",
+    "normalize.css": "^7.0.0",
     "vue": "^2.3.3",
     "vue-router": "^2.7.0",
     "vuex": "^2.3.1"
@@ -21,7 +21,6 @@
   "devDependencies": {
     "autoprefixer": "^6.7.2",
     "babel-core": "^6.22.1",
-    "sw-precache-webpack-plugin": "^0.9.1",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.10",
     "babel-plugin-transform-runtime": "^6.22.0",
@@ -33,10 +32,10 @@
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.28.0",
     "eslint": "^3.19.0",
+    "eslint-config-standard": "^6.2.1",
     "eslint-friendly-formatter": "^2.0.7",
     "eslint-loader": "^1.7.1",
     "eslint-plugin-html": "^2.0.0",
-    "eslint-config-standard": "^6.2.1",
     "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-standard": "^2.0.1",
     "eventsource-polyfill": "^0.9.6",
@@ -46,18 +45,20 @@
     "friendly-errors-webpack-plugin": "^1.1.3",
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.3",
-    "webpack-bundle-analyzer": "^2.2.1",
-    "semver": "^5.3.0",
-    "shelljs": "^0.7.6",
     "opn": "^4.0.2",
     "optimize-css-assets-webpack-plugin": "^1.3.0",
     "ora": "^1.2.0",
     "rimraf": "^2.6.0",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "sw-precache-webpack-plugin": "^0.9.1",
+    "uglify-js": "^3.0.23",
     "url-loader": "^0.5.8",
     "vue-loader": "^12.1.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.3.3",
     "webpack": "^2.6.1",
+    "webpack-bundle-analyzer": "^2.2.1",
     "webpack-dev-middleware": "^1.10.0",
     "webpack-hot-middleware": "^2.18.0",
     "webpack-merge": "^4.1.0"

_assets/src/codemirror/index.js

@@ -0,0 +1,60 @@
+// Most of the code from this file comes from:
+// https://github.com/codemirror/CodeMirror/blob/master/addon/mode/loadmode.js
+import * as CodeMirror from 'codemirror'
+
+// Make CodeMirror available globally so the modes' can register themselves.
+window.CodeMirror = CodeMirror
+
+if (!CodeMirror.modeURL) CodeMirror.modeURL = '../mode/%N/%N.js'
+
+var loading = {}
+
+function splitCallback (cont, n) {
+  var countDown = n
+  return function () {
+    if (--countDown === 0) cont()
+  }
+}
+
+function ensureDeps (mode, cont) {
+  var deps = CodeMirror.modes[mode].dependencies
+  if (!deps) return cont()
+  var missing = []
+  for (var i = 0; i < deps.length; ++i) {
+    if (!CodeMirror.modes.hasOwnProperty(deps[i])) missing.push(deps[i])
+  }
+  if (!missing.length) return cont()
+  var split = splitCallback(cont, missing.length)
+  for (i = 0; i < missing.length; ++i) CodeMirror.requireMode(missing[i], split)
+}
+
+CodeMirror.requireMode = function (mode, cont) {
+  if (typeof mode !== 'string') mode = mode.name
+  if (CodeMirror.modes.hasOwnProperty(mode)) return ensureDeps(mode, cont)
+  if (loading.hasOwnProperty(mode)) return loading[mode].push(cont)
+
+  var file = CodeMirror.modeURL.replace(/%N/g, mode)
+
+  var script = document.createElement('script')
+  script.src = file
+  var others = document.getElementsByTagName('script')[0]
+  var list = loading[mode] = [cont]
+
+  CodeMirror.on(script, 'load', function () {
+    ensureDeps(mode, function () {
+      for (var i = 0; i < list.length; ++i) list[i]()
+    })
+  })
+
+  others.parentNode.insertBefore(script, others)
+}
+
+CodeMirror.autoLoadMode = function (instance, mode) {
+  if (CodeMirror.modes.hasOwnProperty(mode)) return
+
+  CodeMirror.requireMode(mode, function () {
+    instance.setOption('mode', mode)
+  })
+}
+
+export default CodeMirror

_assets/src/components/Editor.vue

@@ -1,18 +1,16 @@
 <template>
     <form id="editor">
         <h2 v-if="hasMetadata">Metadata</h2>
+        <textarea v-if="hasMetadata" id="metadata">{{ req.metadata }}</textarea>
 
         <h2 v-if="hasMetadata">Body</h2>
-
+        <textarea id="content">{{ req.content }}</textarea>
-        <div class="content">
-            <div id="ace"></div>
-            <textarea id="source" name="content">{{ req.content }}</textarea>
-        </div>
     </form>
 </template>
 
 <script>
 import { mapState } from 'vuex'
+import CodeMirror from '@/codemirror'
 
 export default {
   name: 'editor',
@@ -24,14 +22,29 @@ export default {
   },
   data: function () {
     return {
-      codemirror: null,
+      metadata: null,
-      simplemde: null
+      content: null
     }
   },
   mounted: function () {
+    CodeMirror.modeURL = this.$store.state.baseURL + '/static/js/codemirror/mode/%N/%N.js'
 
+    this.content = CodeMirror.fromTextArea(document.getElementById('content'), {
+      lineNumbers: (this.req.language !== 'markdown'),
+      viewportMargin: Infinity
+    })
+
+    this.metadata = CodeMirror.fromTextArea(document.getElementById('metadata'), {
+      viewportMargin: Infinity
+    })
+
+    CodeMirror.autoLoadMode(this.content, this.req.language)
   },
   methods: {
   }
 }
 </script>
+
+<style>
+
+</style>

_assets/src/components/Main.vue

@@ -171,7 +171,8 @@ export default {
   },
   created () {
     this.fetchData()
-    this.$store.commit('showHover', 'error')
+    // TODO: finish this box
+    // this.$store.commit('showHover', 'error')
   },
   watch: {
     '$route': 'fetchData',
@@ -252,8 +253,6 @@ export default {
       if (url === '') url = '/'
       if (url[0] !== '/') url = '/' + url
 
-      console.log('Going to ' + url)
-
       api.fetch(url)
       .then((trueURL) => {
         if (!url.endsWith('/') && trueURL.endsWith('/')) {

_assets/src/css/editor.css

@@ -0,0 +1,5 @@
+@import "~codemirror/lib/codemirror.css";
+
+.CodeMirror {
+  height: auto;
+}

_assets/src/css/normalize.css

@@ -1,447 +0,0 @@
-/*! 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/css/styles.css

@@ -1,9 +1,10 @@
+@import "~normalize.css/normalize.css";
 @import "./fonts.css";
-@import "./normalize.css";
 @import "./base.css";
 @import "./header.css";
 @import "./prompts.css";
 @import "./listing.css";
+@import "./editor.css";
 
 /* * * * * * * * * * * * * * * *
  *            ACTION           *