Design refresh to align with the new qunitjs.com

* Use the same fonts, colors, header, and syntax highlight styles. * Add the same footer. * Split the method name heading from the method signature. This is in preparation for #1353. * On narrow viewports: - Hide the sidebar on narrow viewports (redundant with header menu). - Let tables scroll horizontally instead of widening the page. Ref #1458
qunitjs · Jul 11, 2020 · 5482357 · 5482357
1 parent 0c45e67
commit 5482357
Show file tree

Hide file tree

Showing 33 changed files with 629 additions and 490 deletions.
diff --git a/docs/QUnit/module.md b/docs/QUnit/module.md
@@ -1,6 +1,6 @@
 ---
 layout: default
-title: module
+title: QUnit.module()
 description: Group related tests under a single label.
 categories:
   - main
@@ -9,7 +9,7 @@ redirect_from:
   - "/module/"
 ---
 
-## `QUnit.module( name [, hooks] [, nested ] )`
+`QUnit.module( name [, hooks] [, nested ] )`
 
 Group related tests under a single label.
 

diff --git a/docs/QUnit/only.md b/docs/QUnit/only.md
@@ -1,12 +1,12 @@
 ---
 layout: default
-title: only
+title: QUnit.only()
 description: Adds a test to exclusively run, preventing any other tests not defined with `QUnit.only()` from running.
 categories:
   - main
 ---
 
-## `QUnit.only( name, callback )`
+`QUnit.only( name, callback )`
 
 Adds a test to exclusively run, preventing any other tests not defined with `QUnit.only()` from running.
 

diff --git a/docs/QUnit/skip.md b/docs/QUnit/skip.md
@@ -1,12 +1,12 @@
 ---
 layout: default
-title: skip
+title: QUnit.skip()
 description: Adds a test like object to be skipped
 categories:
   - main
 ---
 
-## `QUnit.skip( name )`
+`QUnit.skip( name )`
 
 Adds a test like object to be skipped
 

diff --git a/docs/QUnit/start.md b/docs/QUnit/start.md
@@ -1,6 +1,6 @@
 ---
 layout: default
-title: start
+title: QUnit.start()
 description: QUnit.start() is used to start an async test set
 categories:
   - main
@@ -9,8 +9,6 @@ redirect_from:
   - "/start/"
 ---
 
-## `QUnit.start()`
-
 `QUnit.start()` must be used to start a test run that has [`QUnit.config.autostart`](/config/QUnit.config) set to `false`.
 
 <p class="warning" markdown="1">Warning: This method was previously used to control async tests on text contexts along with `QUnit.stop`. For asynchronous tests, use [`assert.async`](/assert/async) instead.</p>

diff --git a/docs/QUnit/test.md b/docs/QUnit/test.md
@@ -1,6 +1,6 @@
 ---
 layout: default
-title: test
+title: QUnit.test()
 description: Add a test to run.
 categories:
   - main
@@ -12,7 +12,7 @@ redirect_from:
   - "/test/"
 ---
 
-## `QUnit.test( name, callback )`
+`QUnit.test( name, callback )`
 
 Add a test to run.
 

diff --git a/docs/QUnit/todo.md b/docs/QUnit/todo.md
@@ -1,12 +1,12 @@
 ---
 layout: default
-title: todo
+title: QUnit.todo()
 description: Adds a test which expects at least one failing assertion during its run.
 categories:
   - main
 ---
 
-## `QUnit.todo( name, callback )`
+`QUnit.todo( name, callback )`
 
 Adds a test which expects at least one failing assertion during its run.
 

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -3,59 +3,60 @@
 ---
 
 <section class="sidebar">
-    <h2>Main Methods</h2>
+    <h4>Main Methods</h4>
     <ul class="sidebar-list">
     {% assign methods = site.pages | where:'categories', 'main' %}
-    {% for page in methods %}
-    <li class="sidebar-item">
-        <a href="{{ page.url }}">{{page.title}}</a>
+    {% for entry in methods %}
+    <li class="sidebar-item{% if entry.url == page.url %} sidebar-item-active{% endif %}">
+        <a href="{{ entry.url }}">{{entry.title}}</a>
     </li>
     {% endfor %}
     </ul>
 
-    <h2>Assertions</h2>
+    <h4>Assertions</h4>
     <ul class="sidebar-list">
     {% assign assertions = site.pages | where:'categories', 'assert' %}
-    {% for page in assertions %}
-    <li class="sidebar-item">
-        <a href="{{ page.url }}">{{page.title}}</a>
+    {% for entry in assertions %}
+    <li class="sidebar-item{% if entry.url == page.url %} sidebar-item-active{% endif %}">
+        <a href="{{ entry.url }}">{{entry.title}}</a>
     </li>
     {% endfor %}
     </ul>
 
-    <h2>Configuration Tools</h2>
+    <h4>Configuration Tools</h4>
 
     <ul class="sidebar-list">
     {% assign config = site.pages | where:'categories', 'config' %}
