Brush up and simplify website examples

website/src/examples/bundle/app.html

@@ -1,9 +1,14 @@
 <link rel="stylesheet" href="/uppy/uppy.min.css">
 
+<div id="uppy-dnd"></div>
+
 <script src="/uppy/uppy.min.js"></script>
 <script>
-  var uppy = new Uppy.Core();
-  uppy.use(Uppy.Tus10);
+  var uppy = Uppy.Core({debug: true});
+  uppy.use(Uppy.Tus10, {endpoint: '//master.tus.io/files/'});
+  uppy.use(Uppy.DragDrop, {target: '#uppy-dnd'});
+  uppy.use(Uppy.ProgressBar);
+  uppy.run();
 
   console.log('Uppy loaded from CDN with tus enabled');
 </script>

website/src/examples/bundle/index.ejs

@@ -1,12 +1,11 @@
 ---
 title: Bundle
 layout: example
-type: examples
-order: 1
+order: 2
 ---
 
 {% blockquote %}
-This example showcases sourcing a pre-built bundle, that a browser can request straight from a CDN.
+This example showcases using a pre-built bundle from a CDN.
 {% endblockquote %}
 
 <% include app.html %>

website/src/examples/dashboard/app.es6

@@ -13,7 +13,7 @@ const PROTOCOL = location.protocol === 'https:' ? 'https' : 'http'
 const TUS_ENDPOINT = PROTOCOL + '://master.tus.io/files/'
 
 function uppyInit () {
-  const opts = window.uppyOptions
+  const opts = window.uppyOptions2
   const dashboardEl = document.querySelector('.UppyDashboard')
   if (dashboardEl) {
     const dashboardElParent = dashboardEl.parentNode

website/src/examples/dashboard/app.html

@@ -32,7 +32,7 @@
   }
 
   var defaultOpts = {
-    DashboardInline: false,
+    DashboardInline: true,
     Webcam: true,
     GoogleDrive: true,
     Instagram: true,
@@ -42,28 +42,28 @@
   }
 
   // try to get options from localStorage, if its empty, set to defaultOpts
-  window.uppyOptions = JSON.parse(localStorage.getItem('uppyOptions')) || {}
-  if (isObjEmpty(window.uppyOptions)) {
-    window.uppyOptions = defaultOpts
-    localStorage.setItem('uppyOptions', JSON.stringify(window.uppyOptions))
+  window.uppyOptions2 = JSON.parse(localStorage.getItem('uppyOptions2')) || {}
+  if (isObjEmpty(window.uppyOptions2)) {
+    window.uppyOptions2 = defaultOpts
+    localStorage.setItem('uppyOptions2', JSON.stringify(window.uppyOptions2))
   }
 
   function toggleModalBtn () {
     var btn = document.querySelector('.UppyModalOpenerBtn')
-    window.uppyOptions.DashboardInline
+    window.uppyOptions2.DashboardInline
       ? btn.style.display = 'none'
       : btn.style.display = 'block'
   }
 
   // Map input state to options
   Object.keys(optionInputs).forEach(function (item) {
-    optionInputs[item].checked = window.uppyOptions[item]
+    optionInputs[item].checked = window.uppyOptions2[item]
   })
 
   // When input value changes, update options
   Object.keys(optionInputs).forEach(function (item) {
     optionInputs[item].addEventListener('change', function () {
-      window.uppyOptions[item] = optionInputs[item].checked
+      window.uppyOptions2[item] = optionInputs[item].checked
       localStorage.setItem('uppyOptions', JSON.stringify(window.uppyOptions))
 
       toggleModalBtn()

website/src/examples/dragdrop/index.ejs

@@ -27,9 +27,4 @@ Here you'll see a demo of how you might set up Drag and Drop with Uppy.
 <p>
   Along with this JavaScript:
 </p>
-{% include_code lang:js dragdrop/app.es6 %}
-
-<p>
-  And the following CSS:
-</p>
-{% include_code lang:css dragdrop/app.css %}
+{% include_code lang:js dragdrop/app.es6 %}

website/src/examples/i18n/app.css

@@ -1,6 +0,0 @@
-/* Drag & Drop CSS to style the demo itself */
-
-.UppyDragDrop-puppy {
-  max-width: 80px;
-  margin-bottom: 20px;
-}

website/src/examples/i18n/app.html

@@ -1,12 +1,12 @@
-<!-- Basic Uppy styles -->
+<!-- Basic Uppy styles. You can use a CDN: https://unpkg.com/uppy/dist/uppy.min.css -->
 <link rel="stylesheet" href="/uppy/uppy.min.css">
 
 <div class="UppyDragDrop"></div>
 
-<!-- Load Uppy pre-built bundled version and Russian language pack -->
+<!-- Load Uppy pre-built bundled version. You can use a CDN: https://unpkg.com/uppy/dist/uppy.min.js -->
 <script src="/uppy/uppy.min.js"></script>
 <script>
-  var uppy = new Uppy.Core({debug: true});
+  var uppy = Uppy.Core({debug: true});
   uppy.use(Uppy.DragDrop, {
     target: '.UppyDragDrop',
     locale: {

website/src/examples/i18n/index.ejs

@@ -1,17 +1,16 @@
 ---
-title: i18n
+title: Bundle & i18n
 layout: example
 type: examples
 order: 4
 ---
 
 {% blockquote %}
-Here you'll see a demo of how you might set Uppy to work with language packs (i18n). Actually, two examples: pre-built bundle version ready to use with a &lt;script&gt; tag, and the module, that you can bundle yourself with tools like <a href="http://webpack.github.io/">webpack</a>, <a href="http://browserify.org/">Browserify</a> or <a href="http://rollupjs.org/">rollup.js</a>.
+Here you’ll see a demo of how you might use internationalization (i18n) in Uppy, as well as how to load Uppy using a pre-bundled version (CDN).
 {% endblockquote %}
 
 <link rel="stylesheet" href="app.css">
 <% include app.html %>
-<!--script src="app.js"></script-->
 
 <hr />
 
@@ -20,11 +19,6 @@ Here you'll see a demo of how you might set Uppy to work with language packs (i1
 </p>
 
 <p>
-  To load the pre-built bundle from a CDN we're using the following HTML and JavaScript:
+  To load the pre-built bundle (from a CDN) we’re using the following HTML and JavaScript:
 </p>
 {% include_code lang:html i18n/app.html %}
-
-<p>
-  Or, if we want this as module that we can bundle ourselves, this JavaScript:
-</p>
-{% include_code lang:js i18n/app.es6 %}

website/src/examples/statusbar/index.ejs

@@ -2,11 +2,11 @@
 title: Status Bar
 layout: example
 type: examples
-order: 1
+order: 5
 ---
 
 {% blockquote %}
-The StatusBar plugin shows upload progress.
+The StatusBar plugin shows detailed upload/processing progress with pause/resume/cancel buttons.
 {% endblockquote %}
 
 <link rel="stylesheet" href="app.css">

website/themes/uppy/layout/example.ejs

@@ -4,6 +4,8 @@
 
   <%- page.content %>
 
+  <p>Please see <a href="/docs/">documentation</a> for details.</p>
+
   <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>