clean up dashboard example snippet and tweak example page layout

website/src/examples/dashboard/index.ejs

@@ -18,4 +18,48 @@ Dashboard is the full-featured UI for Uppy that shows nice file previews and up
 
 <p>On this page we're using the following JavaScript snippet:</p>
 
+{% codeblock lang:js %}
+const Uppy = require('uppy/lib/core')
+const Dashboard = require('uppy/lib/plugins/Dashboard')
+const GoogleDrive = require('uppy/lib/plugins/GoogleDrive')
+const Dropbox = require('uppy/lib/plugins/Dropbox')
+const Instagram = require('uppy/lib/plugins/Instagram')
+const Webcam = require('uppy/lib/plugins/Webcam')
+const Tus = require('uppy/lib/plugins/Tus10')
+const MetaData = require('uppy/lib/plugins/MetaData')
+
+const uppy = Uppy({
+  debug: true,
+  autoProceed: false,
+  restrictions: {
+    maxFileSize: 1000000,
+    maxNumberOfFiles: 3,
+    minNumberOfFiles: 2,
+    allowedFileTypes: ['image/*', 'video/*']
+  }
+})
+.use(Dashboard, {
+  trigger: '.UppyModalOpenerBtn',
+  inline: opts.DashboardInline,
+  target: opts.DashboardInline ? '.DashboardContainer' : 'body',
+  note: opts.restrictions ? 'Images and video only, 2–3 files, up to 1 MB' : ''
+})
+.use(GoogleDrive, {target: Dashboard, host: 'https://server.uppy.io'})
+.use(Dropbox, {target: Dashboard, host: 'https://server.uppy.io'})
+.use(Instagram, {target: Dashboard, host: 'https://server.uppy.io'})
+.use(Webcam, {target: Dashboard})
+.use(Tus, {endpoint: 'https://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' }
+  ]
+})
+.run()
+
+uppy.on('core:success', (fileList) => {
+  console.log('Successfully uploaded:', fileList)
+})
+{% endcodeblock %}
+
 {% include_code lang:js dashboard/app.es6 %}

website/themes/uppy/layout/example.ejs

@@ -2,6 +2,8 @@
 <div class="Content js-Content <%- page.type ? page.type + ' with-sidebar' : '' %>">
   <h1><%- page.title %> Example</h1>
 
+  <%- page.content %>
+
   <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>
@@ -12,12 +14,13 @@
     in terms of commits, while the CHANGELOG
     provides a higher level view of this things planned for our
     <a href="https://github.com/transloadit/uppy/blob/master/CHANGELOG.md#next">next release</a>.</p>
-  <p><img src="/images/emojis/ok_hand.png" width="14" align="absmiddle"> Files from the examples are uploaded to our test servers and deleted daily.</p>
 
   <!-- Add textarea already so it's available immediately for logging.
   It is later made visible, and moved into the #console-wrapper to position it in layout how
   you see fit. -->
 
+  <blockquote>Files from the examples are uploaded to our test servers and deleted daily.</blockquote>
+
   <textarea id="console-log" class="Console"></textarea>
   <script>
   console.log = (function (old_function, div_log) {
@@ -33,8 +36,6 @@
   } (console.log.bind(console), document.getElementById("console-log")));
   </script>
 
-  <%- page.content %>
-
   <script>
     // #console-log textarea is declared earlier so it's available immediately for logging.
     // Here it is made visible, and moved into the #console-wrapper, so you can position it in the layout how