Merge branch 'master' into i18n

# Conflicts:
#	website/_config.yml

.gitignore

@@ -13,3 +13,5 @@ website/public/
 website/.deploy*/
 website/src/_drafts
 website/themes/uppy/source/js/uppy.js
+
+npm-debug.log*

bin/build-umd

@@ -16,7 +16,6 @@ OUTDIR="dist"
 TRANSFORMS="[ babelify ]"
 FLAGS="-t [ babelify ] --standalone Uppy"
 
-rm -rf $OUTDIR
-mkdir $OUTDIR
+mkdir -p "${OUTDIR}"
 
 browserify $SRC $FLAGS > $OUTDIR/$OUT

package.json

@@ -16,6 +16,7 @@
     "test": "bin/test",
     "test:unit": "./node_modules/.bin/babel-node test/core.spec.js",
     "watch": "nodemon --watch src --ext scss,js -x \"npm run build && node website/update.js\"",
+    "watch:all": "parallelshell \"npm run watch\" \"npm run web\"",
     "watch:css": "nodemon --watch src --ext scss -x \"npm run build && node website/update.js\"",
     "watch:examples": "cd website && node build-examples.js watch",
     "watch:js": "nodemon --watch src --ext js -x \"npm run build && node website/update.js\"",
@@ -58,6 +59,7 @@
     "zuul": "^3.7.2"
   },
   "dependencies": {
+    "parallelshell": "^2.0.0",
     "superagent": "^1.5.0",
     "tus-js-client": "^1.1.3"
   }

website/_config.yml

@@ -20,9 +20,9 @@ logo_large: /images/uppy.svg
 logo_medium: /images/uppy.svg
 logo_icon: /images/uppy.png
 description_primary: >
-  JavaScript file uploader that fetches files from Dropbox, Instagram, local disk, remote URLs, and other exciting locations.
-  Plugin-based architecture, first-class support for resumable uploads via <a href="http://tus.io">tus.io</a>
-  and custom encoding backends make it very extensible and robust.
+  Uppy is (going to be) a JavaScript file uploader that fetches files from Dropbox, Instagram, local disk, remote URLs, and other exciting locations.
+  It has a Plugin-based architecture, first-class support for resumable uploads via <a href="http://tus.io">tus.io</a>
+  and custom encoding backends, making it very extensible and robust.
 description_secondary: >
   Uppy (almost as cute as a puppy) is brought to you by the people behind <a href="https://transloadit.com">Transloadit</a> and as such has first class
   support for adding their uploading and encoding backend, but this is opt-in, and you can just as easily

website/documentation.js

@@ -21,15 +21,3 @@ documentation('../src/index.js', {order: docOrder}, function (err, comments) {
     console.info(chalk.green('✓ documentation generated'));
   });
 });
-
-// var remark = require('remark');
-// var inputMarkdownContent = fs.readFileSync('src/api/docs.md', 'utf-8');
-// var docjsReadme = require('documentation-readme/lib/plugin');
-// remark().use(docjsReadme, {
-//  section: 'Uppy Core & Plugins', // inject into the ## Usage section of the input doc
-//  documentationArgs: [ '../src/index.js' ]
-// }).process(inputMarkdownContent, function (err, vfile, content) {
-// fs.writeFileSync('src/api/docs.md', content);
-//  // console.log(content);
-//  console.log('documentation generated');
-// });

website/src/_data/design_goals.yml

@@ -4,6 +4,7 @@
  - "Resumable file uploads via the open tus standard"
  - "Robust: retries for all-the-things, avoid showing ‘weird errors’"
  - "Themable UI with a beautiful default"
+ - "i18n support: Easily switch languages or supply your own copy"
  - "Compatible with React (Native)"
  - "Works great on mobile"
  - "Small core, modular architecture. Everything is a plugin"

website/src/guide/contributing.md

@@ -31,23 +31,12 @@ It's recommended to exclude `./website/public/` from your editor if you want eff
 For local previews on http://127.0.0.1:4000 type:
 
 ```bash
-npm run web
+npm run watch:all
 ```
 
-If you want to work on Uppy itself, and see its changes reflected in the website, open a new tab and type:
+This will watch the website, as well as Uppy, as the examples, and rebuild everything and refresh your browser as files change.
 
-```bash
-npm run watch
-# Or if you're only interested in one of these:
-npm run watch:js
-npm run watch:css
-```
-
-For example, if you'd like to work on the Multipart Form example, 
-
-Run: `npm run watch` and in new tab: `npm run web`
-
-Then:
+Then, to work on e.g. the Multipart example, you'd edit the following files:
 
 ```bash
 atom src/core/Core.js \
@@ -57,7 +46,7 @@ atom src/core/Core.js \
   website/src/examples/multipart/app.es6
 ```
 
