Give examples their own layout so they can share more logic

website/src/examples/cdn/html/app.html

@@ -4,6 +4,6 @@
 var uppy = new Uppy.Core();
 uppy.use(Uppy.plugins.Tus10);
 
-console.log(Uppy);
+console.log(uppy.type);
 console.log('Uppy loaded from CDN with a tus 1.0 plugin');
 </script>

website/src/examples/cdn/index.ejs

@@ -1,5 +1,6 @@
 ---
 title: CDN
+layout: example
 type: examples
 order: 0
 ---
@@ -9,22 +10,30 @@ CDN
 {% endblockquote %}
 
 <p>
-This example showcases sourcing an UMD dist build straight from a CDN.
+  This example showcases sourcing an UMD dist build straight from a CDN.
 </p>
 
+<!-- <link rel="stylesheet" href="css/app.css"> -->
 <% include html/app.html %>
 <script src="js/app.js"></script>
 
 <hr />
 
+<p id="console-wrapper">
+  Console output: <br />
+</p>
+
 <p>
   On this page we're using the following HTML snippet:
 </p>
-
 {% include_code lang:html cdn/html/app.html %}
 
 <p>
   Along with this JavaScript:
 </p>
-
 {% include_code lang:js cdn/js/app.es6 %}
+
+<!-- <p>
+  And the following CSS:
+</p>
+{% include_code lang:css cdn/css/app.css %} -->

website/src/examples/dragdrop/index.ejs

@@ -1,5 +1,6 @@
 ---
 title: Drag and Drop
+layout: example
 type: examples
 order: 2
 ---
@@ -9,7 +10,7 @@ Drag & Drop
 {% endblockquote %}
 
 <p>
-Here you'll see a demo of how you might set up Drag and Drop with Uppy:
+  Here you'll see a demo of how you might set up Drag and Drop with Uppy:
 </p>
 
 <link rel="stylesheet" href="css/app.css">
@@ -18,20 +19,21 @@ Here you'll see a demo of how you might set up Drag and Drop with Uppy:
 
 <hr />
 
+<p id="console-wrapper">
+  Console output: <br />
+</p>
+
 <p>
   On this page we're using the following HTML snippet:
 </p>
-
 {% include_code lang:html dragdrop/html/app.html %}
 
 <p>
   Along with this JavaScript:
 </p>
-
 {% include_code lang:js dragdrop/js/app.es6 %}
 
 <p>
   And the following CSS:
 </p>
-
 {% include_code lang:css dragdrop/css/app.css %}

website/src/examples/dragdrop/js/app.es6

@@ -1,5 +1,3 @@
-console.log('a');
-
 import Uppy from 'uppy/core';
 import { DragDrop, Tus10 } from 'uppy/plugins';
 
@@ -8,3 +6,5 @@ const files = uppy
   .use(DragDrop, {selector: '#upload-target'})
   .use(Tus10, {endpoint: 'http://master.tus.io:8080'})
   .run();
+
+console.log(uppy.type);

website/src/examples/dropbox/index.ejs

@@ -1,5 +1,6 @@
 ---
 title: Dropbox
+layout: example
 type: examples
 order: 1
 ---
@@ -9,7 +10,7 @@ Dropbox
 {% endblockquote %}
 
 <p>
-Here you'll see a demo of how you might set up Dropbox with Uppy:
+  Here you'll see a demo of how you might set up Dropbox with Uppy:
 </p>
 
 <link rel="stylesheet" href="css/app.css">
@@ -18,20 +19,21 @@ Here you'll see a demo of how you might set up Dropbox with Uppy:
 
 <hr />
 
+<p id="console-wrapper">
+  Console output: <br />
+</p>
+
 <p>
   On this page we're using the following HTML snippet:
 </p>
-
 {% include_code lang:html dropbox/html/app.html %}
 
 <p>
   Along with this JavaScript:
 </p>
-
 {% include_code lang:js dropbox/js/app.es6 %}
 
 <p>
   And the following CSS:
 </p>
-
 {% include_code lang:css dropbox/css/app.css %}

website/src/examples/dropbox/js/app.es6

@@ -1,3 +1,10 @@
-import { DropboxPlugin } from 'uppy/plugins';
+import Uppy from 'uppy/core';
+import { Dropbox, Tus10 } from 'uppy/plugins';
 
-console.log(DropboxPlugin);
+const uppy = new Uppy({wait: false});
+const files = uppy
+  .use(Dropbox, {selector: '#upload-target'})
+  .use(Tus10, {endpoint: 'http://master.tus.io:8080'})
+  .run();
+
+console.log(uppy.type);

website/themes/uppy/layout/example.ejs

@@ -0,0 +1,33 @@
+<%- partial('partials/sidebar', { type: page.type, index: page.index }) %>
+<div class="content <%- page.type ? page.type + ' with-sidebar' : '' %>">
+  <h1><%- page.title %> Example</h1>
+
+  <!--
+  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.
+  -->
+  <textarea id="console-log"></textarea>
+  <script>
+  console.log = (function (old_function, div_log) {
+    return function (text) {
+      old_function(text);
+      div_log.value = text + "\n" + div_log.value;
+    };
+  } (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
+    // you see fit.
+    document.getElementById('console-wrapper').appendChild(document.getElementById('console-log'));
+    document.getElementById('console-log').style.display = 'block';
+  </script>
+
+  <div class="footer">Caught a mistake or want to contribute to the documentation?
+     <a href="https://github.com/transloadit/uppy/blob/master/website/src/<%- page.source %>" target="_blank">Edit/fork this page directly on Github</a>!
+  </div>
+</div>

website/themes/uppy/layout/page.ejs

@@ -2,7 +2,7 @@
     <%- partial('partials/sidebar', { type: page.type, index: page.index }) %>
 <% } %>
 <div class="content <%- page.type ? page.type + ' with-sidebar' : '' %>">
-    <h1><%- page.title %><%- page.type === 'examples' ? ' Example' : '' %></h1>
+    <h1><%- page.title %></h1>
     <%- page.content %>
     <% if (page.type === 'guide') { %>
       <div class="guide-links">