Skip to content

Commit

Permalink
Merge pull request #411 from pdmosses/nav-sorting
Browse files Browse the repository at this point in the history
Safe page sorting
  • Loading branch information
pmarsceill committed Sep 11, 2020
2 parents 2abf866 + d59887c commit 1c654ba
Show file tree
Hide file tree
Showing 58 changed files with 918 additions and 64 deletions.
2 changes: 1 addition & 1 deletion 404.html
@@ -1,6 +1,6 @@
---
layout: default
title: Page not found
title: 404
permalink: /404
nav_exclude: true
search_exclude: true
Expand Down
14 changes: 11 additions & 3 deletions _config.yml
Expand Up @@ -19,7 +19,15 @@ baseurl: "/just-the-docs" # the subpath of your site, e.g. /blog
url: "https://pmarsceill.github.io" # the base hostname & protocol for your site, e.g. http://example.com

permalink: pretty
exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "package.json", "package-lock.json", "script/", "LICENSE.txt", "lib/", "bin/", "README.md", "Rakefile"]
exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "package.json", "package-lock.json", "script/", "LICENSE.txt", "lib/", "bin/", "README.md", "Rakefile"
, "docs/tests/"
]

# Regression tests
# By default, the pages in /docs/tests are excluded when the ste is built.
# To include them, comment-out the relevant line above.
# Uncommenting the following line doesn't work - see https://github.com/jekyll/jekyll/issues/4791
# include: ["docs/tests/"]

# Set a path/url to a logo that will be displayed instead of the title
#logo: "/assets/images/just-the-docs.png"
Expand Down Expand Up @@ -63,8 +71,8 @@ aux_links:
aux_links_new_tab: false

# Sort order for navigation links
nav_sort: case_insensitive # default, equivalent to nil
# nav_sort: case_sensitive # Capital letters sorted before lowercase
# nav_sort: case_insensitive # default, equivalent to nil
nav_sort: case_sensitive # Capital letters sorted before lowercase

# Footer content
# appears at the bottom of every page's main content
Expand Down
141 changes: 93 additions & 48 deletions _includes/nav.html
@@ -1,55 +1,100 @@
<ul class="nav-list">
{%- assign ordered_pages_list = include.pages | where_exp:"item", "item.nav_order != nil" -%}
{%- assign unordered_pages_list = include.pages | where_exp:"item", "item.nav_order == nil" -%}
{%- assign included_pages = site.html_pages
| where_exp:"item", "item.nav_exclude != true"
| where_exp:"item", "item.title != nil" -%}

{%- comment -%}
The values of `title` and `nav_order` can be numbers or strings.
Jekyll gives build failures when sorting on mixtures of different types,
so numbers and strings need to be sorted separately.

Here, numbers are sorted by their values, and come before all strings.
An omitted `nav_order` value is equivalent to the page's `title` value
(except that a numerical `title` value is treated as a string).

The case-sensitivity of string sorting is determined by `site.nav_sort`.
{%- endcomment -%}

{%- assign string_ordered_pages = included_pages
| where_exp:"item", "item.nav_order == nil" -%}
{%- assign nav_ordered_pages = included_pages
| where_exp:"item", "item.nav_order != nil" -%}

{%- comment -%}
The nav_ordered_pages have to be added to number_ordered_pages and
string_ordered_pages, depending on the nav_order value.
The first character of the jsonify result is `"` only for strings.
{%- endcomment -%}
{%- assign nav_ordered_groups = nav_ordered_pages
| group_by_exp:"item", "item.nav_order | jsonify | slice: 0" -%}
{%- assign number_ordered_pages = "" | split:"X" -%}
{%- for group in nav_ordered_groups -%}
{%- if group.name == '"' -%}
{%- assign string_ordered_pages = string_ordered_pages | concat: group.items -%}
{%- else -%}
{%- assign number_ordered_pages = number_ordered_pages | concat: group.items -%}
{%- endif -%}
{%- endfor -%}

{%- assign sorted_number_ordered_pages = number_ordered_pages | sort:"nav_order" -%}

{%- comment -%}
The string_ordered_pages have to be sorted by nav_order, and otherwise title
(where appending the empty string to a numeric title converts it to a string).
After grouping them by those values, the groups are sorted, then the items
of each group are concatenated.
{%- endcomment -%}
{%- assign string_ordered_groups = string_ordered_pages
| group_by_exp:"item", "item.nav_order | default: item.title | append:''" -%}
{%- if site.nav_sort == 'case_insensitive' -%}
{%- assign sorted_ordered_pages_list = ordered_pages_list | sort_natural:"nav_order" -%}
{%- assign sorted_unordered_pages_list = unordered_pages_list | sort_natural:"title" -%}
{%- assign sorted_string_ordered_groups = string_ordered_groups | sort_natural:"name" -%}
{%- else -%}
{%- assign sorted_ordered_pages_list = ordered_pages_list | sort:"nav_order" -%}
{%- assign sorted_unordered_pages_list = unordered_pages_list | sort:"title" -%}
{%- assign sorted_string_ordered_groups = string_ordered_groups | sort:"name" -%}
{%- endif -%}
{%- assign pages_list = sorted_ordered_pages_list | concat: sorted_unordered_pages_list -%}
{%- assign sorted_string_ordered_pages = "" | split:"X" -%}
{%- for group in sorted_string_ordered_groups -%}
{%- assign sorted_string_ordered_pages = sorted_string_ordered_pages | concat: group.items -%}
{%- endfor -%}