-And open <http://0.0.0.0:4000/examples/multipart/index.html>
+And open <http://0.0.0.0:4000/examples/multipart/index.html> in your webbrowser.
 
 ## CSS Guidelines
 

website/themes/uppy/layout/example.ejs

@@ -1,5 +1,5 @@
 <%- partial('partials/sidebar', { type: page.type, index: page.index }) %>
-<div class="content <%- page.type ? page.type + ' with-sidebar' : '' %>">
+<div class="Content js-Content <%- page.type ? page.type + ' with-sidebar' : '' %>">
   <h1><%- page.title %> Example</h1>
 
   <!--

website/themes/uppy/layout/index.ejs

@@ -21,8 +21,6 @@
     <p class="IndexHero-descSecondary"><%- config.description_secondary %></p>
 
   </header>
-
-  <!-- <a href="/guide/" class="IndexHero-installBtn button">Install v<%- config.uppy_version %></a> -->
 </section>
 
 <section id="example" class="IndexExample">

website/themes/uppy/layout/layout.ejs

@@ -17,15 +17,12 @@
   </head>
   <body class="<%= isIndex ? 'page-index' : 'page-inner' %>">
     <div class="page">
-      <nav id="mobile-bar" class="MobileBar">
-        <button class="menu-button"></button>
-        <a class="logo" href="/"><img src="<%- config.logo_icon %>"></a>
-      </nav>
+      <header id="header" class="MainHeader js-MainHeader">
+        <button class="MainHeader-menuBtn js-MenuBtn"></button>
 
-      <header id="header" class="MainHeader">
         <a id="logo" class="MainLogo" href="/">
-          <img src="<%- config.logo_medium %>">
-          <span><%- config.title %></span>
+          <img class="MainLogo-img" src="<%- config.logo_medium %>">
+          <span class="MainLogo-text"><%- config.title %></span>
         </a>
 
         <nav>
@@ -35,7 +32,7 @@
         </nav>
       </header>
 
-      <main id="main">
+      <main class="MainContent js-MainContent" id="main">
         <%- body %>
       </main>
 

website/themes/uppy/layout/page.ejs

@@ -1,7 +1,7 @@
 <% if (page.type) { %>
     <%- partial('partials/sidebar', { type: page.type, index: page.index }) %>
 <% } %>
-<div class="content <%- page.type ? page.type + ' with-sidebar' : '' %>">
+<div class="Content js-Content <%- page.type ? page.type + ' with-sidebar' : '' %>">
     <h1><%- page.title %></h1>
     <%- page.content %>
     <% if (page.type === 'guide') { %>

website/themes/uppy/layout/partials/main_menu.ejs

@@ -1,8 +1,9 @@
-<li>
+<!-- @todo uncomment search input when we get our own swifttype -->
+<!-- <li>
   <form id="search-form" class="MainMenu-search">
     <input type="text" id="search-query" class="MainMenu-searchQuery st-default-search-input">
   </form>
-</li>
+</li> -->
 <li><a href="/guide/" class="nav-link<%- page.path.match(/guide/) ? ' current' : '' %>">Guide</a></li>
 <li><a href="/api/" class="nav-link<%- page.path.match(/api/) ? ' current' : '' %>">API</a></li>
 <li><a href="/examples/cdn/" class="nav-link<%- page.path.match(/examples/) ? ' current' : '' %>">Examples</a></li>

website/themes/uppy/layout/partials/sidebar.ejs

@@ -1,4 +1,4 @@
-<div class="Sidebar js-sidebar">
+<div class="Sidebar js-Sidebar">
   <ul class="main-menu">
     <%- partial('partials/main_menu') %>
   </ul>

website/themes/uppy/source/css/_common.scss

@@ -122,47 +122,158 @@ a.button {
   min-height: 100vh;
 }
 
-.page-index .BuildBadge { margin-left: -2px !important; }
-.page-inner .BuildBadge { margin-top: 15px; }
-
-.MainLogo {
-  display: block;
-  margin: 0 auto;
-  width: 120px;
+.page-inner .MainContent {
+  position: relative;
+  z-index: 1;
+  overflow-x: hidden;
+  padding: 2em 1.4em 0;
 
   @media #{$screen-medium} {
-    width: 150px;
+    padding: 0 60px 30px;
   }
 }
 
-.MainHeader {
-  background-color: $color-white;
-  padding: 25px 60px;
-  position: relative;
-  z-index: 2;
-  border-top: 6px solid $color-primary;
+/**
+* MainLogo
+*/
+.MainLogo {
+  display: inline-block;
+  font-size: 1.5em;
+  line-height: $size-headerHeight;
+  color: $color-dark;
+  font-family: $fontFamily-logo;
+  font-weight: 500;
+
+  img {
+    vertical-align: middle;
+    margin-right: 6px;
+    width: $size-headerHeight;
+    height: $size-headerHeight;
+  }
 }
 
-  .page-inner .MainHeader {
+  .MainLogo-text {
     display: none;
     @media #{$screen-medium} {
-      display: block;
+      display: inline;
     }
   }
 
+/**
+* MainHeader
+*/
+
+.page-index .MainHeader {
+  padding-top: 1.5em;
+  padding-bottom: 2.5em;
+  border-top: 6px solid $color-primary;
+}
+
+.page-inner .MainHeader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 40px;
+  z-index: 9;
+  box-shadow: 0 0 4px rgba(0,0,0,.25);
+  background-color: $color-white;
+  text-align: center;
+
+  @media #{$screen-medium} {
+    position: static;
+    height: auto;
+    padding: 25px 60px;
+    box-shadow: none;
+    position: relative;
+    z-index: 2;
+    border-top: 6px solid $color-primary;
+    text-align: left;
+  }
+}
+
+.MainHeader-menuBtn {
+  display: block;
+
+  @media #{$screen-medium} {
+    display: none;
+  }
+}
+
+  .page-index .MainHeader-menuBtn {
+    display: none;
+  }
+
+  .page-inner .MainHeader-menuBtn {
+    background: none;
+    border: 0;
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    top: 8px;
+    left: 12px;
+    background: svg('burger.svg', '[fill]: #{$color-gray}') center center no-repeat;
+    background-size: 22px;
+  }
+
+/**
+* MainMenu
+*/
+
 .MainMenu {
   text-transform: uppercase;
   letter-spacing: 2px;
   list-style-type: none;
   margin: 2em 1.8em 0;
   padding: 0;
+  font-size: $fontSize-s;
 
   @media #{$screen-medium} {
     margin: 0;
-    font-size: $fontSize-s;
   }
 }
 
