Merge pull request #59 from cypress-io/docs/design

Docs/design

docs/_config.yml

@@ -40,9 +40,13 @@ post_asset_folder: false
 relative_link: false
 future: true
 highlight:
-  enable: true
-  line_number: false
-  auto_detect: true
+  enable: false
+
+# https://github.com/ele828/hexo-prism-plugin
+prism_plugin:
+  mode: 'preprocess'    # realtime/preprocess
+  theme: 'coy'
+  line_number: false    # default false
 
 # Category & Tag
 default_category: uncategorized
@@ -111,7 +115,7 @@ hfc_html:
   enable: true
   exclude:
 hfc_css:
-  enable: true
+  enable: false
   exclude:
     - '*.min.css'
 hfc_js:

docs/cypress/integration/main_spec.coffee

@@ -5,6 +5,9 @@ describe "Documentation", ->
   beforeEach ->
     cy.server()
     @mainGuides = "/guides/getting-started/why-cypress"
+    @mainAPI = "/api/welcome/api"
+    @mainEco = "/ecosystem/index"
+    @mainFAQ = "/faq/index"
 
   context "Pages", ->
     describe "404", ->
@@ -24,24 +27,52 @@ describe "Documentation", ->
       beforeEach ->
         cy.visit("/")
 
-      it "displays links to guides and api", ->
-        cy
-          .contains(".main-nav-link", "Guides")
-            .should("have.attr", "href")
-              .and("include", @mainGuides)
-        cy
-          .contains(".main-nav-link", "API")
-            .should("have.attr", "href")
-              .and("include", "/api/welcome/api.html")
+      it "displays links to pages", ->
+        cy.contains(".main-nav-link", "Guides")
+          .should("have.attr", "href").and("include", @mainGuides)
+
+        cy.contains(".main-nav-link", "API")
+          .should("have.attr", "href").and("include", @mainAPI)
+
+        cy.contains(".main-nav-link", "Ecosystem")
+          .should("have.attr", "href").and("include", @mainEco)
+
+        cy.contains(".main-nav-link", "FAQ")
+          .should("have.attr", "href").and("include", @mainFAQ)
 
       it "displays link to github repo", ->
         cy
-          .get(".main-nav-link").find(".fa-github").parent()
-            .should("have.attr", "href")
-              .and("eq", "https://github.com/cypress-io/cypress")
+        .get(".main-nav-link").find(".fa-github").parent()
+        .should("have.attr", "href")
+        .and("eq", "https://github.com/cypress-io/cypress")
 
-      it "displays language dropdown", ->
-        cy.contains("select", "English").find("option").contains("English")
+        it "displays language dropdown", ->
+          cy.contains("select", "English").find("option").contains("English")
+
+      describe "active nav", ->
+        it "higlights guides when on a guides page", ->
+          cy
+            .visit(@mainGuides + ".html")
+              .contains(".main-nav-link", "Guides")
+                .should("have.class", "active")
+
+        it "higlights api when on a api page", ->
+          cy
+            .visit(@mainAPI + ".html")
+              .contains(".main-nav-link", "API")
+                .should("have.class", "active")
+
+        it "higlights eco when on a eco page", ->
+          cy
+            .visit(@mainEco + ".html")
+              .contains(".main-nav-link", "Ecosystem")
+                .should("have.class", "active")
+
+        it "higlights FAQ when on a FAQ page", ->
+          cy
+            .visit(@mainFAQ + ".html")
+              .contains(".main-nav-link", "FAQ")
+                .should("have.class", "active")
 
     describe "Search", ->
       beforeEach ->
@@ -63,7 +94,7 @@ describe "Documentation", ->
           .get("#search-input").type("g")
           .get(".ds-dropdown-menu").should("be.visible")
 
-    describe "Guides & API", ->
+    describe "Guides", ->
       beforeEach ->
         cy.visit(@mainGuides + ".html")
 

docs/gulpfile.js

@@ -62,6 +62,10 @@ gulp.task('clean:js', () => {
   return remove('public/js/!(application).js')
 })
 