{%- assign pages_list = sorted_number_ordered_pages | concat: sorted_string_ordered_pages -%}

{%- for node in pages_list -%}
{%- unless node.nav_exclude -%}
{%- if node.parent == nil and node.title -%}
<li class="nav-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
{%- if page.parent == node.title or page.grand_parent == node.title -%}
{%- assign first_level_url = node.url | relative_url -%}
{%- endif -%}
{%- if node.has_children -%}
<a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a>
{%- endif -%}
<a href="{{ node.url | relative_url }}" class="nav-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
{%- if node.has_children -%}
{%- assign children_list = pages_list | where: "parent", node.title -%}
<ul class="nav-list ">
{%- for child in children_list -%}
{%- unless child.nav_exclude -%}
<li class="nav-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
{%- if page.url == child.url or page.parent == child.title -%}
{%- assign second_level_url = child.url | relative_url -%}
{%- endif -%}
{%- if child.has_children -%}
<a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a>
{%- endif -%}
<a href="{{ child.url | relative_url }}" class="nav-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
{%- if child.has_children -%}
{%- assign grand_children_list = pages_list | where: "parent", child.title | where: "grand_parent", node.title -%}
<ul class="nav-list">
{%- for grand_child in grand_children_list -%}
<li class="nav-list-item {% if page.url == grand_child.url %} active{% endif %}">
<a href="{{ grand_child.url | relative_url }}" class="nav-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</li>
{%- endunless -%}
{%- endfor -%}
</ul>
{%- endif -%}
</li>
{%- endif -%}
{%- endunless -%}
{%- if node.parent == nil -%}
<li class="nav-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
{%- if page.parent == node.title or page.grand_parent == node.title -%}
{%- assign first_level_url = node.url | absolute_url -%}
{%- endif -%}
{%- if node.has_children -%}
<a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a>
{%- endif -%}
<a href="{{ node.url | absolute_url }}" class="nav-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
{%- if node.has_children -%}
{%- assign children_list = pages_list | where: "parent", node.title -%}
<ul class="nav-list ">
{%- for child in children_list -%}
<li class="nav-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
{%- if page.url == child.url or page.parent == child.title -%}
{%- assign second_level_url = child.url | absolute_url -%}
{%- endif -%}
{%- if child.has_children -%}
<a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a>
{%- endif -%}
<a href="{{ child.url | absolute_url }}" class="nav-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
{%- if child.has_children -%}
{%- assign grand_children_list = pages_list | where: "parent", child.title | where: "grand_parent", node.title -%}
<ul class="nav-list">
{%- for grand_child in grand_children_list -%}
<li class="nav-list-item {% if page.url == grand_child.url %} active{% endif %}">
<a href="{{ grand_child.url | absolute_url }}" class="nav-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</li>
{%- endif -%}
{%- endfor -%}
</ul>
26 changes: 16 additions & 10 deletions docs/navigation-structure.md
Expand Up @@ -7,11 +7,14 @@ nav_order: 5
# Navigation Structure
{: .no_toc }

## Table of contents
{: .no_toc .text-delta }

<details open markdown="block">
<summary>
Table of contents
</summary>
{: .text-delta }
1. TOC
{:toc}
</details>

---

Expand All @@ -25,7 +28,7 @@ By default, all pages will appear as top level pages in the main nav unless a pa

## Ordering pages

To specify a page order, use the `nav_order` parameter in your pages' YAML front matter.
To specify a page order, you can use the `nav_order` parameter in your pages' YAML front matter.

#### Example
{: .no_toc }
Expand All @@ -38,12 +41,13 @@ nav_order: 4
---
```

The specified `nav_order` parameters on a site should be all integers or all strings.
Pages without a `nav_order` parameter are ordered alphabetically by their `title`,
and appear after the explicitly-ordered pages at each level.
By default, all Capital letters are sorted before all lowercase letters;
adding `nav_sort: case_insensitive` in the configuration file ignores case
when sorting strings (but also sorts numbers lexicographically: `10` comes before `1`).
The parameter values determine the order of the top-level pages, and of child pages with the same parent. You can reuse the same parameter values (e.g., integers starting from 1) for the child pages of different parents.

The parameter values can be numbers (integers, floats) and/or strings. When you omit `nav_order` parameters, they default to the titles of the pages, which are ordered alphabetically. Pages with numerical `nav_order` parameters always come before those with strings or default `nav_order` parameters. If you want to make the page order independent of the page titles, you can set explicit `nav_order` parameters on all pages.

By default, all Capital letters come before all lowercase letters; you can add `nav_sort: case_insensitive` in the configuration file to ignore the case. Enclosing strings in quotation marks is optional.

> *Note for users of previous versions:* `nav_sort: case_insensitive` previously affected the ordering of numerical `nav_order` parameters: e.g., `10` came before `2`. Also, all pages with explicit `nav_order` parameters previously came before all pages with default parameters. Both were potentially confusing, and they have now been eliminated.
---

Expand All @@ -62,6 +66,8 @@ nav_exclude: true
---
```