-    {% for page in config %}
-    <li class="sidebar-item">
-        <a href="{{ page.url }}">{{page.title}}</a>
+    {% for entry in config %}
+    <li class="sidebar-item{% if entry.url == page.url %} sidebar-item-active{% endif %}">
+        <a href="{{ entry.url }}">{{entry.title}}</a>
     </li>
     {% endfor %}
     </ul>
 
-    <h2>Callback Handlers</h2>
+    <h4>Callback Handlers</h4>
 
     <ul class="sidebar-list">
     {% assign callbacks = site.pages | where:'categories', 'callbacks' %}
-    {% for page in callbacks %}
-    <li class="sidebar-item">
-        <a href="{{ page.url }}">{{page.title}}</a>
+    {% for entry in callbacks %}
+    <li class="sidebar-item{% if entry.url == page.url %} sidebar-item-active{% endif %}">
+        <a href="{{ entry.url }}">{{entry.title}}</a>
     </li>
     {% endfor %}
     </ul>
 
-    <h2>Async Control</h2>
+    <h4>Async Control</h4>
 
     <ul class="sidebar-list">
     {% assign async = site.pages | where:'categories', 'async' %}
-    {% for page in async %}
-    <li class="sidebar-item">
-        <a href="{{ page.url }}">{{page.title}}</a>
+    {% for entry in async %}
+    <li class="sidebar-item{% if entry.url == page.url %} sidebar-item-active{% endif %}">
+        <a href="{{ entry.url }}">{{entry.title}}</a>
     </li>
     {% endfor %}
     </ul>
 </section>
 <div id="main" class="main" role="main">
+    <h2>{{ page.title }}</h2>
     {{ content }}
 </div>
diff --git a/docs/_layouts/home.html b/docs/_layouts/home.html
@@ -4,10 +4,6 @@
 ---
 
 <p>QUnit is a powerful, easy-to-use JavaScript unit test suite.
-  If you're new to QUnit or even just new to unit testing, you might
-  want to check out the <a href="https://qunitjs.com/intro/">Introduction
-  to JavaScript Unit Testing</a>. There's also a
-  <a href="https://qunitjs.com/cookbook/">QUnit Cookbook</a> on the
-  <a href="https://qunitjs.com/">main site</a>.</p>
+  If you're new to QUnit, check out <a href="https://qunitjs.com/intro/">Getting Started with QUnit</a> on the <a href="https://qunitjs.com/">main site</a>.</p>
 
 <p>QUnit has no dependencies and works in all browsers.</p>
diff --git a/docs/_layouts/wrapper.html b/docs/_layouts/wrapper.html
@@ -15,50 +15,80 @@
   </head>
   <body class="{{ page.type }}">
     <a class="a11y" href="#main">skip to content</a>
-    <div>
-        <header class="site-header" role="banner">
-            <div class="site-header-wrapper">
-                <div class="site-logo">
-                    <h1 class="logo"><a class="logo-link" href="/">QUnit API Docs</a></h1>
-                </div>
-                <nav role="navigation" class="site-nav">
-                    <ul class="site-nav-list">
-                        <li class="site-nav-list-item">
-                            <a class="site-nav-list-link" href="/QUnit/">
-                                Main Methods
-                            </a>
-                        </li>
+    <header class="site-header" role="banner">
+        <div class="site-header-wrapper wrapper">
+            <a class="site-logo" href="/">
+                <img src="/img/logo-with-colored-text.svg" alt="QUnit">
+            </a>
+            <nav role="navigation" class="site-nav">
+                <ul class="site-nav-list">
+                    <li class="site-nav-item">
+                        <a class="site-nav-link" href="/QUnit/">
+                            Main Methods
+                        </a>
+                    </li>
 
-                        <li class="site-nav-list-item">
-                            <a class="site-nav-list-link" href="/assert/">
-                                Assertions
-                            </a>
-                        </li>
+                    <li class="site-nav-item">
+                        <a class="site-nav-link" href="/assert/">
+                            Assertions
+                        </a>
+                    </li>
 
-                        <li class="site-nav-list-item">
-                            <a class="site-nav-list-link" href="/config/">
-                                Configuration Tools
-                            </a>
-                        </li>
+                    <li class="site-nav-item">
+                        <a class="site-nav-link" href="/config/">
+                            Configuration Tools
+                        </a>
+                    </li>
 
-                        <li class="site-nav-list-item">
-                            <a class="site-nav-list-link" href="/callbacks/">
-                                Callback Handlers
-                            </a>
-                        </li>
+                    <li class="site-nav-item">
+                        <a class="site-nav-link" href="/callbacks/">
+                            Callback Handlers
+                        </a>
+                    </li>
 
