Add a build history screenshot to the landing page and fix the screenshots.js script to work on prod

screenshots/screenshots.js

@@ -15,8 +15,9 @@ var isDebug = !!options['d'];
 
 var rootUrl = isDebug ? 'http://localhost:5000/' : 'https://quay.io/';
 var repo = isDebug ? 'complex' : 'r0';
-var org = isDebug ? 'buynlarge' : 'quay'
-var orgrepo = 'orgrepo'
+var org = isDebug ? 'buynlarge' : 'devtable'
+var orgrepo = isDebug ? 'buynlarge/orgrepo' : 'quay/testconnect2';
+var buildrepo = isDebug ? 'devtable/building' : 'quay/testconnect2';
 
 var outputDir = "screenshots/";
 
@@ -32,8 +33,16 @@ casper.on("page.error", function(msg, trace) {
 });
 
 casper.start(rootUrl + 'signin', function () {
+  this.wait(1000);
+});
+
+casper.thenClick('.accordion-toggle[data-target="#collapseSignin"]', function() {
+  this.wait(1000);
+});
+
+casper.then(function () {
   this.fill('.form-signin', {
-    'username': 'devtable',
+    'username': isDebug ? 'devtable' : 'quaydemo',
     'password': isDebug ? 'password': 'C>K98%y"_=54x"<',
   }, false);
 });
@@ -43,6 +52,7 @@ casper.thenClick('.form-signin button[type=submit]', function() {
 });
 
 casper.then(function() {
+  this.waitForSelector('.fa-lock');
   this.log('Generating user home screenshot.');
 });
 
@@ -150,12 +160,25 @@ casper.then(function() {
   this.log('Generating oganization repository admin screenshot.');
 });
 
-casper.thenOpen(rootUrl + 'repository/' + org + '/' + orgrepo + '/admin', function() {
-  this.waitForText('outsideorg')
+casper.thenOpen(rootUrl + 'repository/' + orgrepo + '/admin', function() {
+  this.waitForText('Robot Account')
 });
 
 casper.then(function() {
   this.capture(outputDir + 'org-repo-admin.png');
 });
 
+
+casper.then(function() {
+  this.log('Generating build history screenshot.');
+});
+
+casper.thenOpen(rootUrl + 'repository/' + buildrepo + '/build', function() {
+  this.waitForText('Starting');
+});
+
+casper.then(function() {
+  this.capture(outputDir + 'build-history.png');
+});
+
 casper.run();

static/directives/user-setup.html

@@ -3,7 +3,7 @@
     <div class="panel panel-default">
       <div class="panel-heading">
         <h4 class="panel-title accordion-title">
-          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#collapseSignin">
+          <a id="signinToggle" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#collapseSignin">
             Sign In
           </a>
         </h4>

static/partials/landing.html

@@ -106,15 +106,20 @@
   </div>
 
   <div class="tour-section row">
-    <div class="col-md-7"><img src="/static/img/repo-changes.png" title="View Image - Quay.io" data-screenshot-url="https://quay.io/repository/devtable/image/..." class="img-responsive"></div>
+    <div class="col-md-7"><img src="/static/img/build-history.png" title="View Image - Quay.io"
+                                             data-screenshot-url="https://quay.io/repository/devtable/building/build"
+                                             class="img-responsive"></div>
     <div class="col-md-5">
-      <div class="tour-section-title">Docker diff in the cloud</div>
+      <div class="tour-section-title">Dockerfile Build in the cloud</div>
       <div class="tour-section-description">
-        We wanted to know what was changing in each image of our repositories just as much as you do. So we added diffs. Now you can see exactly which files were <b>added</b>, <b>changed</b>, or <b>removed</b> for each image. We've also provided two awesome ways to view your changes, either in a filterable list, or in a drill down tree view.
+        Like to use <b>Dockerfiles</b> to build your images? Simply upload your Dockerfile (and any additional files it needs) and we'll build your Dockerfile into an image and push it to your repository.        
+      </div>
+      <div class="tour-section-description">        
+        If you store your Dockerfile in <i class="fa fa-github fa-lg" style="margin: 6px;"></i><b>GitHub</b>, add a <b>Build Trigger</b> to your repository and we'll start a Dockerfile build for every change you make.
       </div>
     </div>
   </div>
-  
+
   <div class="tour-section row">
     <div class="col-md-7 col-md-push-5"><img src="/static/img/repo-admin.png" title="Repository Admin - Quay.io" data-screenshot-url="https://quay.io/repository/devtable/complex/admin" class="img-responsive"></div>
     <div class="col-md-5 col-md-pull-7">
@@ -128,4 +133,14 @@
       <div class="tour-section-description">Want to share with the world? Make your repository <b>fully public</b>.</div>
     </div>
   </div>
+
+  <div class="tour-section row">
+    <div class="col-md-7"><img src="/static/img/repo-changes.png" title="View Image - Quay.io" data-screenshot-url="https://quay.io/repository/devtable/image/..." class="img-responsive"></div>
+    <div class="col-md-5">
+      <div class="tour-section-title">Docker diff whenever you need it</div>
+      <div class="tour-section-description">
+        We wanted to know what was changing in each image of our repositories just as much as you do. So we added diffs. Now you can see exactly which files were <b>added</b>, <b>changed</b>, or <b>removed</b> for each image. We've also provided two awesome ways to view your changes, either in a filterable list, or in a drill down tree view.
+      </div>
+    </div>
+  </div>
 </div>