From 4e4b66da7909f99b330bf672b24359a8e27877bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Sun, 17 Dec 2017 21:32:53 +0100 Subject: [PATCH 01/31] Added assetgraph-builder post build improvement --- .gitignore | 1 + package.json | 2 ++ 2 files changed, 3 insertions(+) diff --git a/.gitignore b/.gitignore index 774d4379a4..1534ff8981 100644 --- a/.gitignore +++ b/.gitignore @@ -20,3 +20,4 @@ mocha.js *_LOCAL_* *_REMOTE_* docs/_site +docs/_dist diff --git a/package.json b/package.json index 00cea01277..0e33233802 100644 --- a/package.json +++ b/package.json @@ -305,6 +305,7 @@ "coveralls": "nyc report --reporter=text-lcov | coveralls", "prebuildDocs": "node scripts/docs-update-toc.js", "buildDocs": "bundle exec jekyll build --source ./docs --destination ./docs/_site --config ./docs/_config.yml --safe --drafts", + "postbuildDocs": "buildProduction docs/_site/index.html --outroot docs/_dist --canonicalroot https://mochajs.org/ --optimizeimages --asyncscripts ", "prewatchDocs": "node scripts/docs-update-toc.js", "watchDocs": "bundle exec jekyll serve --source ./docs --destination ./docs/_site --config ./docs/_config.yml --safe --drafts --watch" }, @@ -322,6 +323,7 @@ }, "devDependencies": { "assert": "^1.4.1", + "assetgraph-builder": "^5.6.4", "browserify": "^14.4.0", "buffer": "^4.9.1", "coffee-script": "^1.10.0", From 47f5f5d7e0cf6e76e5c926aaa7e893624051b15a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Sun, 17 Dec 2017 21:35:19 +0100 Subject: [PATCH 02/31] Switch backer and sponsor avatars from svg to raw images. Cuts 500kb avatars download away --- docs/_includes/backers.md | 2 +- docs/_includes/sponsors.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/_includes/backers.md b/docs/_includes/backers.md index ccf561abfa..5b8ad63b5e 100644 --- a/docs/_includes/backers.md +++ b/docs/_includes/backers.md @@ -3,4 +3,4 @@ Find Mocha helpful? Become a [backer](https://opencollective.com/mochajs#support) and support Mocha with a monthly donation. {: id="_backers" } -{% for i in (0..29) %}[![](//opencollective.com/mochajs/backer/{{ i }}/avatar){: onload="window.avatars.backerLoaded()" }](https://opencollective.com/mochajs/backer/{{ i }}/website){: target="_blank"} {% endfor %} +{% for i in (0..29) %}[![](//opencollective.com/mochajs/backer/{{ i }}/avatar.jpg)](https://opencollective.com/mochajs/backer/{{ i }}/website){: target="_blank" rel="noopener"}{% endfor %} diff --git a/docs/_includes/sponsors.md b/docs/_includes/sponsors.md index 5fe0c7d9c1..cd5331637c 100644 --- a/docs/_includes/sponsors.md +++ b/docs/_includes/sponsors.md @@ -3,4 +3,4 @@ Use Mocha at Work? Ask your manager or marketing team if they'd help [support](https://opencollective.com/mochajs#support) our project. Your company's logo will also be displayed on [npmjs.com](http://npmjs.com/package/mocha) and our [GitHub repository](https://github.com/mochajs/mocha#sponsors). {: id="_sponsors" } -{% for i in (0..29) %}[![](//opencollective.com/mochajs/sponsor/{{ i }}/avatar){: onload="window.avatars.sponsorLoaded()" }](https://opencollective.com/mochajs/sponsor/{{ i }}/website){: target="_blank"} {% endfor %} +{% for i in (0..29) %}[![](//opencollective.com/mochajs/sponsor/{{ i }}/avatar.jpg){: onload="window.avatars.sponsorLoaded()" }](https://opencollective.com/mochajs/sponsor/{{ i }}/website){: target="_blank"} {% endfor %} From 34203658fb522610e9300cd1e16139fcf9a74ce2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Sun, 17 Dec 2017 21:37:03 +0100 Subject: [PATCH 03/31] Pull normalize.css into repository for quicker local serving --- docs/_includes/head.html | 2 +- docs/css/normalize.css | 422 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 423 insertions(+), 1 deletion(-) create mode 100644 docs/css/normalize.css diff --git a/docs/_includes/head.html b/docs/_includes/head.html index 509d0b7ebf..906019b2ad 100644 --- a/docs/_includes/head.html +++ b/docs/_includes/head.html @@ -1,7 +1,7 @@ {{ page.title }} - + diff --git a/docs/css/normalize.css b/docs/css/normalize.css new file mode 100644 index 0000000000..8710595d3e --- /dev/null +++ b/docs/css/normalize.css @@ -0,0 +1,422 @@ +/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ + +/** + * 1. Change the default font family in all browsers (opinionated). + * 2. Correct the line height in all browsers. + * 3. Prevent adjustments of font size after orientation changes in IE and iOS. + */ + +html { + font-family: sans-serif; /* 1 */ + line-height: 1.15; /* 2 */ + -ms-text-size-adjust: 100%; /* 3 */ + -webkit-text-size-adjust: 100%; /* 3 */ +} + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + * 2. Add the correct display in IE. + */ + +article, +aside, +details, /* 1 */ +figcaption, +figure, +footer, +header, +main, /* 2 */ +menu, +nav, +section, +summary { /* 1 */ + display: block; +} + +/** + * Add the correct display in IE 9-. + */ + +audio, +canvas, +progress, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Add the correct display in IE 10-. + * 1. Add the correct display in IE. + */ + +template, /* 1 */ +[hidden] { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ + +a:active, +a:hover { + outline-width: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font: inherit; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Restore the font weight unset by the previous rule. + */ + +optgroup { + font-weight: bold; +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Change the border, margin, and padding in all browsers (opinionated). + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} From 60e22272bd7352406e7fdd44c8459157040606a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Sun, 17 Dec 2017 21:38:13 +0100 Subject: [PATCH 04/31] Pull html5 shiv into local project for faster serving --- docs/_includes/head.html | 2 +- docs/js/html5shiv.min.js | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 docs/js/html5shiv.min.js diff --git a/docs/_includes/head.html b/docs/_includes/head.html index 906019b2ad..d145703e77 100644 --- a/docs/_includes/head.html +++ b/docs/_includes/head.html @@ -7,7 +7,7 @@ diff --git a/docs/js/html5shiv.min.js b/docs/js/html5shiv.min.js new file mode 100644 index 0000000000..d4c731ad54 --- /dev/null +++ b/docs/js/html5shiv.min.js @@ -0,0 +1,4 @@ +/** +* @preserve HTML5 Shiv 3.7.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed +*/ +!function(a,b){function c(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function d(){var a=t.elements;return"string"==typeof a?a.split(" "):a}function e(a,b){var c=t.elements;"string"!=typeof c&&(c=c.join(" ")),"string"!=typeof a&&(a=a.join(" ")),t.elements=c+" "+a,j(b)}function f(a){var b=s[a[q]];return b||(b={},r++,a[q]=r,s[r]=b),b}function g(a,c,d){if(c||(c=b),l)return c.createElement(a);d||(d=f(c));var e;return e=d.cache[a]?d.cache[a].cloneNode():p.test(a)?(d.cache[a]=d.createElem(a)).cloneNode():d.createElem(a),!e.canHaveChildren||o.test(a)||e.tagUrn?e:d.frag.appendChild(e)}function h(a,c){if(a||(a=b),l)return a.createDocumentFragment();c=c||f(a);for(var e=c.frag.cloneNode(),g=0,h=d(),i=h.length;i>g;g++)e.createElement(h[g]);return e}function i(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return t.shivMethods?g(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+d().join().replace(/[\w\-:]+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(t,b.frag)}function j(a){a||(a=b);var d=f(a);return!t.shivCSS||k||d.hasCSS||(d.hasCSS=!!c(a,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),l||i(a,d),a}var k,l,m="3.7.2",n=a.html5||{},o=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,p=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,q="_html5shiv",r=0,s={};!function(){try{var a=b.createElement("a");a.innerHTML="",k="hidden"in a,l=1==a.childNodes.length||function(){b.createElement("a");var a=b.createDocumentFragment();return"undefined"==typeof a.cloneNode||"undefined"==typeof a.createDocumentFragment||"undefined"==typeof a.createElement}()}catch(c){k=!0,l=!0}}();var t={elements:n.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:m,shivCSS:n.shivCSS!==!1,supportsUnknownElements:l,shivMethods:n.shivMethods!==!1,type:"default",shivDocument:j,createElement:g,createDocumentFragment:h,addElements:e};a.html5=t,j(b)}(this,document); \ No newline at end of file From 459c668d7a0ca916b3040bf312755a27f3bc3d65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Sun, 17 Dec 2017 21:39:09 +0100 Subject: [PATCH 05/31] Move google analytics script to footer to avoid clogging the pipes during slowstart --- docs/_includes/footer.html | 1 + docs/_includes/head.html | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html index 0a1f43e861..48cd488232 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/footer.html @@ -4,6 +4,7 @@ href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License.

Last updated: {{ site.time | date: "%c" }} + From ee3532a9372ced5e150957f194993de319d0ba2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Sun, 17 Dec 2017 21:49:21 +0100 Subject: [PATCH 06/31] Switch header over to use local logo and drop js for animating logo and tagline on load --- docs/_includes/header.html | 11 +++- docs/css/style.css | 71 ++++++++++++--------- docs/images/mocha-logo.svg | 125 +++++++++++++++++++++++++++++++++++++ 3 files changed, 174 insertions(+), 33 deletions(-) create mode 100644 docs/images/mocha-logo.svg diff --git a/docs/_includes/header.html b/docs/_includes/header.html index 99427f5c50..36baf2816f 100644 --- a/docs/_includes/header.html +++ b/docs/_includes/header.html @@ -1,4 +1,11 @@

-

-

simple, flexible, fun

+

+ + Mocha + +

+ +

+ simple, flexible, fun +

diff --git a/docs/css/style.css b/docs/css/style.css index 4df465e56a..dfc018ba63 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -7,21 +7,54 @@ body { border-top: 2px solid #ddd; } -#content { - padding: 0 110px 60px 110px; +@keyframes fadein { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +@keyframes slideright { + from { + transform: translateX(-45px); + } + + to { + transform: translateX(0); + } } header { padding: 140px 110px 0 110px; } -h1 { +#_header h1 { margin-left: -19px; opacity: 0; - -webkit-transition: opacity 1s; - -moz-transition: opacity 1s; - -o-transition: opacity 1s; - transition: opacity 1s; + animation: fadein 1s forwards; +} + +#tag { + color: #c29d7f; + font-weight: 100; + font-size: 30px; + margin-top: -158px; + margin-left: 185px; + margin-bottom: 125px; + letter-spacing: 2px; + + animation: fadein 1s forwards, slideright 1s forwards; +} + +#content { + padding: 0 110px 60px 110px; +} + +#tag em { + font-style: normal } #_backers a, #_sponsors a { @@ -61,30 +94,6 @@ h3 > code { font-size: 14px; } -#tag { - opacity: 0; - color: #c29d7f; - font-weight: 100; - font-size: 30px; - margin-top: -155px; - margin-left: 140px; - margin-bottom: 125px; - letter-spacing: 2px; - -webkit-transition: opacity 1s, margin-top 200ms, margin-bottom 200ms, margin-left 1s; - -moz-transition: opacity 1s, margin-top 200ms, margin-bottom 200ms, margin-left 1s; - -o-transition: opacity 1s, margin-top 200ms, margin-bottom 200ms, margin-left 1s; - transition: opacity 1s, margin-top 200ms, margin-bottom 200ms, margin-left 1s; -} - -#tag em { - font-style: normal -} - -.onload #tag { - opacity: 1; - margin-left: 185px; -} - #content > p:first-child { font-size: 20px; font-weight: 200; diff --git a/docs/images/mocha-logo.svg b/docs/images/mocha-logo.svg new file mode 100644 index 0000000000..115b9bd6c2 --- /dev/null +++ b/docs/images/mocha-logo.svg @@ -0,0 +1,125 @@ + + + +Mocha Logoimage/svg+xmlMocha Logo08-21-2015Dick DeLeon <ddeleon@decipherinc.com>CC BY-SA 4.0mochamochajsChristopher Hiller <boneskull@boneskull.com> From ea2a94b28fa24e25dc2f36ae89a248cea896f5be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Sun, 17 Dec 2017 21:50:22 +0100 Subject: [PATCH 07/31] Use local gitter image --- docs/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/index.md b/docs/index.md index 371a729c49..34db9c5cd9 100644 --- a/docs/index.md +++ b/docs/index.md @@ -4,7 +4,7 @@ title: 'Mocha - the fun, simple, flexible JavaScript test framework' --- Mocha is a feature-rich JavaScript test framework running on [Node.js](http://nodejs.org) and in the browser, making asynchronous testing *simple* and *fun*. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases. Hosted on [GitHub](https://github.com/mochajs/mocha). - [![Gitter](//badges.gitter.im/Join%20Chat.svg)](https://gitter.im/mochajs/mocha) + [![Gitter](/images/join-chat.svg)](https://gitter.im/mochajs/mocha) [![OpenCollective](//opencollective.com/mochajs/backers/badge.svg)](#backers) [![OpenCollective](//opencollective.com/mochajs/sponsors/badge.svg)](#sponsors) From 5d391b4c6f9514e8b82cc453b84310e4e0b821ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Sun, 17 Dec 2017 21:51:30 +0100 Subject: [PATCH 08/31] Switch backers from js onload animation to having a default background and pop in the loaded image on top of it --- docs/_layouts/default.html | 4 +-- docs/css/style.css | 52 ++++++++++++++----------------- docs/images/backer-background.svg | 12 +++++++ docs/images/join-chat.svg | 1 + 4 files changed, 39 insertions(+), 30 deletions(-) create mode 100644 docs/images/backer-background.svg create mode 100644 docs/images/join-chat.svg diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index db3bdf76e4..1bc3d36be8 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -7,9 +7,9 @@ {% include header.html %} -
+
{{ content }} -
+ {% include footer.html %} diff --git a/docs/css/style.css b/docs/css/style.css index dfc018ba63..6d8f13b2ad 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -57,19 +57,36 @@ header { font-style: normal } -#_backers a, #_sponsors a { +#_backers { + display: flex; + flex-wrap: wrap; +} + +#_backers a { + margin: 3px; +} + +#_backers a img { + display: block; + width: 64px; + height: 64px; + + margin: 0; + box-shadow: none; + + background: url(/images/backer-background.svg?inline) center center no-repeat; +} + +#_sponsors a { opacity: 0; - -webkit-transition: opacity .3s; - -moz-transition: opacity .3s; - -o-transition: opacity .3s; transition: opacity .3s; } -#_backers a img, #_sponsors a img { +#_sponsors a img { max-height: 64px; } -.onload h1, #_backers.onload a, #_sponsors.onload a { +#_sponsors.onload a { opacity: 1; } @@ -112,11 +129,7 @@ ul { margin-top: 20px; padding: 0 15px; width: 100%; - -webkit-column-count: 2; - -moz-column-count: 2; column-count: 2; - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; box-sizing: content-box; } @@ -126,8 +139,6 @@ ul li { list-style: none; border-bottom: 1px solid #eee; padding: 5px 0; - -webkit-column-break-inside: avoid; - -moz-column-break-inside: avoid; column-break-inside: avoid; } @@ -150,34 +161,19 @@ pre { border: 1px solid #ddd; border-bottom-color: #ccc; background-color: #f3f3f3; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -o-border-radius: 3px; border-radius: 3px; - -webkit-box-shadow: inset 0 0 10px #ddd; - -moz-box-shadow: inset 0 0 10px #ddd; box-shadow: inset 0 0 10px #ddd; overflow-x: auto; } -img { +main img:not([src*=avatar]):not([src*=badges]):not([src*=".svg"]) { margin: 30px; padding: 1px; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -o-border-radius: 3px; border-radius: 3px; - -webkit-box-shadow: 0 3px 10px #dedede, 0 1px 5px #888; - -moz-box-shadow: 0 3px 10px #dedede, 0 1px 5px #888; box-shadow: 0 3px 10px #dedede, 0 1px 5px #888; max-width: 100%; } -img[src*="opencollective.com/mochajs"], img[src*=badges], img[src*=".svg"] { - margin: 0; - box-shadow: none; -} - footer { background-color: #eee; width: 100%; diff --git a/docs/images/backer-background.svg b/docs/images/backer-background.svg new file mode 100644 index 0000000000..29bd61663b --- /dev/null +++ b/docs/images/backer-background.svg @@ -0,0 +1,12 @@ + + + + + diff --git a/docs/images/join-chat.svg b/docs/images/join-chat.svg new file mode 100644 index 0000000000..0edf5f3b1e --- /dev/null +++ b/docs/images/join-chat.svg @@ -0,0 +1 @@ +gittergitterjoin chatjoin chat \ No newline at end of file From 0b4ba762c3fc90e3f0c84fddac0eba871eb9154d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Sun, 17 Dec 2017 22:41:05 +0100 Subject: [PATCH 09/31] Switch opencollective image listing and avatars fadein --- docs/_includes/backers.md | 2 +- docs/_includes/head.html | 1 - docs/_includes/sponsors.md | 6 ++++-- docs/css/style.css | 29 ++++++++++++----------------- docs/js/avatars.js | 28 ++++++++++++++++++---------- 5 files changed, 35 insertions(+), 31 deletions(-) diff --git a/docs/_includes/backers.md b/docs/_includes/backers.md index 5b8ad63b5e..b9c9c7d9f0 100644 --- a/docs/_includes/backers.md +++ b/docs/_includes/backers.md @@ -2,5 +2,5 @@ Find Mocha helpful? Become a [backer](https://opencollective.com/mochajs#support) and support Mocha with a monthly donation. -{: id="_backers" } +{: id="_backers" class="image-list" } {% for i in (0..29) %}[![](//opencollective.com/mochajs/backer/{{ i }}/avatar.jpg)](https://opencollective.com/mochajs/backer/{{ i }}/website){: target="_blank" rel="noopener"}{% endfor %} diff --git a/docs/_includes/head.html b/docs/_includes/head.html index d8a1a55d2b..facf54a402 100644 --- a/docs/_includes/head.html +++ b/docs/_includes/head.html @@ -9,5 +9,4 @@ - diff --git a/docs/_includes/sponsors.md b/docs/_includes/sponsors.md index cd5331637c..6f5d5a17ba 100644 --- a/docs/_includes/sponsors.md +++ b/docs/_includes/sponsors.md @@ -2,5 +2,7 @@ Use Mocha at Work? Ask your manager or marketing team if they'd help [support](https://opencollective.com/mochajs#support) our project. Your company's logo will also be displayed on [npmjs.com](http://npmjs.com/package/mocha) and our [GitHub repository](https://github.com/mochajs/mocha#sponsors). -{: id="_sponsors" } -{% for i in (0..29) %}[![](//opencollective.com/mochajs/sponsor/{{ i }}/avatar.jpg){: onload="window.avatars.sponsorLoaded()" }](https://opencollective.com/mochajs/sponsor/{{ i }}/website){: target="_blank"} {% endfor %} +{: class="image-list faded-images" } +{% for i in (0..15) %}[![](//opencollective.com/mochajs/sponsor/{{ i }}/avatar.jpg)](https://opencollective.com/mochajs/sponsor/{{ i }}/website){: target="_blank"} {% endfor %} + + diff --git a/docs/css/style.css b/docs/css/style.css index 6d8f13b2ad..2cecf29d7b 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -57,37 +57,32 @@ header { font-style: normal } -#_backers { - display: flex; - flex-wrap: wrap; +.image-list { + overflow: hidden; } -#_backers a { - margin: 3px; +.image-list a { + float: left; + margin: 6px; } -#_backers a img { +.image-list a img { display: block; - width: 64px; height: 64px; - - margin: 0; - box-shadow: none; - - background: url(/images/backer-background.svg?inline) center center no-repeat; } -#_sponsors a { +.faded-images img { opacity: 0; transition: opacity .3s; } -#_sponsors a img { - max-height: 64px; +.faded-images.is-loaded img { + opacity: 1; } -#_sponsors.onload a { - opacity: 1; +#_backers a img { + width: 64px; + background: url(/images/backer-background.svg?inline) center center no-repeat; } h2 { diff --git a/docs/js/avatars.js b/docs/js/avatars.js index 1bf3e690be..fec636bee8 100644 --- a/docs/js/avatars.js +++ b/docs/js/avatars.js @@ -1,15 +1,23 @@ (function () { 'use strict'; - // dumb thing that helps with animation of avatars - var avatars = window.avatars = function (type) { - return function avatarLoaded () { - avatars[type] = typeof avatars[type] === 'number' ? avatars[type] + 1 : 1; - if (avatars[type] === 30) { - document.getElementById(type).classList.add('onload'); + + var imageLists = document.querySelectorAll('.image-list'); + + Array.prototype.forEach.call(imageLists, function (imageList) { + var images = imageList.querySelectorAll('img'); + var counter = images.length; + + function onloadHandler() { + counter -= 1; + + if (counter === 0) { + imageList.classList.add('is-loaded'); } - }; - }; + } + + for (var i = 0; i < images.length; i += 1) { + images[i].onload = onloadHandler; + } + }); - avatars.backerLoaded = avatars('_backers'); - avatars.sponsorLoaded = avatars('_sponsors'); }()); From 10d8f2fc19784acb8699aa9150996413623b9d1b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Sun, 17 Dec 2017 22:41:33 +0100 Subject: [PATCH 10/31] Switch google analytics to always use https, since they redirect theselves --- docs/js/ga.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/js/ga.js b/docs/js/ga.js index 6e3ff1949b..b310cf7085 100644 --- a/docs/js/ga.js +++ b/docs/js/ga.js @@ -1,7 +1,7 @@ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) -})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); +})(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-65024936-1', 'auto'); ga('send', 'pageview'); From 7f8e55f9e5d37b15023f1512ad009ad1e5160143 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Mon, 18 Dec 2017 00:05:04 +0100 Subject: [PATCH 11/31] Mobile friendliness --- docs/_includes/head.html | 1 + docs/css/style.css | 54 +++++++++++++++++++--------------------- docs/js/avatars.js | 1 + 3 files changed, 28 insertions(+), 28 deletions(-) diff --git a/docs/_includes/head.html b/docs/_includes/head.html index facf54a402..41dff9accd 100644 --- a/docs/_includes/head.html +++ b/docs/_includes/head.html @@ -1,5 +1,6 @@ + {{ page.title }} diff --git a/docs/css/style.css b/docs/css/style.css index 2cecf29d7b..dd41088fce 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -27,11 +27,23 @@ body { } } +header, #content { + max-width: 920px; + margin: 0 auto; + padding-left: 30px; + padding-right: 30px; +} + header { - padding: 140px 110px 0 110px; + padding-top: 20px; +} + +#content { + padding-bottom: 60px; } #_header h1 { + margin-top: 0; margin-left: -19px; opacity: 0; animation: fadein 1s forwards; @@ -49,10 +61,6 @@ header { animation: fadein 1s forwards, slideright 1s forwards; } -#content { - padding: 0 110px 60px 110px; -} - #tag em { font-style: normal } @@ -123,26 +131,17 @@ a:hover { ul { margin-top: 20px; padding: 0 15px; - width: 100%; + column-gap: 30px; column-count: 2; box-sizing: content-box; } ul li { margin-top: 5px; - margin-right: 60px; list-style: none; border-bottom: 1px solid #eee; padding: 5px 0; - column-break-inside: avoid; -} - -ul::after { - content: '.'; - height: 0; - display: block; - visibility: hidden; - clear: both; + break-inside: avoid; } code { @@ -151,7 +150,7 @@ code { } pre { - margin: 20px; + margin: 20px 0; padding: 20px; border: 1px solid #ddd; border-bottom-color: #ccc; @@ -162,8 +161,8 @@ pre { } main img:not([src*=avatar]):not([src*=badges]):not([src*=".svg"]) { - margin: 30px; - padding: 1px; + display: block; + margin: 30px auto; border-radius: 3px; box-shadow: 0 3px 10px #dedede, 0 1px 5px #888; max-width: 100%; @@ -171,7 +170,6 @@ main img:not([src*=avatar]):not([src*=badges]):not([src*=".svg"]) { footer { background-color: #eee; - width: 100%; padding: 50px 0; text-align: right; border-top: 1px solid #ddd; @@ -184,12 +182,6 @@ footer span { font-size: 0.8em; } -@media all and (max-width: 850px) { - ul li { - width: 100%; - } -} - @media all and (max-width: 600px) { #tag { margin-top: 0; @@ -197,9 +189,15 @@ footer span { margin-bottom: 0; } - .onload #tag { - margin-left: 0; + ul { + column-count: 1; + } + + pre { + padding: 10px; + margin: 20px -11px; } + } blockquote { diff --git a/docs/js/avatars.js b/docs/js/avatars.js index fec636bee8..58dbb7cbe3 100644 --- a/docs/js/avatars.js +++ b/docs/js/avatars.js @@ -17,6 +17,7 @@ for (var i = 0; i < images.length; i += 1) { images[i].onload = onloadHandler; + images[i].onerror = onloadHandler; } }); From 1d9af0a869af25801aedc989516b7c2ac6a7add3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Mon, 18 Dec 2017 00:34:30 +0100 Subject: [PATCH 12/31] Space out badges a bit --- docs/css/style.css | 4 ++++ docs/index.md | 8 +++++--- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/docs/css/style.css b/docs/css/style.css index dd41088fce..5216b4f881 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -65,6 +65,10 @@ header { font-style: normal } +nav.badges a + a { + margin-left: 3px; +} + .image-list { overflow: hidden; } diff --git a/docs/index.md b/docs/index.md index 34db9c5cd9..98f5671590 100644 --- a/docs/index.md +++ b/docs/index.md @@ -4,9 +4,11 @@ title: 'Mocha - the fun, simple, flexible JavaScript test framework' --- Mocha is a feature-rich JavaScript test framework running on [Node.js](http://nodejs.org) and in the browser, making asynchronous testing *simple* and *fun*. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases. Hosted on [GitHub](https://github.com/mochajs/mocha). - [![Gitter](/images/join-chat.svg)](https://gitter.im/mochajs/mocha) - [![OpenCollective](//opencollective.com/mochajs/backers/badge.svg)](#backers) - [![OpenCollective](//opencollective.com/mochajs/sponsors/badge.svg)](#sponsors) + {% include backers.md %} {% include sponsors.md %} From 1610a3c74de366a0fa137eb46b495a15337b8732 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Mon, 18 Dec 2017 00:34:45 +0100 Subject: [PATCH 13/31] Add svgo and inline small enough images --- package.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 0e33233802..c563045586 100644 --- a/package.json +++ b/package.json @@ -303,9 +303,9 @@ "test": "make clean && make test", "prepublishOnly": "npm test && make clean && make mocha.js", "coveralls": "nyc report --reporter=text-lcov | coveralls", - "prebuildDocs": "node scripts/docs-update-toc.js", + "prebuildDocs": "rm -rf docs/_dist && node scripts/docs-update-toc.js", "buildDocs": "bundle exec jekyll build --source ./docs --destination ./docs/_site --config ./docs/_config.yml --safe --drafts", - "postbuildDocs": "buildProduction docs/_site/index.html --outroot docs/_dist --canonicalroot https://mochajs.org/ --optimizeimages --asyncscripts ", + "postbuildDocs": "buildProduction docs/_site/index.html --outroot docs/_dist --canonicalroot https://mochajs.org/ --optimizeimages --inlinehtmlimage 10000 --asyncscripts ", "prewatchDocs": "node scripts/docs-update-toc.js", "watchDocs": "bundle exec jekyll serve --source ./docs --destination ./docs/_site --config ./docs/_config.yml --safe --drafts --watch" }, @@ -348,6 +348,7 @@ "markdown-toc": "^1.2.0", "nyc": "^11.2.1", "rimraf": "^2.5.2", + "svgo": "^0.7.2", "through2": "^2.0.1", "watchify": "^3.7.0" }, From 141c57ee4e95432ce51c306f928879b221dd7b47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Mon, 18 Dec 2017 00:47:20 +0100 Subject: [PATCH 14/31] Downsize content images to maximum content width --- docs/index.md | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/docs/index.md b/docs/index.md index 98f5671590..d145020e09 100644 --- a/docs/index.md +++ b/docs/index.md @@ -635,7 +635,7 @@ $ mocha Many reporters will display test duration, as well as flagging tests that are slow, as shown here with the "spec" reporter: -![test duration](images/reporter-spec-duration.png) +![test duration](images/reporter-spec-duration.png?withoutEnlargement&resize=920,9999) To tweak what's considered "slow", you can use the `slow()` method: @@ -702,7 +702,7 @@ Again, use `this.timeout(0)` to disable the timeout for a hook. Mocha supports the `err.expected` and `err.actual` properties of any thrown `AssertionError`s from an assertion library. Mocha will attempt to display the difference between what was expected, and what the assertion actually saw. Here's an example of a "string" diff: -![string diffs](images/reporter-string-diffs.png) +![string diffs](images/reporter-string-diffs.png?withoutEnlargement&resize=920,9999) ## Usage @@ -1013,69 +1013,69 @@ Mocha reporters adjust to the terminal window, and always disable ANSI-escape co This is the default reporter. The "spec" reporter outputs a hierarchical view nested just as the test cases are. -![spec reporter](images/reporter-spec.png) -![spec reporter with failure](images/reporter-spec-fail.png) +![spec reporter](images/reporter-spec.png?withoutEnlargement&resize=920,9999) +![spec reporter with failure](images/reporter-spec-fail.png?withoutEnlargement&resize=920,9999) ### Dot Matrix The dot matrix (or "dot") reporter is simply a series of characters which represent test cases. Failures highlight in red exclamation marks (`!`), pending tests with a blue comma (`,`), and slow tests as yellow. Good if you prefer minimal output. -![dot matrix reporter](images/reporter-dot.png) +![dot matrix reporter](images/reporter-dot.png?withoutEnlargement&resize=920,9999) ### Nyan The "nyan" reporter is exactly what you might expect: -![js nyan cat reporter](images/reporter-nyan.png) +![js nyan cat reporter](images/reporter-nyan.png?withoutEnlargement&resize=920,9999) ### TAP The TAP reporter emits lines for a [Test-Anything-Protocol](http://en.wikipedia.org/wiki/Test_Anything_Protocol) consumer. -![test anything protocol](images/reporter-tap.png) +![test anything protocol](images/reporter-tap.png?withoutEnlargement&resize=920,9999) ### Landing Strip The Landing Strip (`landing`) reporter is a gimmicky test reporter simulating a plane landing :) unicode ftw -![landing strip plane reporter](images/reporter-landing.png) -![landing strip with failure](images/reporter-landing-fail.png) +![landing strip plane reporter](images/reporter-landing.png?withoutEnlargement&resize=920,9999) +![landing strip with failure](images/reporter-landing-fail.png?withoutEnlargement&resize=920,9999) ### List The "list" reporter outputs a simple specifications list as test cases pass or fail, outputting the failure details at the bottom of the output. -![list reporter](images/reporter-list.png) +![list reporter](images/reporter-list.png?withoutEnlargement&resize=920,9999) ### Progress The "progress" reporter implements a simple progress-bar: -![progress bar](images/reporter-progress.png) +![progress bar](images/reporter-progress.png?withoutEnlargement&resize=920,9999) ### JSON The "JSON" reporter outputs a single large JSON object when the tests have completed (failures or not). -![json reporter](images/reporter-json.png) +![json reporter](images/reporter-json.png?withoutEnlargement&resize=920,9999) ### JSON Stream The "JSON stream" reporter outputs newline-delimited JSON "events" as they occur, beginning with a "start" event, followed by test passes or failures, and then the final "end" event. -![json stream reporter](images/reporter-json-stream.png) +![json stream reporter](images/reporter-json-stream.png?withoutEnlargement&resize=920,9999) ### Min The "min" reporter displays the summary only, while still outputting errors on failure. This reporter works great with `--watch` as it clears the terminal in order to keep your test summary at the top. -![min reporter](images/reporter-min.png) +![min reporter](images/reporter-min.png?withoutEnlargement&resize=920,9999) ### Doc The "doc" reporter outputs a hierarchical HTML body representation of your tests. Wrap it with a header, footer, and some styling, then you have some fantastic documentation! -![doc reporter](images/reporter-doc.png) +![doc reporter](images/reporter-doc.png?withoutEnlargement&resize=920,9999) For example, suppose you have the following JavaScript: @@ -1127,7 +1127,7 @@ The "markdown" reporter generates a markdown TOC and body for your test suite. T The "HTML" reporter is currently the only browser reporter supported by Mocha, and it looks like this: -![HTML test reporter](images/reporter-html.png) +![HTML test reporter](images/reporter-html.png?withoutEnlargement&resize=920,9999) ### Undocumented Reporters @@ -1244,7 +1244,7 @@ $ make tm [JetBrains](http://jetbrains.com) provides a [NodeJS plugin](http://www.jetbrains.com/idea/features/nodejs.html) for its suite of IDEs (IntelliJ IDEA, WebStorm, etc.), which contains a Mocha test runner, among other things. -![JetBrains Mocha Runner Plugin in Action](images/jetbrains-plugin.png) +![JetBrains Mocha Runner Plugin in Action](images/jetbrains-plugin.png?withoutEnlargement&resize=920,9999) The plugin is titled **NodeJS**, and can be installed via **Preferences** > **Plugins**, assuming your license allows it. @@ -1252,12 +1252,12 @@ The plugin is titled **NodeJS**, and can be installed via **Preferences** > **Pl [Wallaby.js](http://wallabyjs.com) is a continuous testing tool that enables real-time code coverage for Mocha with any assertion library in JetBrains IDEs (IntelliJ IDEA, WebStorm, etc.) and Visual Studio for both browser and node.js projects. -![Wallaby.js in Action](images/wallaby.png) +![Wallaby.js in Action](images/wallaby.png?withoutEnlargement&resize=920,9999) ### Emacs [Emacs](https://www.gnu.org/software/emacs/) support for running Mocha tests is available via a 3rd party package [mocha.el](https://github.com/scottaj/mocha.el). The package is available on MELPA, and can be installed via `M-x package-install mocha`. -![Emacs Mocha Runner in Action](images/emacs.png) +![Emacs Mocha Runner in Action](images/emacs.png?withoutEnlargement&resize=920,9999) ### Mocha Sidebar (VS Code) @@ -1270,7 +1270,7 @@ The plugin is titled **NodeJS**, and can be installed via **Preferences** > **Pl * auto run tests on file save * see tests results directly in the code editor -![mocha side bar in Action](images/mocha_side_bar.png) +![mocha side bar in Action](images/mocha_side_bar.png?withoutEnlargement&resize=920,9999) ## Examples From cca00edaba9a2c13739c9b4ef3b2908b82a230e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Mon, 18 Dec 2017 14:43:26 +0100 Subject: [PATCH 15/31] Reduce color palette of largest images --- docs/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/index.md b/docs/index.md index d145020e09..9acce3ef58 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1257,7 +1257,7 @@ The plugin is titled **NodeJS**, and can be installed via **Preferences** > **Pl ### Emacs [Emacs](https://www.gnu.org/software/emacs/) support for running Mocha tests is available via a 3rd party package [mocha.el](https://github.com/scottaj/mocha.el). The package is available on MELPA, and can be installed via `M-x package-install mocha`. -![Emacs Mocha Runner in Action](images/emacs.png?withoutEnlargement&resize=920,9999) +![Emacs Mocha Runner in Action](images/emacs.png?withoutEnlargement&resize=920,9999&pngquant) ### Mocha Sidebar (VS Code) @@ -1270,7 +1270,7 @@ The plugin is titled **NodeJS**, and can be installed via **Preferences** > **Pl * auto run tests on file save * see tests results directly in the code editor -![mocha side bar in Action](images/mocha_side_bar.png?withoutEnlargement&resize=920,9999) +![mocha side bar in Action](images/mocha_side_bar.png?withoutEnlargement&resize=920,9999&pngquant) ## Examples From 401473a69ad6db49844dde3f2bdff1e012d52f4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Mon, 18 Dec 2017 14:49:12 +0100 Subject: [PATCH 16/31] More screenshot image palette reduction --- docs/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/index.md b/docs/index.md index 9acce3ef58..cd8d27c9af 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1244,7 +1244,7 @@ $ make tm [JetBrains](http://jetbrains.com) provides a [NodeJS plugin](http://www.jetbrains.com/idea/features/nodejs.html) for its suite of IDEs (IntelliJ IDEA, WebStorm, etc.), which contains a Mocha test runner, among other things. -![JetBrains Mocha Runner Plugin in Action](images/jetbrains-plugin.png?withoutEnlargement&resize=920,9999) +![JetBrains Mocha Runner Plugin in Action](images/jetbrains-plugin.png?withoutEnlargement&resize=920,9999&pngquant) The plugin is titled **NodeJS**, and can be installed via **Preferences** > **Plugins**, assuming your license allows it. @@ -1252,7 +1252,7 @@ The plugin is titled **NodeJS**, and can be installed via **Preferences** > **Pl [Wallaby.js](http://wallabyjs.com) is a continuous testing tool that enables real-time code coverage for Mocha with any assertion library in JetBrains IDEs (IntelliJ IDEA, WebStorm, etc.) and Visual Studio for both browser and node.js projects. -![Wallaby.js in Action](images/wallaby.png?withoutEnlargement&resize=920,9999) +![Wallaby.js in Action](images/wallaby.png?withoutEnlargement&resize=920,9999&pngquant) ### Emacs [Emacs](https://www.gnu.org/software/emacs/) support for running Mocha tests is available via a 3rd party package [mocha.el](https://github.com/scottaj/mocha.el). The package is available on MELPA, and can be installed via `M-x package-install mocha`. From f48bdf9c04dc768785dfae4198886d14392b5680 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Mon, 18 Dec 2017 15:09:09 +0100 Subject: [PATCH 17/31] Add pre-browsing hints for external services --- docs/_includes/head.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/_includes/head.html b/docs/_includes/head.html index 41dff9accd..65d4b1f0cd 100644 --- a/docs/_includes/head.html +++ b/docs/_includes/head.html @@ -2,6 +2,8 @@ {{ page.title }} + + From edeaa6bf766f805fbad3654c7c1f65b971a90387 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Mon, 18 Dec 2017 15:17:47 +0100 Subject: [PATCH 18/31] Force https download for avatars. Leverage http2 from opencollective --- docs/_includes/sponsors.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_includes/sponsors.md b/docs/_includes/sponsors.md index 6f5d5a17ba..130589664f 100644 --- a/docs/_includes/sponsors.md +++ b/docs/_includes/sponsors.md @@ -3,6 +3,6 @@ Use Mocha at Work? Ask your manager or marketing team if they'd help [support](https://opencollective.com/mochajs#support) our project. Your company's logo will also be displayed on [npmjs.com](http://npmjs.com/package/mocha) and our [GitHub repository](https://github.com/mochajs/mocha#sponsors). {: class="image-list faded-images" } -{% for i in (0..15) %}[![](//opencollective.com/mochajs/sponsor/{{ i }}/avatar.jpg)](https://opencollective.com/mochajs/sponsor/{{ i }}/website){: target="_blank"} {% endfor %} +{% for i in (0..15) %}[![](https://opencollective.com/mochajs/sponsor/{{ i }}/avatar.jpg)](https://opencollective.com/mochajs/sponsor/{{ i }}/website){: target="_blank"} {% endfor %} From 3f0e959c1a69af9c8580aa1cd3631f548875deb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Mon, 18 Dec 2017 15:18:02 +0100 Subject: [PATCH 19/31] Force https download for avatars. Leverage http2 from opencollective --- docs/_includes/backers.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_includes/backers.md b/docs/_includes/backers.md index b9c9c7d9f0..728e48310a 100644 --- a/docs/_includes/backers.md +++ b/docs/_includes/backers.md @@ -3,4 +3,4 @@ Find Mocha helpful? Become a [backer](https://opencollective.com/mochajs#support) and support Mocha with a monthly donation. {: id="_backers" class="image-list" } -{% for i in (0..29) %}[![](//opencollective.com/mochajs/backer/{{ i }}/avatar.jpg)](https://opencollective.com/mochajs/backer/{{ i }}/website){: target="_blank" rel="noopener"}{% endfor %} +{% for i in (0..29) %}[![](https://opencollective.com/mochajs/backer/{{ i }}/avatar.jpg)](https://opencollective.com/mochajs/backer/{{ i }}/website){: target="_blank" rel="noopener"}{% endfor %} From 236685d431072eb19e831cc09082329ad2ec293c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Mon, 18 Dec 2017 15:26:54 +0100 Subject: [PATCH 20/31] Only preconnect to analytics --- docs/_includes/head.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_includes/head.html b/docs/_includes/head.html index 65d4b1f0cd..59e7895bb3 100644 --- a/docs/_includes/head.html +++ b/docs/_includes/head.html @@ -3,7 +3,7 @@ {{ page.title }} - + From fdb43f67251d3534109e029d005e931f08cebc80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Mon, 18 Dec 2017 20:24:56 +0100 Subject: [PATCH 21/31] Added netlify header auto generation --- docs/_headers | 9 ++++ package.json | 2 +- scripts/netlify-headers.js | 103 +++++++++++++++++++++++++++++++++++++ 3 files changed, 113 insertions(+), 1 deletion(-) create mode 100644 docs/_headers create mode 100644 scripts/netlify-headers.js diff --git a/docs/_headers b/docs/_headers new file mode 100644 index 0000000000..522acdf8ae --- /dev/null +++ b/docs/_headers @@ -0,0 +1,9 @@ +/* + X-Frame-Options: DENY + X-XSS-Protection: 1; mode=block + X-Content-Type-Options: nosniff + Strict-Transport-Security: max-age=31536000, includeSubDomains + +## Far future expires for hashed file names +/static/* + Cache-Control: max-age=31536000 diff --git a/package.json b/package.json index c563045586..84dfc7e218 100644 --- a/package.json +++ b/package.json @@ -305,7 +305,7 @@ "coveralls": "nyc report --reporter=text-lcov | coveralls", "prebuildDocs": "rm -rf docs/_dist && node scripts/docs-update-toc.js", "buildDocs": "bundle exec jekyll build --source ./docs --destination ./docs/_site --config ./docs/_config.yml --safe --drafts", - "postbuildDocs": "buildProduction docs/_site/index.html --outroot docs/_dist --canonicalroot https://mochajs.org/ --optimizeimages --inlinehtmlimage 10000 --asyncscripts ", + "postbuildDocs": "cp docs/_headers docs/_site/_headers && buildProduction docs/_site/index.html docs/_site/_headers --outroot docs/_dist --canonicalroot https://mochajs.org/ --optimizeimages --inlinehtmlimage 10000 --asyncscripts && cp docs/_headers docs/_dist/_headers && node scripts/netlify-headers.js >> docs/_dist/_headers", "prewatchDocs": "node scripts/docs-update-toc.js", "watchDocs": "bundle exec jekyll serve --source ./docs --destination ./docs/_site --config ./docs/_config.yml --safe --drafts --watch" }, diff --git a/scripts/netlify-headers.js b/scripts/netlify-headers.js new file mode 100644 index 0000000000..cc38fd3353 --- /dev/null +++ b/scripts/netlify-headers.js @@ -0,0 +1,103 @@ +var AssetGraph = require('assetgraph'); + +var headers = [ + 'Content-Security-Policy' +]; + +var resourceHintTypeMap = { + HtmlPreloadLink: 'preload', + HtmlPrefetchLink: 'prefetch', + HtmlPreconnectLink: 'preconnect', + HtmlDnsPrefetchLink: 'dns-prefetch' +}; + +function getHeaderForRelation (rel) { + let header = `Link: <${rel.href}>; rel=${resourceHintTypeMap[rel.type]}; as=${rel.as}; type=${rel.to.contentType}`; + + if (rel.crossorigin || rel.as === 'font') { + header = `${header}; crossorigin=anonymous`; + } + + return header; +} + +new AssetGraph({ root: 'docs/_dist' }) + .loadAssets('*.html') + .populate({ + followRelations: { type: 'HtmlAnchor', crossorigin: false } + }) + .queue(function (assetGraph) { + var assets = assetGraph.findAssets({ type: 'Html', isInline: false }); + + var headerMap = {}; + + assets.forEach(function (asset) { + var url = '/' + asset.url.replace(assetGraph.root, '').replace(/#.*/, '').replace('index.html', ''); + if (!headerMap[url]) { + headerMap[url] = []; + } + + headers.forEach(function (header) { + var node = asset.parseTree.querySelector('meta[http-equiv=' + header + ']'); + + if (node) { + headerMap[url].push(`${header}: ${node.getAttribute('content')}`) + + node.parentNode.removeChild(node); + asset.markDirty(); + } + }); + + var firstCssRel = asset.outgoingRelations.filter(r => { + return r.type === 'HtmlStyle' + && r.crossorigin === false + && r.href !== undefined; + })[0]; + + if (firstCssRel) { + const header = `Link: <${firstCssRel.href}>; rel=preload; as=style`; + + + headerMap[url].push(header); + } + + var resourceHintRelations = asset.outgoingRelations.filter(r => ['HtmlPreloadLink', 'HtmlPrefetchLink'].includes(r.type)); + + resourceHintRelations.forEach(rel => { + headerMap[url].push(getHeaderForRelation(rel)); + + rel.detach(); + }); + + var resourceHintRelations = asset.outgoingRelations.filter(r => ['HtmlPreconnectLink'].includes(r.type)); + + resourceHintRelations.forEach(rel => { + let header = `Link: <${rel.href}>; rel=preconnect`; + + if (rel.crossorigin) { + header = `${header}; crossorigin=anonymous`; + } + + headerMap[url].push(header); + + rel.detach(); + }); + }); + + console.log('\n## Autogenerated headers:\n') + + Object.keys(headerMap).forEach(function (url) { + console.log(url); + + var httpHeaders = headerMap[url]; + + httpHeaders.forEach(function (header) { + console.log(` ${header}`) + }); + + console.log(''); + }); + + }) + .writeAssetsToDisc({ isLoaded: true }) + .run(); From f22e557ba3057e13827c3624eac5a4aa2815e684 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Mon, 18 Dec 2017 20:51:51 +0100 Subject: [PATCH 22/31] Externalise js bundles --- docs/_includes/footer.html | 17 +- docs/js/anchor.js | 338 +++++++++++++++++++++++++++++++++++++ docs/js/avatars.js | 8 +- package.json | 2 +- 4 files changed, 354 insertions(+), 11 deletions(-) create mode 100644 docs/js/anchor.js diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html index 48cd488232..09fc3c41ca 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/footer.html @@ -4,12 +4,13 @@ href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License.

Last updated: {{ site.time | date: "%c" }} - - - + + + + diff --git a/docs/js/anchor.js b/docs/js/anchor.js new file mode 100644 index 0000000000..a52ab7ee2e --- /dev/null +++ b/docs/js/anchor.js @@ -0,0 +1,338 @@ +/** + * AnchorJS - v3.2.2 - 2016-10-05 + * https://github.com/bryanbraun/anchorjs + * Copyright (c) 2016 Bryan Braun; Licensed MIT + */ + +/* eslint-env amd, node */ + +// https://github.com/umdjs/umd/blob/master/templates/returnExports.js +(function (root, factory) { + 'use strict'; + + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define([], factory); + } else if (typeof module === 'object' && module.exports) { + // Node. Does not work with strict CommonJS, but + // only CommonJS-like environments that support module.exports, + // like Node. + module.exports = factory(); + } else { + // Browser globals (root is window) + root.AnchorJS = factory(); + root.anchors = new root.AnchorJS(); + } +}(this, function () { + 'use strict'; + + function AnchorJS(options) { + this.options = options || {}; + this.elements = []; + + /** + * Assigns options to the internal options object, and provides defaults. + * @param {Object} opts - Options object + */ + function _applyRemainingDefaultOptions(opts) { + opts.icon = opts.hasOwnProperty('icon') ? opts.icon : '\ue9cb'; // Accepts characters (and also URLs?), like '#', '¶', '❡', or '§'. + opts.visible = opts.hasOwnProperty('visible') ? opts.visible : 'hover'; // Also accepts 'always' & 'touch' + opts.placement = opts.hasOwnProperty('placement') ? opts.placement : 'right'; // Also accepts 'left' + opts.class = opts.hasOwnProperty('class') ? opts.class : ''; // Accepts any class name. + // Using Math.floor here will ensure the value is Number-cast and an integer. + opts.truncate = opts.hasOwnProperty('truncate') ? Math.floor(opts.truncate) : 64; // Accepts any value that can be typecast to a number. + } + + _applyRemainingDefaultOptions(this.options); + + /** + * Checks to see if this device supports touch. Uses criteria pulled from Modernizr: + * https://github.com/Modernizr/Modernizr/blob/da22eb27631fc4957f67607fe6042e85c0a84656/feature-detects/touchevents.js#L40 + * @return {Boolean} - true if the current device supports touch. + */ + this.isTouchDevice = function() { + return !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch); + }; + + /** + * Add anchor links to page elements. + * @param {String|Array|Nodelist} selector - A CSS selector for targeting the elements you wish to add anchor links + * to. Also accepts an array or nodeList containing the relavant elements. + * @return {this} - The AnchorJS object + */ + this.add = function(selector) { + var elements, + elsWithIds, + idList, + elementID, + i, + index, + count, + tidyText, + newTidyText, + readableID, + anchor, + visibleOptionToUse, + indexesToDrop = []; + + // We reapply options here because somebody may have overwritten the default options object when setting options. + // For example, this overwrites all options but visible: + // + // anchors.options = { visible: 'always'; } + _applyRemainingDefaultOptions(this.options); + + visibleOptionToUse = this.options.visible; + if (visibleOptionToUse === 'touch') { + visibleOptionToUse = this.isTouchDevice() ? 'always' : 'hover'; + } + + // Provide a sensible default selector, if none is given. + if (!selector) { + selector = 'h1, h2, h3, h4, h5, h6'; + } + + elements = _getElements(selector); + + if (elements.length === 0) { + return false; + } + + _addBaselineStyles(); + + // We produce a list of existing IDs so we don't generate a duplicate. + elsWithIds = document.querySelectorAll('[id]'); + idList = [].map.call(elsWithIds, function assign(el) { + return el.id; + }); + + for (i = 0; i < elements.length; i++) { + if (this.hasAnchorJSLink(elements[i])) { + indexesToDrop.push(i); + continue; + } + + if (elements[i].hasAttribute('id')) { + elementID = elements[i].getAttribute('id'); + } else { + tidyText = this.urlify(elements[i].textContent); + + // Compare our generated ID to existing IDs (and increment it if needed) + // before we add it to the page. + newTidyText = tidyText; + count = 0; + do { + if (index !== undefined) { + newTidyText = tidyText + '-' + count; + } + + index = idList.indexOf(newTidyText); + count += 1; + } while (index !== -1); + index = undefined; + idList.push(newTidyText); + + elements[i].setAttribute('id', newTidyText); + elementID = newTidyText; + } + + readableID = elementID.replace(/-/g, ' '); + + // The following code builds the following DOM structure in a more effiecient (albeit opaque) way. + // ''; + anchor = document.createElement('a'); + anchor.className = 'anchorjs-link ' + this.options.class; + anchor.href = '#' + elementID; + anchor.setAttribute('aria-label', 'Anchor link for: ' + readableID); + anchor.setAttribute('data-anchorjs-icon', this.options.icon); + + if (visibleOptionToUse === 'always') { + anchor.style.opacity = '1'; + } + + if (this.options.icon === '\ue9cb') { + anchor.style.font = '1em/1 anchorjs-icons'; + + // We set lineHeight = 1 here because the `anchorjs-icons` font family could otherwise affect the + // height of the heading. This isn't the case for icons with `placement: left`, so we restore + // line-height: inherit in that case, ensuring they remain positioned correctly. For more info, + // see https://github.com/bryanbraun/anchorjs/issues/39. + if (this.options.placement === 'left') { + anchor.style.lineHeight = 'inherit'; + } + } + + if (this.options.placement === 'left') { + anchor.style.position = 'absolute'; + anchor.style.marginLeft = '-1em'; + anchor.style.paddingRight = '0.5em'; + elements[i].insertBefore(anchor, elements[i].firstChild); + } else { // if the option provided is `right` (or anything else). + anchor.style.paddingLeft = '0.375em'; + elements[i].appendChild(anchor); + } + } + + for (i = 0; i < indexesToDrop.length; i++) { + elements.splice(indexesToDrop[i] - i, 1); + } + this.elements = this.elements.concat(elements); + + return this; + }; + + /** + * Removes all anchorjs-links from elements targed by the selector. + * @param {String|Array|Nodelist} selector - A CSS selector string targeting elements with anchor links, + * OR a nodeList / array containing the DOM elements. + * @return {this} - The AnchorJS object + */ + this.remove = function(selector) { + var index, + domAnchor, + elements = _getElements(selector); + + for (var i = 0; i < elements.length; i++) { + domAnchor = elements[i].querySelector('.anchorjs-link'); + if (domAnchor) { + // Drop the element from our main list, if it's in there. + index = this.elements.indexOf(elements[i]); + if (index !== -1) { + this.elements.splice(index, 1); + } + // Remove the anchor from the DOM. + elements[i].removeChild(domAnchor); + } + } + return this; + }; + + /** + * Removes all anchorjs links. Mostly used for tests. + */ + this.removeAll = function() { + this.remove(this.elements); + }; + + /** + * Urlify - Refine text so it makes a good ID. + * + * To do this, we remove apostrophes, replace nonsafe characters with hyphens, + * remove extra hyphens, truncate, trim hyphens, and make lowercase. + * + * @param {String} text - Any text. Usually pulled from the webpage element we are linking to. + * @return {String} - hyphen-delimited text for use in IDs and URLs. + */ + this.urlify = function(text) { + // Regex for finding the nonsafe URL characters (many need escaping): & +$,:;=?@"#{}|^~[`%!']./()*\ + var nonsafeChars = /[& +$,:;=?@"#{}|^~[`%!'\]\.\/\(\)\*\\]/g, + urlText; + + // The reason we include this _applyRemainingDefaultOptions is so urlify can be called independently, + // even after setting options. This can be useful for tests or other applications. + if (!this.options.truncate) { + _applyRemainingDefaultOptions(this.options); + } + + // Note: we trim hyphens after truncating because truncating can cause dangling hyphens. + // Example string: // " ⚡⚡ Don't forget: URL fragments should be i18n-friendly, hyphenated, short, and clean." + urlText = text.trim() // "⚡⚡ Don't forget: URL fragments should be i18n-friendly, hyphenated, short, and clean." + .replace(/\'/gi, '') // "⚡⚡ Dont forget: URL fragments should be i18n-friendly, hyphenated, short, and clean." + .replace(nonsafeChars, '-') // "⚡⚡-Dont-forget--URL-fragments-should-be-i18n-friendly--hyphenated--short--and-clean-" + .replace(/-{2,}/g, '-') // "⚡⚡-Dont-forget-URL-fragments-should-be-i18n-friendly-hyphenated-short-and-clean-" + .substring(0, this.options.truncate) // "⚡⚡-Dont-forget-URL-fragments-should-be-i18n-friendly-hyphenated-" + .replace(/^-+|-+$/gm, '') // "⚡⚡-Dont-forget-URL-fragments-should-be-i18n-friendly-hyphenated" + .toLowerCase(); // "⚡⚡-dont-forget-url-fragments-should-be-i18n-friendly-hyphenated" + + return urlText; + }; + + /** + * Determines if this element already has an AnchorJS link on it. + * Uses this technique: http://stackoverflow.com/a/5898748/1154642 + * @param {HTMLElemnt} el - a DOM node + * @return {Boolean} true/false + */ + this.hasAnchorJSLink = function(el) { + var hasLeftAnchor = el.firstChild && ((' ' + el.firstChild.className + ' ').indexOf(' anchorjs-link ') > -1), + hasRightAnchor = el.lastChild && ((' ' + el.lastChild.className + ' ').indexOf(' anchorjs-link ') > -1); + + return hasLeftAnchor || hasRightAnchor || false; + }; + + /** + * Turns a selector, nodeList, or array of elements into an array of elements (so we can use array methods). + * It also throws errors on any other inputs. Used to handle inputs to .add and .remove. + * @param {String|Array|Nodelist} input - A CSS selector string targeting elements with anchor links, + * OR a nodeList / array containing the DOM elements. + * @return {Array} - An array containing the elements we want. + */ + function _getElements(input) { + var elements; + if (typeof input === 'string' || input instanceof String) { + // See https://davidwalsh.name/nodelist-array for the technique transforming nodeList -> Array. + elements = [].slice.call(document.querySelectorAll(input)); + // I checked the 'input instanceof NodeList' test in IE9 and modern browsers and it worked for me. + } else if (Array.isArray(input) || input instanceof NodeList) { + elements = [].slice.call(input); + } else { + throw new Error('The selector provided to AnchorJS was invalid.'); + } + return elements; + } + + /** + * _addBaselineStyles + * Adds baseline styles to the page, used by all AnchorJS links irregardless of configuration. + */ + function _addBaselineStyles() { + // We don't want to add global baseline styles if they've been added before. + if (document.head.querySelector('style.anchorjs') !== null) { + return; + } + + var style = document.createElement('style'), + linkRule = + ' .anchorjs-link {' + + ' opacity: 0;' + + ' text-decoration: none;' + + ' -webkit-font-smoothing: antialiased;' + + ' -moz-osx-font-smoothing: grayscale;' + + ' }', + hoverRule = + ' *:hover > .anchorjs-link,' + + ' .anchorjs-link:focus {' + + ' opacity: 1;' + + ' }', + anchorjsLinkFontFace = + ' @font-face {' + + ' font-family: "anchorjs-icons";' + // Icon from icomoon; 10px wide & 10px tall; 2 empty below & 4 above + ' src: url(data:n/a;base64,AAEAAAALAIAAAwAwT1MvMg8yG2cAAAE4AAAAYGNtYXDp3gC3AAABpAAAAExnYXNwAAAAEAAAA9wAAAAIZ2x5ZlQCcfwAAAH4AAABCGhlYWQHFvHyAAAAvAAAADZoaGVhBnACFwAAAPQAAAAkaG10eASAADEAAAGYAAAADGxvY2EACACEAAAB8AAAAAhtYXhwAAYAVwAAARgAAAAgbmFtZQGOH9cAAAMAAAAAunBvc3QAAwAAAAADvAAAACAAAQAAAAEAAHzE2p9fDzz1AAkEAAAAAADRecUWAAAAANQA6R8AAAAAAoACwAAAAAgAAgAAAAAAAAABAAADwP/AAAACgAAA/9MCrQABAAAAAAAAAAAAAAAAAAAAAwABAAAAAwBVAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAMCQAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAg//0DwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAAIAAAACgAAxAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADAAAAAIAAgAAgAAACDpy//9//8AAAAg6cv//f///+EWNwADAAEAAAAAAAAAAAAAAAAACACEAAEAAAAAAAAAAAAAAAAxAAACAAQARAKAAsAAKwBUAAABIiYnJjQ3NzY2MzIWFxYUBwcGIicmNDc3NjQnJiYjIgYHBwYUFxYUBwYGIwciJicmNDc3NjIXFhQHBwYUFxYWMzI2Nzc2NCcmNDc2MhcWFAcHBgYjARQGDAUtLXoWOR8fORYtLTgKGwoKCjgaGg0gEhIgDXoaGgkJBQwHdR85Fi0tOAobCgoKOBoaDSASEiANehoaCQkKGwotLXoWOR8BMwUFLYEuehYXFxYugC44CQkKGwo4GkoaDQ0NDXoaShoKGwoFBe8XFi6ALjgJCQobCjgaShoNDQ0NehpKGgobCgoKLYEuehYXAAAADACWAAEAAAAAAAEACAAAAAEAAAAAAAIAAwAIAAEAAAAAAAMACAAAAAEAAAAAAAQACAAAAAEAAAAAAAUAAQALAAEAAAAAAAYACAAAAAMAAQQJAAEAEAAMAAMAAQQJAAIABgAcAAMAAQQJAAMAEAAMAAMAAQQJAAQAEAAMAAMAAQQJAAUAAgAiAAMAAQQJAAYAEAAMYW5jaG9yanM0MDBAAGEAbgBjAGgAbwByAGoAcwA0ADAAMABAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAH//wAP) format("truetype");' + + ' }', + pseudoElContent = + ' [data-anchorjs-icon]::after {' + + ' content: attr(data-anchorjs-icon);' + + ' }', + firstStyleEl; + + style.className = 'anchorjs'; + style.appendChild(document.createTextNode('')); // Necessary for Webkit. + + // We place it in the head with the other style tags, if possible, so as to + // not look out of place. We insert before the others so these styles can be + // overridden if necessary. + firstStyleEl = document.head.querySelector('[rel="stylesheet"], style'); + if (firstStyleEl === undefined) { + document.head.appendChild(style); + } else { + document.head.insertBefore(style, firstStyleEl); + } + + style.sheet.insertRule(linkRule, style.sheet.cssRules.length); + style.sheet.insertRule(hoverRule, style.sheet.cssRules.length); + style.sheet.insertRule(pseudoElContent, style.sheet.cssRules.length); + style.sheet.insertRule(anchorjsLinkFontFace, style.sheet.cssRules.length); + } + } + + return AnchorJS; +})); diff --git a/docs/js/avatars.js b/docs/js/avatars.js index 58dbb7cbe3..3c60984741 100644 --- a/docs/js/avatars.js +++ b/docs/js/avatars.js @@ -16,8 +16,12 @@ } for (var i = 0; i < images.length; i += 1) { - images[i].onload = onloadHandler; - images[i].onerror = onloadHandler; + if (images[i].complete) { + counter -= 1; + } else { + images[i].onload = onloadHandler; + images[i].onerror = onloadHandler; + } } }); diff --git a/package.json b/package.json index 84dfc7e218..1902c0cfc9 100644 --- a/package.json +++ b/package.json @@ -305,7 +305,7 @@ "coveralls": "nyc report --reporter=text-lcov | coveralls", "prebuildDocs": "rm -rf docs/_dist && node scripts/docs-update-toc.js", "buildDocs": "bundle exec jekyll build --source ./docs --destination ./docs/_site --config ./docs/_config.yml --safe --drafts", - "postbuildDocs": "cp docs/_headers docs/_site/_headers && buildProduction docs/_site/index.html docs/_site/_headers --outroot docs/_dist --canonicalroot https://mochajs.org/ --optimizeimages --inlinehtmlimage 10000 --asyncscripts && cp docs/_headers docs/_dist/_headers && node scripts/netlify-headers.js >> docs/_dist/_headers", + "postbuildDocs": "buildProduction docs/_site/index.html --outroot docs/_dist --canonicalroot https://mochajs.org/ --optimizeimages --inlinehtmlimage 6800 --inlinehtmlscript 0 --asyncscripts && cp docs/_headers docs/_dist/_headers && node scripts/netlify-headers.js >> docs/_dist/_headers", "prewatchDocs": "node scripts/docs-update-toc.js", "watchDocs": "bundle exec jekyll serve --source ./docs --destination ./docs/_site --config ./docs/_config.yml --safe --drafts --watch" }, From 7970e12c67f778fb54de2d75ed97c14e8b6ccebc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Mon, 18 Dec 2017 22:38:43 +0100 Subject: [PATCH 23/31] Be explicit about styling of screenshot images --- docs/css/style.css | 2 +- docs/index.md | 46 +++++++++++++++++++++++----------------------- 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/docs/css/style.css b/docs/css/style.css index 5216b4f881..164a77c542 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -164,7 +164,7 @@ pre { overflow-x: auto; } -main img:not([src*=avatar]):not([src*=badges]):not([src*=".svg"]) { +img.screenshot { display: block; margin: 30px auto; border-radius: 3px; diff --git a/docs/index.md b/docs/index.md index cd8d27c9af..69186c4d28 100644 --- a/docs/index.md +++ b/docs/index.md @@ -635,7 +635,7 @@ $ mocha Many reporters will display test duration, as well as flagging tests that are slow, as shown here with the "spec" reporter: -![test duration](images/reporter-spec-duration.png?withoutEnlargement&resize=920,9999) +![test duration](images/reporter-spec-duration.png?withoutEnlargement&resize=920,9999){:class="screenshot"} To tweak what's considered "slow", you can use the `slow()` method: @@ -702,7 +702,7 @@ Again, use `this.timeout(0)` to disable the timeout for a hook. Mocha supports the `err.expected` and `err.actual` properties of any thrown `AssertionError`s from an assertion library. Mocha will attempt to display the difference between what was expected, and what the assertion actually saw. Here's an example of a "string" diff: -![string diffs](images/reporter-string-diffs.png?withoutEnlargement&resize=920,9999) +![string diffs](images/reporter-string-diffs.png?withoutEnlargement&resize=920,9999){:class="screenshot"} ## Usage @@ -1013,69 +1013,69 @@ Mocha reporters adjust to the terminal window, and always disable ANSI-escape co This is the default reporter. The "spec" reporter outputs a hierarchical view nested just as the test cases are. -![spec reporter](images/reporter-spec.png?withoutEnlargement&resize=920,9999) -![spec reporter with failure](images/reporter-spec-fail.png?withoutEnlargement&resize=920,9999) +![spec reporter](images/reporter-spec.png?withoutEnlargement&resize=920,9999){:class="screenshot"} +![spec reporter with failure](images/reporter-spec-fail.png?withoutEnlargement&resize=920,9999){:class="screenshot"} ### Dot Matrix The dot matrix (or "dot") reporter is simply a series of characters which represent test cases. Failures highlight in red exclamation marks (`!`), pending tests with a blue comma (`,`), and slow tests as yellow. Good if you prefer minimal output. -![dot matrix reporter](images/reporter-dot.png?withoutEnlargement&resize=920,9999) +![dot matrix reporter](images/reporter-dot.png?withoutEnlargement&resize=920,9999){:class="screenshot"} ### Nyan The "nyan" reporter is exactly what you might expect: -![js nyan cat reporter](images/reporter-nyan.png?withoutEnlargement&resize=920,9999) +![js nyan cat reporter](images/reporter-nyan.png?withoutEnlargement&resize=920,9999){:class="screenshot"} ### TAP -The TAP reporter emits lines for a [Test-Anything-Protocol](http://en.wikipedia.org/wiki/Test_Anything_Protocol) consumer. +The TAP reporter emits lines for a [Test-Anything-Protocol](https://en.wikipedia.org/wiki/Test_Anything_Protocol) consumer. -![test anything protocol](images/reporter-tap.png?withoutEnlargement&resize=920,9999) +![test anything protocol](images/reporter-tap.png?withoutEnlargement&resize=920,9999){:class="screenshot"} ### Landing Strip The Landing Strip (`landing`) reporter is a gimmicky test reporter simulating a plane landing :) unicode ftw -![landing strip plane reporter](images/reporter-landing.png?withoutEnlargement&resize=920,9999) -![landing strip with failure](images/reporter-landing-fail.png?withoutEnlargement&resize=920,9999) +![landing strip plane reporter](images/reporter-landing.png?withoutEnlargement&resize=920,9999){:class="screenshot"} +![landing strip with failure](images/reporter-landing-fail.png?withoutEnlargement&resize=920,9999){:class="screenshot"} ### List The "list" reporter outputs a simple specifications list as test cases pass or fail, outputting the failure details at the bottom of the output. -![list reporter](images/reporter-list.png?withoutEnlargement&resize=920,9999) +![list reporter](images/reporter-list.png?withoutEnlargement&resize=920,9999){:class="screenshot"} ### Progress The "progress" reporter implements a simple progress-bar: -![progress bar](images/reporter-progress.png?withoutEnlargement&resize=920,9999) +![progress bar](images/reporter-progress.png?withoutEnlargement&resize=920,9999){:class="screenshot"} ### JSON The "JSON" reporter outputs a single large JSON object when the tests have completed (failures or not). -![json reporter](images/reporter-json.png?withoutEnlargement&resize=920,9999) +![json reporter](images/reporter-json.png?withoutEnlargement&resize=920,9999){:class="screenshot"} ### JSON Stream The "JSON stream" reporter outputs newline-delimited JSON "events" as they occur, beginning with a "start" event, followed by test passes or failures, and then the final "end" event. -![json stream reporter](images/reporter-json-stream.png?withoutEnlargement&resize=920,9999) +![json stream reporter](images/reporter-json-stream.png?withoutEnlargement&resize=920,9999){:class="screenshot"} ### Min The "min" reporter displays the summary only, while still outputting errors on failure. This reporter works great with `--watch` as it clears the terminal in order to keep your test summary at the top. -![min reporter](images/reporter-min.png?withoutEnlargement&resize=920,9999) +![min reporter](images/reporter-min.png?withoutEnlargement&resize=920,9999){:class="screenshot"} ### Doc The "doc" reporter outputs a hierarchical HTML body representation of your tests. Wrap it with a header, footer, and some styling, then you have some fantastic documentation! -![doc reporter](images/reporter-doc.png?withoutEnlargement&resize=920,9999) +![doc reporter](images/reporter-doc.png?withoutEnlargement&resize=920,9999){:class="screenshot"} For example, suppose you have the following JavaScript: @@ -1127,7 +1127,7 @@ The "markdown" reporter generates a markdown TOC and body for your test suite. T The "HTML" reporter is currently the only browser reporter supported by Mocha, and it looks like this: -![HTML test reporter](images/reporter-html.png?withoutEnlargement&resize=920,9999) +![HTML test reporter](images/reporter-html.png?withoutEnlargement&resize=920,9999){:class="screenshot"} ### Undocumented Reporters @@ -1242,22 +1242,22 @@ $ make tm ### JetBrains -[JetBrains](http://jetbrains.com) provides a [NodeJS plugin](http://www.jetbrains.com/idea/features/nodejs.html) for its suite of IDEs (IntelliJ IDEA, WebStorm, etc.), which contains a Mocha test runner, among other things. +[JetBrains](https://www.jetbrains.com/) provides a [NodeJS plugin](https://www.jetbrains.com/idea/features/nodejs.html) for its suite of IDEs (IntelliJ IDEA, WebStorm, etc.), which contains a Mocha test runner, among other things. -![JetBrains Mocha Runner Plugin in Action](images/jetbrains-plugin.png?withoutEnlargement&resize=920,9999&pngquant) +![JetBrains Mocha Runner Plugin in Action](images/jetbrains-plugin.png?withoutEnlargement&resize=920,9999&pngquant){:class="screenshot"} The plugin is titled **NodeJS**, and can be installed via **Preferences** > **Plugins**, assuming your license allows it. ### Wallaby.js -[Wallaby.js](http://wallabyjs.com) is a continuous testing tool that enables real-time code coverage for Mocha with any assertion library in JetBrains IDEs (IntelliJ IDEA, WebStorm, etc.) and Visual Studio for both browser and node.js projects. +[Wallaby.js](https://wallabyjs.com/) is a continuous testing tool that enables real-time code coverage for Mocha with any assertion library in JetBrains IDEs (IntelliJ IDEA, WebStorm, etc.) and Visual Studio for both browser and node.js projects. -![Wallaby.js in Action](images/wallaby.png?withoutEnlargement&resize=920,9999&pngquant) +![Wallaby.js in Action](images/wallaby.png?withoutEnlargement&resize=920,9999&pngquant){:class="screenshot"} ### Emacs [Emacs](https://www.gnu.org/software/emacs/) support for running Mocha tests is available via a 3rd party package [mocha.el](https://github.com/scottaj/mocha.el). The package is available on MELPA, and can be installed via `M-x package-install mocha`. -![Emacs Mocha Runner in Action](images/emacs.png?withoutEnlargement&resize=920,9999&pngquant) +![Emacs Mocha Runner in Action](images/emacs.png?withoutEnlargement&resize=920,9999&pngquant){:class="screenshot"} ### Mocha Sidebar (VS Code) @@ -1270,7 +1270,7 @@ The plugin is titled **NodeJS**, and can be installed via **Preferences** > **Pl * auto run tests on file save * see tests results directly in the code editor -![mocha side bar in Action](images/mocha_side_bar.png?withoutEnlargement&resize=920,9999&pngquant) +![mocha side bar in Action](images/mocha_side_bar.png?withoutEnlargement&resize=920,9999&pngquant){:class="screenshot"} ## Examples From 52dcf29b44ddb1d0cb7caa4d1d9acb7e6fb17088 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Mon, 18 Dec 2017 22:39:01 +0100 Subject: [PATCH 24/31] https urls where possible --- docs/index.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/index.md b/docs/index.md index 69186c4d28..df89591673 100644 --- a/docs/index.md +++ b/docs/index.md @@ -2,7 +2,7 @@ layout: default title: 'Mocha - the fun, simple, flexible JavaScript test framework' --- -Mocha is a feature-rich JavaScript test framework running on [Node.js](http://nodejs.org) and in the browser, making asynchronous testing *simple* and *fun*. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases. Hosted on [GitHub](https://github.com/mochajs/mocha). +Mocha is a feature-rich JavaScript test framework running on [Node.js](https://nodejs.org) and in the browser, making asynchronous testing *simple* and *fun*. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases. Hosted on [GitHub](https://github.com/mochajs/mocha).