Updates to tutorials structure

source/tutorials/build-and-test-todo/introduction.md

@@ -3,36 +3,17 @@ title: Build and test TodoMVC with Cypress
 comments: false
 ---
 
-{% note info %}
-# {% fa fa-graduation-cap %} What you'll learn
-
-- How to run Cypress from an `npm` script
-- How to Use Cypress to test while developing features
-- How to use the Cypress UI to help create your tests
-- How to visit pages, interact with elements and make assertions
-- How to stub network requests to test your front-end in isolation
-- How to use fixtures to run your tests with reliable data
-- How to manipulate fixture data in your specs to handle different data requirements
-- How to create custom Cypress commands
-- How to create data-driven tests to remove duplication
-- How to setup and teardown real data to run true end-to-end tests that are reliable and repeatable
-- How to run all of your tests in headless mode
-
-{% endnote %}
-
-
 ## Introduction
 
-In this tutorial, we'll walk through building a todo application while testing it with Cypress. We'll look at ways we can leverage Cypress to not only create a test suite for our application, but how it can be used to help us write our tests and guide the implementation of features.
-
-We'll start with the [project setup](./project-setup.html) where we'll clone a repository that already has the build and server configuration handled. We'll take a look at the project's dependencies and scripts and then we'll jump right into getting Cypress up and running.
-
-From there, we'll work through creating our first real test and implementing the feature under test as we go. We'll see how to find and interact with elements on the page and how to make assertions about their behavior.
+In this tutorial, we will walk through building a "Todo" application while testing it with Cypress. We will look at ways we can use Cypress to not only create a test suite for our application, but help us write our tests and guide feature implementation.
 
-We'll continue to implement features and create tests while digging into the available commands and features that make Cypress so incredible to work with.
+By the end of this tutorial, you will have a feel for what it is like to test your application with Cypress while implementing features. You will gain experience with many of the Cypress commands and see how Cypress can help you build your application while creating a great safety net of tests along the way.
 
-We'll build up the entire application using stubbed network requests in our tests. By stubbing the API based on a contract, we can effectively build the front-end for our application and then connect it to the API when it's available. We'll do just that by enabling the API once the front-end is done. Then, we'll dive into how we can code the setup and teardown of real data against the APIs and write some true end to end tests.
+We have a lot of ground to cover, so let's get started!
 
-By the end of this tutorial, you will have a feel for what it's like to test your application with Cypress while implementing features. You'll gain experience with many of the Cypress commands and see how Cypress can help you build your application while creating a great safety net of tests along the way.
+## Contents
 
-We have a lot of ground to cover, so let's get started!
+| | |
+| -- | -- |
+| {% url "Project setup" project-setup %} | {% fa fa-video-camera %} 3:52 |
+| {% url "Testing inputs" testing-inputs %} | {% fa fa-video-camera %} 7:17 |

source/tutorials/build-and-test-todo/project-setup.md

@@ -1,15 +1,12 @@
 ---
 title: Project setup
 comments: false
+layout: video
+containerClass: tutorial
 ---
 
-{% note info %}
-# {% fa fa-graduation-cap %} What you'll learn
+{% video 240554515 %}
 
-- Cloning the starter repository
-- Installing project dependencies with `npm`
-- How to run Cypress from an `npm` script.
-- Visiting a page with Cypress
-{% endnote %}
+## What you'll learn
 
-{% video 240554515 %}
+We will start by cloning a starter {% url "repository" https://github.com/cypress-io/cypress-tutorial-build-todo-starter %}. This repo already has the build and server configuration handled. We will take a look at the project's [`npm`](https://www.npmjs.com/) dependencies and scripts, then jump right into getting Cypress up and running.

source/tutorials/build-and-test-todo/testing-inputs.md

@@ -1,16 +1,12 @@
 ---
 title: Testing text inputs
 comments: false
+layout: video
+containerClass: tutorial
 ---
 
-{% note info %}
-# {% fa fa-graduation-cap %} What you'll learn
+{% video 240554808 %}
 
-- How to use the Cypress UI to assist in building your tests.
-- Interacting with elements
-- Making assertions
-- Using beforeEach to remove duplicated code
-- Defining your application's base url through Cypress configuration
-{% endnote %}
+## What you'll learn
 
-{% video 240554808 %}
+We will work through creating our first real test and implementing the feature under test as we go. We will see how to find and interact with elements on the page and how to make assertions about their behavior. We will also look into some best practices like using `beforeEach` and defining our application's `baseUrl` to remove duplicated code.

themes/cypress/languages/en.yml

@@ -172,7 +172,7 @@ sidebar:
     cypress-log: log
     cypress-server: Server
   tutorials:
-    build-and-test-todo: Build and Test Todo MVC
+    build-and-test-todo: Build and test TodoMVC
     introduction: Introduction
     project-setup: Project Setup
     testing-inputs: Testing Inputs

themes/cypress/layout/video.swig

@@ -0,0 +1,26 @@
+<div id="content-wrap"  class="{{ page.containerClass }}">
+  <div id="content" class="wrapper">
+    <div id="content-inner">
+      <article class="article-container" itemscope itemtype="http://schema.org/Article">
+        <div class="article-inner">
+          <div class="article">
+            <header class="article-header">
+              <h1 class="article-title" itemprop="name">{{ page.title }}</h1>
+              <a href="{{ raw_link(page.source) }}" class="article-edit-link"><i class="fa fa-pencil"></i> {{ __('page.improve') }}</a>
+            </header>
+            <div class="article-content" itemprop="articleBody">
+              {{ add_page_anchors(page.content) }}
+            </div>
+            <footer class="article-footer">
+              {{ page_nav() }}
+            </footer>
+            <div class="article-footer-updated">
+              <time datetime="{{ date_xml(page.updated) }}" itemprop="dateModified">{{ __('page.last-updated', date(page.updated)) }}</time>
+            </div>
+          </div>
+        </div>
+      </article>
+      {{ partial('partial/sidebar') }}
+    </div>
+  </div>
+</div>

themes/cypress/source/css/_partial/page.scss

@@ -571,6 +571,9 @@
   height: 0;
   max-width: 100%;
   height: auto;
+  margin: 2em 0;
+  border: 1px solid #ddd;
+  box-shadow: 0 0px 3px rgba(0, 0, 0, 0.3);
 }
 
 .embed-container iframe {
@@ -579,4 +582,9 @@
   left: 0;
   width: 100%;
   height: 100%;
+  margin: 0;
+}
+
+.tutorial .article-inner {
+  margin-right: 0; 
 }