mirror of
https://github.com/thangisme/notes.git
synced 2024-11-02 15:47:23 -04:00
Merge pull request #352 from SgtSilvio/navigation-improvements-and-search-sections
Navigation improvements and search sections
This commit is contained in:
Patrick Marsceill
GitHub
commit
45af827e0a
2
404.html
2
404.html
@ -8,4 +8,4 @@ search_exclude: true
|
|||||||
|
|
||||||
<h1>Page not found</h1>
|
<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>
|
||||||
|
|||||||
27
_config.yml
27
_config.yml
@ -25,10 +25,31 @@ exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "pac
|
|||||||
#logo: "/assets/images/just-the-docs.png"
|
#logo: "/assets/images/just-the-docs.png"
|
||||||
|
|
||||||
# Enable or disable the site search
|
# Enable or disable the site search
|
||||||
|
# Supports true (default) or false
|
||||||
search_enabled: true
|
search_enabled: true
|
||||||
|
search:
|
||||||
# Set the search token separator for hyphenated-word search:
|
# Split pages into sections that can be searched individually
|
||||||
search_tokenizer_separator: /[\s/]+/
|
# 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
|
# Enable or disable heading anchors
|
||||||
heading_anchors: true
|
heading_anchors: true
|
||||||
|
|||||||
@ -1,51 +1,55 @@
|
|||||||
<nav role="navigation" aria-label="Main navigation">
|
<ul class="nav-list">
|
||||||
<ul class="navigation-list">
|
{%- assign ordered_pages_list = site.html_pages | where_exp:"item", "item.nav_order != nil" -%}
|
||||||
{%- 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" -%}
|
||||||
{%- assign unordered_pages_list = site.html_pages | where_exp:"item", "item.nav_order == nil" -%}
|
{%- if site.nav_sort == 'case_insensitive' -%}
|
||||||
{%- if site.nav_sort == 'case_insensitive' -%}
|
{%- assign sorted_ordered_pages_list = ordered_pages_list | sort_natural:"nav_order" -%}
|
||||||
{%- 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_unordered_pages_list = unordered_pages_list | sort_natural:"title" -%}
|
{%- else -%}
|
||||||
{%- else -%}
|
{%- assign sorted_ordered_pages_list = ordered_pages_list | sort:"nav_order" -%}
|
||||||
{%- assign sorted_ordered_pages_list = ordered_pages_list | sort:"nav_order" -%}
|
{%- assign sorted_unordered_pages_list = unordered_pages_list | sort:"title" -%}
|
||||||
{%- assign sorted_unordered_pages_list = unordered_pages_list | sort:"title" -%}
|
{%- endif -%}
|
||||||
{%- endif -%}
|
{%- assign pages_list = sorted_ordered_pages_list | concat: sorted_unordered_pages_list -%}
|
||||||
{%- assign pages_list = sorted_ordered_pages_list | concat: sorted_unordered_pages_list -%}
|
{%- for node in pages_list -%}
|
||||||
{%- for node in pages_list -%}
|
{%- unless node.nav_exclude -%}
|
||||||
{%- unless node.nav_exclude -%}
|
{%- if node.parent == nil and node.title -%}
|
||||||
{%- 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 %}">
|
||||||
<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 -%}
|
||||||
{%- if page.parent == node.title or page.grand_parent == node.title -%}
|
{%- assign first_level_url = node.url | absolute_url -%}
|
||||||
{%- assign first_level_url = node.url | absolute_url -%}
|
{%- endif -%}
|
||||||
{%- endif -%}
|
{%- if node.has_children -%}
|
||||||
<a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
|
<a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a>
|
||||||
{%- if node.has_children -%}
|
{%- endif -%}
|
||||||
{%- assign children_list = pages_list | where: "parent", node.title -%}
|
<a href="{{ node.url | absolute_url }}" class="nav-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
|
||||||
<ul class="navigation-list-child-list ">
|
{%- if node.has_children -%}
|
||||||
{%- for child in children_list -%}
|
{%- assign children_list = pages_list | where: "parent", node.title -%}
|
||||||
{%- unless child.nav_exclude -%}
|
<ul class="nav-list ">
|
||||||
<li class="navigation-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
|
{%- for child in children_list -%}
|
||||||
{%- if page.url == child.url or page.parent == child.title -%}
|
{%- unless child.nav_exclude -%}
|
||||||
{%- assign second_level_url = child.url | absolute_url -%}
|
<li class="nav-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
|
||||||
{%- endif -%}
|
{%- if page.url == child.url or page.parent == child.title -%}
|
||||||
<a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
|
{%- assign second_level_url = child.url | absolute_url -%}
|
||||||
{%- if child.has_children -%}
|
{%- endif -%}
|
||||||
{%- assign grand_children_list = pages_list | where: "parent", child.title | where: "grand_parent", node.title -%}
|
{%- if child.has_children -%}
|
||||||
<ul class="navigation-list-child-list">
|
<a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a>
|
||||||
{%- for grand_child in grand_children_list -%}
|
{%- endif -%}
|
||||||
<li class="navigation-list-item {% if page.url == grand_child.url %} active{% endif %}">
|
<a href="{{ child.url | absolute_url }}" class="nav-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
|
||||||
<a href="{{ grand_child.url | absolute_url }}" class="navigation-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
|
{%- if child.has_children -%}
|
||||||
</li>
|
{%- assign grand_children_list = pages_list | where: "parent", child.title | where: "grand_parent", node.title -%}
|
||||||
{%- endfor -%}
|
<ul class="nav-list">
|
||||||
</ul>
|
{%- for grand_child in grand_children_list -%}
|
||||||
{%- endif -%}
|
<li class="nav-list-item {% if page.url == grand_child.url %} active{% endif %}">
|
||||||
</li>
|
<a href="{{ grand_child.url | absolute_url }}" class="nav-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
|
||||||
{%- endunless -%}
|
</li>
|
||||||
{%- endfor -%}
|
{%- endfor -%}
|
||||||
</ul>
|
</ul>
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
</li>
|
</li>
|
||||||
{%- endif -%}
|
{%- endunless -%}
|
||||||
{%- endunless -%}
|
{%- endfor -%}
|
||||||
{%- endfor -%}
|
</ul>
|
||||||
</ul>
|
{%- endif -%}
|
||||||
</nav>
|
</li>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- endunless -%}
|
||||||
|
{%- endfor -%}
|
||||||
|
</ul>
|
||||||
|
|||||||
@ -4,136 +4,166 @@ layout: table_wrappers
|
|||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
||||||
<html lang="{{ site.lang | default: "en-US" }}">
|
<html lang="{{ site.lang | default: 'en-US' }}">
|
||||||
{% include head.html %}
|
{% include head.html %}
|
||||||
<body>
|
<body>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
<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>
|
<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>
|
</symbol>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<div class="page-wrap">
|
<div class="side-bar">
|
||||||
<div class="side-bar">
|
<div class="site-header">
|
||||||
<div class="site-header">
|
<a href="{{ '/' | absolute_url }}" class="site-title lh-tight">{% include title.html %}</a>
|
||||||
<a href="{{ site.url }}{{ site.baseurl }}" class="site-title lh-tight">{% include title.html %}</a>
|
<a href="#" id="menu-button" class="site-button">
|
||||||
<button class="menu-button fs-3 js-main-nav-trigger" data-text-toggle="Hide" type="button">Menu</button>
|
<svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-menu"></use></svg>
|
||||||
</div>
|
</a>
|
||||||
|
|
||||||
<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>
|
</div>
|
||||||
<div class="main-content-wrap js-main-content" tabindex="0">
|
<nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">
|
||||||
<div class="main-content" id="top">
|
{% include nav.html %}
|
||||||
<div class="page-header js-page-header">
|
</nav>
|
||||||
{% if site.search_enabled != false %}
|
<footer class="site-footer">
|
||||||
<div class="search">
|
This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
|
||||||
<div class="search-input-wrap">
|
</footer>
|
||||||
<input type="text" class="js-search-input search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
|
</div>
|
||||||
<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 class="main" id="top">
|
||||||
</div>
|
<div id="main-header" class="main-header">
|
||||||
<div class="js-search-results search-results-wrap"></div>
|
{% 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>
|
</div>
|
||||||
{% endif %}
|
<div id="search-results" class="search-results"></div>
|
||||||
{% 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>
|
</div>
|
||||||
<div class="page">
|
{% endif %}
|
||||||
{% unless page.url == "/" %}
|
{% if site.aux_links %}
|
||||||
{% if page.parent %}
|
<nav aria-label="Auxiliary" class="aux-nav">
|
||||||
<nav class="breadcrumb-nav">
|
<ul class="aux-nav-list">
|
||||||
<ol class="breadcrumb-nav-list">
|
{% for link in site.aux_links %}
|
||||||
{% if page.grand_parent %}
|
<li class="aux-nav-list-item">
|
||||||
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
|
<a href="{{ link.last }}" class="site-button"
|
||||||
<li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
|
{% if site.aux_links_new_tab %}
|
||||||
{% else %}
|
target="_blank" rel="noopener noreferrer"
|
||||||
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
|
>
|
||||||
</ol>
|
{{ link.first }}
|
||||||
</nav>
|
</a>
|
||||||
{% endif %}
|
</li>
|
||||||
{% endunless %}
|
{% endfor %}
|
||||||
<div id="main-content" class="page-content" role="main">
|
</ul>
|
||||||
{% if site.heading_anchors != false %}
|
</nav>
|
||||||
{% 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" %}
|
{% endif %}
|
||||||
{% else %}
|
</div>
|
||||||
{{ content }}
|
<div id="main-content-wrap" class="main-content-wrap">
|
||||||
{% endif %}
|
{% 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 %}
|
{% if page.has_children == true and page.has_toc != false %}
|
||||||
<hr>
|
<hr>
|
||||||
<h2 class="text-delta">Table of contents</h2>
|
<h2 class="text-delta">Table of contents</h2>
|
||||||
<ul>
|
<ul>
|
||||||
{%- assign children_list = pages_list | where: "parent", node.title -%}
|
{%- assign children_list = pages_list | where: "parent", page.title | where: "grand_parent", page.parent -%}
|
||||||
{% for child in children_list %}
|
{% for child in children_list %}
|
||||||
{% if child.parent == page.title and child.title != page.title and child.grand_parent == page.parent %}
|
<li>
|
||||||
<li>
|
<a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
|
||||||
<a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
|
</li>
|
||||||
</li>
|
{% endfor %}
|
||||||
{% endif %}
|
</ul>
|
||||||
{% endfor %}
|
{% endif %}
|
||||||
</ul>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if site.footer_content != nil or site.last_edit_timestamp or site.gh_edit_link %}
|
{% if site.footer_content != nil or site.last_edit_timestamp or site.gh_edit_link %}
|
||||||
<hr>
|
<hr>
|
||||||
<footer>
|
<footer>
|
||||||
{% if site.back_to_top %}
|
{% if site.back_to_top %}
|
||||||
<p><a href="#top">{{ site.back_to_top_text }}</a></p>
|
<p><a href="#top">{{ site.back_to_top_text }}</a></p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if site.footer_content != nil %}
|
{% if site.footer_content != nil %}
|
||||||
<p class="text-small text-grey-dk-000 mb-0">{{ site.footer_content }}</p>
|
<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 %}
|
{% if site.last_edit_timestamp or site.gh_edit_link %}
|
||||||
<div class="d-flex mt-2">
|
<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 and site.last_edit_time_format and page.last_modified_date %}
|
||||||
<p class="text-small text-grey-dk-000 mb-0 mr-2">
|
<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>
|
</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{%
|
{% if
|
||||||
if
|
|
||||||
site.gh_edit_link and
|
site.gh_edit_link and
|
||||||
site.gh_edit_link_text and
|
site.gh_edit_link_text and
|
||||||
site.gh_edit_repository and
|
site.gh_edit_repository and
|
||||||
site.gh_edit_branch and
|
site.gh_edit_branch and
|
||||||
site.gh_edit_view_mode
|
site.gh_edit_view_mode
|
||||||
|
%}
|
||||||
%}
|
|
||||||
<p class="text-small text-grey-dk-000 mb-0">
|
<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 }}">{{ site.gh_edit_link_text }}</a>
|
||||||
</p>
|
</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
</footer>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
</footer>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -16,8 +16,9 @@ figure.highlight {
|
|||||||
padding: $sp-3;
|
padding: $sp-3;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
background-color: $code-background-color;
|
background-color: $code-background-color;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
code {
|
code {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@ -27,8 +28,6 @@ figure.highlight {
|
|||||||
|
|
||||||
.highlighter-rouge {
|
.highlighter-rouge {
|
||||||
margin-bottom: $sp-3;
|
margin-bottom: $sp-3;
|
||||||
overflow: hidden;
|
|
||||||
border-radius: $border-radius;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.highlight .c {
|
.highlight .c {
|
||||||
|
|||||||
@ -14,3 +14,4 @@ $base-button-color: $grey-dk-250;
|
|||||||
$code-background-color: $grey-dk-250;
|
$code-background-color: $grey-dk-250;
|
||||||
$search-background-color: $grey-dk-250;
|
$search-background-color: $grey-dk-250;
|
||||||
$table-background-color: $grey-dk-250;
|
$table-background-color: $grey-dk-250;
|
||||||
|
$feedback-color: darken($sidebar-color, 3%);
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
//
|
//
|
||||||
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
|
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
|
||||||
|
|
||||||
.page-content {
|
.main-content {
|
||||||
line-height: $content-line-height;
|
line-height: $content-line-height;
|
||||||
|
|
||||||
ol,
|
ol,
|
||||||
@ -148,7 +148,7 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
fill: $link-color;
|
color: $link-color;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,28 +2,15 @@
|
|||||||
// The basic two column layout
|
// 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 {
|
.side-bar {
|
||||||
z-index: 100;
|
z-index: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
background-color: $sidebar-color;
|
background-color: $sidebar-color;
|
||||||
|
|
||||||
@include mq(md) {
|
@include mq(md) {
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
position: absolute;
|
position: fixed;
|
||||||
width: $nav-width-md;
|
width: $nav-width-md;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -37,20 +24,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content-wrap {
|
.main {
|
||||||
@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 {
|
|
||||||
@include mq(md) {
|
@include mq(md) {
|
||||||
position: relative;
|
position: relative;
|
||||||
max-width: $content-width;
|
max-width: $content-width;
|
||||||
@ -64,11 +38,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.js-main-content:focus {
|
.main-content-wrap {
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page {
|
|
||||||
@include container;
|
@include container;
|
||||||
padding-top: $gutter-spacing-sm;
|
padding-top: $gutter-spacing-sm;
|
||||||
padding-bottom: $gutter-spacing-sm;
|
padding-bottom: $gutter-spacing-sm;
|
||||||
@ -79,16 +49,14 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-header {
|
.main-header {
|
||||||
@include container;
|
z-index: 0;
|
||||||
display: none;
|
display: none;
|
||||||
padding-top: $gutter-spacing-sm;
|
|
||||||
padding-bottom: $gutter-spacing-sm;
|
|
||||||
background-color: $sidebar-color;
|
background-color: $sidebar-color;
|
||||||
|
|
||||||
@include mq(md) {
|
@include mq(md) {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: space-between;
|
||||||
height: $header-height;
|
height: $header-height;
|
||||||
background-color: $body-background-color;
|
background-color: $body-background-color;
|
||||||
border-bottom: $border $border-color;
|
border-bottom: $border $border-color;
|
||||||
@ -103,7 +71,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigation,
|
.site-nav,
|
||||||
.site-header,
|
.site-header,
|
||||||
.site-footer {
|
.site-footer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -113,10 +81,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigation {
|
.site-nav {
|
||||||
@include container;
|
display: none;
|
||||||
|
|
||||||
|
&.nav-open {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
@include mq(md) {
|
@include mq(md) {
|
||||||
|
display: block;
|
||||||
padding-top: $sp-8;
|
padding-top: $sp-8;
|
||||||
padding-bottom: $gutter-spacing-sm;
|
padding-bottom: $gutter-spacing-sm;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
@ -130,7 +103,6 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
@include mq(md) {
|
@include mq(md) {
|
||||||
z-index: 101;
|
|
||||||
height: $header-height;
|
height: $header-height;
|
||||||
max-height: $header-height;
|
max-height: $header-height;
|
||||||
border-bottom: $border $border-color;
|
border-bottom: $border $border-color;
|
||||||
@ -165,27 +137,42 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-button {
|
.site-button {
|
||||||
appearance: none;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: $gutter-spacing-sm;
|
padding: $gutter-spacing-sm;
|
||||||
align-items: center;
|
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;
|
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
|
// stylelint-disable selector-max-type
|
||||||
|
|
||||||
body {
|
body {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-bottom: $sp-10;
|
padding-bottom: $sp-10;
|
||||||
|
overflow-y: scroll;
|
||||||
|
|
||||||
@include mq(md) {
|
@include mq(md) {
|
||||||
position: static;
|
position: static;
|
||||||
@ -202,9 +189,17 @@ body {
|
|||||||
left: 0;
|
left: 0;
|
||||||
padding-top: $sp-4;
|
padding-top: $sp-4;
|
||||||
padding-bottom: $sp-4;
|
padding-bottom: $sp-4;
|
||||||
|
color: $grey-dk-000;
|
||||||
|
@include fs-2;
|
||||||
|
|
||||||
@include mq(md) {
|
@include mq(md) {
|
||||||
position: static;
|
position: static;
|
||||||
justify-self: end;
|
justify-self: end;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: $sp-5;
|
||||||
|
height: $sp-5;
|
||||||
|
color: $link-color;
|
||||||
|
}
|
||||||
|
|||||||
@ -1,89 +1,165 @@
|
|||||||
//
|
//
|
||||||
// Main nav, breadcrumb, etc...
|
// 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;
|
padding: 0;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
|
||||||
|
|
||||||
.navigation-list-child-list {
|
.nav-list-item {
|
||||||
padding-left: $sp-3;
|
@include fs-4;
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
.navigation-list-link {
|
|
||||||
color: $nav-child-link-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigation-list-item {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
&::before {
|
@include mq(md) {
|
||||||
|
@include fs-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
@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%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-list-expander {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin-top: 0.3em;
|
@if $nav-list-expander-right {
|
||||||
margin-left: -0.8em;
|
right: 0;
|
||||||
color: rgba($body-text-color, 0.3);
|
}
|
||||||
content: "- ";
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .nav-list {
|
||||||
|
display: none;
|
||||||
|
padding-left: $sp-3;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
.nav-list-item {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.nav-list-link {
|
||||||
|
color: $nav-child-link-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-list-expander {
|
||||||
|
color: $nav-child-link-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
&::before {
|
> .nav-list-expander svg {
|
||||||
color: $body-text-color;
|
@if $nav-list-expander-right {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
} @else {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .nav-list {
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigation-list-item {
|
// Aux nav
|
||||||
@include fs-4;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
@include mq(md) {
|
|
||||||
@include fs-3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigation-list-child-list {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
.navigation-list-child-list {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigation-list-link {
|
|
||||||
display: block;
|
|
||||||
padding-top: $sp-1;
|
|
||||||
padding-bottom: $sp-1;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
font-weight: 600;
|
|
||||||
color: $body-heading-color;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Small screen nav
|
|
||||||
|
|
||||||
.main-nav {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
&.nav-open {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
@include mq(md) {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.aux-nav {
|
.aux-nav {
|
||||||
align-self: center;
|
height: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
@include fs-2;
|
||||||
|
|
||||||
|
.aux-nav-list {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aux-nav-list-item {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mq(md) {
|
||||||
|
padding-right: $gutter-spacing-sm;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Breadcrumb nav
|
// Breadcrumb nav
|
||||||
|
|
||||||
.breadcrumb-nav {
|
.breadcrumb-nav {
|
||||||
@include mq(md) {
|
@include mq(md) {
|
||||||
margin-top: -$sp-4;
|
margin-top: -$sp-4;
|
||||||
|
|||||||
@ -4,91 +4,115 @@
|
|||||||
|
|
||||||
.search {
|
.search {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 99;
|
z-index: 2;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
height: 100%;
|
height: $sp-10;
|
||||||
margin-bottom: $sp-3;
|
padding: $sp-2;
|
||||||
|
transition: padding linear #{$transition-duration / 2};
|
||||||
|
|
||||||
@include mq(md) {
|
@include mq(md) {
|
||||||
margin-bottom: 0;
|
position: relative !important;
|
||||||
|
width: auto !important;
|
||||||
|
height: 100% !important;
|
||||||
|
padding: 0;
|
||||||
|
transition: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-input-wrap {
|
.search-input-wrap {
|
||||||
display: flex;
|
position: relative;
|
||||||
height: 100%;
|
z-index: 1;
|
||||||
padding: $sp-2;
|
height: $sp-8;
|
||||||
background-color: $search-background-color;
|
overflow: hidden;
|
||||||
border-radius: $border-radius;
|
border-radius: $border-radius;
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
|
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) {
|
@include mq(md) {
|
||||||
padding-top: 0;
|
position: absolute;
|
||||||
padding-right: 0;
|
width: 100%;
|
||||||
padding-bottom: 0;
|
max-width: $search-results-width;
|
||||||
padding-left: 0;
|
height: 100% !important;
|
||||||
background-color: $body-background-color;
|
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
transition: width ease $transition-duration;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-input {
|
.search-input {
|
||||||
align-self: center;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-top: $sp-1;
|
height: 100%;
|
||||||
padding-bottom: $sp-1;
|
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;
|
background-color: $search-background-color;
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
order: 2;
|
border-radius: 0;
|
||||||
@include fs-4;
|
|
||||||
|
@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 {
|
&:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
+ .search-icon {
|
+ .search-label .search-icon {
|
||||||
fill: $link-color;
|
color: $link-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-label {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
padding-left: $gutter-spacing-sm;
|
||||||
|
|
||||||
@include mq(md) {
|
@include mq(md) {
|
||||||
background-color: $body-background-color;
|
padding-left: $gutter-spacing;
|
||||||
@include fs-3;
|
transition: padding-left linear #{$transition-duration / 2};
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
width: #{$sp-4 * 1.2};
|
||||||
|
height: #{$sp-4 * 1.2};
|
||||||
|
align-self: center;
|
||||||
|
color: $grey-dk-000;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-icon {
|
.search-results {
|
||||||
align-self: center;
|
|
||||||
margin-right: $sp-2;
|
|
||||||
fill: $grey-dk-000;
|
|
||||||
order: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-results-wrap {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 100;
|
left: 0;
|
||||||
display: none;
|
display: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: $search-background-color;
|
max-height: calc(100% - #{$sp-10});
|
||||||
border-radius: $border-radius;
|
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);
|
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) {
|
@include mq(md) {
|
||||||
|
top: 100%;
|
||||||
width: $search-results-width;
|
width: $search-results-width;
|
||||||
|
max-height: calc(100vh - 200%) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-results-list {
|
.search-results-list {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
margin-top: $sp-1;
|
|
||||||
margin-bottom: $sp-1;
|
margin-bottom: $sp-1;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
@include fs-4;
|
@include fs-4;
|
||||||
@ -112,31 +136,58 @@
|
|||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&.active {
|
&.active {
|
||||||
background-color: $sidebar-color;
|
background-color: $feedback-color;
|
||||||
}
|
|
||||||
|
|
||||||
@include mq(md) {
|
|
||||||
padding-right: $sp-4;
|
|
||||||
padding-left: $sp-4;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-result-title {
|
.search-result-title {
|
||||||
display: block;
|
display: block;
|
||||||
padding-top: $sp-2;
|
padding-top: $sp-2;
|
||||||
padding-right: $sp-4;
|
|
||||||
padding-bottom: $sp-2;
|
padding-bottom: $sp-2;
|
||||||
|
|
||||||
@include mq(sm) {
|
@include mq(sm) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 40%;
|
width: 40%;
|
||||||
word-wrap: break-word;
|
padding-right: $sp-2;
|
||||||
vertical-align: top;
|
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 {
|
.search-result-rel-url {
|
||||||
display: block;
|
display: block;
|
||||||
|
margin-left: #{$sp-4 + $sp-2};
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
color: $search-result-preview-color;
|
color: $search-result-preview-color;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@ -144,12 +195,14 @@
|
|||||||
@include fs-1;
|
@include fs-1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-result-preview {
|
.search-result-previews {
|
||||||
display: block;
|
display: block;
|
||||||
padding-top: $sp-2;
|
padding-top: $sp-2;
|
||||||
padding-bottom: $sp-2;
|
padding-bottom: $sp-2;
|
||||||
padding-left: $sp-4;
|
padding-left: $sp-4;
|
||||||
|
margin-left: $sp-2;
|
||||||
color: $search-result-preview-color;
|
color: $search-result-preview-color;
|
||||||
|
word-wrap: break-word;
|
||||||
border-left: $border;
|
border-left: $border;
|
||||||
border-left-color: $border-color;
|
border-left-color: $border-color;
|
||||||
@include fs-2;
|
@include fs-2;
|
||||||
@ -157,11 +210,112 @@
|
|||||||
@include mq(sm) {
|
@include mq(sm) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 60%;
|
width: 60%;
|
||||||
|
padding-left: $sp-2;
|
||||||
|
margin-left: 0;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.search-result-preview + .search-result-preview {
|
||||||
|
margin-top: $sp-1;
|
||||||
|
}
|
||||||
|
|
||||||
.search-result-highlight {
|
.search-result-highlight {
|
||||||
font-weight: bold;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -57,6 +57,7 @@ $sidebar-color: $grey-lt-000 !default;
|
|||||||
$search-background-color: $white !default;
|
$search-background-color: $white !default;
|
||||||
$table-background-color: $white !default;
|
$table-background-color: $white !default;
|
||||||
$code-background-color: $grey-lt-000 !default;
|
$code-background-color: $grey-lt-000 !default;
|
||||||
|
$feedback-color: darken($sidebar-color, 3%) !default;
|
||||||
|
|
||||||
$body-text-color: $grey-dk-100 !default;
|
$body-text-color: $grey-dk-100 !default;
|
||||||
$body-heading-color: $grey-dk-300 !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-6: map-get($spacers, sp-6) !default; // 2 rem == 32px
|
||||||
$sp-7: map-get($spacers, sp-7) !default; // 2.5 rem == 40px
|
$sp-7: map-get($spacers, sp-7) !default; // 2.5 rem == 40px
|
||||||
$sp-8: map-get($spacers, sp-8) !default; // 3 rem == 48px
|
$sp-8: map-get($spacers, sp-8) !default; // 3 rem == 48px
|
||||||
$sp-9: map-get($spacers, sp-9) !default; // 4 rem == 48px
|
$sp-9: map-get($spacers, sp-9) !default; // 3.5 rem == 56px
|
||||||
$sp-10: map-get($spacers, sp-10) !default; // 4.5 rem == 48px
|
$sp-10: map-get($spacers, sp-10) !default; // 4 rem == 64px
|
||||||
|
|
||||||
//
|
//
|
||||||
// Borders
|
// Borders
|
||||||
@ -113,9 +114,13 @@ $gutter-spacing: $sp-6 !default;
|
|||||||
$gutter-spacing-sm: $sp-4 !default;
|
$gutter-spacing-sm: $sp-4 !default;
|
||||||
$nav-width: 264px !default;
|
$nav-width: 264px !default;
|
||||||
$nav-width-md: 248px !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;
|
$content-width: 800px !default;
|
||||||
$header-height: 60px !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
|
// Media queries in pixels
|
||||||
|
|||||||
@ -24,24 +24,47 @@ jtd.onReady = function(ready) {
|
|||||||
// Show/hide mobile menu
|
// Show/hide mobile menu
|
||||||
|
|
||||||
function initNav() {
|
function initNav() {
|
||||||
const mainNav = document.querySelector('.js-main-nav');
|
jtd.addEvent(document, 'click', function(e){
|
||||||
const pageHeader = document.querySelector('.js-page-header');
|
var target = e.target;
|
||||||
const navTrigger = document.querySelector('.js-main-nav-trigger');
|
while (target && !(target.classList && target.classList.contains('nav-list-expander'))) {
|
||||||
|
target = target.parentNode;
|
||||||
|
}
|
||||||
|
if (target) {
|
||||||
|
e.preventDefault();
|
||||||
|
target.parentNode.classList.toggle('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
jtd.addEvent(navTrigger, 'click', function(e){
|
const siteNav = document.getElementById('site-nav');
|
||||||
|
const mainHeader = document.getElementById('main-header');
|
||||||
|
const menuButton = document.getElementById('menu-button');
|
||||||
|
|
||||||
|
jtd.addEvent(menuButton, 'click', function(e){
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
var text = navTrigger.innerText;
|
|
||||||
var textToggle = navTrigger.getAttribute('data-text-toggle');
|
|
||||||
|
|
||||||
mainNav.classList.toggle('nav-open');
|
if (menuButton.classList.toggle('nav-open')) {
|
||||||
pageHeader.classList.toggle('nav-open');
|
siteNav.classList.add('nav-open');
|
||||||
navTrigger.classList.toggle('nav-open');
|
mainHeader.classList.add('nav-open');
|
||||||
navTrigger.innerText = textToggle;
|
} else {
|
||||||
navTrigger.setAttribute('data-text-toggle', text);
|
siteNav.classList.remove('nav-open');
|
||||||
textToggle = text;
|
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
|
// Site search
|
||||||
|
|
||||||
function initSearch() {
|
function initSearch() {
|
||||||
@ -50,241 +73,377 @@ function initSearch() {
|
|||||||
|
|
||||||
request.onload = function(){
|
request.onload = function(){
|
||||||
if (request.status >= 200 && request.status < 400) {
|
if (request.status >= 200 && request.status < 400) {
|
||||||
// Success!
|
var docs = JSON.parse(request.responseText);
|
||||||
var data = JSON.parse(request.responseText);
|
|
||||||
|
|
||||||
{% if site.search_tokenizer_separator != nil %}
|
lunr.tokenizer.separator = {{ site.search.tokenizer_separator | default: site.search_tokenizer_separator | default: "/[\s\-/]+/" }}
|
||||||
lunr.tokenizer.separator = {{ site.search_tokenizer_separator }}
|
|
||||||
{% else %}
|
var index = lunr(function(){
|
||||||
lunr.tokenizer.separator = /[\s\-/]+/
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
var index = lunr(function () {
|
|
||||||
this.ref('id');
|
this.ref('id');
|
||||||
this.field('title', { boost: 200 });
|
this.field('title', { boost: 200 });
|
||||||
this.field('content', { boost: 2 });
|
this.field('content', { boost: 2 });
|
||||||
this.field('url');
|
{%- if site.search.rel_url != false %}
|
||||||
|
this.field('relUrl');
|
||||||
|
{%- endif %}
|
||||||
this.metadataWhitelist = ['position']
|
this.metadataWhitelist = ['position']
|
||||||
|
|
||||||
for (var i in data) {
|
for (var i in docs) {
|
||||||
this.add({
|
this.add({
|
||||||
id: i,
|
id: i,
|
||||||
title: data[i].title,
|
title: docs[i].title,
|
||||||
content: data[i].content,
|
content: docs[i].content,
|
||||||
url: data[i].url
|
{%- if site.search.rel_url != false %}
|
||||||
|
relUrl: docs[i].relUrl
|
||||||
|
{%- endif %}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
searchResults(index, data);
|
searchLoaded(index, docs);
|
||||||
} else {
|
} else {
|
||||||
// We reached our target server, but it returned an error
|
|
||||||
console.log('Error loading ajax request. Request status:' + request.status);
|
console.log('Error loading ajax request. Request status:' + request.status);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
request.onerror = function(){
|
request.onerror = function(){
|
||||||
// There was a connection error of some sort
|
|
||||||
console.log('There was a connection error');
|
console.log('There was a connection error');
|
||||||
};
|
};
|
||||||
|
|
||||||
request.send();
|
request.send();
|
||||||
|
}
|
||||||
|
|
||||||
function searchResults(index, data) {
|
function searchLoaded(index, docs) {
|
||||||
var index = index;
|
var index = index;
|
||||||
var docs = data;
|
var docs = docs;
|
||||||
var searchInput = document.querySelector('.js-search-input');
|
var searchInput = document.getElementById('search-input');
|
||||||
var searchResults = document.querySelector('.js-search-results');
|
var searchResults = document.getElementById('search-results');
|
||||||
|
var mainHeader = document.getElementById('main-header');
|
||||||
|
var currentInput;
|
||||||
|
var currentSearchIndex = 0;
|
||||||
|
|
||||||
function hideResults() {
|
function showSearch() {
|
||||||
searchResults.innerHTML = '';
|
document.documentElement.classList.add('search-active');
|
||||||
searchResults.classList.remove('active');
|
}
|
||||||
|
|
||||||
|
function hideSearch() {
|
||||||
|
document.documentElement.classList.remove('search-active');
|
||||||
|
}
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
currentSearchIndex++;
|
||||||
|
|
||||||
|
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){
|
var results = index.query(function (query) {
|
||||||
switch (e.keyCode) {
|
var tokens = lunr.tokenizer(input)
|
||||||
case 38: // arrow up
|
query.term(tokens, {
|
||||||
e.preventDefault();
|
boost: 10
|
||||||
var active = document.querySelector('.search-result.active');
|
});
|
||||||
if (active) {
|
query.term(tokens, {
|
||||||
active.classList.remove('active');
|
wildcard: lunr.Query.wildcard.TRAILING
|
||||||
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(searchInput, 'keyup', function(e){
|
if ((results.length == 0) && (input.length > 2)) {
|
||||||
switch (e.keyCode) {
|
var tokens = lunr.tokenizer(input).filter(function(token, i) {
|
||||||
case 27: // When esc key is pressed, hide the results and clear the field
|
return token.str.length < 20;
|
||||||
hideResults();
|
})
|
||||||
searchInput.value = '';
|
if (tokens.length > 0) {
|
||||||
return;
|
results = index.query(function (query) {
|
||||||
case 38: // arrow up
|
query.term(tokens, {
|
||||||
case 40: // arrow down
|
editDistance: Math.round(Math.sqrt(input.length / 2 - 1))
|
||||||
case 13: // enter
|
});
|
||||||
e.preventDefault();
|
});
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
hideResults();
|
if (results.length == 0) {
|
||||||
|
var noResultsDiv = document.createElement('div');
|
||||||
|
noResultsDiv.classList.add('search-no-result');
|
||||||
|
noResultsDiv.innerText = 'No results found';
|
||||||
|
searchResults.appendChild(noResultsDiv);
|
||||||
|
|
||||||
var input = this.value;
|
} else {
|
||||||
if (input === '') {
|
var resultsList = document.createElement('ul');
|
||||||
|
resultsList.classList.add('search-results-list');
|
||||||
|
searchResults.appendChild(resultsList);
|
||||||
|
|
||||||
|
addResults(resultsList, results, 0, 10, 100, currentSearchIndex);
|
||||||
|
}
|
||||||
|
|
||||||
|
function addResults(resultsList, results, start, batchSize, batchMillis, searchIndex) {
|
||||||
|
if (searchIndex != currentSearchIndex) {
|
||||||
return;
|
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) {
|
function addResult(resultsList, result) {
|
||||||
var tokens = lunr.tokenizer(input)
|
var doc = docs[result.ref];
|
||||||
query.term(tokens, {
|
|
||||||
boost: 10
|
|
||||||
});
|
|
||||||
query.term(tokens, {
|
|
||||||
wildcard: lunr.Query.wildcard.TRAILING
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
if (results.length > 0) {
|
var resultsListItem = document.createElement('li');
|
||||||
searchResults.classList.add('active');
|
resultsListItem.classList.add('search-results-list-item');
|
||||||
var resultsList = document.createElement('ul');
|
resultsList.appendChild(resultsListItem);
|
||||||
resultsList.classList.add('search-results-list');
|
|
||||||
searchResults.appendChild(resultsList);
|
|
||||||
|
|
||||||
for (var i in results) {
|
var resultLink = document.createElement('a');
|
||||||
var result = results[i];
|
resultLink.classList.add('search-result');
|
||||||
var doc = docs[result.ref];
|
resultLink.setAttribute('href', doc.url);
|
||||||
|
resultsListItem.appendChild(resultLink);
|
||||||
|
|
||||||
var resultsListItem = document.createElement('li');
|
var resultTitle = document.createElement('div');
|
||||||
resultsListItem.classList.add('search-results-list-item');
|
resultTitle.classList.add('search-result-title');
|
||||||
resultsList.appendChild(resultsListItem);
|
resultLink.appendChild(resultTitle);
|
||||||
|
|
||||||
var resultLink = document.createElement('a');
|
var resultDoc = document.createElement('div');
|
||||||
resultLink.classList.add('search-result');
|
resultDoc.classList.add('search-result-doc');
|
||||||
resultLink.setAttribute('href', doc.url);
|
resultDoc.innerHTML = '<svg viewBox="0 0 24 24" class="search-result-icon"><use xlink:href="#svg-doc"></use></svg>';
|
||||||
resultsListItem.appendChild(resultLink);
|
resultTitle.appendChild(resultDoc);
|
||||||
|
|
||||||
var resultTitle = document.createElement('div');
|
var resultDocTitle = document.createElement('div');
|
||||||
resultTitle.classList.add('search-result-title');
|
resultDocTitle.classList.add('search-result-doc-title');
|
||||||
resultTitle.innerText = doc.title;
|
resultDocTitle.innerHTML = doc.doc;
|
||||||
resultLink.appendChild(resultTitle);
|
resultDoc.appendChild(resultDocTitle);
|
||||||
|
var resultDocOrSection = resultDocTitle;
|
||||||
|
|
||||||
var resultRelUrl = document.createElement('span');
|
if (doc.doc != doc.title) {
|
||||||
resultRelUrl.classList.add('search-result-rel-url');
|
resultDoc.classList.add('search-result-doc-parent');
|
||||||
resultRelUrl.innerText = doc.relUrl;
|
var resultSection = document.createElement('div');
|
||||||
resultTitle.appendChild(resultRelUrl);
|
resultSection.classList.add('search-result-section');
|
||||||
|
resultSection.innerHTML = doc.title;
|
||||||
|
resultTitle.appendChild(resultSection);
|
||||||
|
resultDocOrSection = resultSection;
|
||||||
|
}
|
||||||
|
|
||||||
var metadata = result.matchData.metadata;
|
var metadata = result.matchData.metadata;
|
||||||
var contentFound = false;
|
var titlePositions = [];
|
||||||
for (var j in metadata) {
|
var contentPositions = [];
|
||||||
if (metadata[j].title) {
|
for (var j in metadata) {
|
||||||
var position = metadata[j].title.position[0];
|
var meta = metadata[j];
|
||||||
var start = position[0];
|
if (meta.title) {
|
||||||
var end = position[0] + position[1];
|
var positions = meta.title.position;
|
||||||
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>';
|
for (var k in positions) {
|
||||||
|
titlePositions.push(positions[k]);
|
||||||
} else if (metadata[j].content && !contentFound) {
|
}
|
||||||
contentFound = true;
|
}
|
||||||
|
if (meta.content) {
|
||||||
var position = metadata[j].content.position[0];
|
var positions = meta.content.position;
|
||||||
var start = position[0];
|
for (var k in positions) {
|
||||||
var end = position[0] + position[1];
|
var position = positions[k];
|
||||||
var previewStart = start;
|
var previewStart = position[0];
|
||||||
var previewEnd = end;
|
var previewEnd = position[0] + position[1];
|
||||||
var ellipsesBefore = true;
|
var ellipsesBefore = true;
|
||||||
var ellipsesAfter = true;
|
var ellipsesAfter = true;
|
||||||
for (var k = 0; k < 3; k++) {
|
for (var k = 0; k < {{ site.search.preview_words_before | default: 5 }}; k++) {
|
||||||
var nextSpace = doc.content.lastIndexOf(' ', previewStart - 2);
|
var nextSpace = doc.content.lastIndexOf(' ', previewStart - 2);
|
||||||
var nextDot = doc.content.lastIndexOf('.', previewStart - 2);
|
var nextDot = doc.content.lastIndexOf('. ', previewStart - 2);
|
||||||
if ((nextDot > 0) && (nextDot > nextSpace)) {
|
if ((nextDot >= 0) && (nextDot > nextSpace)) {
|
||||||
previewStart = nextDot + 1;
|
previewStart = nextDot + 1;
|
||||||
ellipsesBefore = false;
|
ellipsesBefore = false;
|
||||||
break;
|
break;
|
||||||
}
|
|
||||||
if (nextSpace < 0) {
|
|
||||||
previewStart = 0;
|
|
||||||
ellipsesBefore = false;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
previewStart = nextSpace + 1;
|
|
||||||
}
|
}
|
||||||
for (var k = 0; k < 10; k++) {
|
if (nextSpace < 0) {
|
||||||
var nextSpace = doc.content.indexOf(' ', previewEnd + 1);
|
previewStart = 0;
|
||||||
var nextDot = doc.content.indexOf('.', previewEnd + 1);
|
ellipsesBefore = false;
|
||||||
if ((nextDot > 0) && (nextDot < nextSpace)) {
|
break;
|
||||||
previewEnd = nextDot;
|
|
||||||
ellipsesAfter = false;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
if (nextSpace < 0) {
|
|
||||||
previewEnd = doc.content.length;
|
|
||||||
ellipsesAfter = false;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
previewEnd = nextSpace;
|
|
||||||
}
|
}
|
||||||
var preview = doc.content.substring(previewStart, start);
|
previewStart = nextSpace + 1;
|
||||||
if (ellipsesBefore) {
|
|
||||||
preview = '... ' + preview;
|
|
||||||
}
|
|
||||||
preview += '<span class="search-result-highlight">' + doc.content.substring(start, end) + '</span>';
|
|
||||||
preview += doc.content.substring(end, previewEnd);
|
|
||||||
if (ellipsesAfter) {
|
|
||||||
preview += ' ...';
|
|
||||||
}
|
|
||||||
|
|
||||||
var resultPreview = document.createElement('div');
|
|
||||||
resultPreview.classList.add('search-result-preview');
|
|
||||||
resultPreview.innerHTML = preview;
|
|
||||||
resultLink.appendChild(resultPreview);
|
|
||||||
}
|
}
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
if (nextSpace < 0) {
|
||||||
|
previewEnd = doc.content.length;
|
||||||
|
ellipsesAfter = false;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
previewEnd = nextSpace;
|
||||||
|
}
|
||||||
|
contentPositions.push({
|
||||||
|
highlight: position,
|
||||||
|
previewStart: previewStart, previewEnd: previewEnd,
|
||||||
|
ellipsesBefore: ellipsesBefore, ellipsesAfter: ellipsesAfter
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
jtd.addEvent(searchInput, 'blur', function(){
|
if (titlePositions.length > 0) {
|
||||||
setTimeout(function(){ hideResults() }, 300);
|
titlePositions.sort(function(p1, p2){ return p1[0] - p2[0] });
|
||||||
});
|
resultDocOrSection.innerHTML = '';
|
||||||
|
addHighlightedText(resultDocOrSection, doc.title, 0, doc.title.length, titlePositions);
|
||||||
|
}
|
||||||
|
|
||||||
|
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(' ...'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
{%- 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() {
|
jtd.addEvent(searchInput, 'keyup', function(e){
|
||||||
var mainContent = document.querySelector('.js-main-content');
|
switch (e.keyCode) {
|
||||||
mainContent.focus();
|
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
|
// Switch theme
|
||||||
|
|
||||||
@ -302,10 +461,9 @@ jtd.setTheme = function(theme) {
|
|||||||
|
|
||||||
jtd.onReady(function(){
|
jtd.onReady(function(){
|
||||||
initNav();
|
initNav();
|
||||||
pageFocus();
|
{%- if site.search_enabled != false %}
|
||||||
if (typeof lunr !== 'undefined') {
|
initSearch();
|
||||||
initSearch();
|
{%- endif %}
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
})(window.jtd = window.jtd || {});
|
})(window.jtd = window.jtd || {});
|
||||||
|
|||||||
@ -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 %}
|
|
||||||
}
|
|
||||||
58
assets/js/zzzz-search-data.json
Normal file
58
assets/js/zzzz-search-data.json
Normal file
@ -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 %}
|
||||||
|
}
|
||||||
@ -36,8 +36,29 @@ logo: "/assets/images/just-the-docs.png"
|
|||||||
# Supports true (default) or false
|
# Supports true (default) or false
|
||||||
search_enabled: true
|
search_enabled: true
|
||||||
|
|
||||||
# Enable support for hyphenated search words:
|
search:
|
||||||
search_tokenizer_separator: /[\s/]+/
|
# 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
|
## Aux links
|
||||||
|
|||||||
108
docs/search.md
108
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 title
|
||||||
- Page content
|
- Page content
|
||||||
- Page URL
|
- 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`:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
$ bundle exec just-the-docs rake search:init
|
|
||||||
```
|
|
||||||
|
|
||||||
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:
|
|
||||||
|
|
||||||
```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 %}
|
|
||||||
```
|
|
||||||
|
|
||||||
_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)._
|
|
||||||
|
|
||||||
### Enable search in configuration
|
|
||||||
|
|
||||||
In your site's `_config.yml`, enable search:
|
In your site's `_config.yml`, enable search:
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
# Enable or disable the site search
|
# Enable or disable the site search
|
||||||
|
# Supports true (default) or false
|
||||||
search_enabled: true
|
search_enabled: true
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Search granularity
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# Split pages into sections that can be searched individually
|
||||||
|
# Supports 1 - 6, default: 2
|
||||||
|
search.heading_level: 2
|
||||||
|
```
|
||||||
|
|
||||||
|
### Search previews
|
||||||
|
|
||||||
|
A search result can contain previews that show where the search words are found in the specific section.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# 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:
|
The default is for hyphens to separate tokens in search terms:
|
||||||
`gem-based` is equivalent to `gem based`, matching either word.
|
`gem-based` is equivalent to `gem based`, matching either word.
|
||||||
To allow search for hyphenated words:
|
To allow search for hyphenated words:
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
# Set the search token separator
|
# 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
|
## 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
|
#### Example
|
||||||
{: .no_toc }
|
{: .no_toc }
|
||||||
@ -83,3 +111,17 @@ nav_exclude: true
|
|||||||
search_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).
|
||||||
|
|||||||
@ -3,23 +3,68 @@ namespace :search do
|
|||||||
task :init do
|
task :init do
|
||||||
puts 'Creating search data json file...'
|
puts 'Creating search data json file...'
|
||||||
mkdir_p 'assets/js'
|
mkdir_p 'assets/js'
|
||||||
touch 'assets/js/search-data.json'
|
touch 'assets/js/zzzz-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 }}]
|
|
||||||
puts 'Done.'
|
puts 'Done.'
|
||||||
puts 'Generating content...'
|
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 '---
|
f.puts '---
|
||||||
|
permalink: /assets/js/search-data.json
|
||||||
---
|
---
|
||||||
{
|
{
|
||||||
{% assign comma = false %}
|
{%- assign i = 0 -%}
|
||||||
{% for page in site.html_pages %}{% if page.search_exclude != true %}{% if comma == true%},{% endif %}"{{ forloop.index0 }}": {
|
{% for page in site.html_pages %}
|
||||||
"title": "{{ page.title | replace: \'&\', \'&\' }}",
|
{%- if page.title and page.search_exclude != true -%}
|
||||||
"content": "'+content+'",
|
{%- 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 }}",
|
"url": "{{ page.url | absolute_url }}",
|
||||||
"relUrl": "{{ page.url }}"
|
"relUrl": "{{ page.url }}"
|
||||||
}{% assign comma = true %}
|
}
|
||||||
{% endif %}{% endfor %}
|
{%- assign i = i | plus: 1 -%}
|
||||||
|
{%- endunless -%}
|
||||||
|
{%- endif -%}
|
||||||
|
{% endfor %}
|
||||||
}'
|
}'
|
||||||
end
|
end
|
||||||
puts 'Done.'
|
puts 'Done.'
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user