+gulp.task('clean:css', () => {
+  return remove('public/css/!(style).css')
+})
+
 gulp.task('clean:tmp', () => {
   return remove('tmp')
 })
@@ -75,7 +79,7 @@ gulp.task('cname', () => {
 })
 
 gulp.task('post:build', (cb) => {
-  runSequence('copy:static:assets', 'clean:js', 'revision', 'clean:public', 'copy:tmp:to:public', 'clean:tmp', 'cname', cb)
+  runSequence('copy:static:assets', 'clean:js', 'clean:css', 'revision', 'clean:public', 'copy:tmp:to:public', 'clean:tmp', 'cname', cb)
 })
 
 gulp.task('copy:static:assets', ['move:menu:spy:js', 'move:scrolling:element:js', 'move:doc:search:js', 'move:doc:search:css'])

docs/package.json

@@ -14,7 +14,6 @@
     "clean-deps": "rm -rf node_modules",
     "convert": "node ./cy_scripts/convert.js",
     "deploy": "npm run build && hexo deploy",
-    "build-prod": "hexo clean && hexo generate && gulp prep",
     "start": "hexo server --port 2222",
     "precypress": "npm install cypress-cli && cypress install",
     "cypress": "cypress run --record --key $DOCS_RECORD_KEY",
@@ -40,10 +39,12 @@
     "hexo": "3.3.1",
     "hexo-algoliasearch": "^0.2.1",
     "hexo-deployer-git": "^0.2.0",
+    "hexo-filter-cleanup": "1.0.7",
     "hexo-generator-archive": "^0.1.4",
     "hexo-generator-category": "^0.1.3",
     "hexo-generator-index": "^0.2.0",
     "hexo-generator-seo-friendly-sitemap": "0.0.20",
+    "hexo-prism-plugin": "^2.0.2",
     "hexo-renderer-marked": "^0.2.10",
     "hexo-renderer-scss": "^1.0.2",
     "hexo-server": "^0.2.0",

docs/scripts/helpers.js

@@ -66,20 +66,28 @@ hexo.extend.helper.register('doc_sidebar', function(className){
   return result
 })
 
