diff --git a/.github/release-drafter.yml b/.github/release-drafter.yml
index 30652d44e53001416456c39e92a73cebc9ce41a9..f32e3a3e7511d7c807501946757fdcc732ee68a5 100644
--- a/.github/release-drafter.yml
+++ b/.github/release-drafter.yml
@@ -11,7 +11,9 @@ categories:
- 'bugfix'
- 'bug'
- title: '🧰 Maintenance'
- label: 'chore'
+ label:
+ - 'chore'
+ - 'dependencies'
change-template: '- $TITLE @$AUTHOR (#$NUMBER)'
version-resolver:
major:
diff --git a/404.html b/404.html
index 56efce4a39e6013188a311c8ac3fdd622b571adb..1e7a37ef8cdad11a67bfafabf2d668b18c294362 100644
--- a/404.html
+++ b/404.html
@@ -8,4 +8,4 @@ search_exclude: true
<h1>Page not found</h1>
-<p>The page you requested could not be found. Try using the navigation {% if site.search_enabled %}or search {% endif %}to find what you're looking for or go to this <a href="{{ site.url }}{{ site.baseurl }}">site's home page</a>.</p>
+<p>The page you requested could not be found. Try using the navigation {% if site.search_enabled != false %}or search {% endif %}to find what you're looking for or go to this <a href="{{ '/' | absolute_url }}">site's home page</a>.</p>
diff --git a/_config.yml b/_config.yml
index 42ccec24fdc482d5deebee26c6168d3615d42b0e..20bf8a17137a0da76e9517b3dd7761dcc3c62b8f 100644
--- a/_config.yml
+++ b/_config.yml
@@ -25,10 +25,31 @@ exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "pac
#logo: "/assets/images/just-the-docs.png"
# Enable or disable the site search
+# Supports true (default) or false
search_enabled: true
-
-# Set the search token separator for hyphenated-word search:
-search_tokenizer_separator: /[\s/]+/
+search:
+ # Split pages into sections that can be searched individually
+ # Supports 1 - 6, default: 2
+ heading_level: 2
+ # Maximum amount of previews per search result
+ # Default: 3
+ previews: 3
+ # Maximum amount of words to display before a matched word in the preview
+ # Default: 5
+ preview_words_before: 5
+ # Maximum amount of words to display after a matched word in the preview
+ # Default: 10
+ preview_words_after: 10
+ # Set the search token separator
+ # Default: /[\s\-/]+/
+ # Example: enable support for hyphenated search words
+ tokenizer_separator: /[\s/]+/
+ # Display the relative url in search results
+ # Supports true (default) or false
+ rel_url: true
+ # Enable or disable the search button that appears in the bottom right corner of every page
+ # Supports true or false (default)
+ button: false
# Enable or disable heading anchors
heading_anchors: true
diff --git a/_includes/nav.html b/_includes/nav.html
index 573e1f996fcca49d5011f8f61fc5e5324153ca21..f2ec7e5c4b72f8d50aed436b787884651acd549b 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -1,51 +1,55 @@
-<nav role="navigation" aria-label="Main navigation">
- <ul class="navigation-list">
- {%- assign ordered_pages_list = site.html_pages | where_exp:"item", "item.nav_order != nil" -%}
- {%- assign unordered_pages_list = site.html_pages | where_exp:"item", "item.nav_order == nil" -%}
- {%- 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" -%}
- {%- else -%}
- {%- assign sorted_ordered_pages_list = ordered_pages_list | sort:"nav_order" -%}
- {%- assign sorted_unordered_pages_list = unordered_pages_list | sort:"title" -%}
- {%- endif -%}
- {%- assign pages_list = sorted_ordered_pages_list | concat: sorted_unordered_pages_list -%}
- {%- for node in pages_list -%}
- {%- unless node.nav_exclude -%}
- {%- if node.parent == nil and node.title -%}
- <li class="navigation-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 -%}
- <a href="{{ node.url | absolute_url }}" class="navigation-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="navigation-list-child-list ">
- {%- for child in children_list -%}
- {%- unless child.nav_exclude -%}
- <li class="navigation-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 -%}
- <a href="{{ child.url | absolute_url }}" class="navigation-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="navigation-list-child-list">
- {%- for grand_child in grand_children_list -%}
- <li class="navigation-list-item {% if page.url == grand_child.url %} active{% endif %}">
- <a href="{{ grand_child.url | absolute_url }}" class="navigation-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 -%}
- {%- endfor -%}
- </ul>
-</nav>
+<ul class="nav-list">
+ {%- assign ordered_pages_list = site.html_pages | where_exp:"item", "item.nav_order != nil" -%}
+ {%- assign unordered_pages_list = site.html_pages | where_exp:"item", "item.nav_order == nil" -%}
+ {%- 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" -%}
+ {%- else -%}
+ {%- assign sorted_ordered_pages_list = ordered_pages_list | sort:"nav_order" -%}
+ {%- assign sorted_unordered_pages_list = unordered_pages_list | sort:"title" -%}
+ {%- endif -%}
+ {%- assign pages_list = sorted_ordered_pages_list | concat: sorted_unordered_pages_list -%}
+ {%- 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 | 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 -%}
+ {%- 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 | 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>
+ {%- endunless -%}
+ {%- endfor -%}
+ </ul>
+ {%- endif -%}
+ </li>
+ {%- endif -%}
+ {%- endunless -%}
+ {%- endfor -%}
+</ul>
diff --git a/_layouts/default.html b/_layouts/default.html
index de5c7222387f0e8b54119dda389ff00ce864fd5b..1d41a7115a90ff3a234df067ec502dbbf7bef426 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -4,136 +4,166 @@ layout: table_wrappers
<!DOCTYPE html>
-<html lang="{{ site.lang | default: "en-US" }}">
+<html lang="{{ site.lang | default: 'en-US' }}">
{% include head.html %}
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
- <symbol id="link" viewBox="0 0 16 16">
+ <symbol id="svg-link" viewBox="0 0 24 24">
<title>Link</title>
- <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link">
+ <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+ </svg>
+ </symbol>
+ <symbol id="svg-search" viewBox="0 0 24 24">
+ <title>Search</title>
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
+ <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+ </svg>
+ </symbol>
+ <symbol id="svg-menu" viewBox="0 0 24 24">
+ <title>Menu</title>
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
+ <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
+ </svg>
+ </symbol>
+ <symbol id="svg-arrow-right" viewBox="0 0 24 24">
+ <title>Expand</title>
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
+ <polyline points="9 18 15 12 9 6"></polyline>
+ </svg>
+ </symbol>
+ <symbol id="svg-doc" viewBox="0 0 24 24">
+ <title>Document</title>
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
+ <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline>
+ </svg>
</symbol>
</svg>
- <div class="page-wrap">
- <div class="side-bar">
- <div class="site-header">
- <a href="{{ site.url }}{{ site.baseurl }}" class="site-title lh-tight">{% include title.html %}</a>
- <button class="menu-button fs-3 js-main-nav-trigger" data-text-toggle="Hide" type="button">Menu</button>
- </div>
-
- <div class="navigation main-nav js-main-nav">
- {% include nav.html %}
- </div>
- <footer class="site-footer">
- <p class="text-small text-grey-dk-000 mb-4">This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.</p>
- </footer>
+ <div class="side-bar">
+ <div class="site-header">
+ <a href="{{ '/' | absolute_url }}" class="site-title lh-tight">{% include title.html %}</a>
+ <a href="#" id="menu-button" class="site-button">
+ <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-menu"></use></svg>
+ </a>
</div>
- <div class="main-content-wrap js-main-content" tabindex="0">
- <div class="main-content" id="top">
- <div class="page-header js-page-header">
- {% if site.search_enabled != false %}
- <div class="search">
- <div class="search-input-wrap">
- <input type="text" class="js-search-input search-input" tabindex="0" 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>
+ <nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">
+ {% include nav.html %}
+ </nav>
+ <footer class="site-footer">
+ This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
+ </footer>
+ </div>
+ <div class="main" id="top">
+ <div id="main-header" class="main-header">
+ {% if site.search_enabled != false %}
+ <div class="search">
+ <div class="search-input-wrap">
+ <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
+ <label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label>
</div>
- {% endif %}
- {% if site.aux_links != nil %}
- <ul class="list-style-none text-small aux-nav">
- {% for link in site.aux_links %}
- <li class="d-inline-block my-0{% unless forloop.last %} mr-2{% endunless %}">
- <a href="{{ link.last }}"
- {% if site.aux_links_new_tab %}
- target="_blank" rel="noopener noreferrer"
- {% endif %}
- >
- {{ link.first }}
- </a>
- </li>
- {% endfor %}
- </ul>
- {% endif %}
+ <div id="search-results" class="search-results"></div>
</div>
- <div class="page">
- {% unless page.url == "/" %}
- {% if page.parent %}
- <nav class="breadcrumb-nav">
- <ol class="breadcrumb-nav-list">
- {% if page.grand_parent %}
- <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
- <li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
- {% else %}
- <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
+ {% endif %}
+ {% if site.aux_links %}
+ <nav aria-label="Auxiliary" class="aux-nav">
+ <ul class="aux-nav-list">
+ {% for link in site.aux_links %}
+ <li class="aux-nav-list-item">
+ <a href="{{ link.last }}" class="site-button"
+ {% if site.aux_links_new_tab %}
+ target="_blank" rel="noopener noreferrer"
{% endif %}
- <li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
- </ol>
- </nav>
- {% endif %}
- {% endunless %}
- <div id="main-content" class="page-content" role="main">
- {% if site.heading_anchors != false %}
- {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#link\"></use></svg>" anchorClass="anchor-heading" %}
- {% else %}
- {{ content }}
- {% endif %}
+ >
+ {{ link.first }}
+ </a>
+ </li>
+ {% endfor %}
+ </ul>
+ </nav>
+ {% endif %}
+ </div>
+ <div id="main-content-wrap" class="main-content-wrap">
+ {% unless page.url == "/" %}
+ {% if page.parent %}
+ <nav aria-label="Breadcrumb" class="breadcrumb-nav">
+ <ol class="breadcrumb-nav-list">
+ {% if page.grand_parent %}
+ <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
+ <li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
+ {% else %}
+ <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
+ {% endif %}
+ <li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
+ </ol>
+ </nav>
+ {% endif %}
+ {% endunless %}
+ <div id="main-content" class="main-content" role="main">
+ {% if site.heading_anchors != false %}
+ {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#svg-link\"></use></svg>" anchorClass="anchor-heading" %}
+ {% else %}
+ {{ content }}
+ {% endif %}
- {% if page.has_children == true and page.has_toc != false %}
- <hr>
- <h2 class="text-delta">Table of contents</h2>
- <ul>
- {%- assign children_list = pages_list | where: "parent", node.title -%}
- {% for child in children_list %}
- {% if child.parent == page.title and child.title != page.title and child.grand_parent == page.parent %}
- <li>
- <a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
- </li>
- {% endif %}
- {% endfor %}
- </ul>
- {% endif %}
+ {% if page.has_children == true and page.has_toc != false %}
+ <hr>
+ <h2 class="text-delta">Table of contents</h2>
+ <ul>
+ {%- assign children_list = pages_list | where: "parent", page.title | where: "grand_parent", page.parent -%}
+ {% for child in children_list %}
+ <li>
+ <a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
+ </li>
+ {% endfor %}
+ </ul>
+ {% endif %}
- {% if site.footer_content != nil or site.last_edit_timestamp or site.gh_edit_link %}
- <hr>
- <footer>
- {% if site.back_to_top %}
- <p><a href="#top">{{ site.back_to_top_text }}</a></p>
- {% endif %}
- {% if site.footer_content != nil %}
+ {% if site.footer_content != nil or site.last_edit_timestamp or site.gh_edit_link %}
+ <hr>
+ <footer>
+ {% if site.back_to_top %}
+ <p><a href="#top" id="back-to-top">{{ site.back_to_top_text }}</a></p>
+ {% endif %}
+ {% if site.footer_content != nil %}
<p class="text-small text-grey-dk-000 mb-0">{{ site.footer_content }}</p>
- {% endif %}
+ {% endif %}
- {% if site.last_edit_timestamp or site.gh_edit_link %}
- <div class="d-flex mt-2">
- {% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %}
+ {% if site.last_edit_timestamp or site.gh_edit_link %}
+ <div class="d-flex mt-2">
+ {% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %}
<p class="text-small text-grey-dk-000 mb-0 mr-2">
- Page last modified: <span class="d-inline-block">{{ page.last_modified_date | date: site.last_edit_time_format }}</span>.
+ Page last modified: <span class="d-inline-block">{{ page.last_modified_date | date: site.last_edit_time_format }}</span>.
</p>
- {% endif %}
- {%
- if
+ {% endif %}
+ {% if
site.gh_edit_link and
site.gh_edit_link_text and
site.gh_edit_repository and
site.gh_edit_branch and
site.gh_edit_view_mode
-
- %}
+ %}
<p class="text-small text-grey-dk-000 mb-0">
- <a href="{{ site.gh_edit_repository }}/{{ site.gh_edit_view_mode }}/{{ site.gh_edit_branch }}/{{ page.path }}">{{ site.gh_edit_link_text }}</a>
+ <a href="{{ site.gh_edit_repository }}/{{ site.gh_edit_view_mode }}/{{ site.gh_edit_branch }}/{{ page.path }}" id="edit-this-page">{{ site.gh_edit_link_text }}</a>
</p>
- {% endif %}
- </div>
- {% endif %}
-
- </footer>
- {% endif %}
+ {% endif %}
+ </div>
+ {% endif %}
+ </footer>
+ {% endif %}
- </div>
</div>
</div>
- </div>
+ {% if site.search_enabled != false %}
+ {% if site.search.button %}
+ <a href="#" id="search-button" class="search-button">
+ <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg>
+ </a>
+ {% endif %}
+
+ <div class="search-overlay"></div>
+ {% endif %}
+ </div>
</body>
</html>
diff --git a/_sass/code.scss b/_sass/code.scss
index 18f7ea4fd960e89131f0ead6ac1d23eeb8e69a13..affc8aa42f432458e207dfec32f79146167a6c61 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -16,8 +16,9 @@ figure.highlight {
padding: $sp-3;
margin-top: 0;
margin-bottom: 0;
- -webkit-overflow-scrolling: touch;
background-color: $code-background-color;
+ border-radius: $border-radius;
+ -webkit-overflow-scrolling: touch;
code {
padding: 0;
@@ -27,8 +28,6 @@ figure.highlight {
.highlighter-rouge {
margin-bottom: $sp-3;
- overflow: hidden;
- border-radius: $border-radius;
}
.highlight .c {
diff --git a/_sass/color_schemes/dark.scss b/_sass/color_schemes/dark.scss
index 9a0b9ea4c932b12b4e641b84ec61d2bf518041af..a25f449c6555b2ace3b0f95f7d5e71e82cf7c556 100644
--- a/_sass/color_schemes/dark.scss
+++ b/_sass/color_schemes/dark.scss
@@ -14,3 +14,4 @@ $base-button-color: $grey-dk-250;
$code-background-color: $grey-dk-250;
$search-background-color: $grey-dk-250;
$table-background-color: $grey-dk-250;
+$feedback-color: darken($sidebar-color, 3%);
diff --git a/_sass/content.scss b/_sass/content.scss
index 7ab23d836b1faead5785348089c046d00d05c2a1..5bf0ad514b9171379c26b20d27d2cc0f19407898 100644
--- a/_sass/content.scss
+++ b/_sass/content.scss
@@ -5,7 +5,7 @@
//
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
-.page-content {
+.main-content {
line-height: $content-line-height;
ol,
@@ -148,7 +148,7 @@
display: inline-block;
width: 100%;
height: 100%;
- fill: $link-color;
+ color: $link-color;
visibility: hidden;
}
}
diff --git a/_sass/layout.scss b/_sass/layout.scss
index 79169e42bdb58eec887b7987a3e6ca73b17db9b5..004cbe76da37866da51f8bb759530975697c38bb 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -2,28 +2,15 @@
// The basic two column layout
//
-.page-wrap {
- @include mq(md) {
- position: absolute;
- top: 0;
- left: 0;
- display: flex;
- width: 100%;
- height: 100%;
- overflow-x: hidden;
- overflow-y: hidden;
- }
-}
-
.side-bar {
- z-index: 100;
+ z-index: 0;
display: flex;
flex-wrap: wrap;
background-color: $sidebar-color;
@include mq(md) {
flex-wrap: nowrap;
- position: absolute;
+ position: fixed;
width: $nav-width-md;
height: 100%;
flex-direction: column;
@@ -37,20 +24,7 @@
}
}
-.main-content-wrap {
- @include mq(md) {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- -webkit-overflow-scrolling: touch;
- overflow-x: hidden;
- overflow-y: scroll;
- }
-}
-
-.main-content {
+.main {
@include mq(md) {
position: relative;
max-width: $content-width;
@@ -64,11 +38,7 @@
}
}
-.js-main-content:focus {
- outline: none;
-}
-
-.page {
+.main-content-wrap {
@include container;
padding-top: $gutter-spacing-sm;
padding-bottom: $gutter-spacing-sm;
@@ -79,16 +49,14 @@
}
}
-.page-header {
- @include container;
+.main-header {
+ z-index: 0;
display: none;
- padding-top: $gutter-spacing-sm;
- padding-bottom: $gutter-spacing-sm;
background-color: $sidebar-color;
@include mq(md) {
display: flex;
- justify-content: flex-end;
+ justify-content: space-between;
height: $header-height;
background-color: $body-background-color;
border-bottom: $border $border-color;
@@ -103,7 +71,7 @@
}
}
-.navigation,
+.site-nav,
.site-header,
.site-footer {
width: 100%;
@@ -113,10 +81,15 @@
}
}
-.navigation {
- @include container;
+.site-nav {
+ display: none;
+
+ &.nav-open {
+ display: block;
+ }
@include mq(md) {
+ display: block;
padding-top: $sp-8;
padding-bottom: $gutter-spacing-sm;
overflow-y: auto;
@@ -130,7 +103,6 @@
align-items: center;
@include mq(md) {
- z-index: 101;
height: $header-height;
max-height: $header-height;
border-bottom: $border $border-color;
@@ -165,27 +137,42 @@
}
}
-.menu-button {
- appearance: none;
+.site-button {
display: flex;
height: 100%;
padding: $gutter-spacing-sm;
align-items: center;
- color: $link-color;
- text-transform: uppercase;
- background: transparent;
- border: 0;
+}
- @include mq(md) {
+@include mq(md) {
+ .site-header .site-button {
display: none;
}
}
+.site-title:hover {
+ background-image: linear-gradient(
+ -90deg,
+ rgba($feedback-color, 1) 0%,
+ rgba($feedback-color, 0.8) 80%,
+ rgba($feedback-color, 0) 100%
+ );
+}
+
+.site-button:hover {
+ background-image: linear-gradient(
+ -90deg,
+ rgba($feedback-color, 1) 0%,
+ rgba($feedback-color, 0.8) 100%
+ );
+}
+
// stylelint-disable selector-max-type
body {
position: relative;
padding-bottom: $sp-10;
+ overflow-y: scroll;
@include mq(md) {
position: static;
@@ -202,9 +189,17 @@ body {
left: 0;
padding-top: $sp-4;
padding-bottom: $sp-4;
+ color: $grey-dk-000;
+ @include fs-2;
@include mq(md) {
position: static;
justify-self: end;
}
}
+
+.icon {
+ width: $sp-5;
+ height: $sp-5;
+ color: $link-color;
+}
diff --git a/_sass/modules.scss b/_sass/modules.scss
index dc94a4bd35ee843644beab2d6d3ab389e91e0720..d82591b75a01e3ee3ac9cb5065d00f5b7f643a39 100644
--- a/_sass/modules.scss
+++ b/_sass/modules.scss
@@ -17,3 +17,4 @@
@import "./tables";
@import "./code";
@import "./utilities/utilities";
+@import "./print";
diff --git a/_sass/navigation.scss b/_sass/navigation.scss
index c77490437b280e519fd7916d6dcad1244f4f63b7..0417b4c40d6c0b0c5cfbda16da8d89d8853c6116 100644
--- a/_sass/navigation.scss
+++ b/_sass/navigation.scss
@@ -1,89 +1,165 @@
//
// Main nav, breadcrumb, etc...
//
-.navigation-list {
+// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity
+
+.nav-list {
padding: 0;
margin-top: 0;
margin-bottom: 0;
list-style: none;
-}
-.navigation-list-child-list {
- padding-left: $sp-3;
- list-style: none;
+ .nav-list-item {
+ @include fs-4;
+ position: relative;
+ margin: 0;
- .navigation-list-link {
- color: $nav-child-link-color;
- }
+ @include mq(md) {
+ @include fs-3;
+ }
- .navigation-list-item {
- position: relative;
+ .nav-list-link {
+ display: block;
+ min-height: $nav-list-item-height-sm;
+ padding-top: $sp-1;
+ padding-bottom: $sp-1;
+ line-height: #{$nav-list-item-height-sm - 2 * $sp-1};
+ @if $nav-list-expander-right {
+ padding-right: $nav-list-item-height-sm;
+ padding-left: $gutter-spacing-sm;
+ } @else {
+ padding-right: $gutter-spacing-sm;
+ padding-left: $nav-list-item-height-sm;
+ }
- &::before {
- position: absolute;
- margin-top: 0.3em;
- margin-left: -0.8em;
- color: rgba($body-text-color, 0.3);
- content: "- ";
+ @include mq(md) {
+ min-height: $nav-list-item-height;
+ line-height: #{$nav-list-item-height - 2 * $sp-1};
+ @if $nav-list-expander-right {
+ padding-right: $nav-list-item-height;
+ padding-left: $gutter-spacing;
+ } @else {
+ padding-right: $gutter-spacing;
+ padding-left: $nav-list-item-height;
+ }
+ }
+
+ &.active {
+ font-weight: 600;
+ text-decoration: none;
+ }
+
+ &:hover,
+ &.active {
+ background-image: linear-gradient(
+ -90deg,
+ rgba($feedback-color, 1) 0%,
+ rgba($feedback-color, 0.8) 80%,
+ rgba($feedback-color, 0) 100%
+ );
+ }
}
- &.active {
- &::before {
- color: $body-text-color;
+ .nav-list-expander {
+ position: absolute;
+ @if $nav-list-expander-right {
+ right: 0;
+ }
+ width: $nav-list-item-height-sm;
+ height: $nav-list-item-height-sm;
+ padding-top: #{$nav-list-item-height-sm / 4};
+ padding-right: #{$nav-list-item-height-sm / 4};
+ padding-bottom: #{$nav-list-item-height-sm / 4};
+ padding-left: #{$nav-list-item-height-sm / 4};
+ color: $link-color;
+
+ @include mq(md) {
+ width: $nav-list-item-height;
+ height: $nav-list-item-height;
+ padding-top: #{$nav-list-item-height / 4};
+ padding-right: #{$nav-list-item-height / 4};
+ padding-bottom: #{$nav-list-item-height / 4};
+ padding-left: #{$nav-list-item-height / 4};
+ }
+
+ &:hover {
+ background-image: linear-gradient(
+ -90deg,
+ rgba($feedback-color, 1) 0%,
+ rgba($feedback-color, 0.8) 100%
+ );
+ }
+
+ @if $nav-list-expander-right {
+ svg {
+ transform: rotate(90deg);
+ }
}
}
- }
-}
-.navigation-list-item {
- @include fs-4;
- margin: 0;
+ > .nav-list {
+ display: none;
+ padding-left: $sp-3;
+ list-style: none;
- @include mq(md) {
- @include fs-3;
- }
+ .nav-list-item {
+ position: relative;
- .navigation-list-child-list {
- display: none;
- }
+ .nav-list-link {
+ color: $nav-child-link-color;
+ }
- &.active {
- .navigation-list-child-list {
- display: block;
+ .nav-list-expander {
+ color: $nav-child-link-color;
+ }
+ }
}
- }
-}
-.navigation-list-link {
- display: block;
- padding-top: $sp-1;
- padding-bottom: $sp-1;
+ &.active {
+ > .nav-list-expander svg {
+ @if $nav-list-expander-right {
+ transform: rotate(-90deg);
+ } @else {
+ transform: rotate(90deg);
+ }
+ }
- &.active {
- font-weight: 600;
- color: $body-heading-color;
- text-decoration: none;
+ > .nav-list {
+ display: block;
+ }
+ }
}
}
-// Small screen nav
+// Aux nav
-.main-nav {
- display: none;
+.aux-nav {
+ height: 100%;
+ overflow-x: auto;
+ @include fs-2;
- &.nav-open {
- display: block;
+ .aux-nav-list {
+ display: flex;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ list-style: none;
}
- @include mq(md) {
- display: block;
+
+ .aux-nav-list-item {
+ display: inline-block;
+ height: 100%;
+ padding: 0;
+ margin: 0;
}
-}
-.aux-nav {
- align-self: center;
+ @include mq(md) {
+ padding-right: $gutter-spacing-sm;
+ }
}
// Breadcrumb nav
+
.breadcrumb-nav {
@include mq(md) {
margin-top: -$sp-4;
diff --git a/_sass/print.scss b/_sass/print.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6e6de3734c2d99258770caed54ed68e50c1e8a62
--- /dev/null
+++ b/_sass/print.scss
@@ -0,0 +1,40 @@
+// stylelint-disable selector-max-specificity, selector-max-id, selector-max-type, selector-no-qualifying-type, primer/no-override,
+
+@media print {
+ .site-footer,
+ .site-button,
+ #edit-this-page,
+ #back-to-top,
+ .site-nav,
+ .main-header {
+ display: none !important;
+ }
+
+ .side-bar {
+ width: 100%;
+ height: auto;
+ border-right: 0 !important;
+ }
+
+ .site-header {
+ border-bottom: 1px solid $border-color;
+ }
+
+ .site-title {
+ font-size: $root-font-size !important;
+ font-weight: 700 !important;
+ }
+
+ .text-small {
+ font-size: 8pt !important;
+ }
+
+ pre.highlight {
+ border: 1px solid $border-color;
+ }
+
+ .main {
+ max-width: none;
+ margin-left: 0;
+ }
+}
diff --git a/_sass/search.scss b/_sass/search.scss
index bef2df733563e250e92f80bc97d39ef197bb0fa8..8a7f410cebe8356c2962c70a7155277ac7a8dc6e 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -4,91 +4,115 @@
.search {
position: relative;
- z-index: 99;
+ z-index: 2;
flex-grow: 1;
- height: 100%;
- margin-bottom: $sp-3;
+ height: $sp-10;
+ padding: $sp-2;
+ transition: padding linear #{$transition-duration / 2};
@include mq(md) {
- margin-bottom: 0;
+ position: relative !important;
+ width: auto !important;
+ height: 100% !important;
+ padding: 0;
+ transition: none;
}
}
.search-input-wrap {
- display: flex;
- height: 100%;
- padding: $sp-2;
- background-color: $search-background-color;
+ position: relative;
+ z-index: 1;
+ height: $sp-8;
+ overflow: hidden;
border-radius: $border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+ transition: height linear #{$transition-duration / 2};
@include mq(md) {
- padding-top: 0;
- padding-right: 0;
- padding-bottom: 0;
- padding-left: 0;
- background-color: $body-background-color;
+ position: absolute;
+ width: 100%;
+ max-width: $search-results-width;
+ height: 100% !important;
border-radius: 0;
box-shadow: none;
+ transition: width ease $transition-duration;
}
}
.search-input {
- align-self: center;
+ position: absolute;
width: 100%;
- padding-top: $sp-1;
- padding-bottom: $sp-1;
+ height: 100%;
+ padding-top: $sp-2;
+ padding-right: $gutter-spacing-sm;
+ padding-bottom: $sp-2;
+ padding-left: #{$gutter-spacing-sm + $sp-5};
+ font-size: 16px;
background-color: $search-background-color;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
- order: 2;
- @include fs-4;
+ border-radius: 0;
+
+ @include mq(md) {
+ padding-top: $gutter-spacing-sm;
+ padding-bottom: $gutter-spacing-sm;
+ padding-left: #{$gutter-spacing + $sp-5};
+ font-size: 14px;
+ background-color: $body-background-color;
+ transition: padding-left linear #{$transition-duration / 2};
+ }
&:focus {
outline: 0;
- box-shadow: none;
- + .search-icon {
- fill: $link-color;
+ + .search-label .search-icon {
+ color: $link-color;
}
}
+}
+
+.search-label {
+ position: absolute;
+ display: flex;
+ height: 100%;
+ padding-left: $gutter-spacing-sm;
@include mq(md) {
- background-color: $body-background-color;
- @include fs-3;
+ padding-left: $gutter-spacing;
+ transition: padding-left linear #{$transition-duration / 2};
}
-}
-.search-icon {
- align-self: center;
- margin-right: $sp-2;
- fill: $grey-dk-000;
- order: 1;
+ .search-icon {
+ width: #{$sp-4 * 1.2};
+ height: #{$sp-4 * 1.2};
+ align-self: center;
+ color: $grey-dk-000;
+ }
}
-.search-results-wrap {
+.search-results {
position: absolute;
- z-index: 100;
+ left: 0;
display: none;
width: 100%;
- background: $search-background-color;
- border-radius: $border-radius;
+ max-height: calc(100% - #{$sp-10});
+ overflow-y: auto;
+ background-color: $search-background-color;
+ border-bottom-right-radius: $border-radius;
+ border-bottom-left-radius: $border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
- &.active {
- display: block;
- }
-
@include mq(md) {
+ top: 100%;
width: $search-results-width;
+ max-height: calc(100vh - 200%) !important;
}
}
.search-results-list {
padding-left: 0;
- margin-top: $sp-1;
margin-bottom: $sp-1;
list-style: none;
@include fs-4;
@@ -112,31 +136,58 @@
&:hover,
&.active {
- background-color: $sidebar-color;
- }
-
- @include mq(md) {
- padding-right: $sp-4;
- padding-left: $sp-4;
+ background-color: $feedback-color;
}
}
.search-result-title {
display: block;
padding-top: $sp-2;
- padding-right: $sp-4;
padding-bottom: $sp-2;
@include mq(sm) {
display: inline-block;
width: 40%;
- word-wrap: break-word;
+ padding-right: $sp-2;
vertical-align: top;
}
}
+.search-result-doc {
+ display: flex;
+ align-items: center;
+ word-wrap: break-word;
+
+ &.search-result-doc-parent {
+ opacity: 0.5;
+ @include fs-3;
+
+ @include mq(md) {
+ @include fs-2;
+ }
+ }
+
+ .search-result-icon {
+ width: $sp-4;
+ height: $sp-4;
+ margin-right: $sp-2;
+ color: $link-color;
+ flex-shrink: 0;
+ }
+
+ .search-result-doc-title {
+ overflow: auto;
+ }
+}
+
+.search-result-section {
+ margin-left: #{$sp-4 + $sp-2};
+ word-wrap: break-word;
+}
+
.search-result-rel-url {
display: block;
+ margin-left: #{$sp-4 + $sp-2};
overflow: hidden;
color: $search-result-preview-color;
text-overflow: ellipsis;
@@ -144,12 +195,14 @@
@include fs-1;
}
-.search-result-preview {
+.search-result-previews {
display: block;
padding-top: $sp-2;
padding-bottom: $sp-2;
padding-left: $sp-4;
+ margin-left: $sp-2;
color: $search-result-preview-color;
+ word-wrap: break-word;
border-left: $border;
border-left-color: $border-color;
@include fs-2;
@@ -157,11 +210,112 @@
@include mq(sm) {
display: inline-block;
width: 60%;
+ padding-left: $sp-2;
+ margin-left: 0;
vertical-align: top;
}
}
+.search-result-preview + .search-result-preview {
+ margin-top: $sp-1;
+}
+
.search-result-highlight {
font-weight: bold;
- color: $link-color;
+}
+
+.search-no-result {
+ padding-top: $sp-2;
+ padding-right: $sp-3;
+ padding-bottom: $sp-2;
+ padding-left: $sp-3;
+ @include fs-3;
+}
+
+.search-button {
+ position: fixed;
+ right: $sp-4;
+ bottom: $sp-4;
+ display: flex;
+ width: $sp-9;
+ height: $sp-9;
+ background-color: $search-background-color;
+ border: 1px solid rgba($link-color, 0.3);
+ border-radius: #{$sp-9 / 2};
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+ align-items: center;
+ justify-content: center;
+}
+
+.search-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ width: 0;
+ height: 0;
+ background-color: rgba(0, 0, 0, 0.3);
+ opacity: 0;
+ transition: opacity ease $transition-duration, width 0s $transition-duration,
+ height 0s $transition-duration;
+}
+
+.search-active {
+ .search {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ }
+
+ .search-input-wrap {
+ height: $sp-10;
+ border-radius: 0;
+
+ @include mq(md) {
+ width: $search-results-width;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+ }
+ }
+
+ .search-input {
+ background-color: $search-background-color;
+
+ @include mq(md) {
+ padding-left: #{$sp-4 * 1.25 + $sp-5};
+ }
+ }
+
+ .search-label {
+ @include mq(md) {
+ padding-left: #{$sp-4 * 1.25};
+ }
+ }
+
+ .search-results {
+ display: block;
+ }
+
+ .search-overlay {
+ width: 100%;
+ height: 100%;
+ opacity: 1;
+ transition: opacity ease $transition-duration, width 0s, height 0s;
+ }
+
+ @include mq(md) {
+ .main {
+ position: fixed;
+ }
+ }
+
+ .main-header {
+ padding-top: $sp-10;
+
+ @include mq(md) {
+ padding-top: 0;
+ }
+ }
}
diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss
index 3665a363254c5bbbb7ebaa1c2ea5c2f7bc652726..b97b14e808b1ec8a8a21bba4a6c2dfbba535d597 100644
--- a/_sass/support/_variables.scss
+++ b/_sass/support/_variables.scss
@@ -57,6 +57,7 @@ $sidebar-color: $grey-lt-000 !default;
$search-background-color: $white !default;
$table-background-color: $white !default;
$code-background-color: $grey-lt-000 !default;
+$feedback-color: darken($sidebar-color, 3%) !default;
$body-text-color: $grey-dk-100 !default;
$body-heading-color: $grey-dk-300 !default;
@@ -94,8 +95,8 @@ $sp-5: map-get($spacers, sp-5) !default; // 1.5 rem == 24px
$sp-6: map-get($spacers, sp-6) !default; // 2 rem == 32px
$sp-7: map-get($spacers, sp-7) !default; // 2.5 rem == 40px
$sp-8: map-get($spacers, sp-8) !default; // 3 rem == 48px
-$sp-9: map-get($spacers, sp-9) !default; // 4 rem == 48px
-$sp-10: map-get($spacers, sp-10) !default; // 4.5 rem == 48px
+$sp-9: map-get($spacers, sp-9) !default; // 3.5 rem == 56px
+$sp-10: map-get($spacers, sp-10) !default; // 4 rem == 64px
//
// Borders
@@ -113,9 +114,13 @@ $gutter-spacing: $sp-6 !default;
$gutter-spacing-sm: $sp-4 !default;
$nav-width: 264px !default;
$nav-width-md: 248px !default;
+$nav-list-item-height: $sp-6 !default;
+$nav-list-item-height-sm: $sp-8 !default;
+$nav-list-expander-right: true;
$content-width: 800px !default;
$header-height: 60px !default;
-$search-results-width: 500px !default;
+$search-results-width: $content-width - $nav-width !default;
+$transition-duration: 400ms;
//
// Media queries in pixels
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index 2edf7f465040c3e2bc377c703b8b38ab1b9310a4..c287ec08ca5a60e6b93eaac6fae542678dae852f 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -24,24 +24,47 @@ jtd.onReady = function(ready) {
// Show/hide mobile menu
function initNav() {
- const mainNav = document.querySelector('.js-main-nav');
- const pageHeader = document.querySelector('.js-page-header');
- const navTrigger = document.querySelector('.js-main-nav-trigger');
+ jtd.addEvent(document, 'click', function(e){
+ var target = e.target;
+ while (target && !(target.classList && target.classList.contains('nav-list-expander'))) {
+ target = target.parentNode;
+ }
+ if (target) {
+ e.preventDefault();
+ target.parentNode.classList.toggle('active');
+ }
+ });
+
+ const siteNav = document.getElementById('site-nav');
+ const mainHeader = document.getElementById('main-header');
+ const menuButton = document.getElementById('menu-button');
- jtd.addEvent(navTrigger, 'click', function(e){
+ jtd.addEvent(menuButton, 'click', function(e){
e.preventDefault();
- var text = navTrigger.innerText;
- var textToggle = navTrigger.getAttribute('data-text-toggle');
-
- mainNav.classList.toggle('nav-open');
- pageHeader.classList.toggle('nav-open');
- navTrigger.classList.toggle('nav-open');
- navTrigger.innerText = textToggle;
- navTrigger.setAttribute('data-text-toggle', text);
- textToggle = text;
- })
+
+ if (menuButton.classList.toggle('nav-open')) {
+ siteNav.classList.add('nav-open');
+ mainHeader.classList.add('nav-open');
+ } else {
+ siteNav.classList.remove('nav-open');
+ mainHeader.classList.remove('nav-open');
+ }
+ });
+
+ {%- if site.search_enabled != false and site.search.button %}
+ const searchInput = document.getElementById('search-input');
+ const searchButton = document.getElementById('search-button');
+
+ jtd.addEvent(searchButton, 'click', function(e){
+ e.preventDefault();
+
+ mainHeader.classList.add('nav-open');
+ searchInput.focus();
+ });
+ {%- endif %}
}
+{%- if site.search_enabled != false %}
// Site search
function initSearch() {
@@ -50,241 +73,377 @@ function initSearch() {
request.onload = function(){
if (request.status >= 200 && request.status < 400) {
- // Success!
- var data = JSON.parse(request.responseText);
+ var docs = JSON.parse(request.responseText);
- {% if site.search_tokenizer_separator != nil %}
- lunr.tokenizer.separator = {{ site.search_tokenizer_separator }}
- {% else %}
- lunr.tokenizer.separator = /[\s\-/]+/
- {% endif %}
-
- var index = lunr(function () {
+ lunr.tokenizer.separator = {{ site.search.tokenizer_separator | default: site.search_tokenizer_separator | default: "/[\s\-/]+/" }}
+
+ var index = lunr(function(){
this.ref('id');
this.field('title', { boost: 200 });
this.field('content', { boost: 2 });
- this.field('url');
+ {%- if site.search.rel_url != false %}
+ this.field('relUrl');
+ {%- endif %}
this.metadataWhitelist = ['position']
- for (var i in data) {
+ for (var i in docs) {
this.add({
id: i,
- title: data[i].title,
- content: data[i].content,
- url: data[i].url
+ title: docs[i].title,
+ content: docs[i].content,
+ {%- if site.search.rel_url != false %}
+ relUrl: docs[i].relUrl
+ {%- endif %}
});
}
});
- searchResults(index, data);
+ searchLoaded(index, docs);
} else {
- // We reached our target server, but it returned an error
console.log('Error loading ajax request. Request status:' + request.status);
}
};
request.onerror = function(){
- // There was a connection error of some sort
console.log('There was a connection error');
};
request.send();
+}
+
+function searchLoaded(index, docs) {
+ var index = index;
+ var docs = docs;
+ var searchInput = document.getElementById('search-input');
+ var searchResults = document.getElementById('search-results');
+ var mainHeader = document.getElementById('main-header');
+ var currentInput;
+ var currentSearchIndex = 0;
+
+ function showSearch() {
+ document.documentElement.classList.add('search-active');
+ }
+
+ function hideSearch() {
+ document.documentElement.classList.remove('search-active');
+ }
- function searchResults(index, data) {
- var index = index;
- var docs = data;
- var searchInput = document.querySelector('.js-search-input');
- var searchResults = document.querySelector('.js-search-results');
+ function update() {
+ currentSearchIndex++;
- function hideResults() {
- searchResults.innerHTML = '';
- searchResults.classList.remove('active');
+ var input = searchInput.value;
+ if (input === '') {
+ hideSearch();
+ } else {
+ showSearch();
+ // scroll search input into view, workaround for iOS Safari
+ window.scroll(0, -1);
+ setTimeout(function(){ window.scroll(0, 0); }, 0);
+ }
+ if (input === currentInput) {
+ return;
+ }
+ currentInput = input;
+ searchResults.innerHTML = '';
+ if (input === '') {
+ return;
}
- jtd.addEvent(searchInput, 'keydown', function(e){
- switch (e.keyCode) {
- case 38: // arrow up
- e.preventDefault();
- var active = document.querySelector('.search-result.active');
- if (active) {
- active.classList.remove('active');
- if (active.parentElement.previousSibling) {
- var previous = active.parentElement.previousSibling.querySelector('.search-result');
- previous.classList.add('active');
- }
- }
- return;
- case 40: // arrow down
- e.preventDefault();
- var active = document.querySelector('.search-result.active');
- if (active) {
- if (active.parentElement.nextSibling) {
- var next = active.parentElement.nextSibling.querySelector('.search-result');
- active.classList.remove('active');
- next.classList.add('active');
- }
- } else {
- var next = document.querySelector('.search-result');
- if (next) {
- next.classList.add('active');
- }
- }
- return;
- case 13: // enter
- e.preventDefault();
- var active = document.querySelector('.search-result.active');
- if (active) {
- active.click();
- } else {
- var first = document.querySelector('.search-result');
- if (first) {
- first.click();
- }
- }
- return;
- }
+ var results = index.query(function (query) {
+ var tokens = lunr.tokenizer(input)
+ query.term(tokens, {
+ boost: 10
+ });
+ query.term(tokens, {
+ wildcard: lunr.Query.wildcard.TRAILING
+ });
});
- jtd.addEvent(searchInput, 'keyup', function(e){
- switch (e.keyCode) {
- case 27: // When esc key is pressed, hide the results and clear the field
- hideResults();
- searchInput.value = '';
- return;
- case 38: // arrow up
- case 40: // arrow down
- case 13: // enter
- e.preventDefault();
- return;
+ if ((results.length == 0) && (input.length > 2)) {
+ var tokens = lunr.tokenizer(input).filter(function(token, i) {
+ return token.str.length < 20;
+ })
+ if (tokens.length > 0) {
+ results = index.query(function (query) {
+ query.term(tokens, {
+ editDistance: Math.round(Math.sqrt(input.length / 2 - 1))
+ });
+ });
}
+ }
+
+ if (results.length == 0) {
+ var noResultsDiv = document.createElement('div');
+ noResultsDiv.classList.add('search-no-result');
+ noResultsDiv.innerText = 'No results found';
+ searchResults.appendChild(noResultsDiv);
- hideResults();
+ } else {
+ var resultsList = document.createElement('ul');
+ resultsList.classList.add('search-results-list');
+ searchResults.appendChild(resultsList);
+
+ addResults(resultsList, results, 0, 10, 100, currentSearchIndex);
+ }
- var input = this.value;
- if (input === '') {
+ function addResults(resultsList, results, start, batchSize, batchMillis, searchIndex) {
+ if (searchIndex != currentSearchIndex) {
return;
}
+ for (var i = start; i < (start + batchSize); i++) {
+ if (i == results.length) {
+ return;
+ }
+ addResult(resultsList, results[i]);
+ }
+ setTimeout(function() {
+ addResults(resultsList, results, start + batchSize, batchSize, batchMillis, searchIndex);
+ }, batchMillis);
+ }
- var results = index.query(function (query) {
- var tokens = lunr.tokenizer(input)
- query.term(tokens, {
- boost: 10
- });
- query.term(tokens, {
- wildcard: lunr.Query.wildcard.TRAILING
- });
- });
+ function addResult(resultsList, result) {
+ var doc = docs[result.ref];
+
+ var resultsListItem = document.createElement('li');
+ resultsListItem.classList.add('search-results-list-item');
+ resultsList.appendChild(resultsListItem);
+
+ var resultLink = document.createElement('a');
+ resultLink.classList.add('search-result');
+ resultLink.setAttribute('href', doc.url);
+ resultsListItem.appendChild(resultLink);
+
+ var resultTitle = document.createElement('div');
+ resultTitle.classList.add('search-result-title');
+ resultLink.appendChild(resultTitle);
+
+ var resultDoc = document.createElement('div');
+ resultDoc.classList.add('search-result-doc');
+ resultDoc.innerHTML = '<svg viewBox="0 0 24 24" class="search-result-icon"><use xlink:href="#svg-doc"></use></svg>';
+ resultTitle.appendChild(resultDoc);
+
+ var resultDocTitle = document.createElement('div');
+ resultDocTitle.classList.add('search-result-doc-title');
+ resultDocTitle.innerHTML = doc.doc;
+ resultDoc.appendChild(resultDocTitle);
+ var resultDocOrSection = resultDocTitle;
+
+ if (doc.doc != doc.title) {
+ resultDoc.classList.add('search-result-doc-parent');
+ var resultSection = document.createElement('div');
+ resultSection.classList.add('search-result-section');
+ resultSection.innerHTML = doc.title;
+ resultTitle.appendChild(resultSection);
+ resultDocOrSection = resultSection;
+ }
- if (results.length > 0) {
- searchResults.classList.add('active');
- var resultsList = document.createElement('ul');
- resultsList.classList.add('search-results-list');
- searchResults.appendChild(resultsList);
-
- for (var i in results) {
- var result = results[i];
- var doc = docs[result.ref];
-
- var resultsListItem = document.createElement('li');
- resultsListItem.classList.add('search-results-list-item');
- resultsList.appendChild(resultsListItem);
-
- var resultLink = document.createElement('a');
- resultLink.classList.add('search-result');
- resultLink.setAttribute('href', doc.url);
- resultsListItem.appendChild(resultLink);
-
- var resultTitle = document.createElement('div');
- resultTitle.classList.add('search-result-title');
- resultTitle.innerText = doc.title;
- resultLink.appendChild(resultTitle);
-
- var resultRelUrl = document.createElement('span');
- resultRelUrl.classList.add('search-result-rel-url');
- resultRelUrl.innerText = doc.relUrl;
- resultTitle.appendChild(resultRelUrl);
-
- var metadata = result.matchData.metadata;
- var contentFound = false;
- for (var j in metadata) {
- if (metadata[j].title) {
- var position = metadata[j].title.position[0];
- var start = position[0];
- var end = position[0] + position[1];
- resultTitle.innerHTML = doc.title.substring(0, start) + '<span class="search-result-highlight">' + doc.title.substring(start, end) + '</span>' + doc.title.substring(end, doc.title.length)+'<span class="search-result-rel-url">'+doc.relUrl+'</span>';
-
- } else if (metadata[j].content && !contentFound) {
- contentFound = true;
-
- var position = metadata[j].content.position[0];
- var start = position[0];
- var end = position[0] + position[1];
- var previewStart = start;
- var previewEnd = end;
- var ellipsesBefore = true;
- var ellipsesAfter = true;
- for (var k = 0; k < 3; k++) {
- var nextSpace = doc.content.lastIndexOf(' ', previewStart - 2);
- var nextDot = doc.content.lastIndexOf('.', previewStart - 2);
- if ((nextDot > 0) && (nextDot > nextSpace)) {
- previewStart = nextDot + 1;
- ellipsesBefore = false;
- break;
- }
- if (nextSpace < 0) {
- previewStart = 0;
- ellipsesBefore = false;
- break;
- }
- previewStart = nextSpace + 1;
+ var metadata = result.matchData.metadata;
+ var titlePositions = [];
+ var contentPositions = [];
+ for (var j in metadata) {
+ var meta = metadata[j];
+ if (meta.title) {
+ var positions = meta.title.position;
+ for (var k in positions) {
+ titlePositions.push(positions[k]);
+ }
+ }
+ if (meta.content) {
+ var positions = meta.content.position;
+ for (var k in positions) {
+ var position = positions[k];
+ var previewStart = position[0];
+ var previewEnd = position[0] + position[1];
+ var ellipsesBefore = true;
+ var ellipsesAfter = true;
+ for (var k = 0; k < {{ site.search.preview_words_before | default: 5 }}; k++) {
+ var nextSpace = doc.content.lastIndexOf(' ', previewStart - 2);
+ var nextDot = doc.content.lastIndexOf('. ', previewStart - 2);
+ if ((nextDot >= 0) && (nextDot > nextSpace)) {
+ previewStart = nextDot + 1;
+ ellipsesBefore = false;
+ break;
}
- for (var k = 0; k < 10; k++) {
- var nextSpace = doc.content.indexOf(' ', previewEnd + 1);
- var nextDot = doc.content.indexOf('.', previewEnd + 1);
- if ((nextDot > 0) && (nextDot < nextSpace)) {
- previewEnd = nextDot;
- ellipsesAfter = false;
- break;
- }
- if (nextSpace < 0) {
- previewEnd = doc.content.length;
- ellipsesAfter = false;
- break;
- }
- previewEnd = nextSpace;
+ if (nextSpace < 0) {
+ previewStart = 0;
+ ellipsesBefore = false;
+ break;
}
- var preview = doc.content.substring(previewStart, start);
- if (ellipsesBefore) {
- preview = '... ' + preview;
+ previewStart = nextSpace + 1;
+ }
+ for (var k = 0; k < {{ site.search.preview_words_after | default: 10 }}; k++) {
+ var nextSpace = doc.content.indexOf(' ', previewEnd + 1);
+ var nextDot = doc.content.indexOf('. ', previewEnd + 1);
+ if ((nextDot >= 0) && (nextDot < nextSpace)) {
+ previewEnd = nextDot;
+ ellipsesAfter = false;
+ break;
}
- preview += '<span class="search-result-highlight">' + doc.content.substring(start, end) + '</span>';
- preview += doc.content.substring(end, previewEnd);
- if (ellipsesAfter) {
- preview += ' ...';
+ if (nextSpace < 0) {
+ previewEnd = doc.content.length;
+ ellipsesAfter = false;
+ break;
}
+ previewEnd = nextSpace;
+ }
+ contentPositions.push({
+ highlight: position,
+ previewStart: previewStart, previewEnd: previewEnd,
+ ellipsesBefore: ellipsesBefore, ellipsesAfter: ellipsesAfter
+ });
+ }
+ }
+ }
+
+ if (titlePositions.length > 0) {
+ titlePositions.sort(function(p1, p2){ return p1[0] - p2[0] });
+ resultDocOrSection.innerHTML = '';
+ addHighlightedText(resultDocOrSection, doc.title, 0, doc.title.length, titlePositions);
+ }
- var resultPreview = document.createElement('div');
- resultPreview.classList.add('search-result-preview');
- resultPreview.innerHTML = preview;
- resultLink.appendChild(resultPreview);
+ if (contentPositions.length > 0) {
+ contentPositions.sort(function(p1, p2){ return p1.highlight[0] - p2.highlight[0] });
+ var contentPosition = contentPositions[0];
+ var previewPosition = {
+ highlight: [contentPosition.highlight],
+ previewStart: contentPosition.previewStart, previewEnd: contentPosition.previewEnd,
+ ellipsesBefore: contentPosition.ellipsesBefore, ellipsesAfter: contentPosition.ellipsesAfter
+ };
+ var previewPositions = [previewPosition];
+ for (var j = 1; j < contentPositions.length; j++) {
+ contentPosition = contentPositions[j];
+ if (previewPosition.previewEnd < contentPosition.previewStart) {
+ previewPosition = {
+ highlight: [contentPosition.highlight],
+ previewStart: contentPosition.previewStart, previewEnd: contentPosition.previewEnd,
+ ellipsesBefore: contentPosition.ellipsesBefore, ellipsesAfter: contentPosition.ellipsesAfter
}
+ previewPositions.push(previewPosition);
+ } else {
+ previewPosition.highlight.push(contentPosition.highlight);
+ previewPosition.previewEnd = contentPosition.previewEnd;
+ previewPosition.ellipsesAfter = contentPosition.ellipsesAfter;
+ }
+ }
+
+ var resultPreviews = document.createElement('div');
+ resultPreviews.classList.add('search-result-previews');
+ resultLink.appendChild(resultPreviews);
+
+ var content = doc.content;
+ for (var j = 0; j < Math.min(previewPositions.length, {{ site.search.previews | default: 3 }}); j++) {
+ var position = previewPositions[j];
+
+ var resultPreview = document.createElement('div');
+ resultPreview.classList.add('search-result-preview');
+ resultPreviews.appendChild(resultPreview);
+
+ if (position.ellipsesBefore) {
+ resultPreview.appendChild(document.createTextNode('... '));
+ }
+ addHighlightedText(resultPreview, content, position.previewStart, position.previewEnd, position.highlight);
+ if (position.ellipsesAfter) {
+ resultPreview.appendChild(document.createTextNode(' ...'));
}
}
}
- });
- jtd.addEvent(searchInput, 'blur', function(){
- setTimeout(function(){ hideResults() }, 300);
- });
+ {%- if site.search.rel_url != false %}
+ var resultRelUrl = document.createElement('span');
+ resultRelUrl.classList.add('search-result-rel-url');
+ resultRelUrl.innerText = doc.relUrl;
+ resultTitle.appendChild(resultRelUrl);
+ {%- endif %}
+ }
+
+ function addHighlightedText(parent, text, start, end, positions) {
+ var index = start;
+ for (var i in positions) {
+ var position = positions[i];
+ var span = document.createElement('span');
+ span.innerHTML = text.substring(index, position[0]);
+ parent.appendChild(span);
+ index = position[0] + position[1];
+ var highlight = document.createElement('span');
+ highlight.classList.add('search-result-highlight');
+ highlight.innerHTML = text.substring(position[0], index);
+ parent.appendChild(highlight);
+ }
+ var span = document.createElement('span');
+ span.innerHTML = text.substring(index, end);
+ parent.appendChild(span);
+ }
}
-}
-// Focus
+ jtd.addEvent(searchInput, 'focus', function(){
+ setTimeout(update, 0);
+ });
-function pageFocus() {
- var mainContent = document.querySelector('.js-main-content');
- mainContent.focus();
+ jtd.addEvent(searchInput, 'keyup', function(e){
+ switch (e.keyCode) {
+ case 27: // When esc key is pressed, hide the results and clear the field
+ searchInput.value = '';
+ break;
+ case 38: // arrow up
+ case 40: // arrow down
+ case 13: // enter
+ e.preventDefault();
+ return;
+ }
+ update();
+ });
+
+ jtd.addEvent(searchInput, 'keydown', function(e){
+ switch (e.keyCode) {
+ case 38: // arrow up
+ e.preventDefault();
+ var active = document.querySelector('.search-result.active');
+ if (active) {
+ active.classList.remove('active');
+ if (active.parentElement.previousSibling) {
+ var previous = active.parentElement.previousSibling.querySelector('.search-result');
+ previous.classList.add('active');
+ }
+ }
+ return;
+ case 40: // arrow down
+ e.preventDefault();
+ var active = document.querySelector('.search-result.active');
+ if (active) {
+ if (active.parentElement.nextSibling) {
+ var next = active.parentElement.nextSibling.querySelector('.search-result');
+ active.classList.remove('active');
+ next.classList.add('active');
+ }
+ } else {
+ var next = document.querySelector('.search-result');
+ if (next) {
+ next.classList.add('active');
+ }
+ }
+ return;
+ case 13: // enter
+ e.preventDefault();
+ var active = document.querySelector('.search-result.active');
+ if (active) {
+ active.click();
+ } else {
+ var first = document.querySelector('.search-result');
+ if (first) {
+ first.click();
+ }
+ }
+ return;
+ }
+ });
+
+ jtd.addEvent(document, 'click', function(e){
+ if (e.target != searchInput) {
+ hideSearch();
+ }
+ });
}
+{%- endif %}
// Switch theme
@@ -302,10 +461,9 @@ jtd.setTheme = function(theme) {
jtd.onReady(function(){
initNav();
- pageFocus();
- if (typeof lunr !== 'undefined') {
- initSearch();
- }
+ {%- if site.search_enabled != false %}
+ initSearch();
+ {%- endif %}
});
})(window.jtd = window.jtd || {});
diff --git a/assets/js/search-data.json b/assets/js/search-data.json
deleted file mode 100644
index 8e1b986390734e73749cebfa1d89e8cd597fef36..0000000000000000000000000000000000000000
--- a/assets/js/search-data.json
+++ /dev/null
@@ -1,12 +0,0 @@
----
----
-{
- {% assign comma = false %}
- {% for page in site.html_pages %}{% if page.search_exclude != true %}{% if comma == true%},{% endif %}"{{ forloop.index0 }}": {
- "title": "{{ page.title | replace: '&', '&' }}",
- "content": "{{ page.content | markdownify | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '</ul', ' . </ul' | replace: '</tr', ' . </tr' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | strip_html | escape_once | remove: 'Table of contents' | remove: '```' | remove: '---' | replace: '\', ' ' | replace: ' . . . ', ' . ' | replace: ' . . ', ' . ' | normalize_whitespace }}",
- "url": "{{ page.url | absolute_url }}",
- "relUrl": "{{ page.url }}"
- }{% assign comma = true %}
- {% endif %}{% endfor %}
-}
diff --git a/assets/js/zzzz-search-data.json b/assets/js/zzzz-search-data.json
new file mode 100644
index 0000000000000000000000000000000000000000..0a6c3e5c89046ea68923a53cec7d7f5e7b2794fe
--- /dev/null
+++ b/assets/js/zzzz-search-data.json
@@ -0,0 +1,58 @@
+---
+permalink: /assets/js/search-data.json
+---
+{
+ {%- assign i = 0 -%}
+ {% for page in site.html_pages %}
+ {%- if page.title and page.search_exclude != true -%}
+ {%- assign page_content = page.content -%}
+ {%- assign heading_level = site.search.heading_level | default: 2 -%}
+ {%- for j in (2..heading_level) -%}
+ {%- assign tag = '<h' | append: j -%}
+ {%- assign closing_tag = '</h' | append: j -%}
+ {%- assign page_content = page_content | replace: tag, '<h1' | replace: closing_tag, '</h1' -%}
+ {%- endfor -%}
+ {%- assign parts = page_content | split: '<h1' -%}
+ {%- assign title_found = false -%}
+ {% for part in parts offset: 1 %}
+ {%- assign titleAndContent = part | split: '</h1>' -%}
+ {%- assign title = titleAndContent[0] | replace_first: '>', '<h1>' | split: '<h1>' -%}
+ {%- assign title = title[1] | strip_html -%}
+ {%- assign content = titleAndContent[1] -%}
+ {%- assign url = page.url -%}
+ {%- if title == page.title and parts[0] == '' -%}
+ {%- assign title_found = true -%}
+ {%- else -%}
+ {%- assign id = titleAndContent[0] -%}
+ {%- assign id = id | split: 'id="' -%}
+ {%- if id.size == 2 -%}
+ {%- assign id = id[1] -%}
+ {%- assign id = id | split: '"' -%}
+ {%- assign id = id[0] -%}
+ {%- capture url -%}{{ url | append: '#' | append: id }}{%- endcapture -%}
+ {%- endif -%}
+ {%- endif -%}
+ {%- unless i == 0 -%},{%- endunless -%}
+ "{{ i }}": {
+ "doc": {{ page.title | jsonify }},
+ "title": {{ title | jsonify }},
+ "content": {{ content | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '<ul', ' . <ul' | replace: '</ul', ' . </ul' | replace: '<ol', ' . <ol' | replace: '</ol', ' . </ol' | replace: '</tr', ' . </tr' | replace: '<li', ' | <li' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | replace: '<td', ' | <td' | replace: '</th', ' | </th' | replace: '<th', ' | <th' | strip_html | remove: 'Table of contents' | normalize_whitespace | replace: '. . .', '.' | replace: '. .', '.' | replace: '| |', '|' | append: ' ' | jsonify }},
+ "url": "{{ url | absolute_url }}",
+ "relUrl": "{{ url }}"
+ }
+ {%- assign i = i | plus: 1 -%}
+ {%- endfor -%}
+ {%- unless title_found -%}
+ {%- unless i == 0 -%},{%- endunless -%}
+ "{{ i }}": {
+ "doc": {{ page.title | jsonify }},
+ "title": {{ page.title | jsonify }},
+ "content": {{ parts[0] | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '<ul', ' . <ul' | replace: '</ul', ' . </ul' | replace: '<ol', ' . <ol' | replace: '</ol', ' . </ol' | replace: '</tr', ' . </tr' | replace: '<li', ' | <li' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | replace: '<td', ' | <td' | replace: '</th', ' | </th' | replace: '<th', ' | <th' | strip_html | remove: 'Table of contents' | normalize_whitespace | replace: '. . .', '.' | replace: '. .', '.' | replace: '| |', '|' | append: ' ' | jsonify }},
+ "url": "{{ page.url | absolute_url }}",
+ "relUrl": "{{ page.url }}"
+ }
+ {%- assign i = i | plus: 1 -%}
+ {%- endunless -%}
+ {%- endif -%}
+ {% endfor %}
+}
diff --git a/docs/configuration.md b/docs/configuration.md
index 2367efbff76e4ccad829983bb52d5935ea0c6c56..65471d23c75d7e5d2d4d8d69b86ad72f2c5fc325 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -36,8 +36,29 @@ logo: "/assets/images/just-the-docs.png"
# Supports true (default) or false
search_enabled: true
-# Enable support for hyphenated search words:
-search_tokenizer_separator: /[\s/]+/
+search:
+ # Split pages into sections that can be searched individually
+ # Supports 1 - 6, default: 2
+ heading_level: 2
+ # Maximum amount of previews per search result
+ # Default: 3
+ previews: 3
+ # Maximum amount of words to display before a matched word in the preview
+ # Default: 5
+ preview_words_before: 5
+ # Maximum amount of words to display after a matched word in the preview
+ # Default: 10
+ preview_words_after: 10
+ # Set the search token separator
+ # Default: /[\s\-/]+/
+ # Example: enable support for hyphenated search words
+ tokenizer_separator: /[\s/]+/
+ # Display the relative url in search results
+ # Supports true (default) or false
+ rel_url: true
+ # Enable or disable the search button that appears in the bottom right corner of every page
+ # Supports true or false (default)
+ button: false
```
## Aux links
diff --git a/docs/search.md b/docs/search.md
index 35567863a2e6ca3d173c32926bfb85cd790c7c5c..495884df3e5987437361c5c143776c2f1d221c26 100644
--- a/docs/search.md
+++ b/docs/search.md
@@ -15,62 +15,90 @@ nav_order: 7
---
-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:
+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
-## Set up search
+## Enable search in configuration
-### Generate search index
-
-Before you can use search, you must initialize the feature by running this `rake` command that comes with `just-the-docs`:
+In your site's `_config.yml`, enable search:
-```bash
-$ bundle exec just-the-docs rake search:init
+```yaml
+# Enable or disable the site search
+# Supports true (default) or false
+search_enabled: true
```
-This command creates the `search-data.json` file that Jekyll uses to create your search index. Alternatively, you can create the file manually in the `assets/js/` directory of your Jekyll site with this content:
+### Search granularity
-```liquid
-{% raw %}---
----
-{
- {% assign comma = false %}
- {% for page in site.html_pages %}{% if page.search_exclude != true %}{% if comma == true%},{% endif %}"{{ forloop.index0 }}": {
- "title": "{{ page.title | replace: '&', '&' }}",
- "content": "{{ page.content | markdownify | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '</ul', ' . </ul' | replace: '</tr', ' . </tr' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | strip_html | escape_once | remove: 'Table of contents' | remove: '```' | remove: '---' | replace: '\', ' ' | replace: ' . . . ', ' . ' | replace: ' . . ', ' . ' | normalize_whitespace }}",
- "url": "{{ page.url | absolute_url }}",
- "relUrl": "{{ page.url }}"
- }{% assign comma = true %}
- {% endif %}{% endfor %}
-}{% endraw %}
-```
+Pages are split into sections that can be searched individually.
+The sections are defined by the headings on the page.
+Each section is displayed in a separate search result.
-_Note: If you don't run this rake command or create this file manually, search will not work (or it will use the search index data from this docs site, not your site's content)._
+```yaml
+# Split pages into sections that can be searched individually
+# Supports 1 - 6, default: 2
+search.heading_level: 2
+```
-### Enable search in configuration
+### Search previews
-In your site's `_config.yml`, enable search:
+A search result can contain previews that show where the search words are found in the specific section.
```yaml
-# Enable or disable the site search
-search_enabled: true
+# Maximum amount of previews per search result
+# Default: 3
+search.previews: 3
+
+# Maximum amount of words to display before a matched word in the preview
+# Default: 5
+search.preview_words_before: 5
+
+# Maximum amount of words to display after a matched word in the preview
+# Default: 10
+search.preview_words_after: 10
```
+### Search tokenizer
+
The default is for hyphens to separate tokens in search terms:
`gem-based` is equivalent to `gem based`, matching either word.
To allow search for hyphenated words:
```yaml
# Set the search token separator
-search_tokenizer_separator: /[\s/]+/
+# Default: /[\s\-/]+/
+# Example: enable support for hyphenated search words
+search.tokenizer_separator: /[\s/]+/
+```
+
+### Display URL in search results
+
+```yaml
+# Display the relative url in search results
+# Supports true (default) or false
+search.rel_url: false
```
+### Display search button
+
+The search button displays in the bottom right corner of the screen and triggers the search input when clicked.
+
+```yaml
+# Enable or disable the search button that appears in the bottom right corner of every page
+# Supports true or false (default)
+search.button: true
+```
+
+
## Hiding pages from search
-Sometimes you might have a page that you don't want to be indexed for the search nor to show up in search results, e.g, a 404 page. To exclude a page from search, add the `search_exclude: true` parameter to the page's YAML front matter:
+Sometimes you might have a page that you don't want to be indexed for the search nor to show up in search results, e.g, a 404 page.
+To exclude a page from search, add the `search_exclude: true` parameter to the page's YAML front matter:
#### Example
{: .no_toc }
@@ -83,3 +111,17 @@ nav_exclude: true
search_exclude: true
---
```
+
+
+## Generate search index when used as a gem
+
+If you use Just the Docs as a remote theme, you do not need the following steps.
+
+If you use the theme as a gem, you must initialize the search by running this `rake` command that comes with `just-the-docs`:
+
+```bash
+$ bundle exec just-the-docs rake search:init
+```
+
+This command creates the `assets/js/zzzz-search-data.json` file that Jekyll uses to create your search index.
+Alternatively, you can create the file manually with [this content]({{ site.github.repository_url }}/blob/master/assets/js/zzzz-search-data.json).
diff --git a/just-the-docs.gemspec b/just-the-docs.gemspec
index 239b47932f55d72552def6a51af15f36ab909e87..58fd834aac083b97c97a3987480313096d0981d0 100644
--- a/just-the-docs.gemspec
+++ b/just-the-docs.gemspec
@@ -2,7 +2,7 @@
Gem::Specification.new do |spec|
spec.name = "just-the-docs"
- spec.version = "0.2.9"
+ spec.version = "0.3.0"
spec.authors = ["Patrick Marsceill"]
spec.email = ["patrick.marsceill@gmail.com"]
@@ -12,9 +12,9 @@ Gem::Specification.new do |spec|
spec.files = `git ls-files -z`.split("\x0").select { |f| f.match(%r{^(assets|bin|_layouts|_includes|lib|Rakefile|_sass|LICENSE|README)}i) }
spec.executables << 'just-the-docs'
-
+
spec.add_development_dependency "bundler", "~> 2.1.4"
- spec.add_runtime_dependency "jekyll", ">= 3.8.5", "< 4.1.0"
+ spec.add_runtime_dependency "jekyll", ">= 3.8.5"
spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.0"
spec.add_runtime_dependency "rake", ">= 12.3.1", "< 13.1.0"
diff --git a/lib/tasks/search.rake b/lib/tasks/search.rake
index 63eb4a3d89ad5d49fa19a28dd960abe21e417fcb..8e6305a6115a4f4f642ec859222b722b12dd5ef3 100644
--- a/lib/tasks/search.rake
+++ b/lib/tasks/search.rake
@@ -3,23 +3,68 @@ namespace :search do
task :init do
puts 'Creating search data json file...'
mkdir_p 'assets/js'
- touch 'assets/js/search-data.json'
- content = %Q[{{ page.content | markdownify | replace: '</h', ' . </h' | replace: '<hr', ' . <hr' | replace: '</p', ' . </p' | replace: '</ul', ' . </ul' | replace: '</tr', ' . </tr' | replace: '</li', ' | </li' | replace: '</td', ' | </td' | strip_html | escape_once | remove: 'Table of contents' | remove: '```' | remove: '---' | replace: '\\', ' ' | replace: ' . . . ', ' . ' | replace: ' . . ', ' . ' | normalize_whitespace }}]
+ touch 'assets/js/zzzz-search-data.json'
puts 'Done.'
puts 'Generating content...'
- File.open('assets/js/search-data.json', 'w') do |f|
+ File.open('assets/js/zzzz-search-data.json', 'w') do |f|
f.puts '---
+permalink: /assets/js/search-data.json
---
{
- {% assign comma = false %}
- {% for page in site.html_pages %}{% if page.search_exclude != true %}{% if comma == true%},{% endif %}"{{ forloop.index0 }}": {
- "title": "{{ page.title | replace: \'&\', \'&\' }}",
- "content": "'+content+'",
+ {%- assign i = 0 -%}
+ {% for page in site.html_pages %}
+ {%- if page.title and page.search_exclude != true -%}
+ {%- assign page_content = page.content -%}
+ {%- assign heading_level = site.search.heading_level | default: 2 -%}
+ {%- for j in (2..heading_level) -%}
+ {%- assign tag = \'<h\' | append: j -%}
+ {%- assign closing_tag = \'</h\' | append: j -%}
+ {%- assign page_content = page_content | replace: tag, \'<h1\' | replace: closing_tag, \'</h1\' -%}
+ {%- endfor -%}
+ {%- assign parts = page_content | split: \'<h1\' -%}
+ {%- assign title_found = false -%}
+ {% for part in parts offset: 1 %}
+ {%- assign titleAndContent = part | split: \'</h1>\' -%}
+ {%- assign title = titleAndContent[0] | replace_first: \'>\', \'<h1>\' | split: \'<h1>\' -%}
+ {%- assign title = title[1] | strip_html -%}
+ {%- assign content = titleAndContent[1] -%}
+ {%- assign url = page.url -%}
+ {%- if title == page.title and parts[0] == \'\' -%}
+ {%- assign title_found = true -%}
+ {%- else -%}
+ {%- assign id = titleAndContent[0] -%}
+ {%- assign id = id | split: \'id="\' -%}
+ {%- if id.size == 2 -%}
+ {%- assign id = id[1] -%}
+ {%- assign id = id | split: \'"\' -%}
+ {%- assign id = id[0] -%}
+ {%- capture url -%}{{ url | append: \'#\' | append: id }}{%- endcapture -%}
+ {%- endif -%}
+ {%- endif -%}
+ {%- unless i == 0 -%},{%- endunless -%}
+ "{{ i }}": {
+ "doc": {{ page.title | jsonify }},
+ "title": {{ title | jsonify }},
+ "content": {{ content | replace: \'</h\', \' . </h\' | replace: \'<hr\', \' . <hr\' | replace: \'</p\', \' . </p\' | replace: \'<ul\', \' . <ul\' | replace: \'</ul\', \' . </ul\' | replace: \'<ol\', \' . <ol\' | replace: \'</ol\', \' . </ol\' | replace: \'</tr\', \' . </tr\' | replace: \'<li\', \' | <li\' | replace: \'</li\', \' | </li\' | replace: \'</td\', \' | </td\' | replace: \'<td\', \' | <td\' | replace: \'</th\', \' | </th\' | replace: \'<th\', \' | <th\' | strip_html | remove: \'Table of contents\' | normalize_whitespace | replace: \'. . .\', \'.\' | replace: \'. .\', \'.\' | replace: \'| |\', \'|\' | append: \' \' | jsonify }},
+ "url": "{{ url | absolute_url }}",
+ "relUrl": "{{ url }}"
+ }
+ {%- assign i = i | plus: 1 -%}
+ {%- endfor -%}
+ {%- unless title_found -%}
+ {%- unless i == 0 -%},{%- endunless -%}
+ "{{ i }}": {
+ "doc": {{ page.title | jsonify }},
+ "title": {{ page.title | jsonify }},
+ "content": {{ parts[0] | replace: \'</h\', \' . </h\' | replace: \'<hr\', \' . <hr\' | replace: \'</p\', \' . </p\' | replace: \'<ul\', \' . <ul\' | replace: \'</ul\', \' . </ul\' | replace: \'<ol\', \' . <ol\' | replace: \'</ol\', \' . </ol\' | replace: \'</tr\', \' . </tr\' | replace: \'<li\', \' | <li\' | replace: \'</li\', \' | </li\' | replace: \'</td\', \' | </td\' | replace: \'<td\', \' | <td\' | replace: \'</th\', \' | </th\' | replace: \'<th\', \' | <th\' | strip_html | remove: \'Table of contents\' | normalize_whitespace | replace: \'. . .\', \'.\' | replace: \'. .\', \'.\' | replace: \'| |\', \'|\' | append: \' \' | jsonify }},
"url": "{{ page.url | absolute_url }}",
"relUrl": "{{ page.url }}"
- }{% assign comma = true %}
- {% endif %}{% endfor %}
+ }
+ {%- assign i = i | plus: 1 -%}
+ {%- endunless -%}
+ {%- endif -%}
+ {% endfor %}
}'
end
puts 'Done.'
diff --git a/package-lock.json b/package-lock.json
index f0ac84a2ec65372ddfbca24c3006d97b2732570a..f05ba67ae515e1f5d0a6214600b1ea219f4fee27 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "just-the-docs",
- "version": "0.2.9",
+ "version": "0.3.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -5049,9 +5049,9 @@
}
},
"stylelint-config-prettier": {
- "version": "8.0.1",
- "resolved": "https://registry.npmjs.org/stylelint-config-prettier/-/stylelint-config-prettier-8.0.1.tgz",
- "integrity": "sha512-RcjNW7MUaNVqONhJH4+rtlAE3ow/9SsAM0YWV0Lgu3dbTKdWTa/pQXRdFWgoHWpzUKn+9oBKR5x8JdH+20wmgw==",
+ "version": "8.0.2",
+ "resolved": "https://registry.npmjs.org/stylelint-config-prettier/-/stylelint-config-prettier-8.0.2.tgz",
+ "integrity": "sha512-TN1l93iVTXpF9NJstlvP7nOu9zY2k+mN0NSFQ/VEGz15ZIP9ohdDZTtCWHs5LjctAhSAzaILULGbgiM0ItId3A==",
"dev": true
},
"stylelint-config-primer": {
diff --git a/package.json b/package.json
index b1d8aa1b92af8026fe2a23190bc02f199c6166c0..8d4a59db379045f85adcb222d0d13594c88a6100 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "just-the-docs",
- "version": "0.2.9",
+ "version": "0.3.0",
"description": "A modern Jekyll theme for documentation",
"repository": "pmarsceill/just-the-docs",
"license": "MIT",
@@ -9,7 +9,7 @@
"@primer/css": "^14.3.0",
"prettier": "^2.0.5",
"stylelint": "^13.6.1",
- "stylelint-config-prettier": "^8.0.1",
+ "stylelint-config-prettier": "^8.0.2",
"stylelint-config-primer": "^9.0.0",
"stylelint-prettier": "^1.1.2",
"stylelint-selector-no-utility": "^4.0.0"