update frontpage code sample and stuff on the website

website/src/api-usage-example.ejs

@@ -1,19 +1,11 @@
 import Uppy from 'uppy/lib/core'
 import Dashboard from 'uppy/lib/plugins/Dashboard'
-import Tus10 from 'uppy/lib/plugins/Tus10'
-import MetaData from 'uppy/lib/plugins/MetaData'
+import Tus from 'uppy/lib/plugins/Tus'
  
-const uppy = Uppy({autoProceed: false})
-  .use(Dashboard, {trigger: '#select-files', target: '#upload-form', replaceTargetContent: true})
-  .use(Tus10, {endpoint: '://master.tus.io/files/'})
-  .use(MetaData, {
-    fields: [
-      { id: 'license', name: 'License', value: 'Creative Commons', placeholder: 'specify license' },
-      { id: 'caption', name: 'Caption', value: 'none', placeholder: 'describe what the image is about' }
-    ]
-  })
-uppy.run()
- 
-uppy.on('success', (files) => {
-  console.log(`Upload complete! We’ve uploaded these files: ${files}`)
-})
+Uppy({ autoProceed: false })
+  .use(Dashboard, { trigger: '#select-files' })
+  .use(Tus, { endpoint: 'https://master.tus.io/files/' })
+  .run()
+  .on('complete', (result) => {
+    console.log('Upload result:', result)
+  })

website/src/examples/dashboard/app.es6

@@ -36,7 +36,9 @@ function uppyInit () {
     trigger: '.UppyModalOpenerBtn',
     inline: opts.DashboardInline,
     target: opts.DashboardInline ? '.DashboardContainer' : 'body',
+    replaceTargetContent: true,
     note: opts.restrictions ? 'Images and video only, 2–3 files, up to 1 MB' : '',
+    maxHeight: 450,
     metaFields: [
       { id: 'license', name: 'License', placeholder: 'specify license' },
       { id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' }

website/src/examples/dashboard/index.ejs

@@ -40,8 +40,10 @@ const uppy = Uppy({
 .use(Dashboard, {
   trigger: '.UppyModalOpenerBtn',
   inline: true,
-  target: '.DashboardContainer'
+  target: '.DashboardContainer',
+  replaceTargetContent: true,
   note: 'Images and video only, 2–3 files, up to 1 MB',
+  maxHeight: 450,
   metaFields: [
     { id: 'license', name: 'License', placeholder: 'specify license' },
     { id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' }

website/src/examples/dragdrop/app.html

@@ -1,8 +1,8 @@
 <!-- Basic Uppy styles -->
 <link rel="stylesheet" href="/uppy/uppy.min.css">
 
-<div class="grid">
-  <div class="column-1-2">
+<div>
+  <div>
     <h5>autoProceed is on</h5>
 
     <!-- Target DOM node #1 -->
@@ -12,7 +12,7 @@
     <div class="UppyDragDrop-One-Progress"></div>
   </div>
 
-  <div class="column-1-2">
+  <div>
     <h5>autoProceed is off</h5>
 
     <!-- Target DOM node #2 -->

website/themes/uppy/layout/example.ejs

@@ -6,6 +6,8 @@
 
   <p>Please see <a href="/docs/">documentation</a> for details.</p>
 
+  <hr>
+
   <p>Hey there stranger! Uppy <img src="/images/emojis/dog.png" width="14" align="absmiddle">
     is in the early stages of development and the example section
     is our playground. Things might not yet work, but we're working hard to improve this.</p>

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

@@ -4,4 +4,4 @@ save it as a layout partial
 -->
 <figure class="highlight bash"><table><tr><td class="code"><pre><div class="line">$ npm install uppy</div></pre></td></tr></table></figure>
 
-<figure class="highlight js"><figcaption><span>api-usage-example.ejs</span><a href="/examples/../api-usage-example.ejs">view raw</a></figcaption><table><tr><td class="code"><pre><div class="line"><span class="keyword">import</span> Uppy <span class="keyword">from</span> <span class="string">'uppy/lib/core'</span></div><div class="line"><span class="keyword">import</span> Dashboard <span class="keyword">from</span> <span class="string">'uppy/lib/plugins/Dashboard'</span></div><div class="line"><span class="keyword">import</span> Tus10 <span class="keyword">from</span> <span class="string">'uppy/lib/plugins/Tus10'</span></div><div class="line"><span class="keyword">import</span> MetaData <span class="keyword">from</span> <span class="string">'uppy/lib/plugins/MetaData'</span></div><div class="line"> </div><div class="line"><span class="keyword">const</span> uppy = Uppy({autoProceed: <span class="literal">false</span>})</div><div class="line">  .use(Dashboard, {trigger: <span class="string">'#select-files'</span>, target: <span class="string">'#upload-form'</span>, replaceTargetContent: <span class="literal">true</span>})</div><div class="line">  .use(Tus10, {endpoint: <span class="string">'://master.tus.io/files/'</span>})</div><div class="line">  uppy.use(MetaData, {</div><div class="line">    fields: [</div><div class="line">      { id: <span class="string">'resizeTo'</span>, name: <span class="string">'Resize to'</span>, value: <span class="number">1200</span>, placeholder: <span class="string">'specify future image size'</span> },</div><div class="line">      { id: <span class="string">'description'</span>, name: <span class="string">'Description'</span>, value: <span class="string">'none'</span>, placeholder: <span class="string">'describe what the file is for'</span> }</div><div class="line">    ]</div><div class="line">  })</div><div class="line">uppy.run()</div><div class="line"> </div><div class="line">uppy.on(<span class="string">'success'</span>, (files) =&gt; {</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">`Upload complete! We’ve uploaded these files: <span class="subst">${files}</span>`</span>)</div><div class="line">})</div></pre></td></tr></table></figure>
+<figure class="highlight js"><figcaption><span>api-usage-example.ejs</span><a href="/examples/../api-usage-example.ejs">view raw</a></figcaption><table><tr><td class="code"><pre><div class="line"><span class="keyword">import</span> Uppy <span class="keyword">from</span> <span class="string">'uppy/lib/core'</span></div><div class="line"><span class="keyword">import</span> Dashboard <span class="keyword">from</span> <span class="string">'uppy/lib/plugins/Dashboard'</span></div><div class="line"><span class="keyword">import</span> Tus <span class="keyword">from</span> <span class="string">'uppy/lib/plugins/Tus'</span></div><div class="line"> </div><div class="line">Uppy({ autoProceed: <span class="literal">false</span> })</div><div class="line">  .use(Dashboard, { trigger: <span class="string">'#select-files'</span> })</div><div class="line">  .use(Tus, { endpoint: <span class="string">'https://master.tus.io/files/'</span> })</div><div class="line">  .run()</div><div class="line">  .on(<span class="string">'complete'</span>, (result) =&gt; {</div><div class="line">    <span class="built_in">console</span>.log(<span class="string">'Upload result:'</span>, result)</div><div class="line">  })</div></pre></td></tr></table></figure>

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

@@ -254,7 +254,7 @@
     max-width: 100%;
     width: 47%;
     display: inline-block;
-    vertical-align: middle;
+    vertical-align: top;
     // height: 250px;
   }
 }