new demo video and gif, update frontpage code sample, design goals, add developed by transloasdit

README.md

@@ -11,16 +11,16 @@ Uppy is a sleek, modular JavaScript file uploader that integrates seamlessly wit
 - **Preview** and edit metadata with a nice interface;
 - **Upload** to the final destination, optionally process/encode
 
-<img src="https://github.com/transloadit/uppy/raw/master/assets/uppy-demo-2.gif">
+<img src="https://github.com/transloadit/uppy/raw/master/assets/uppy-demo-oct-2018.gif">
 
 **[Read the docs](https://uppy.io/docs)** | **[Try Uppy](https://uppy.io/examples/dashboard/)**
 
+<a href="https://transloadit.com" target="_blank"><img width="185" src="https://github.com/transloadit/uppy/raw/master/assets/developed-by-transloadit.png"></a>
+
 Uppy is being developed by the folks at [Transloadit](https://transloadit.com), a versatile file encoding service.
 
 ## Example
 
-<img width="700" alt="Uppy UI Demo: modal dialog with a few selected files and an upload button" src="https://github.com/transloadit/uppy/raw/master/uppy-screenshot.jpg">
-
 Code used in the above example:
 
 ```js

bin/to-gif.sh

@@ -12,7 +12,7 @@ __root="$(cd "$(dirname "${__dir}")" && pwd)"
 
 width=600
 speed=0.7
-input="${__root}/assets/uppy-demo2.mov"
+input="${__root}/assets/uppy-demo-oct-2018.mov"
 base="$(basename "${input}")"
 output="${__root}/assets/${base}.gif"
 
@@ -29,4 +29,4 @@ ffmpeg \
   "${output}"
 
 du -hs "${output}"
-open -a 'Google Chrome' "${output}"
+open -a 'Google Chrome' "${output}"

website/_config.yml

@@ -13,12 +13,12 @@ logo_large: /images/logos/uppy-dog-full.svg
 logo_medium: /images/logos/uppy-dog-head-arrow.svg
 logo_icon: /images/logos/uppy-dog-head-arrow.png
 description: >
-    Sleek, modular file uploader that integrates seamlessly with any framework.
-    It fetches files from local disk, Google Drive, Dropbox, Instagram, remote URLs, cameras and other exciting locations, and then uploads them to the final destination.
+    Sleek, modular file uploader that integrates seamlessly with any website or app.
+    It fetches files from local disk, Google Drive, Dropbox, Instagram, remote URLs, cameras etc, and then uploads them to the final destination.
     It’s fast, easy to use and let's you worry about more important problems than building a file uploader.
 descriptionWho: >
   Uppy is brought to you by the people
-  behind <a href="https://transloadit.com">Transloadit</a> and as such will have first class support
+  behind <a href="https://transloadit.com">Transloadit</a>, and as such will have first class support
   for adding their uploading and encoding backend, but this is opt-in,
   and you can just as easily roll your own.
 author: Transloadit

website/src/_data/design_goals.yml

@@ -1,12 +1,12 @@
  - "Lightweight / easy on dependencies"
+ - "Small core, modular architecture. Everything is a plugin"
  - "ES6, with transpiled ES5 versions available"
  - "Usable as a bundle straight from a CDN, as well as a module to import"
  - "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)"
+ - "Compatible with React (Native) (work on React Native in progress)"
  - "Works great on mobile"
- - "Small core, modular architecture. Everything is a plugin"
  - "Works great with Transloadit. Works great without"
  - "Offering sugared shortcuts for novice users (presets)"

website/src/api-usage-example.js

@@ -1,9 +1,17 @@
 import Uppy from '@uppy/core'
 import Dashboard from '@uppy/dashboard'
+import Instagram from '@uppy/instagram'
 import Tus from '@uppy/tus'
 
 Uppy()
-  .use(Dashboard, { trigger: '#select-files' })
+  .use(Dashboard, {
+    trigger: '#select-files',
+    showProgressDetails: true
+  })
+  .use(Instagram, {
+    target: Dashboard,
+    serverUrl: 'https://companion.uppy.io'
+  })
   .use(Tus, { endpoint: 'https://master.tus.io/files/' })
   .on('complete', (result) => {
     console.log('Upload result:', result)

website/src/frontpage-code-sample.ejs

@@ -6,7 +6,7 @@ You can `npm run web:update:frontpage:code:sample` to render this code snippet a
 save it as a layout partial
 -->
 {% codeblock lang:bash %}
-$ npm install uppy
+$ npm install @uppy/core @uppy/dashboard @uppy/instagram @uppy/tus 
 {% endcodeblock %}
 
 {% include_code lang:js ../api-usage-example.js %}

website/themes/uppy/layout/index.ejs

@@ -24,8 +24,8 @@
   <div class="IndexExample-block">
     <video class="IndexExample-video"
            autoplay loop muted playsinline>
-      <source src="/images/uppy-demo-2.mp4" type="video/mp4">
-      Your browser does not support the video tag, you can <a href="/images/blog/0.25/link-drop-demo.mp4">download the video</a> to watch it.
+      <source src="/images/uppy-demo-oct-2018.mp4" type="video/mp4">
+      Your browser does not support the video tag, you can <a href="/images/uppy-demo-oct-2018.mp4">download the video</a> to watch it.
     </video>
     <form id="upload-form">
       <input type="file">
@@ -42,8 +42,8 @@
 
 <section class="IndexAbout">
   <div class="IndexAbout-item">
-    <img class="IndexAbout-icon" src="/images/traffic-light.svg">
-    <h2 class="IndexSection-title">Work in progress</h2>
+    <!-- <img class="IndexAbout-icon" src="/images/traffic-light.svg"> -->
+    <h2 class="IndexSection-title">What is Uppy</h2>
     <p><%- config.description %></p>
   </div>
   <div class="IndexAbout-item">
@@ -86,18 +86,26 @@
 
 <script>
   var TUS_ENDPOINT = 'https://master.tus.io/files/'
+  var COMPANION_ENDPOINT = 'http://localhost:3020'
+  if (location.hostname === 'uppy.io') {
+    COMPANION_ENDPOINT = '//companion.uppy.io'
+  }
 
   var uppy = Uppy.Core({ debug: true, autoProceed: false })
-  .use(Uppy.Dashboard, {
-    trigger: '#select-files',
-    target: '#upload-form',
-    replaceTargetContent: true,
-    metaFields: [
-      { id: 'license', name: 'License', placeholder: 'specify license' },
-      { id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' }
-    ]
-  })
-  .use(Uppy.Tus, { endpoint: TUS_ENDPOINT})
+    .use(Uppy.Dashboard, {
+      trigger: '#select-files',
+      target: '#upload-form',
+      replaceTargetContent: true,
+      metaFields: [
+        { id: 'license', name: 'License', placeholder: 'specify license' },
+        { id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' }
+      ]
+    })
+    .use(Uppy.GoogleDrive, { target: Uppy.Dashboard, serverUrl: COMPANION_ENDPOINT })
+    .use(Uppy.Instagram, { target: Uppy.Dashboard, serverUrl: COMPANION_ENDPOINT })
+    .use(Uppy.Webcam, { target: Uppy.Dashboard })
+    .use(Uppy.Url, { target: Uppy.Dashboard, serverUrl: COMPANION_ENDPOINT })
+    .use(Uppy.Tus, { endpoint: TUS_ENDPOINT})
 
   uppy.on('success', (files) => {
     console.log(`Upload complete! We’ve uploaded these files: ${files}`)

website/themes/uppy/layout/partials/frontpage-code-sample.html

@@ -2,14 +2,22 @@
 You can `npm run web:update:frontpage:code:sample` to render this code snippet and
 save it as a layout partial
 -->
-<figure class="highlight bash"><table><tr><td class="code"><pre>$ npm install uppy</pre></td></tr></table></figure>
+<figure class="highlight bash"><table><tr><td class="code"><pre>$ <span class="token function">npm</span> <span class="token function">install</span> @uppy/core @uppy/dashboard @uppy/instagram @uppy/tus </pre></td></tr></table></figure>
 
 <figure class="highlight js"><table><tr><td class="code"><pre><span class="token keyword">import</span> Uppy <span class="token keyword">from</span> <span class="token string">'@uppy/core'</span>
 <span class="token keyword">import</span> Dashboard <span class="token keyword">from</span> <span class="token string">'@uppy/dashboard'</span>
+<span class="token keyword">import</span> Instagram <span class="token keyword">from</span> <span class="token string">'@uppy/instagram'</span>
 <span class="token keyword">import</span> Tus <span class="token keyword">from</span> <span class="token string">'@uppy/tus'</span>
 
 <span class="token function">Uppy</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-  <span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Dashboard<span class="token punctuation">,</span> <span class="token punctuation">{</span> trigger<span class="token punctuation">:</span> <span class="token string">'#select-files'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Dashboard<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+    trigger<span class="token punctuation">:</span> <span class="token string">'#select-files'</span><span class="token punctuation">,</span>
+    showProgressDetails<span class="token punctuation">:</span> <span class="token boolean">true</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
+  <span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Instagram<span class="token punctuation">,</span> <span class="token punctuation">{</span>
+    target<span class="token punctuation">:</span> Dashboard<span class="token punctuation">,</span>
+    serverUrl<span class="token punctuation">:</span> <span class="token string">'https://companion.uppy.io'</span>
+  <span class="token punctuation">}</span><span class="token punctuation">)</span>
   <span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Tus<span class="token punctuation">,</span> <span class="token punctuation">{</span> endpoint<span class="token punctuation">:</span> <span class="token string">'https://master.tus.io/files/'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
   <span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'complete'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>result<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
     console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Upload result:'</span><span class="token punctuation">,</span> result<span class="token punctuation">)</span>

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

@@ -118,7 +118,7 @@
 
 .IndexAbout-item:first-child {
   @media #{$screen-medium} {
-    padding-left: 130px;
+    // padding-left: 130px;
 
     .IndexAbout-icon {
       top: 20px;
@@ -285,7 +285,7 @@
 
 .IndexDesignGoals {
   padding: 4em 1em;
-  background-color: $color-primary;
+  background-color: darken($color-primary, 15%);
   color: $color-white;
   overflow: hidden;