-hexo.extend.helper.register('header_menu', function(className){
-  var menu = this.site.data.menu
-  var result = ''
+hexo.extend.helper.register('menu', function(type){
+  var file = type + '-menu'
+  var menu = this.site.data[file]
   var self = this
   var lang = this.page.lang
   var isEnglish = lang === 'en'
+  var currentPathFolder = this.path.split('/')[0]
 
-  _.each(menu, function(path, title){
-    if (!isEnglish && ~localizedPath.indexOf(title)) path = lang + path
+  return _.reduce(menu, function(result, menuPath, title){
+    if (!isEnglish && ~localizedPath.indexOf(title)) {
+      menuPath = lang + menuPath
+    }
+    // Sees if our current path is part of the menu's path
+    // Capture the first folder
+    // /guides/welcome/foo.html captures 'guides'
+    var firstPathName = menuPath.split("/")[1]
 
-    result += '<a href="' + self.url_for(path) + '" class="' + className + '-link">' + self.__('menu.' + title) + '</a>'
-  })
+    // Does our current path match our menu?
+    var isCurrent = currentPathFolder === firstPathName
 
-  return result
+    return result += `<a href="${self.url_for(menuPath)}" class="${type}-nav-link ${isCurrent ? 'active' : ''}"> ${self.__('menu.' + title)}</a>`
+  }, '')
 })
 
 hexo.extend.helper.register('canonical_url', function(lang){

docs/themes/cypress/layout/page.swig

@@ -4,20 +4,18 @@
       <article class="article-container" itemscope itemtype="http://schema.org/Article">
         <div class="article-inner">
           <div class="article">
-            <div class="inner">
-              <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">
-                {{ page_anchor(page.content) }}
-              </div>
-              <footer class="article-footer">
-                <time class="article-footer-updated" datetime="{{ date_xml(page.updated) }}" itemprop="dateModified">{{ __('page.last-updated', date(page.updated)) }}</time>
-                {{ page_nav() }}
-              </footer>
-              {{ partial('partial/comment') }}
+            <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">
+              {{ page_anchor(page.content) }}
             </div>
+            <footer class="article-footer">
+              <time class="article-footer-updated" datetime="{{ date_xml(page.updated) }}" itemprop="dateModified">{{ __('page.last-updated', date(page.updated)) }}</time>
+              {{ page_nav() }}
+            </footer>
+            {{ partial('partial/comment') }}
           </div>
           <aside id="article-toc" role="navigation">
             <div id="article-toc-inner">

docs/themes/cypress/layout/partial/after_footer.swig

@@ -1,16 +1,16 @@
 <!-- Scripts -->
-<!-- build:js build/js/main.js -->
+<!-- build:js /js/application.js -->
 {{ js('js/lang_select') }}
 {{ js('js/scrollingelement') }}
 {{ js('js/menuspy') }}
 {{ js('js/toc') }}
 {{ js('js/mobile_nav') }}
-<!-- endbuild -->
-
 {% if config.algolia[page.lang] %}
   <!-- Algolia -->
   {{ js('js/docsearch') }}
 {% endif %}
+<!-- endbuild -->
+
 
 <!-- Algolia -->
 {% if config.algolia[page.lang] %}

docs/themes/cypress/layout/partial/head.swig

@@ -22,7 +22,7 @@
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 
   <!-- CSS -->
-  <!-- build:css build/css/cypress.css -->
+  <!-- build:css /css/style.css -->
   {{ css('css/docsearch') }}
   {{ css('css/cypress') }}
   <!-- endbuild -->

docs/themes/cypress/layout/partial/header.swig

@@ -6,7 +6,7 @@
       </a>
     </h1>
     <nav id="main-nav">
-      {{ header_menu('main-nav') }}
+      {{ menu('main') }}
       <a href="https://github.com/{{ config.github_main_repo }}" class="main-nav-link"><i class="fa fa-github"></i></a>
       <div id="search-input-wrap">
         <div id="search-input-icon">

docs/themes/cypress/layout/partial/sidebar.swig

@@ -1,3 +1,3 @@
 <aside id="sidebar" role="navigation">
-  <div class="inner">{{ doc_sidebar('sidebar') }}</div>
-</aside>
+  {{ doc_sidebar('sidebar') }}
+</aside>

docs/themes/cypress/source/css/_partial/base.scss

@@ -42,6 +42,7 @@ table, caption, td, th {
 
 * {
   box-sizing: inherit;
+  -webkit-font-smoothing: antialiased;
   &:before {
     box-sizing: inherit;
   }
@@ -57,16 +58,20 @@ button, select, input, input[type="submit"]::-moz-focus-inner, input[type="butto
 }
 
 .wrapper {
+  margin: 0 auto;
+
   &:before {
     content: "";
     display: table;
   }
+
   &:after {
     content: "";
     display: table;
     clear: both;
   }
 }
+
 .inner {
   &:before {
     content: "";
@@ -80,9 +85,11 @@ button, select, input, input[type="submit"]::-moz-focus-inner, input[type="butto
 }
 
 #content-wrap {
-  background: $white;
+  background-color: white;
   border-top: 1px solid $color-background;
   border-bottom: 1px solid $color-background;
+  padding-top: 40px;
+  padding-bottom: 60px;
   margin: -1px 0;
 }
 
@@ -125,11 +132,17 @@ button, select, input, input[type="submit"]::-moz-focus-inner, input[type="butto
 }
 
 #content {
+  background-color: #fff;
+  // border-right: 1px solid #eee;
+  // border-left: 1px solid #eee;
+  // margin-top: -50px;
   position: relative;
+
   &:before {
     content: "";
     display: table;
   }
+
   &:after {
     content: "";
     display: table;

docs/themes/cypress/source/css/_partial/header.scss

@@ -1,6 +1,5 @@
 #header {
   position: relative;
-  padding: 6px 0;
 }
 
 #header-inner {
@@ -36,18 +35,25 @@
 
 .main-nav-link {
   font-size: 14px;
-  color: $white-90;
+  color: $white-60;
   text-decoration: none;
   line-height: 50px;
   transition: 0.2s;
   font-family: $font-title;
   display: inline-block;
-  padding: 0 15px;
+  padding: 10px 15px;
+  font-weight: 400;
+
   &:hover {
     opacity: 1;
     color: $white;
   }
 
+  &.active {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: white;
+  }
+
   .fa-github {
     font-size: 26px;
     position: relative;

docs/themes/cypress/source/css/_partial/highlight.scss

@@ -1,171 +1,43 @@
-pre {
-  font-family: $font-mono;
-  color: $highlight-foreground;
-  background: $highlight-background;
-  font-size: 0.9em;
-  padding: 1em;
-  line-height: $line-height;
-
-  code {
+.article pre, .article code {
+  &[class*="language-"] {
+    font-size: 0.9em;
+    line-height: $line-height;
+    background-image: none;
+    background-color: $highlight-background;
     color: $highlight-foreground;
-    border: none;
-    display: block;
-    padding: 0;
-  }
+    box-shadow: none !important;
 
-  .comment { color: $highlight-comment; }
+    .token {
+      &.keyword, &.function {
+        color: $highlight-purple;
+      }
 
-  .variable,
-  .attribute,
-  .tag,
-  .regexp,
-  .ruby .constant,
-  .xml .tag .title,
-  .xml .pi,
-  .xml .doctype,
-  .html .doctype,
-  .css .id,
-  .css .class,
-  .css .pseudo {
-    color: $highlight-red;
-  }
+      &.comment {
+        color: $highlight-comment;
+      }
 
-  .number,
-  .preprocessor,
-  .built_in,
-  .literal,
-  .params,
-  .constant,
-  .command {
-    color: $highlight-orange;
-  }
+      &.string {
+        color: $highlight-blue;
+      }
 
-  .ruby .class .title,
-  .css .rules .attribute,
-  .string,
-  .value,
-  .inheritance,
-  .header,
-  .ruby .symbol,
-  .xml .cdata,
-  .special,
-  .number,
-  .formula {
-    color: $highlight-green;
-  }
+      &.regex {
+        color: $highlight-red;
+      }
 
-  .title,
-  .css .hexcolor {
-    color: $highlight-aqua;
-  }
+      &.keyword, .attr-value {
+        color: $highlight-aqua;
+      }
 
-  .function,
-  .python .decorator,
-  .python .title,
-  .ruby .function .title,
-  .ruby .title .keyword,
-  .perl .sub,
-  .javascript .title,
-  .coffeescript .title {
-    color: $highlight-blue;
-  }
-
-  .keyword,
-  .javascript .function {
-    color: $highlight-purple;
+    }
   }
 }
 
-code {
-  margin: 0;
-  padding: 0;
-  border: 1px solid #E9E9EF;
-  border-radius: 4px;
-  outline: 0;
-  font-weight: normal;
-  font-family: inherit;
-  font-size: 0.9em;
-  vertical-align: baseline;
-  font-family: $font-mono;
-  color: #46af91;
-  background: #F7F7F9;
-  padding: 0 5px;
-}
+.article pre {
+  &[class*="language-"] {
+    border-left: 5px solid $color-link;
+    padding: 0.5em 0.25em;
+    margin-top: 1em;
 
-a code {
-  color: $color-link;
 
-  &:hover {
-    color: $color-link-hover;
-  }
-}
-
-.highlight {
-  padding: 10px 15px;
-  color: $highlight-foreground;
-  background: $highlight-background;
-  line-height: $line-height;
-  overflow: auto;
-  margin: 0;
-
-  &.shell {
-    background: #252831;
-    pre {
-      color: #c4c5ca;
-    }
-  }
-
-  pre {
-    border: none;
-    margin: 0;
-    padding: 1px;
-  }
-
-  table {
-    margin: 0 !important;
-    border: 0;
-
-    th {
-      padding: 0;
-      border: 0;
-    }
-
-    td {
-      padding: 0;
-      border: 0;
-    }
-  }
-
-  figcaption {
-    margin: -5px 0 5px;
-    font-size: 0.9em;
-    color: $color-gray;
-
-    &:before {
-      content: "";
-      display: table;
-    }
-
-    &:after {
-      content: "";
-      display: table;
-      clear: both;
-    }
-
-    a {
-      float: right;
-      color: $highlight-foreground;
-
-      &:hover { border-bottom-color: $highlight-foreground; }
-    }
-  }
-
-  .line {
-    height: 22px;
-    font-size: 0.9em;
-  }
-
-  .gutter {
-    display: none;
   }
 }

docs/themes/cypress/source/css/_partial/mobile_nav.scss

@@ -1,20 +1,15 @@
 @media screen {
-  html {
-    height: 100%;
-  }
-  body {
+  html, body {
     height: 100%;
   }
+
   .wrapper {
     max-width: $max-width;
-    margin: 0 auto;
   }
+  
   .inner {
     padding: 0;
   }
-  #article-toc-inner {
-    padding: 0 $gutter-width;
-  }
 
   .post {
     max-width: 800px;
@@ -27,7 +22,7 @@
   }
 
   #sidebar .inner {
-    padding-right: 0; 
+    padding-right: 0;
   }
 
   #main-nav {

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

@@ -1,3 +1,10 @@
+.article {
+  float: left;
+  width: 100%;
+  padding: 0px 80px;
+  border-right: 1px solid #eee;
+}
+
 .article-date {
   color: $color-gray;
   text-decoration: none;
@@ -103,27 +110,20 @@
   table {
     margin: 1em 0;
     width: 100%;
-    border: 1px solid $color-border;
-    border-bottom: 0;
+    border: 1px solid #e8e8e8;
+
     th {
       font-weight: bold;
       padding: 5px 15px;
       text-align: left;
-      border-bottom: 1px solid #ebeef1;
 
       &:empty {
-        border: 0;
         padding: 0;
       }
     }
+
     td {
       padding: 5px 15px;
-      border-bottom: 1px solid #ebeef1;
-      border-right: 1px solid #ebeef1;
-    }
-
-    tr>td:last-child {
-      border-right: 0;
     }
 
     tr:nth-child(2n) {
@@ -172,29 +172,25 @@
   h1 {
     font-size: 1.7em;
     line-height: 1em;
-    font-weight: 700;
+    font-weight: 500;
     margin: 2em 0 0 0;
     padding: 0;
     font-family: $font-title;
 
-    &:first-of-type {
-      margin-top: 0.5em;
-    }
-
     &>a {
       font-family: $font-mono;
       letter-spacing: -1.5px;
     }
   }
   h2 {
-    font-size: 1.5em;
+    font-size: 1.2em;
     line-height: 1em;
-    font-weight: 700;
+    font-weight: 300;
     margin: 1em 0 0 0;
     font-family: $font-title;
   }
   h3 {
-    font-size: 1.3em;
+    font-size: 1em;
     line-height: 1em;
     font-weight: bold;
     margin: 1em 0;
@@ -255,6 +251,7 @@
   }
   img {
     max-width: 100%;
+    border: 1px solid #ddd;
   }
   video {
     max-width: 100%;
@@ -376,11 +373,12 @@
     clear: both;
   }
 }
+
 .article-title {
   float: left;
   font-family: $font-title;
-  font-size: 2.5em;
-  font-weight: 900;
+  font-size: 2.4em;
+  font-weight: 500;
   text-decoration: none;
   color: $color-default;
   transition: 0.2s;
@@ -398,9 +396,3 @@
     clear: both;
   }
 }
-.article {
-  float: left;
-  width: 100%;
-  border: 1px solid #eee;
-  padding: 60px 30px;
-}

docs/themes/cypress/source/css/_partial/sidebar.scss

@@ -5,11 +5,12 @@
   opacity: 0.8;
   margin-left: -$sidebar-width;
   display: none;
+  background-color: #f5f5f5;
 }
 .sidebar-title {
-  margin-top: 20px;
+  margin-top: 0;
   font-size: 0.75;
-  padding: 10px 7px;
+  padding: 10px 20px;
   font-family: $font-title;
   font-weight: 600;
   color: $color-default;
@@ -17,8 +18,8 @@
   line-height: 1;
 }
 
-#article-toc .sidebar-title {
-  padding: 10px 0;
+#sidebar .sidebar-title:first-child {
+  margin-top: 10px;
 }
 
 .sidebar-link {
@@ -27,22 +28,25 @@
   display: block;
   color: $color-link;
   text-decoration: none;
-  padding: 7px;
-  line-height: 1;
+  padding: 4px 20px;
+  line-height: 1.6;
   position: relative;
   width: 100%;
   font-weight: 400;
   text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
+  overflow: auto;
+  white-space: normal;
+
   &.current {
-    color: $color-link;
+    color: white;
     font-weight: 500;
-    background-color: #f1f4f7;
+    background-color: $color-link;
     &:hover {
-      color: $color-link;
+      color: white;
+      background-color: $color-link;
     }
   }
+
   &:hover {
     color: $color-link-hover;
   }

docs/themes/cypress/source/css/_partial/toc.scss

@@ -1,3 +1,6 @@
+#article-toc .sidebar-title {
+  padding: 10px 0;
+}
 
 #article-toc-top {
   margin-top: 2em;
@@ -19,6 +22,7 @@
   margin-right: -$sidebar-width;
   opacity: 0.8;
   font-size: 0.9em;
+
   &.fixed {
     position: absolute;
     top: 0;
@@ -29,16 +33,20 @@
 .toc-child {
   padding-left: 1em;
   font-size: 0.85em;
+  line-height: 1.5;
 }
 
 #article-toc-inner {
   overflow-x: hidden;
   overflow-y: auto;
+  padding: 0 20px;
   width: $sidebar-width;
+
   &:before {
     content: "";
     display: table;
   }
+
   &:after {
     content: "";
     display: table;
@@ -51,17 +59,21 @@
   display: block;
   color: #999;
   text-decoration: none;
-  padding: 0 0 0 5px;
-  line-height: $line-height;
+  padding: 3px 0 3px 5px;
+  line-height: 1.2;
+  font-size: 0.95em;
   position: relative;
   width: 100%;
+  font-weight: 400;
   text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
+  overflow: auto;
+  white-space: normal;
   border-left: 4px solid transparent;
+
   &.current {
     color: $color-link;
   }
+
   &:hover {
     color: $color-link-hover;
   }

docs/themes/cypress/source/css/_variables.scss

@@ -17,28 +17,28 @@ $color-background: #24262F;
 $highlight-background:    #f7f7f7;
 $highlight-current-line:  #efefef;
 $highlight-selection:     #d6d6d6;
-$highlight-foreground:    #4d4d4c;
-$highlight-comment:       #8e908c;
-$highlight-red:           #c82829;
-$highlight-orange:        #f5871f;
+$highlight-foreground:    #43474a;
+$highlight-comment:       #999;
+$highlight-red:           #c92c2c;
+$highlight-orange:        #cc8300;
 $highlight-yellow:        #eab700;
 $highlight-green:         #718c00;
-$highlight-aqua:          #3e999f;
-$highlight-blue:          #4271ae;
-$highlight-purple:        #8959a8;
+$highlight-aqua:          #1d75b3;
+$highlight-blue:          #183691;
+$highlight-purple:        #795da3;
 
 // Typography
 $font-sans: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 $font-serif: Garamond, Georgia, "Times New Roman", serif;
-$font-mono: Consolas, Monaco, 'Andale Mono', monospace;
+$font-mono: Consolas, "Liberation Mono", Menlo, Courier, monospace;
 $font-title: "Fira Sans", font-sans;
 $font-size: 16px;
 $line-height: 1.7em;
 
 // Layout
-$max-width: 1400px;
+$max-width: 1300px;
 $gutter-width: 30px;
-$sidebar-width: 260px;
+$sidebar-width: 240px;
 $mobile-nav-width: 260px;
 
 // Media queries