Merge branch 'master' into build-feedback

package.json

@@ -39,8 +39,11 @@
     "babelify": "^6.4.0",
     "browser-sync": "^2.10.0",
     "browserify": "^12.0.1",
+    "chalk": "^1.1.1",
     "eslint": "^1.9.0",
     "http-server": "^0.8.5",
+    "multi-glob": "^1.0.1",
+    "node-notifier": "^4.4.0",
     "node-sass": "^3.4.2",
     "nodemon": "^1.8.1",
     "phantomjs": "^1.9.18",

website/_config.yml

@@ -122,6 +122,12 @@ node_sass:
   precision: 5
   sourceComments: false
 
+postcss:
+  plugins:
+    postcss-svg:
+      paths: ['images']
+      defaults: "[fill]: #000000"
+
 # Deployment
 ## Docs: https://hexo.io/docs/deployment.html
 # deploy:

website/package.json

@@ -25,7 +25,9 @@
     "browserify": "^12.0.1",
     "chalk": "^1.1.1",
     "glob": "^6.0.1",
+    "hexo-renderer-postcss": "^1.0.1",
     "multi-glob": "^1.0.1",
+    "postcss-svg": "^1.0.4",
     "watchify": "^3.6.1"
   }
 }

website/src/examples/dragdrop/src/js/app.js

@@ -1,9 +1,8 @@
-import { DragDrop } from 'uppy/plugins';
+import Uppy from 'uppy/core';
+import { DragDrop, Tus10 } from 'uppy/plugins';
 
-console.log(DragDrop);
-
-// const uppy = new Uppy({wait: false});
-// const files = uppy
-//   .use(DragDrop, {selector: '#upload-target'})
-//   .use(Tus10, {endpoint: 'http://master.tus.io:8080'})
-//   .run();
+const uppy = new Uppy({wait: false});
+const files = uppy
+  .use(DragDrop, {selector: '#upload-target'})
+  .use(Tus10, {endpoint: 'http://master.tus.io:8080'})
+  .run();

website/src/guide/index.md

@@ -1,228 +1,42 @@
 ---
 title: Getting Started
 type: guide
-order: 1
+order: 0
 ---
 
