Change the Drag and Drop example so that we can showcase code samples, as well as use them

I hope you like this @arturi? If not we can change it back of course!

website/src/examples/dragdrop.ejs

@@ -0,0 +1,40 @@
+---
+title: Drag and Drop
+type: examples
+order: 2
+---
+
+<!-- Basic Uppy styles -->
+<link rel="stylesheet" href="dragdrop/static/css/uppy.css">
+
+{% blockquote %}
+Drag &amp; Drop
+{% endblockquote %}
+
+<p>
+Here you'll see a demo of how you might set up Drag and Drop with Uppy:
+</p>
+
+<link rel="stylesheet" href="dragdrop/static/js/app.css">
+<% include dragdrop/src/html/app.htmls %>
+<script src="dragdrop/static/js/app.js"></script>
+
+<hr />
+
+<p>
+  On this page we're using the following HTML snippet:
+</p>
+
+{% include_code &nbsp; lang:html dragdrop/src/html/app.htmls %}
+
+<p>
+  Along with this JavaScript:
+</p>
+
+{% include_code &nbsp; lang:js dragdrop/src/js/app.js %}
+
+<p>
+  And the following CSS:
+</p>
+
+{% include_code &nbsp; lang:js dragdrop/src/css/app.css %}

website/src/examples/dragdrop/src/css/app.css

@@ -0,0 +1,3 @@
+.UppyDragDrop-puppy {
+  max-width: 80px;
+}

website/src/examples/dragdrop.md → website/src/examples/dragdrop/src/html/app.htmls

@@ -1,17 +1,3 @@
----
-title: DragDrop
-type: examples
-order: 2
----
-
-> Drag & Drop
-
-<!-- styles -->
-<link rel="stylesheet" href="dragdrop/static/css/style.css">
-
-<!-- Basic Uppy styles -->
-<link rel="stylesheet" href="dragdrop/static/css/uppy.css">
-
 <form id="upload-target" class="UppyDragDrop" method="post" action="/" enctype="multipart/form-data">
   <svg class="UppyDragDrop-puppy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125" enable-background="new 0 0 100 100"><path d="M16.582 21.3L-.085 62.713l32.94 13.295zM99.915 62.714L66.975 76.01 83.25 21.3zM50.917 68.117L62.443 56.59H37.386l11.527 11.526v5.905l-3.063 3.32 1.474 1.36 2.59-2.807 2.59 2.807 1.475-1.358-3.063-3.32zM66.976 41.415c-3.972 0-7.193-3.22-7.193-7.193 0-3.973 3.222-7.193 7.193-7.193 3.974 0 7.193 3.22 7.193 7.192 0 3.973-3.22 7.193-7.194 7.193m2.506-11.732c-.738 0-1.337.6-1.337 1.337s.6 1.336 1.337 1.336 1.337-.598 1.337-1.336-.6-1.337-1.338-1.337zM32.854 41.415c-3.973 0-7.193-3.22-7.193-7.193 0-3.973 3.22-7.193 7.194-7.193 3.973 0 7.192 3.22 7.192 7.192 0 3.973-3.22 7.193-7.192 7.193m2.506-11.732c-.738 0-1.337.6-1.337 1.337s.6 1.336 1.337 1.336 1.337-.598 1.337-1.336-.598-1.337-1.337-1.337z"/></svg>
   <div>
@@ -23,19 +9,3 @@ order: 2
 </form>
 
 <small>Puppy icon by Jorge Fernandez del Castillo Gomez <br>from the Noun Project</small>
-
-<!-- Include the bundled app.js client -->
-<script src="dragdrop/static/js/app.js"></script>
-
-<!-- <script src="uppy.js"></script>
-
-<script>
-  var uppy = new Uppy({wait: false});
-  console.log(uppy);
-  var files = uppy
-    .use(DragDrop, {selector: '#upload-target'})
-    .use(Tus10, {endpoint: 'http://master.tus.io:8080'})
-    .run();
-</script> -->
-
-<!-- <script src="static/js/app.js"></script> -->