diff --git a/docs/_config.yml b/docs/_config.yml index 0c76a69a07..15e7dae71f 100644 --- a/docs/_config.yml +++ b/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: diff --git a/docs/cypress/integration/main_spec.coffee b/docs/cypress/integration/main_spec.coffee index bf8668922f..bebea3d55a 100644 --- a/docs/cypress/integration/main_spec.coffee +++ b/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") diff --git a/docs/gulpfile.js b/docs/gulpfile.js index a4a38ecff9..4a6cbd3852 100644 --- a/docs/gulpfile.js +++ b/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']) diff --git a/docs/package.json b/docs/package.json index 9ae92464a7..89a61fea4b 100644 --- a/docs/package.json +++ b/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", diff --git a/docs/scripts/helpers.js b/docs/scripts/helpers.js index 9f33a80342..81d370b1c5 100644 --- a/docs/scripts/helpers.js +++ b/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 += '' + self.__('menu.' + title) + '' - }) + // Does our current path match our menu? + var isCurrent = currentPathFolder === firstPathName - return result + return result += ` ${self.__('menu.' + title)}` + }, '') }) hexo.extend.helper.register('canonical_url', function(lang){ diff --git a/docs/source/_data/menu.yml b/docs/source/_data/main-menu.yml similarity index 100% rename from docs/source/_data/menu.yml rename to docs/source/_data/main-menu.yml diff --git a/docs/themes/cypress/layout/page.swig b/docs/themes/cypress/layout/page.swig index 0ce1ec71bf..1ad5ff9aa1 100644 --- a/docs/themes/cypress/layout/page.swig +++ b/docs/themes/cypress/layout/page.swig @@ -4,20 +4,18 @@
-
-
-

{{ page.title }}

- {{ __('page.improve') }} -
-
- {{ page_anchor(page.content) }} -
-
- - {{ page_nav() }} -
- {{ partial('partial/comment') }} +
+

{{ page.title }}

+ {{ __('page.improve') }} +
+
+ {{ page_anchor(page.content) }}
+
+ + {{ page_nav() }} +
+ {{ partial('partial/comment') }}
diff --git a/docs/themes/cypress/source/css/_partial/base.scss b/docs/themes/cypress/source/css/_partial/base.scss index 269d4adfd0..96e51a63f8 100644 --- a/docs/themes/cypress/source/css/_partial/base.scss +++ b/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; diff --git a/docs/themes/cypress/source/css/_partial/header.scss b/docs/themes/cypress/source/css/_partial/header.scss index 8cfa56a9e3..fc908cb825 100644 --- a/docs/themes/cypress/source/css/_partial/header.scss +++ b/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; diff --git a/docs/themes/cypress/source/css/_partial/highlight.scss b/docs/themes/cypress/source/css/_partial/highlight.scss index bfca26a5dd..733cf69c94 100644 --- a/docs/themes/cypress/source/css/_partial/highlight.scss +++ b/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; } } diff --git a/docs/themes/cypress/source/css/_partial/mobile_nav.scss b/docs/themes/cypress/source/css/_partial/mobile_nav.scss index 5854a789bc..34fe2a2f47 100644 --- a/docs/themes/cypress/source/css/_partial/mobile_nav.scss +++ b/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 { diff --git a/docs/themes/cypress/source/css/_partial/page.scss b/docs/themes/cypress/source/css/_partial/page.scss index 61952927d4..69cc497cc6 100644 --- a/docs/themes/cypress/source/css/_partial/page.scss +++ b/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; -} diff --git a/docs/themes/cypress/source/css/_partial/sidebar.scss b/docs/themes/cypress/source/css/_partial/sidebar.scss index c2f087384a..6c60f1db6a 100644 --- a/docs/themes/cypress/source/css/_partial/sidebar.scss +++ b/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; } diff --git a/docs/themes/cypress/source/css/_partial/toc.scss b/docs/themes/cypress/source/css/_partial/toc.scss index 8ae32acf41..94e9118a7f 100644 --- a/docs/themes/cypress/source/css/_partial/toc.scss +++ b/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; } diff --git a/docs/themes/cypress/source/css/_variables.scss b/docs/themes/cypress/source/css/_variables.scss index c623ab040f..b3d8381dbe 100644 --- a/docs/themes/cypress/source/css/_variables.scss +++ b/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