-                        <li class="site-nav-list-item">
-                            <a class="site-nav-list-link" href="/async">
-                                Async Control
-                            </a>
-                        </li>
-                    </ul>
-                </nav>
+                    <li class="site-nav-item">
+                        <a class="site-nav-link" href="/async">
+                            Async Control
+                        </a>
+                    </li>
+                </ul>
+            </nav>
+            <div class="site-toggles">
+                <button class="nav-toggle toggle" data-opens=".site-nav" aria-expanded="false">
+                    <span class="screen-reader-text">Menu</span>
+                    <svg class="icon icon-nav-toggle" aria-hidden="true" viewBox="0 0 100 100">
+                        <path d="M5,16h90v16H5z" />
+                        <path d="M5,48h90v16H5z" />
+                        <path d="M5,80h90v16H5z" />
+                    </svg>
+                </button>
+                <script>
+                document.querySelector('.nav-toggle').addEventListener('click', function () {
+                    const state = this.classList.contains('opened');
+                    this.classList.toggle('opened', !state);
+                    this.setAttribute('aria-expanded', String(!state));
+
+                    const navToggleOpens = document.querySelector(this.dataset.opens);
+                    navToggleOpens.classList.toggle('opened', !state);
+                    navToggleOpens.setAttribute('aria-expanded', String(!state));
+                });
+                </script>
             </div>
-        </header>
-        <div class="wrapper">
-            {{ content }}
         </div>
+    </header>
+    <div class="body wrapper">
+        {{ content }}
     </div>
+    <footer class="site-footer">
+        <div class="wrapper">
+            <p class="external-links">
+                <a href="https://github.com/qunitjs" target="_blank" rel="noopener noreferrer">GitHub</a>
+                <a href="https://twitter.com/qunitjs" target="_blank" rel="noopener noreferrer">Twitter</a>
+                <a href="https://gitter.im/qunitjs/qunit" target="_blank" rel="noopener noreferrer">Chat</a>
+            </p>
+
+            <p class="copyright">Copyright &copy; 2020 <a href="https://openjsf.org/" target="_blank" rel="noopener noreferrer">OpenJS Foundation</a> and contributors</p>
+        </div>
+    </footer>
   </body>
  </html>
diff --git a/docs/_sass/highlight.scss b/docs/_sass/highlight.scss
@@ -0,0 +1,67 @@
+// Styles for the output of Pygments syntax highlighter as used by Jekyll
+
+.highlight code {
+    line-height: 150%;
+    background: transparent;
+}
+.highlight .hll { background-color: #ffffcc }
+.highlight .c { color: #999988; font-style: italic } /* Comment */
+.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.highlight .k { color: #000000; font-weight: bold } /* Keyword */
+.highlight .o { color: #000000; font-weight: bold } /* Operator */
+.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
+.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.highlight .ge { color: #000000; font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #aa0000 } /* Generic.Error */
+.highlight .gh { color: #999999 } /* Generic.Heading */
+.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #555555 } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
+.highlight .gt { color: #aa0000 } /* Generic.Traceback */
+.highlight .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
+.highlight .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #009999 } /* Literal.Number */
+.highlight .s { color: #d01040 } /* Literal.String */
+.highlight .na { color: #008080 } /* Name.Attribute */
+.highlight .nb { color: #0086B3 } /* Name.Builtin */
+.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
+.highlight .no { color: #008080 } /* Name.Constant */
+.highlight .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
+.highlight .ni { color: #800080 } /* Name.Entity */
+.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
+.highlight .nl { color: #990000; font-weight: bold } /* Name.Label */
+.highlight .nn { color: #555555 } /* Name.Namespace */
+.highlight .nt { color: #000080 } /* Name.Tag */
+.highlight .nv { color: #008080 } /* Name.Variable */
+.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #009999 } /* Literal.Number.Float */
+.highlight .mh { color: #009999 } /* Literal.Number.Hex */
+.highlight .mi { color: #009999 } /* Literal.Number.Integer */
+.highlight .mo { color: #009999 } /* Literal.Number.Oct */
+.highlight .sb { color: #d01040 } /* Literal.String.Backtick */
+.highlight .sc { color: #d01040 } /* Literal.String.Char */
+.highlight .sd { color: #d01040 } /* Literal.String.Doc */
+.highlight .s2 { color: #d01040 } /* Literal.String.Double */
+.highlight .se { color: #d01040 } /* Literal.String.Escape */
+.highlight .sh { color: #d01040 } /* Literal.String.Heredoc */
+.highlight .si { color: #d01040 } /* Literal.String.Interpol */
+.highlight .sx { color: #d01040 } /* Literal.String.Other */
+.highlight .sr { color: #009926 } /* Literal.String.Regex */
+.highlight .s1 { color: #d01040 } /* Literal.String.Single */
+.highlight .ss { color: #990073 } /* Literal.String.Symbol */
+.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #008080 } /* Name.Variable.Class */
+.highlight .vg { color: #008080 } /* Name.Variable.Global */
+.highlight .vi { color: #008080 } /* Name.Variable.Instance */
+.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
diff --git a/docs/assert/async.md b/docs/assert/async.md
@@ -1,6 +1,6 @@
 ---
 layout: default
-title: async
+title: assert.async()
 description: Instruct QUnit to wait for an asynchronous operation.
 categories:
   - assert
@@ -11,7 +11,7 @@ redirect_from:
   - "/stop/"
 ---
 
-## `async( [ acceptCallCount = 1 ] )`
+`async( [ acceptCallCount = 1 ] )`
 
 Instruct QUnit to wait for an asynchronous operation.