From 12fbe4cf5e31ca2c6651e7fcfcc5bf259ee307c6 Mon Sep 17 00:00:00 2001
From: Kevin van Zonneveld <kevin@vanzonneveld.net>
Date: Thu, 3 Dec 2015 14:59:18 +0100
Subject: [PATCH] Add a 'real' example to the frontpage

---
 website/themes/uppy/layout/index.ejs          | 45 ++-----------------
 .../themes/uppy/layout/partials/example1.md   | 12 +++++
 .../themes/uppy/layout/partials/example2.md   |  1 +
 website/themes/uppy/source/css/index.styl     | 27 ++++++-----
 4 files changed, 29 insertions(+), 56 deletions(-)
 create mode 100644 website/themes/uppy/layout/partials/example1.md
 create mode 100644 website/themes/uppy/layout/partials/example2.md

diff --git a/website/themes/uppy/layout/index.ejs b/website/themes/uppy/layout/index.ejs
index b18f73a5b..ac47f7032 100644
--- a/website/themes/uppy/layout/index.ejs
+++ b/website/themes/uppy/layout/index.ejs
@@ -39,52 +39,13 @@
 
 <div id="example">
   <h2>10 Second Example</h2>
-  <div class="block">
-    <figure class="highlight lang-html"><table><tbody><tr><td class="gutter"><pre>1
-2
-3
-4
-</pre></td><td class="code"><pre><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"demo"</span>&gt;</span>
-  <span class="tag">&lt;<span class="title">p</span>&gt;</span>{{message}}<span class="tag">&lt;/<span class="title">p</span>&gt;</span>
-  <span class="tag">&lt;<span class="title">input</span> <span class="attribute">v-model</span>=<span class="value">"message"</span>&gt;</span>
-<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
-</pre></td></tr></tbody></table></figure>
-  </div>
 
-  <div class="sign">+</div>
+  <div class="block"><%- partial('partials/example1') %></div>
 
-  <div class="block">
-    <figure class="highlight lang-js"><table><tbody><tr><td class="gutter"><pre>1
-2
-3
-4
-5
-6
-</pre></td><td class="code"><pre><span class="keyword">var</span> demo = <span class="keyword">new</span> Uppy({
-  el: <span class="string">'#demo'</span>,
-  data: {
-    message: <span class="string">'Hello Uppy!'</span>
-  }
-})
-</pre></td></tr></tbody></table></figure>
-  </div>
+  <div class="sign">&raquo;</div>
 
-  <div class="sign">=</div>
+  <div class="block"><%- partial('partials/example2') %></div>
 
-  <div class="block result">
-    <div id="demo">
-      <p>{{message}}</p>
-      <input v-model="message">
-    </div>
-    <script>
-    var demo = new Uppy({
-      el: '#demo',
-      data: {
-        message: 'Hello Uppy!'
-      }
-    })
-    </script>
-  </div>
 </div>
 <div id="features">
   <div class="feats">
diff --git a/website/themes/uppy/layout/partials/example1.md b/website/themes/uppy/layout/partials/example1.md
new file mode 100644
index 000000000..6d45c4658
--- /dev/null
+++ b/website/themes/uppy/layout/partials/example1.md
@@ -0,0 +1,12 @@
+```html
+<div id="drag-drop"></div>
+
+<script src="http://assets.transloadit.com/uppy.min.js" />
+<script>
+var uppy = new Uppy();
+uppy
+  .use(DragDrop, {selector: '#drag-drop'})
+  .use(Tus10, {endpoint: 'http://master.tus.io:8080'})
+  .run();
+</script>
+```
diff --git a/website/themes/uppy/layout/partials/example2.md b/website/themes/uppy/layout/partials/example2.md
new file mode 100644
index 000000000..520758ab2
--- /dev/null
+++ b/website/themes/uppy/layout/partials/example2.md
@@ -0,0 +1 @@
+@todo screenshot here?
diff --git a/website/themes/uppy/source/css/index.styl b/website/themes/uppy/source/css/index.styl
index abcb0c2d2..9c589efdd 100644
--- a/website/themes/uppy/source/css/index.styl
+++ b/website/themes/uppy/source/css/index.styl
@@ -104,8 +104,19 @@ html, body
     margin 0 auto 3em
     h2
         margin-bottom 1.5em
+    pre
+        padding 2px
+        margin 2px
+    code
+        padding 0px
+        margin 0px
     code, pre
         background-color transparent
+        white-space pre
+        font-family: 'Roboto Mono', Monaco, courier, monospace;
+        font-size: 12px;
+        height: auto;
+        line-height: 18px;
     figure.highlight
         margin 0
         box-shadow none
@@ -120,24 +131,12 @@ html, body
     .block
         text-align left
         display inline-block
-        width 28%
-        height 10em
+        width 43%
+        height 13em
         vertical-align top
         background-color #f9f9f9
         border-radius 2px
         box-shadow 0 1px 2px rgba(0,0,0,.125)
-    #demo
-        padding 0 20px
-        word-wrap break-word
-        input
-            font-size .75em
-            border 1px solid #ccc
-            padding 4px 8px
-            border-radius 2px
-            font-family $body-font
-            &:focus
-                outline none
-                border-color $primary
 
 #features
     padding 3em 0