embed tutorial inside the website

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

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

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()
+        })
+      });

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">

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 ],

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>

www/tutorial/styles.css

@@ -8,4 +8,5 @@
   bottom: 0;
   left: 0;
   right: 0;
+  z-index: 100;
 }