add uppy demo to the homepage, update code sample

website/src/api-usage-example.ejs

@@ -1,21 +1,19 @@
 import Uppy from 'uppy/lib/core'
 import Dashboard from 'uppy/lib/plugins/Dashboard'
 import Tus10 from 'uppy/lib/plugins/Tus10'
-import Informer from 'uppy/lib/plugins/Informer'
 import MetaData from 'uppy/lib/plugins/MetaData'
  
 const uppy = Uppy({autoProceed: false})
-  .use(Dashboard, {trigger: '#select-files'})
-  .use(Informer, {target: Dashboard})
-  .use(Tus10, {endpoint: '://master.tus.io/files/'})
-  .use(MetaData, {
+uppy.use(Dashboard, {trigger: '#select-files', target: '#upload-form', replaceTargetContent: true})
+uppy.use(Tus10, {endpoint: '://master.tus.io/files/'})
+uppy.use(MetaData, {
     fields: [
       { id: 'resizeTo', name: 'Resize to', value: 1200, placeholder: 'specify future image size' },
       { id: 'description', name: 'Description', value: 'none', placeholder: 'describe what the file is for' }
     ]
   })
-  .run()
+uppy.run()
  
-uppy.on('core:success', (fileCount) => {
-  console.log(`Upload complete. We uploaded ${fileCount} files!`)
-})
+uppy.on('core:success', (files) => {
+  console.log(`Upload complete! We’ve uploaded these files: ${files}`)
+})

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 --save
+$ npm install uppy
 {% endcodeblock %}
 
 {% include_code lang:js ../api-usage-example.ejs %}

website/themes/uppy/layout/index.ejs

@@ -25,6 +25,10 @@
     <video class="IndexExample-video"
            src="/images/uppy-demo.mp4"
            autoplay loop muted></video>
+    <form id="upload-form">
+      <input type="file">
+    </form>
+    <p class="TryMe-line">Try me: <button id="select-files" class="TryMe-btn">Select Files</button></p>
   </div>
 
   <div class="IndexExample-block">
@@ -74,3 +78,26 @@
   <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 <a href="https://twitter.com/youyuxi/status/672441843183960067">approves</a>)</p>
   <p>© <%- date(Date.now(), 'YYYY') %> <a href="https://transloadit.com" target="_blank">Transloadit</a></p>
 </footer>
+
+<link href="https://unpkg.com/uppy/dist/uppy.min.css" rel="stylesheet">
+<script src="https://unpkg.com/uppy/dist/uppy.min.js"></script>
+
+<script>
+  var PROTOCOL = location.protocol === 'https:' ? 'https' : 'http'
+  var TUS_ENDPOINT = PROTOCOL + '://master.tus.io/files/'
+  
+  var uppy = Uppy.Core({debug: true, autoProceed: false})
+  uppy.use(Uppy.Dashboard, {trigger: '#select-files', target: '#upload-form', replaceTargetContent: true})
+  uppy.use(Uppy.Tus10, {endpoint: TUS_ENDPOINT})
+  uppy.use(Uppy.MetaData, {
+      fields: [
+        { id: 'resizeTo', name: 'Resize to', value: 1200, placeholder: 'specify future image size' },
+        { id: 'description', name: 'Description', value: 'none', placeholder: 'describe what the file is for' }
+      ]
+    })
+  uppy.run()
+
+  uppy.on('core:success', (files) => {
+    console.log(`Upload complete! We’ve uploaded these files: ${files}`)
+  })
+</script>

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

@@ -171,6 +171,33 @@
   &:hover { @include zoom; }
 }
 
+.TryMe-line {
+  font-size: 12px;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  top: -20px;
+}
+
+.TryMe-btn {
+  @include reset-button();
+  font-size: 12px;
+  display: inline-block;
+  padding: 6px 10px;
+  border-radius: 25px;
+  transition: all .3s ease;
+  background-color: $color-primary;
+  color: $color-white;
+  cursor: pointer;
+  margin-left: 5px;
+
+  &:hover { background-color: darken($color-primary, 5%); }
+}
+
 .IndexExample {
   text-align: center;
   max-width: 1200px;