+  .MainMenu-searchQuery {
+    height: 30px;
+    line-height: 30px;
+    padding: 0 15px 0 30px;
+    border: 1px solid #e3e3e3;
+    outline: none;
+    border-radius: 15px;
+    margin-right: 10px;
+    transition: border-color .2s ease;
+    background: svg('search.svg', '[fill]: #{$color-gray}') 8px 5px no-repeat;
+    background-size: 18px;
+    margin-bottom: 10px;
+
+    &:focus { border-color: $color-primary; }
+
+    @media #{$screen-medium} {
+      width: auto;
+      width: 200px;
+      margin-bottom: 0;
+    }
+  }
+
+  .page-inner .MainMenu {
+    display: none;
+    position: absolute;
+    right: 60px;
+    top: 25px;
+    height: $size-headerHeight;
+    line-height: $size-headerHeight;
+
+    li {
+      display: inline-block;
+      position: relative;
+      margin: 0 .6em;
+    }
+
+    @media #{$screen-medium} {
+      display: block;
+    }
+  }
+
 .nav-link {
   color: $color-light;
   padding-bottom: 3px;
@@ -178,3 +289,9 @@ a.button {
     font-size: 1em;
   }
 }
+
+/**
+* BuildBadge
+*/
+.page-index .BuildBadge { margin-left: -2px !important; }
+.page-inner .BuildBadge { margin-top: 15px; }

website/themes/uppy/source/css/_page.scss

