From 959509fd70dceb0c29e4eceb0911ba1a53e91ca6 Mon Sep 17 00:00:00 2001
From: Dominik Richter <dominik.richter@gmail.com>
Date: Fri, 23 Sep 2016 15:26:22 +0200
Subject: [PATCH] embed tutorial inside the website

---
 tasks/www.rb                        | 16 ++++++++++++++--
 www/source/layouts/_nav.slim        |  4 ++--
 www/source/layouts/layout.slim      | 14 ++++++++++++++
 www/tutorial/app/app.component.html |  2 +-
 www/tutorial/app/app.component.ts   |  2 +-
 www/tutorial/index.html             |  2 +-
 www/tutorial/styles.css             |  1 +
 7 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/tasks/www.rb b/tasks/www.rb
index 3a3bc5aa7..e3a48dd8b 100644
--- a/tasks/www.rb
+++ b/tasks/www.rb
@@ -19,21 +19,33 @@ require 'inquirer'
 require_relative 'shared.rb'
 
 namespace :www do
-  desc 'Builds the site locally'
-  task :build do
+  desc 'Builds the tutorial contents'
+  task :tutorial do
     Log.section 'Build the online tutorial in www/tutorial/'
     system([
       'cd www/tutorial/',
       'npm install',
       'gulp build',
     ].join(' && '))
+  end
 
+  desc 'Builds the middleman site'
+  task :site do
     Log.section 'Build middleman project in www/'
     Bundler.with_clean_env {
       system('cd www/ && bundle install && bundle exec middleman build')
     }
   end
 
+  desc 'Assemble the website site from middleman and the tutorial'
+  task :assemble do
+    Log.section 'Copy only tutorial into middleman build directory'
+    system('rsync -a --exclude=index.html www/tutorial/dist/* www/build/')
+  end
+
+  desc 'Builds the full site locally'
+  task build: ['www:tutorial', 'www:site', 'www:assemble']
+
   desc 'Releases the site to gh-pages'
   task :release do
     # This folder contains the built files
diff --git a/www/source/layouts/_nav.slim b/www/source/layouts/_nav.slim
index 362a2d2e4..e645e6754 100644
--- a/www/source/layouts/_nav.slim
+++ b/www/source/layouts/_nav.slim
@@ -6,7 +6,7 @@ nav#main-nav
 
   ul.main-nav--links
     li.main-nav--link-ctas
-      a.button.transparent href="" Try the Demo
+      a.button.transparent.try-demo href="#" Try the Demo
       a.button.secondary href="" Download
     li.main-nav--link
       a href="/overview"
@@ -38,5 +38,5 @@ nav#main-nav
         span.main-nav--link-text Contribute
 
 nav#main-nav-ctas
-  a.button.transparent href="" Try the Demo
+  a.button.transparent.try-demo href="#" Try the Demo
   a.button.secondary href="" Download
diff --git a/www/source/layouts/layout.slim b/www/source/layouts/layout.slim
index a151008ba..ee8428803 100644
--- a/www/source/layouts/layout.slim
+++ b/www/source/layouts/layout.slim
@@ -8,6 +8,7 @@ html
     title = current_page.data.title || "InSpec"
 
     link href='//fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'
+    link rel='stylesheet' type='text/css' href='css/inspec_tutorial.css'
 
     == stylesheet_link_tag :site
 
@@ -20,6 +21,19 @@ html
 
     = partial "layouts/footer"
 
+    script src='scripts/inspec_tutorial.js'
+    script src='dist/inspec_tutorial.js'
+    div inspec-tutorial="true" class="inspec-tutorial" hidden="true"
+      = "Loading"
+
     == javascript_include_tag "all"
     javascript:
       $(document).foundation();
+      $('.try-demo').click(function(event){
+        event.stopPropagation();
+        $('.inspec-tutorial').show()
+        $('.quit-inspec-tutorial').click(function(event){
+          event.stopPropagation();
+          $('.inspec-tutorial').hide()
+        })
+      });
diff --git a/www/tutorial/app/app.component.html b/www/tutorial/app/app.component.html
index e4da365c0..154d2490c 100644
--- a/www/tutorial/app/app.component.html
+++ b/www/tutorial/app/app.component.html
@@ -2,7 +2,7 @@
   <div class="tutorial-nav">
     <i (click)="updateInstructions('prev')" class="icon-angle-circled-left"></i>
     <i (click)="updateInstructions('next')" class="icon-angle-circled-right"></i>
-    <i class="icon-cancel-circled"></i>
+    <i class="icon-cancel-circled quit-inspec-tutorial"></i>
   </div>
 
   <div class="tutorial-wrapper">
diff --git a/www/tutorial/app/app.component.ts b/www/tutorial/app/app.component.ts
index 4ad9a17ac..1b011f9da 100644
--- a/www/tutorial/app/app.component.ts
+++ b/www/tutorial/app/app.component.ts
@@ -9,7 +9,7 @@ const SH_PROMPT = '$
 ';
 const INSPEC_PROMPT = 'inspec> 
';
 
 @Component({
-  selector: 'my-app',
+  selector: '[inspec-tutorial]',
   templateUrl: 'app/app.component.html',
   styleUrls: ['app/app.component.css'],
   providers: [ HTTP_PROVIDERS ],
diff --git a/www/tutorial/index.html b/www/tutorial/index.html
index 3804617f0..df7a0c2da 100644
--- a/www/tutorial/index.html
+++ b/www/tutorial/index.html
@@ -24,6 +24,6 @@
 
     <script src="dist/inspec_tutorial.js"></script>
 
-    <my-app class="inspec-tutorial">Loading...</my-app>
+    <div inspec-tutorial class="inspec-tutorial">Loading...</div>
   </body>
 </html>
diff --git a/www/tutorial/styles.css b/www/tutorial/styles.css
index 98dde80f5..b3fa8484d 100644
--- a/www/tutorial/styles.css
+++ b/www/tutorial/styles.css
@@ -8,4 +8,5 @@
   bottom: 0;
   left: 0;
   right: 0;
+  z-index: 100;
 }