Docs: Design update to align with the new qunitjs.com

* Add new search functionality. * Add new footer. * Match the fonts, colors, header, and syntax highlight styles. * 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. Closes #1458
qunitjs · Jul 20, 2020 · a66c0bc · a66c0bc
1 parent d38ffc1
commit a66c0bc
Show file tree

Hide file tree

Showing 54 changed files with 964 additions and 525 deletions.
diff --git a/docs/QUnit/index.md b/docs/QUnit/index.md
@@ -1,6 +1,6 @@
 ---
 layout: page
-title: Main Methods
+title: Main methods
 category: main
 categories:
   - topics

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/_config.yml b/docs/_config.yml
@@ -31,6 +31,8 @@ algolia:
   # with the content of the current Jekyll site.
   # The auth key for this is injected as secure env variable.
   index_name: qunitjs-api
+  # Auth key for client-side search queries.
+  search_only_api_key: aed00982db05bd21dd05310be057bda8
 
 # Serving
 baseurl: ""

diff --git a/docs/_includes/search.html b/docs/_includes/search.html
@@ -0,0 +1,79 @@
+<label class="screen-reader-text" for="aa-search-input">Search</label>
+<input type="search" id="aa-search-input" class="aa-input-search" placeholder="Search..." name="search" autocomplete="off">
+<svg class="aa-input-icon" viewBox="654 -372 1664 1664">
+    <path d="M1806,332c0-123.3-43.8-228.8-131.5-316.5C1586.8-72.2,1481.3-116,1358-116s-228.8,43.8-316.5,131.5  C953.8,103.2,910,208.7,910,332s43.8,228.8,131.5,316.5C1129.2,736.2,1234.7,780,1358,780s228.8-43.8,316.5-131.5  C1762.2,560.8,1806,455.3,1806,332z M2318,1164c0,34.7-12.7,64.7-38,90s-55.3,38-90,38c-36,0-66-12.7-90-38l-343-342  c-119.3,82.7-252.3,124-399,124c-95.3,0-186.5-18.5-273.5-55.5s-162-87-225-150s-113-138-150-225S654,427.3,654,332  s18.5-186.5,55.5-273.5s87-162,150-225s138-113,225-150S1262.7-372,1358-372s186.5,18.5,273.5,55.5s162,87,225,150s113,138,150,225  S2062,236.7,2062,332c0,146.7-41.3,279.7-124,399l343,343C2305.7,1098.7,2318,1128.7,2318,1164z" />
+</svg>
+
+{%- comment %}
+For releases and integrity hashes (SRI), see:
+* https://www.jsdelivr.com/package/npm/algoliasearch
+* https://www.jsdelivr.com/package/npm/autocomplete.js
+
+Remember to use the 'defer' attribute.
+{% endcomment %}
+<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch.min.js" integrity="sha256-dgq8vEaJVxWMmcF/BEk9W6Wm+o2+LFlw1VSl2sx4JCI=" crossorigin="anonymous"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/autocomplete.min.js" integrity="sha256-YVWQosorZnr6fALvOW9VALYuInld27RkSPkElGBdCaU=" crossorigin="anonymous"></script>
+<script>
+    window.addEventListener('DOMContentLoaded', function setupSearch() {
+        const client = algoliasearch('{{ site.algolia.application_id }}', '{{ site.algolia.search_only_api_key }}');
+        const indexMain = client.initIndex('qunitjs');
+        const indexApi = client.initIndex('{{ site.algolia.index_name }}');
+        const autocompleteOptions = {
+            hint: false,
+            ariaLabel: 'search input',
+            // Set debug to true if you want to inspect the dropdown
+            debug: true,
+            templates: {
+                // https://github.com/algolia/autocomplete.js/issues/248
+                empty(query) {
+                    return `No results for "${query.query}".`;
+                }
+            }
+        };
+        function formatURL(suggestion) {
+            if (suggestion.anchor && suggestion.url.indexOf('#') === -1) {
+                return suggestion.url + '#' + suggestion.anchor;
+            } else {
+                return suggestion.url;
+            }
+        }
+        const autocompleteSources = [
+            {
+                source: autocomplete.sources.hits(indexApi, { hitsPerPage: 5 }),
+                displayKey: '',
+                templates: {
+                    suggestion(suggestion) {
+                        const title = [ suggestion.title ].concat(suggestion.headings || []).join(' › ');
+                        const content = suggestion._highlightResult.content && suggestion._highlightResult.content.value || '';
+                        suggestion._href = formatURL(suggestion);
+                        return `
+                            <a href="${suggestion._href}" tabindex="-1">
+                                <p class="aa-suggestion_title">${title}</p>
+                                <p class="aa-suggestion_content">${content}</p>
+                            </a>
+                        `;
+                    }
+                }
+            },
+            {
+                source: autocomplete.sources.hits(indexMain, { hitsPerPage: 5 }),
+                displayKey: '',
+                templates: {
+                    suggestion(suggestion) {
+                        const title = [ suggestion.title ].concat(suggestion.headings || []).join(' › ');
+                        const content = suggestion._highlightResult.content && suggestion._highlightResult.content.value || '';
+                        suggestion._href = 'https://qunitjs.com' + formatURL(suggestion);
+                        return `
+                            <a href="${suggestion._href}" tabindex="-1">
+                                <p class="aa-suggestion_title">${title}</p>
+                                <p class="aa-suggestion_content">${content}</p>
+                            </a>
+                        `;
+                    }
+                }
+            }
+        ];
+        autocomplete('#aa-search-input', autocompleteOptions, autocompleteSources)
+            .on('autocomplete:selected', (event, suggestion) => location.href = suggestion._href || suggestion.url);
+    });
+</script>
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 events</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/page.html b/docs/_layouts/page.html
@@ -5,7 +5,7 @@
 <div id="main" class="main" role="main">
     {{ content }}
 
-    <h2>{{ page.title }}:</h2>
+    <h2>{{ page.title }}</h2>
 
     <ul class="page-list">
     {% assign pages = site.pages | where:'categories', page.category %}