@@ -1,114 +1,6 @@
-.page-inner #main {
-  position: relative;
-  z-index: 1;
-  overflow-x: hidden;
-  padding: 2em 1.4em 0;
-
-  @media #{$screen-medium} {
-    padding: 0 60px 30px;
-  }
-}
-
-.page-inner #nav {
-  position: absolute;
-  right: 60px;
-  top: 25px;
-  height: $size-headerHeight;
-  line-height: $size-headerHeight;
-
-  li {
-    display: inline-block;
-    position: relative;
-    margin: 0 .6em;
-  }
-}
-
-.nav-link {
-  padding-bottom: 3px;
-  &:hover, &.current { border-bottom: 3px solid $color-primary; }
-}
-
-.MainMenu-searchQuery {
-  height: 30px;
-  line-height: 30px;
-  padding: 0 15px 0 30px;
-  border: 1px solid #e3e3e3;
-  outline: none;
-  border-radius: 15px;
-  margin-right: 10px;
-  transition: border-color .2s ease;
-  background: svg('search.svg', '[fill]: #{$color-gray}') 8px 5px no-repeat;
-  background-size: 18px;
-  margin-bottom: 10px;
-
-  &:focus { border-color: $color-primary; }
-
-  @media #{$screen-medium} {
-    width: auto;
-    width: 200px;
-    margin-bottom: 0;
-  }
-
-}
-
-.MainLogo {
-  display: inline-block;
-  font-size: 1.5em;
-  line-height: $size-headerHeight;
-  color: $color-dark;
-  font-family: $fontFamily-logo;
-  font-weight: 500;
-
-  img {
-    vertical-align: middle;
-    margin-right: 6px;
-    width: $size-headerHeight;
-    height: $size-headerHeight;
-  }
-}
-
-.page-index .MobileBar {
-  display: none;
-}
-
-.MobileBar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 40px;
-  background-color: $color-white;
-  z-index: 9;
-  box-shadow: 0 0 4px rgba(0,0,0,.25);
-
-  @media #{$screen-medium} {
-    display: none;
-  }
-
-  .menu-button {
-    background: none;
-    border: 0;
-    position: absolute;
-    width: 24px;
-    height: 24px;
-    top: 8px;
-    left: 12px;
-    background: svg('burger.svg', '[fill]: #{$color-gray}') center center no-repeat;
-    background-size: 22px;
-  }
-
-  .logo {
-    position: absolute;
-    width: 30px;
-    height: 30px;
-    top: 5px;
-    left: 50%;
-    margin-left: -15px;
-    background-size: 30px;
-  }
-}
-
-.fix-sidebar .Sidebar { position: fixed; }
+/**
+* Sidebar
+*/
 
 .Sidebar {
   position: fixed;
@@ -128,7 +20,8 @@
     padding-left: 0;
   }
 
-  &.open { transform: translate(0, 0); }
+  &.is-open { transform: translate(0, 0); }
+  .fix-sidebar & { position: fixed; }
 
   @media #{$screen-medium} {
     position: absolute;
@@ -199,7 +92,10 @@
   }
 }
 
-.content {
+/**
+* Content
+*/
+.Content {
   padding: 2.2em 0;
   max-width: 600px;
   margin: 0 auto;
@@ -337,10 +233,10 @@
   height: 1em;
 }
 
-.footer {
-  color: $color-light;
-  margin-top: 2em;
-  padding-top: 2em;
-  border-top: 1px solid #e5e5e5;
-  font-size: .9em;
-}
+// .footer {
+//   color: $color-light;
+//   margin-top: 2em;
+//   padding-top: 2em;
+//   border-top: 1px solid #e5e5e5;
+//   font-size: .9em;
+// }

website/themes/uppy/source/js/common.js

@@ -1,28 +1,28 @@
 (function () {
 
   var each = [].forEach
-  var main = document.getElementById('main')
+
+  var main = document.querySelector('.js-MainContent')
   var doc = document.documentElement
   var body = document.body
-  var header = document.getElementById('header')
-  var menu = document.querySelector('.js-sidebar')
-  var content = document.querySelector('.content')
-  var mobileBar = document.getElementById('mobile-bar')
+  var header = document.querySelector('.js-MainHeader')
+  var menu = document.querySelector('.js-Sidebar')
+  var content = document.querySelector('.js-Content')
 
-  var menuButton = mobileBar.querySelector('.menu-button')
+  var menuButton = document.querySelector('.js-MenuBtn')
   menuButton.addEventListener('click', function () {
-    menu.classList.toggle('open')
+    menu.classList.toggle('is-open')
   })
 
   body.addEventListener('click', function (e) {
     if (e.target !== menuButton && !menu.contains(e.target)) {
-      menu.classList.remove('open')
+      menu.classList.remove('is-open')
     }
   })
 
   // build sidebar
   var currentPageAnchor = menu.querySelector('.sidebar-link.current')
-  var isAPI = document.querySelector('.content').classList.contains('api')
+  var isAPI = document.querySelector('.Content').classList.contains('api')
   if (currentPageAnchor || isAPI) {
     var allLinks = []
     var sectionContainer
@@ -85,9 +85,9 @@
     var top = doc && doc.scrollTop || body.scrollTop
     var headerHeight = header.offsetHeight
     if (top > headerHeight) {
-      main.className = 'fix-sidebar'
+      addClass(main, 'fix-sidebar');
     } else {
-      main.className = ''
+      removeClass(main, 'fix-sidebar');
     }
     if (animating || !allLinks) return
     var last
@@ -160,6 +160,22 @@
     wrapper.appendChild(link)
   }
 
+  function addClass(el, className) {
+    if (el.classList) {
+      el.classList.add(className);
+    } else {
+      el.className += ' ' + className;
+    }
+  }
+
+  function removeClass(el, className) {
+    if (el.classList) {
+      el.classList.remove(className);
+    } else {
+      el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+    }
+  }
+
   // Search with SwiftType
   // @todo get our own swifttype
 
@@ -182,4 +198,4 @@
   //   }
   // })
 
-})()
+})();