-Let's start with a quick tour of Uppy's data binding features. If you are more interested in a high-level overview first, check out this [blog post](http://transloadit.com/blog/2015/10/25/transloadit-re-introduction/).
+> **Compatibility Note:** Uppy does not support IE8 and below.
 
-The easiest way to try out Uppy is using the [JSFiddle Hello World example](https://jsfiddle.net/yyx990803/okv0rgrk/). Feel free to open it in another tab and follow along as we go through some basic examples. If you prefer downloading / installing from a package manager, check out the [Installation](/guide/installation.html) page.
+## NPM
 
-### Hello World
+NPM is the recommended installation method when building large scale apps with Uppy. It pairs nicely with a CommonJS module bundler such as [Webpack](http://webpack.github.io/) or [Browserify](http://browserify.org/).
 
-``` html
-<div id="app">
-  {{ message }}
-</div>
-```
-``` js
-new Uppy({
-  el: '#app',
-  data: {
-    message: 'Hello Uppy!'
-  }
-})
+``` bash
+# latest stable
+$ npm install uppy
 ```
-{% raw %}
-<div id="app" class="demo">
-  {{ message }}
-</div>
-<script>
-new Uppy({
-  el: '#app',
-  data: {
-    message: 'Hello Uppy!'
-  }
-})
-</script>
-{% endraw %}
 
-### Two-way Binding
+``` javascript
+import Uppy from 'uppy/core';
+import { DragDrop, Tus10 } from 'uppy/plugins';
 
-``` html
-<div id="app">
-  <p>{{ message }}</p>
-  <input v-model="message">
-</div>
-```
-``` js
-new Uppy({
-  el: '#app',
-  data: {
-    message: 'Hello Uppy!'
-  }
-})
+const uppy = new Uppy({wait: false});
+const files = uppy
+  .use(DragDrop, {selector: '#upload-target'})
+  .use(Tus10, {endpoint: 'http://master.tus.io:8080'})
+  .run();
 ```
-{% raw %}
-<div id="app2" class="demo">
-  <p>{{ message }}</p>
-  <input v-model="message">
-</div>
-<script>
-new Uppy({
-  el: '#app2',
-  data: {
-    message: 'Hello Uppy!'
-  }
-})
-</script>
-{% endraw %}
 
-### Render a List
+## Standalone & CDN
 
 ``` html
-<div id="app">
-  <ul>
-    <li v-for="todo in todos">
-      {{ todo.text }}
-    </li>
-  </ul>
-</div>
-```
-``` js
-new Uppy({
-  el: '#app',
-  data: {
-    todos: [
-      { text: 'Learn JavaScript' },
-      { text: 'Learn Uppy' },
-      { text: 'Build Something Awesome' }
-    ]
-  }
-})
-```
-{% raw %}
-<div id="app3" class="demo">
-  <ul>
-    <li v-for="todo in todos">
-      {{ todo.text }}
-    </li>
-  </ul>
-</div>
-<script>
-new Uppy({
-  el: '#app3',
-  data: {
-    todos: [
-      { text: 'Learn JavaScript' },
-      { text: 'Learn Uppy' },
-      { text: 'Build Something Awesome' }
-    ]
-  }
-})
-</script>
-{% endraw %}
+<div id="drag-drop"></div>
 
-### Handle User Input
-
-``` html
-<div id="app">
-  <p>{{ message }}</p>
-  <button v-on:click="reverseMessage">Reverse Message</button>
-</div>
-```
-``` js
-new Uppy({
-  el: '#app',
-  data: {
-    message: 'Hello Uppy!'
-  },
-  methods: {
-    reverseMessage: function () {
-      this.message = this.message.split('').reverse().join('')
-    }
-  }
-})
-```
-{% raw %}
-<div id="app4" class="demo">
-  <p>{{ message }}</p>
-  <button v-on:click="reverseMessage">Reverse Message</button>
-</div>
+<script src="http://assets.transloadit.com/uppy.min.js" />
 <script>
-new Uppy({
-  el: '#app4',
-  data: {
-    message: 'Hello Uppy!'
-  },
-  methods: {
-    reverseMessage: function () {
-      this.message = this.message.split('').reverse().join('')
-    }
-  }
-})
+var uppy = new Uppy();
+uppy
+  .use(DragDrop, {selector: '#drag-drop'})
+  .use(Tus10, {endpoint: 'http://master.tus.io:8080'})
+  .run();
 </script>
-{% endraw %}
-
-### All Together Now
-
-``` html
-<div id="app">
-  <input v-model="newTodo" v-on:keyup.enter="addTodo">
-  <ul>
-    <li v-for="todo in todos">
-      <span>{{ todo.text }}</span>
-      <button v-on:click="removeTodo($index)">X</button>
-    </li>
-  </ul>
-</div>
-```
-``` js
-new Uppy({
-  el: '#app',
-  data: {
-    newTodo: '',
-    todos: [
-      { text: 'Add some todos' }
-    ]
-  },
-  methods: {
-    addTodo: function () {
-      var text = this.newTodo.trim()
-      if (text) {
-        this.todos.push({ text: text })
-        this.newTodo = ''
-      }
-    },
-    removeTodo: function (index) {
-      this.todos.splice(index, 1)
-    }
-  }
-})
 ```
-{% raw %}
-<div id="app5" class="demo">
-  <input v-model="newTodo" v-on:keyup.enter="addTodo">
-  <ul>
-    <li v-for="todo in todos">
-      <span>{{ todo.text }}</span>
-      <button v-on:click="removeTodo($index)">X</button>
-    </li>
-  </ul>
-</div>
-<script>
-new Uppy({
-  el: '#app5',
-  data: {
-    newTodo: '',
-    todos: [
-      { text: 'Add some todos' }
-    ]
-  },
-  methods: {
-    addTodo: function () {
-      var text = this.newTodo.trim()
-      if (text) {
-        this.todos.push({ text: text })
-        this.newTodo = ''
-      }
-    },
-    removeTodo: function (index) {
-      this.todos.splice(index, 1)
-    }
-  }
-})
-</script>
-{% endraw %}
-
-I hope this gives you a basic idea of how Uppy works. I'm sure you also have many questions now - read along, and we will cover them in the rest of the guide.

website/src/guide/installation.md

@@ -1,38 +0,0 @@
----
-title: Installation
-type: guide
-order: 0
----
-
-> **Compatibility Note:** Uppy does not support IE8 and below.
-
-## Standalone
-
-Simply download and include with a script tag. `Uppy` will be registered as a global variable. **Pro tip: don't use the minified version during development. you will miss out all the nice warnings for common mistakes.**
-
-<div id="downloads">
-<a class="button" href="/js/uppy.js" download>Development Version</a><span class="light info">With full warnings and debug mode</span>
-
-<a class="button" href="/js/uppy.min.js" download>Production Version</a><span class="light info">Warnings stripped, {{config.uppy_gz_size}}kb min+gzip</span>
-</div>
-
-### CDN
-
-Available on [assets.transloadt.com](//assets.transloadt.com/uppy/{{config.uppy_version}}/uppy.min.js) or [cdnjs](//cdnjs.cloudflare.com/ajax/libs/uppy/{{config.uppy_version}}/uppy.min.js) (takes some time to sync so the latest version might not be available yet).
-
-### CSP-compliant build
-
-Some environments, such as Google Chrome Apps, enforces Content Security Policy (CSP) and does not allow the use of `new Function()` for evaluating expressions. In these cases you can use the [CSP-compliant build](https://github.com/transloadit/uppy/tree/csp/dist) instead.
-
-## NPM
-
-NPM is the recommended installation method when building large scale apps with Uppy. It pairs nicely with a CommonJS module bundler such as [Webpack](http://webpack.github.io/) or [Browserify](http://browserify.org/). Uppy also provides accompanying tools for authoring [Single File Components](application.html#Single_File_Components).
-
-``` bash
-# latest stable
-$ npm install uppy
-# latest stable + CSP-compliant
-$ npm install uppy@csp
-# dev build (directly from GitHub):
-$ npm install transloadit/uppy#dev
-```

website/src/guide/overview.md

@@ -4,8 +4,6 @@ type: guide
 order: 2
 ---
 
-Uppy is (going to be) an uploader written in ES6 JavaScript with a plugin-based architecture, making
-it very extensible. Out of the box it supports tapping into Dropbox, Instagram, Local files. It
-has support for resumable file uploads via tus.io, and adding encoding backends.
-Uppy is brought to you by the people behind Transloadit and as such has first class
-support for adding their uploading and encoding backend, but this is opt-in.
+Uppy is (going to be) an uploader written in ES6 JavaScript with a plugin-based architecture, making it very extensible. Out of the box it supports tapping into Dropbox, Instagram, Local files. It has support for resumable file uploads via tus.io, and adding encoding backends.
+
+Uppy is brought to you by the people behind Transloadit and as such has first class support for adding their uploading and encoding backend, but this is opt-in.

website/src/guide/plugins.md

@@ -1,64 +0,0 @@
----
-title: Plugins
-type: guide
-order: 17
----
-
-## Writing a Plugin
-
-Plugins usually add global-level functionality to Uppy. There is no strictly defined scope for a plugin - there are typically several types of plugins you can write:
-
-1. Add some global methods or properties. e.g. [uppy-element](https://github.com/transloadit/uppy-element)
-
-2. Add one or more global assets: directives/filters/transitions etc. e.g. [uppy-touch](https://github.com/transloadit/uppy-touch)
-
-3. Add some Uppy instance methods by attaching them to Uppy.prototype.
-
-4. A library that provides an API of its own, while at the same time injecting some combination of the above. e.g. [uppy-router](https://github.com/transloadit/uppy-router)
-
-A Uppy plugin should expose an `install` method. The method will be called with the `Uppy` constructor as the first argument, along with possible options:
-
-``` js
-MyPlugin.install = function (Uppy, options) {
-  // 1. add global method or property
-  Uppy.myGlobalMethod = ...
-  // 2. add a global asset
-  Uppy.directive('my-directive', {})
-  // 3. add an instance method
-  Uppy.prototype.$myMethod = ...
-}
-```
-
-## Using a Plugin
-
-Use plugins by calling the `Uppy.use()` global method:
-
-``` js
-// calls `MyPlugin.install(Uppy)`
-Uppy.use(MyPlugin)
-```
-
-You can optionally pass in some options:
-
-``` js
-Uppy.use(MyPlugin, { someOption: true })
-```
-
-You always need to call `Uppy.use()` explicitly:
-
-``` js
-// When using CommonJS via Browserify or Webpack
-var Uppy = require('uppy')
-var DragDrop = require('uppy-dragdrop')
-
-// Don't forget to call this
-Uppy.use(DragDrop)
-```
-
-## Existing Plugins & Tools
-
-<ul>
-{% for plugin in site.data.plugins %}
-  <a href="{{ plugin.url }}">{{ loop.key }}</a>
-{% endfor %}
-</ul>

website/themes/uppy/_config.yml

@@ -3,3 +3,9 @@ node_sass:
   outputStyle: nested
   precision: 5
   sourceComments: false
+
+postcss:
+  plugins:
+    postcss-svg:
+      paths: ['images']
+      defaults: "[fill]: #000000"

website/themes/uppy/layout/index.ejs

@@ -71,6 +71,7 @@
   <a class="start" href="/guide/index.html">Get Started</a>
   <p>Released under the <a href="http://opensource.org/licenses/MIT" target="_blank">MIT License</a></p>
   <p>This site borrows heavily from Evan You's excellent <a href="https://github.com/vuejs/vuejs.org">Vue.js</a> (<a href="https://github.com/transloadit/uppy/blob/master/website/VUEORG_LICENSE">LICENSE</a>) (he said it was <a href="https://twitter.com/youyuxi/status/672441843183960067">okay</a>: )</p>
+  <p>Puppy icon by <a href="https://thenounproject.com/2y2"></a>Jorge Fernandez del Castillo Gomez</a> from the Noun Project.</p>
   <p>Copyright (c) <%- date(Date.now(), 'YYYY') %> <a href="https://transloadit.com" target="_blank">Transloadit</a></p>
 </div>
 

website/themes/uppy/source/css/test.css

@@ -0,0 +1,3 @@
+body {
+  background-image: svg('uppy.svg', '[fill]: black');
+}