Pages with no `title` are automatically excluded from the navigation.

---

## Pages with children
Expand Down
22 changes: 22 additions & 0 deletions docs/tests/index.md
@@ -0,0 +1,22 @@
---
layout: default
title: Tests
has_children: true
nav_order: 100
---

# Tests

The main documentation pages of this theme illustrate the use of many of its features, which to some extent tests their implementation. The pages linked below provide further test cases for particular features, and may be useful for regression testing when developing new features.

The default configuration does not include the test pages. To include them, *commment-out* the following line in `_config.yml`:

```yaml
, "docs/tests/"
```
so that it is:
```yaml
# , "docs/tests/"
```

(Apparently Jekyll's `include` does *not* override `exclude` for the same folder...)
15 changes: 15 additions & 0 deletions docs/tests/navigation/exclude/excluded-child.md
@@ -0,0 +1,15 @@
---
layout: default
title: Excluded Child
parent: Not Excluded
nav_exclude: true
---
# Excluded Child

This child page is explicitly excluded, and should not appear in the navigation.

```yaml
title: Excluded Child
parent: Not Excluded
nav_exclude: true
```
17 changes: 17 additions & 0 deletions docs/tests/navigation/exclude/excluded-grandchild.md
@@ -0,0 +1,17 @@
---
layout: default
title: Excluded Grandchild
parent: Non-excluded Child
grand_parent: Non-excluded
nav_exclude: true
---
# Excluded Grandchild

This grandchild page is explicitly excluded, and should not appear in the navigation.

```yaml
title: Excluded Grandchild
parent: Non-excluded Child
grand_parent: Non-excluded
nav_exclude: true
```
15 changes: 15 additions & 0 deletions docs/tests/navigation/exclude/excluded.md
@@ -0,0 +1,15 @@
---
layout: default
title: Excluded
has_children: true
nav_exclude: true
---
# Excluded

This top-level page is explicitly excluded, and should not appear in the navigation. Any child pages are implicitly excluded.

```yaml
title: Excluded
has_children: true
nav_exclude: true
```
15 changes: 15 additions & 0 deletions docs/tests/navigation/exclude/non-excluded-child-of-excluded.md
@@ -0,0 +1,15 @@
---
layout: default
title: Non-excluded Child of Excluded
parent: Excluded
nav_exclude: false
---
# Non-excluded Child of Excluded

This child page is explicitly not excluded, but its parent page is excluded, so it should not appear in the navigation.

```yaml
title: Non-excluded Child of Excluded
parent: Excluded
nav_exclude: false
```
16 changes: 16 additions & 0 deletions docs/tests/navigation/exclude/non-excluded-child.md
@@ -0,0 +1,16 @@
---
layout: default
title: Non-excluded Child
parent: Non-excluded
has_children: true
nav_exclude: false
---
# Non-excluded Child

This child page is explicitly not excluded, and should appear in the navigation.

```yaml
title: Non-excluded Child
parent: Non-excluded
nav_exclude: false
```
@@ -0,0 +1,17 @@
---
layout: default
title: Non-excluded Grandchild of Excluded
parent: Non-excluded Child
grand_parent: Excluded
nav_exclude: false
---
# Non-excluded Grandchild of Excluded

This grandchild page is explicitly not excluded, and neither is its parent page; but its grandparent page is excluded, so it should not appear in the navigation.

```yaml
title: Non-excluded Grandchild of Excluded
parent: Non-excluded Child
grand_parent: Excluded
nav_exclude: false
```
17 changes: 17 additions & 0 deletions docs/tests/navigation/exclude/non-excluded-grandchild.md
@@ -0,0 +1,17 @@
---
layout: default
title: Non-excluded Grandchild
parent: Non-excluded Child
grand_parent: Non-excluded
nav_exclude: false
---
# Non-excluded Grandchild

This grandchild page is explicitly not excluded, and neither is its parent page nor its grandparent page, so it should appear in the navigation.

```yaml
title: Non-excluded Grandchild of Excluded
parent: Non-excluded Child
grand_parent: Excluded
nav_exclude: false
```
14 changes: 14 additions & 0 deletions docs/tests/navigation/exclude/non-excluded.md
@@ -0,0 +1,14 @@
---
layout: default
title: Non-excluded
has_children: true
nav_exclude: false
---
# Non-excluded

This top-level page is explicitly not excluded, and should appear in the navigation.

```yaml
title: Non-excluded
nav_exclude: false
```

0 comments on commit 1c654ba

Please sign in to comment.