diff --git a/_includes/nav.html b/_includes/nav.html
index 49df6939c9f9b8d600fdf9e700ea52337b7ffeef..dba0deab4ac9038674af42825f1a75d39baddfb9 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -1,6 +1,6 @@
<nav>
<ul class="navigation-list">
- {% assign pages_list = site.html_pages | sort:"nav_order"%}
+ {% assign pages_list = site.html_pages | sort:"nav_order" %}
{% for node in pages_list %}
<li class="navigation-list-item{% if page.url == node.url %} active{% endif %} js-side-nav-item">
{% if node.parent == nil or node.has_children == true %}
diff --git a/_layouts/default.html b/_layouts/default.html
index c58281670a7bac6247a151ca80dd6342e1b8145b..c4f9c5e81cacbcbfc63e2e0ef8cd7ad8788948cb 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -5,7 +5,7 @@
<div class="page-wrap">
<div class="side-bar">
- <a href="{{ site.url }}" class="site-title fs-6 fw-300 text-grey-dk-300">Just the <span class="fw-700">/docs</span></a>
+ <a href="{{ site.url }}" class="site-title fs-6 text-grey-dk-300">{{ site.title }}</a>
<span class="fs-3"><button class="js-main-nav-trigger navigation-list-toggle btn btn-outline" type="button" data-text-toggle="Hide">Menu</button></span>
<div class="navigation main-nav js-main-nav">
{% include nav.html %}
@@ -17,7 +17,7 @@
<div class="main-content-wrap">
<div class="search">
<div class="search-input-wrap">
- <input type="text" class="js-search-input search-input fs-2" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}"/>
+ <input type="text" class="js-search-input search-input fs-2" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
<svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon"><title>Search</title><g fill-rule="nonzero"><path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z"/><path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z"/></g></svg>
</div>
<div class="js-search-results search-results-wrap"></div>
@@ -41,7 +41,7 @@
<hr>
<h2 class="text-delta">Table of contents</h2>
{% assign children_list = site.pages | sort:"nav_order" %}
- <ol>
+ <ul>
{% for child in children_list %}
{% if child.parent == page.title and child.title != page.title %}
<li>
@@ -49,7 +49,7 @@
</li>
{% endif %}
{% endfor %}
- </ol>
+ </ul>
{% endif %}
</div>
</div>
diff --git a/_sass/buttons.scss b/_sass/buttons.scss
index 586b80575492d2e3f44eb293afcb264b883c89c8..a58c92026656e10875ca1e1517ddf26d2c302b63 100644
--- a/_sass/buttons.scss
+++ b/_sass/buttons.scss
@@ -6,13 +6,14 @@
.btn {
display: inline-block;
box-sizing: border-box;
- padding-top: 0.25em;
+ padding-top: 0.3em;
padding-right: 1em;
- padding-bottom: 0.25em;
+ padding-bottom: 0.3em;
padding-left: 1em;
margin: 0;
font-family: inherit;
font-size: inherit;
+ font-weight: 500;
line-height: 1.5;
color: $purple-200;
text-decoration: none;
diff --git a/_sass/content.scss b/_sass/content.scss
index 4a2fb323b284b9e5f1c641676b752256d0e18fbb..8b915678110caf2e6d76d741bbd31b220eae59ed 100644
--- a/_sass/content.scss
+++ b/_sass/content.scss
@@ -44,6 +44,19 @@
}
}
+ ul {
+ list-style: none;
+
+ li {
+ &::before {
+ position: absolute;
+ margin-left: -1.5em;
+ color: $grey-dk-000;
+ content: "•";
+ }
+ }
+ }
+
hr + *,
h1:first-of-type {
margin-top: 0;
diff --git a/_sass/search.scss b/_sass/search.scss
index bfbf3e8bba814fd198ccccf447cdd111ccaf8a77..df3c3ff5f3f5ff97454ca38b723f18d954dca60b 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -24,7 +24,8 @@
right: $gutter-spacing;
z-index: 100;
display: block;
- width: 200px;
+ width: 300px;
+ margin-top: $sp-2;
background: $white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
}
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index a06a540558aecbf59c7c770958fe6f9c3065254e..20033abadb6833896f40b82181edc4efe6f13a6a 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -30,8 +30,8 @@ function toggleNav(){
function initSearch() {
var index = lunr(function () {
this.ref('id');
- this.field('title');
- this.field('content', { boost: 10 });
+ this.field('title', { boost: 20 });
+ this.field('content');
this.field('url');
});
@@ -97,17 +97,22 @@ function initSearch() {
for (var i in results) {
var resultsListItem = document.createElement('li');
var resultsLink = document.createElement('a');
+ var resultsUrlDesc = document.createElement('span');
var resultsUrl = store[results[i].ref].url;
var resultsTitle = store[results[i].ref].title;
resultsLink.setAttribute('href', store[results[i].ref].url);
resultsLink.innerText = resultsTitle;
+ resultsUrlDesc.innerText = resultsUrl;
resultsList.classList.add('search-results-list');
resultsListItem.classList.add('search-results-list-item');
resultsLink.classList.add('search-results-link');
+ resultsUrlDesc.classList.add('fs-2','text-grey-dk-000','d-block');
+
resultsList.appendChild(resultsListItem);
resultsListItem.appendChild(resultsLink);
+ resultsLink.appendChild(resultsUrlDesc);
}
}
@@ -120,7 +125,7 @@ function initSearch() {
});
addEvent(searchInput, 'blur', function(){
- setTimeout(function(){hideResults()}, 300);
+ setTimeout(function(){ hideResults() }, 300);
});
}
}
diff --git a/docs/customization.md b/docs/customization.md
index ee1c8de56ecfbce7a9960444cf9cc09bf7d6f797..6bcb8427b9ba54549e5f18259aadcde3bc27f065 100644
--- a/docs/customization.md
+++ b/docs/customization.md
@@ -1,7 +1,7 @@
---
layout: default
title: Customization
-nav_order: 4
+nav_order: 5
---
# Customization
diff --git a/docs/navigation-structure.md b/docs/navigation-structure.md
index 1e7a76f85e5e42a6a861c616b46892e9a4cae5d8..2bce40fdb6c2fd38023839152a15b6beadaf5dd1 100644
--- a/docs/navigation-structure.md
+++ b/docs/navigation-structure.md
@@ -5,7 +5,7 @@ nav_order: 4
---
# Navigation Structure
-{:.no_toc}
+{: .no_toc }
## Table of contents
{: .no_toc .text-delta }
@@ -17,10 +17,113 @@ nav_order: 4
## Main navigation
+The main navigation for your Just the Docs site is on the left side of the page at large screens and on the top (behind a tap) on small screens. The main navigation can be structured to accommodate a multi-level menu system (parent pages with children).
+
+### Top level pages
+
+By default, all pages will appear as top level pages in the main nav.
+
+### Ordering pages
+
+To specify a page order, use the `nav_order` variable in your pages' YAML front matter.
+
+```yaml
+---
+layout: default
+title: Customization
+nav_order: 4
+---
+```
+
+### Pages with children
+
+Sometimes you will want to create a page with many children (a section). To accomplish this you need to a few things. First, it is recommended that you keep pages that are related in a directory together... For example, in these docs, we keep all of the written documentation in the `./docs` directory and each of the sections in subdirectories like `./docs/ui-components` and `./docs/utilities`. This gives is an organization like:
+
+```
++-- ..
+|-- (Jekyll files)
+|
+|-- docs
+| |-- ui-components
+| | |-- ui-components.md (parent page)
+| | |-- buttons.md
+| | |-- code.md
+| | |-- labels.md
+| | |-- tables.md
+| | +-- typography.md
+| |
+| |-- utilities
+| | |-- utilities.md (parent page)
+| | |-- color.md
+| | |-- layout.md
+| | |-- responsive-modifiers.md
+| | +-- typography.md
+| |
+| |-- (other md files, pages with no children)
+| +-- ..
+|
+|-- (Jekyll files)
++-- ..
+```
+
+On the parent pages, add 3 YAML front matter variables:
+- `has_children: true` (tells us that this a parent page)
+- `parent: ` set this to the title of the parent page (in this case, it's this page's title)
+- `permalink: ` set this to the directory that the contains the pages
+
+#### Example
+{: .no_toc }
+
+```yaml
+layout: default
+title: UI Components
+nav_order: 2
+has_children: true
+parent: UI Components
+permalink: /ui-components
+```
+
+Here we're setting up the UI Components landing page that is available at `/ui-components`, has children and is ordered second in the main nav.
+
+### Child pages
+
+On child pages, simply set the `parent:` YAML front matter to whatever the parent's page title is and set a nav order (this number is now scoped within the section).
+
+#### Example
+{: .no_toc }
+```yaml
+layout: default
+title: Buttons
+parent: UI Components
+nav_order: 2
+```
+
+The Buttons page appears a child of UI Components and appears second in the UI Components section.
+
---
## Breadcrumbs
+Breadcrumbs are auto generated based on the parent/child structure and the directory structure for the site. In order for breadcrumbs to work correctly for pages children, the URL structure must be the slugified version of the parent page's title. For example, the page UI Components, must use the `/ui-components` directory to house its descendant pages.
+
---
## In-page navigation with Table of Contents
+
+To generate a Table of Contents on your docs pages, you can use the `{:toc}` method from Kramdown, immediately after an `<ol>` in markdown. This will automatically generate an ordered list of anchor links to various sections of page based on headings and heading levels. There may be occasions where you're using a heading and you don't want it to show up in the TOC, to skip a particular heading use the `{: .no_toc }` CSS class.
+
+#### Example
+{: .no_toc }
+
+```markdown
+# Navigation Structure
+{: .no_toc }
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+```
+
+This example skips the page name heading (`#`) from the TOC, as well as the heading for the Table of Contents itself (`##`) because it is redundant, followed by the table of contents itself.
diff --git a/docs/search.md b/docs/search.md
new file mode 100644
index 0000000000000000000000000000000000000000..563793cf2e416527c7a7fc760ec26a74f8ca1e62
--- /dev/null
+++ b/docs/search.md
@@ -0,0 +1,15 @@
+---
+layout: default
+title: Search
+nav_order: 6
+---
+
+# Search
+
+Just the docs uses [lunr.js](http://lunrjs.com) to add a client-side search interface powered by a JSON index that Jekyll generates. All search results are shown in an auto-complete style interface (there is no search results page). By default, all generated html pages are indexed using the following data points:
+
+- Page title
+- Page content
+- Page URL
+
+You can modify this by modifying the forloop in `search-data.json` and the javascript in `just-the-docs.js` on line 30.
diff --git a/index.md b/index.md
index 86a0192e6df5505431ad855ceda30d468c4d2408..36cd3f58ecd61aaa90a45a473ab6832617471788 100644
--- a/index.md
+++ b/index.md
@@ -16,7 +16,7 @@ nav_order: 1
Just the Docs gives your documentation a jumpstart with a responsive Jekyll theme that is easily customizable and hosted on GitHub pages.
{: .fs-6 .fw-300 }
- [Get Started](#getting-started){: .btn .btn-purple .mr-2 } [View GitHub](https://github.com/pmarsceill/just-the-docs){: .btn }
+ [Get started now](#getting-started){: .btn .btn-purple .mr-2 } [View it on GitHub](https://github.com/pmarsceill/just-the-docs){: .btn }
</div>
</div>
diff --git a/search-data.json b/search-data.json
index 1543454f3bdd4735d88738705fb044f1260b304a..93e3e320dcc07656789d0b2dc1588501075d5dd2 100644
--- a/search-data.json
+++ b/search-data.json
@@ -1,13 +1,10 @@
---
---
{
- {% for page in site.html_pages %}
- "{{ forloop.index0 }}": {
+ {% for page in site.html_pages %}"{{ forloop.index0 }}": {
"id": "{{ forloop.index0 }}",
"title": "{{ page.title | xml_escape }}",
- "content": "{{ page.content | strip_html | strip_newlines | escape | remove: "\"}}",
+ "content": "{{ page.content | markdownify | strip_html | xml_escape | remove: 'Table of contents' | remove: page.title | strip_newlines | replace: '\', ' '}}",
"url": " {{ page.url | xml_escape }}"
- }
- {% unless forloop.last %},{% endunless %}
- {% endfor %}
+ }{% unless forloop.last %},{% endunless %}{% endfor %}
}