From ee8b901bcbc5db0596d8b6e98f5bd34f4dc75d66 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sun, 21 Jul 2019 14:36:51 +0200 Subject: [PATCH 01/64] Simplified nav nesting (cherry picked from commit eeb3f342b17a744d0c2b2f0360359fa3276f8abd) --- _includes/nav.html | 78 +++++++++++++++++++++---------------------- _layouts/default.html | 7 ++-- 2 files changed, 41 insertions(+), 44 deletions(-) diff --git a/_includes/nav.html b/_includes/nav.html index d561a42..fbe159f 100644 --- a/_includes/nav.html +++ b/_includes/nav.html @@ -1,40 +1,38 @@ - + diff --git a/_layouts/default.html b/_layouts/default.html index d414234..52a03e1 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -4,7 +4,7 @@ layout: table_wrappers - + {% include head.html %} @@ -14,10 +14,9 @@ layout: table_wrappers {% include title.html %} - -
+
+ From 183778067bfec16cc2ed4c7ba9f4ed1aa3c66496 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Thu, 15 Aug 2019 22:56:24 +0200 Subject: [PATCH 02/64] Fixed missing closing div in default.html, formatting --- _layouts/default.html | 53 ++++++++++++++++++++++--------------------- 1 file changed, 27 insertions(+), 26 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index 52a03e1..a8bc48c 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -25,13 +25,13 @@ layout: table_wrappers
{% if site.search_enabled != false %} -
-
- - Search +
+
+ + Search +
+
-
-
{% endif %} {% if site.aux_links != nil %}
    @@ -64,28 +64,29 @@ layout: table_wrappers {{ content }} {% endif %} - {% if page.has_children == true and page.has_toc != false %} -
    -

    Table of contents

    - {% assign children_list = site.pages | sort:"nav_order" %} -
      - {% for child in children_list %} - {% if child.parent == page.title and child.title != page.title %} -
    • - {{ child.title }} -
      • - {% endif %} - {% endfor %} -
    - {% endif %} + {% if page.has_children == true and page.has_toc != false %} +
    +

    Table of contents

    + {% assign children_list = site.pages | sort:"nav_order" %} +
      + {% for child in children_list %} + {% if child.parent == page.title and child.title != page.title %} +
    • + {{ child.title }} +
      • + {% endif %} + {% endfor %} +
    + {% endif %} - {% if site.footer_content != nil %} -
    -
    -

    {{ site.footer_content }}

    -
    - {% endif %} + {% if site.footer_content != nil %} +
    +
    +

    {{ site.footer_content }}

    +
    + {% endif %} +
From 721ca36d85a85d033f6e5da01ab9f7dbaf41428c Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sun, 21 Jul 2019 16:09:29 +0200 Subject: [PATCH 03/64] Cleaned ids and classes (cherry picked from commit 2b153ed074811e735aaa58d57a3fcdf7838e17f5) --- _layouts/default.html | 18 +++++++++--------- _sass/content.scss | 2 +- _sass/layout.scss | 20 ++++++++++---------- _sass/navigation.scss | 2 +- _sass/search.scss | 2 +- assets/js/just-the-docs.js | 18 +++++++++--------- 6 files changed, 31 insertions(+), 31 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index a8bc48c..8bf647d 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -12,25 +12,25 @@ layout: table_wrappers
{% include title.html %} - +
-
-
-
-
+
+
+
{% if site.search_enabled != false %}
- + Search
-
+
{% endif %} {% if site.aux_links != nil %} @@ -41,7 +41,7 @@ layout: table_wrappers {% endif %}
-
+
{% unless page.url == "/" %} {% if page.parent %} {% endif %} {% endunless %} -
+
{% if site.heading_anchors != false %} {% include vendor/anchor_headings.html html=content beforeHeading = "true" anchorBody="" anchorClass="anchor-heading" %} {% else %} diff --git a/_sass/content.scss b/_sass/content.scss index 0ed47fc..f771939 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; a { diff --git a/_sass/layout.scss b/_sass/layout.scss index 4c214ea..589f021 100644 --- a/_sass/layout.scss +++ b/_sass/layout.scss @@ -37,7 +37,7 @@ } } -.main-content-wrap { +.main-wrap { @include mq(md) { position: absolute; top: 0; @@ -48,9 +48,13 @@ overflow-x: hidden; overflow-y: scroll; } + + &:focus { + outline: none; + } } -.main-content { +.main { @include mq(md) { position: relative; max-width: $content-width; @@ -62,11 +66,7 @@ } } -.js-main-content:focus { - outline: none; -} - -.page { +.main-content-wrap { @include container; padding-top: $gutter-spacing-sm; padding-bottom: $gutter-spacing-sm; @@ -77,7 +77,7 @@ } } -.page-header { +.main-header { @include container; display: none; padding-top: $gutter-spacing-sm; @@ -101,7 +101,7 @@ } } -.navigation, +.site-nav, .site-header, .site-footer { @@ -112,7 +112,7 @@ } } -.navigation { +.site-nav { @include container; @include mq(md) { diff --git a/_sass/navigation.scss b/_sass/navigation.scss index c774904..2686350 100644 --- a/_sass/navigation.scss +++ b/_sass/navigation.scss @@ -68,7 +68,7 @@ // Small screen nav -.main-nav { +.site-nav { display: none; &.nav-open { diff --git a/_sass/search.scss b/_sass/search.scss index bef2df7..cf56680 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -68,7 +68,7 @@ order: 1; } -.search-results-wrap { +.search-results { position: absolute; z-index: 100; display: none; diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index aadbf82..742b0d7 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -24,17 +24,17 @@ 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'); + const siteNav = document.getElementById('site-nav'); + const mainHeader = document.getElementById('main-header'); + const navTrigger = document.getElementById('site-nav-trigger'); jtd.addEvent(navTrigger, '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'); + siteNav.classList.toggle('nav-open'); + mainHeader.classList.toggle('nav-open'); navTrigger.classList.toggle('nav-open'); navTrigger.innerText = textToggle; navTrigger.setAttribute('data-text-toggle', text); @@ -88,8 +88,8 @@ function initSearch() { function searchResults(index, data) { var index = index; var docs = data; - var searchInput = document.querySelector('.js-search-input'); - var searchResults = document.querySelector('.js-search-results'); + var searchInput = document.getElementById('search-input'); + var searchResults = document.getElementById('search-results'); function hideResults() { searchResults.innerHTML = ''; @@ -275,8 +275,8 @@ function initSearch() { } function pageFocus() { - var mainContent = document.querySelector('.js-main-content'); - mainContent.focus(); + var mainWrap = document.getElementById('main-wrap'); + mainWrap.focus(); } // Document ready From ec420a385baed20446555cb75057182e246c3047 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sun, 21 Jul 2019 16:55:34 +0200 Subject: [PATCH 04/64] Removed hardcoded styling from layout, improved aux nav (cherry picked from commit fd3c68cd1a39e059180c35c1d56ffa33ef4dfde4) --- _layouts/default.html | 20 +++++++++++--------- _sass/layout.scss | 5 ++++- _sass/navigation.scss | 18 ++++++++++++++++++ 3 files changed, 33 insertions(+), 10 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index 8bf647d..3e84703 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -12,13 +12,13 @@ layout: table_wrappers
{% include title.html %} - +
-
@@ -34,17 +34,19 @@ layout: table_wrappers
{% endif %} {% if site.aux_links != nil %} - + {% endif %}
{% unless page.url == "/" %} {% if page.parent %} -
-
+
{% unless page.url == "/" %} {% if page.parent %}
- {% if site.search_enabled != false %} - {% if site.search.button %} - - - + {% if site.search_enabled != false %} + {% if site.search.button %} + + + + {% endif %} + +
{% endif %} - -
- {% endif %} - +
diff --git a/_sass/search.scss b/_sass/search.scss index b9b4fe0..fb0ae74 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -21,12 +21,21 @@ .search-input-wrap { position: relative; + z-index: 1; height: $sp-8; + border-radius: $border-radius; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); + overflow: hidden; transition: height linear #{$transition-duration / 2}; @include mq(md) { + position: absolute; + width: 100%; + max-width: $search-results-width; height: 100% !important; - transition: none; + border-radius: 0; + box-shadow: none; + transition: width ease $transition-duration; } } @@ -43,20 +52,16 @@ border-right: 0; border-bottom: 0; border-left: 0; - border-radius: $border-radius; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); - @include fs-4; + border-radius: 0; + font-size: 16px; @include mq(md) { - max-width: $search-results-width; padding-top: $gutter-spacing-sm; padding-bottom: $gutter-spacing-sm; padding-left: #{$gutter-spacing + $sp-5}; background-color: $body-background-color; - border-radius: 0; - box-shadow: none; - transition: padding-left linear #{$transition-duration / 2}, width ease $transition-duration; - @include fs-3; + transition: padding-left linear #{$transition-duration / 2}; + font-size: 14px; } &:focus { @@ -100,6 +105,7 @@ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); @include mq(md) { + top: 100%; width: $search-results-width; max-height: calc(100vh - 200%) !important; } @@ -265,15 +271,18 @@ .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; - border-radius: 0; - box-shadow: none; @include mq(md) { - width: $search-results-width; padding-left: #{$sp-4 * 1.25 + $sp-5}; } } @@ -295,20 +304,17 @@ transition: opacity ease $transition-duration, width 0s, height 0s; } - // stylelint-disable selector-max-type - - body { - overflow-y: hidden; - - @include mq(md) { - overflow-y: scroll; + @include mq(md) { + .main { + position: fixed; } } - @include mq(md) { - .main { - height: 100vh; - overflow-y: hidden; + .main-header { + padding-top: $sp-10; + + @include mq(md) { + padding-top: 0; } } } diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index ac24dd2..2753273 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -133,7 +133,9 @@ function searchLoaded(index, docs) { hideSearch(); } else { showSearch(); - window.scroll(0, window.scrollY + mainHeader.getBoundingClientRect().top); + // scroll search input into view, workaround for iOS Safari + window.scroll(0, -1); + setTimeout(function(){ window.scroll(0, 0); }, 0); } if (input === currentInput) { return; From b7a5458375c595e6de26373c6eb38b35bf109f12 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sat, 13 Jun 2020 22:37:39 +0200 Subject: [PATCH 56/64] Fixed fuzzy search hangs for long words --- assets/js/just-the-docs.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index 2753273..ca91555 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -157,12 +157,16 @@ function searchLoaded(index, docs) { }); if ((results.length == 0) && (input.length > 2)) { - results = index.query(function (query) { - var tokens = lunr.tokenizer(input) - query.term(tokens, { - editDistance: Math.round(Math.sqrt(input.length / 2 - 1)) + 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) { From 0421ab7f8234fe8f7e493151063ae50861ca66a7 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sat, 13 Jun 2020 22:44:30 +0200 Subject: [PATCH 57/64] Fixed stylelint --- _sass/search.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_sass/search.scss b/_sass/search.scss index fb0ae74..2a4d4e8 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -23,9 +23,9 @@ 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); - overflow: hidden; transition: height linear #{$transition-duration / 2}; @include mq(md) { @@ -47,21 +47,21 @@ 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; border-radius: 0; - font-size: 16px; @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}; - font-size: 14px; } &:focus { From 16628f2b8ef92a5378afd4797e504562e21a58d9 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sun, 14 Jun 2020 20:25:22 +0200 Subject: [PATCH 58/64] Improved search responsiveness for many results --- assets/js/just-the-docs.js | 325 ++++++++++++++++++++----------------- 1 file changed, 172 insertions(+), 153 deletions(-) diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index ca91555..da6c0b0 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -118,6 +118,7 @@ function searchLoaded(index, docs) { 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'); @@ -128,6 +129,8 @@ function searchLoaded(index, docs) { } function update() { + currentSearchIndex++; + var input = searchInput.value; if (input === '') { hideSearch(); @@ -180,161 +183,177 @@ function searchLoaded(index, docs) { resultsList.classList.add('search-results-list'); searchResults.appendChild(resultsList); - for (var i in results) { - var result = results[i]; - var doc = docs[result.ref]; + addResults(resultsList, results, 0, 10, 100, currentSearchIndex); + } - 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 = ''; - 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; - } - - 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; - } - if (nextSpace < 0) { - previewStart = 0; - ellipsesBefore = false; - break; - } - 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; - } - 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); - } - - 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 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); + } + + 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 = ''; + 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; + } + + 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; + } + if (nextSpace < 0) { + previewStart = 0; + ellipsesBefore = false; + break; + } + 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; + } + 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); + } + + 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) { From ed618caf707da8733066bbd8bb9e0628e876b9a5 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Mon, 15 Jun 2020 23:00:53 +0200 Subject: [PATCH 59/64] Fixed table of children --- _layouts/default.html | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index 860efe6..a40c0b7 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -100,13 +100,11 @@ layout: table_wrappers

Table of contents

    - {%- 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 %} - {% if child.parent == page.title and child.title != page.title and child.grand_parent == page.parent %} -
  • - {{ child.title }}{% if child.summary %} - {{ child.summary }}{% endif %} -
    • - {% endif %} +
  • + {{ child.title }}{% if child.summary %} - {{ child.summary }}{% endif %} +
    • {% endfor %}
{% endif %} From 1cf7d5aba911b2c8cec8ff027f2456f3ed9cf527 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Thu, 18 Jun 2020 22:39:58 +0200 Subject: [PATCH 60/64] Restored search.rake --- Rakefile | 1 + _config.yml | 2 +- assets/js/zzzz-search-data.json | 2 +- bin/just-the-docs | 16 ++++++++ docs/search.md | 14 +++++++ lib/tasks/search.rake | 72 +++++++++++++++++++++++++++++++++ 6 files changed, 105 insertions(+), 2 deletions(-) create mode 100644 Rakefile create mode 100644 bin/just-the-docs create mode 100644 lib/tasks/search.rake diff --git a/Rakefile b/Rakefile new file mode 100644 index 0000000..b8b42c4 --- /dev/null +++ b/Rakefile @@ -0,0 +1 @@ +Dir.glob('lib/tasks/*.rake').each {|r| import r} diff --git a/_config.yml b/_config.yml index 054d926..2736794 100644 --- a/_config.yml +++ b/_config.yml @@ -19,7 +19,7 @@ baseurl: "/just-the-docs" # the subpath of your site, e.g. /blog url: "https://pmarsceill.github.io" # the base hostname & protocol for your site, e.g. http://example.com permalink: pretty -exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "package.json", "package-lock.json", "script/", "LICENSE.txt", "README.md"] +exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "package.json", "package-lock.json", "script/", "LICENSE.txt", "lib/", "bin/", "README.md", "Rakefile"] # Set a path/url to a logo that will be displayed instead of the title #logo: "/assets/images/just-the-docs.png" diff --git a/assets/js/zzzz-search-data.json b/assets/js/zzzz-search-data.json index 225a764..0a6c3e5 100644 --- a/assets/js/zzzz-search-data.json +++ b/assets/js/zzzz-search-data.json @@ -55,4 +55,4 @@ permalink: /assets/js/search-data.json {%- endunless -%} {%- endif -%} {% endfor %} -} \ No newline at end of file +} diff --git a/bin/just-the-docs b/bin/just-the-docs new file mode 100644 index 0000000..5a62290 --- /dev/null +++ b/bin/just-the-docs @@ -0,0 +1,16 @@ +#!/usr/bin/env ruby + +gem_dir = File.expand_path("..",File.dirname(__FILE__)) +$LOAD_PATH.unshift gem_dir # Look in gem directory for resources first. +exec_type = ARGV[0] + +if exec_type == 'rake' then + require 'rake' + require 'pp' + pwd=Dir.pwd + Dir.chdir(gem_dir) # We'll load rakefile from the gem's dir. + Rake.application.init + Rake.application.load_rakefile + Dir.chdir(pwd) # Revert to original pwd for any path args passed to task. + Rake.application.invoke_task(ARGV[1]) +end diff --git a/docs/search.md b/docs/search.md index 32732b2..dbc03d6 100644 --- a/docs/search.md +++ b/docs/search.md @@ -109,3 +109,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/lib/tasks/search.rake b/lib/tasks/search.rake new file mode 100644 index 0000000..8e6305a --- /dev/null +++ b/lib/tasks/search.rake @@ -0,0 +1,72 @@ +namespace :search do + desc 'Generate the files needed for search functionality' + task :init do + puts 'Creating search data json file...' + mkdir_p 'assets/js' + touch 'assets/js/zzzz-search-data.json' + puts 'Done.' + puts 'Generating content...' + + File.open('assets/js/zzzz-search-data.json', 'w') do |f| + f.puts '--- +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 = \'\' -%} + {%- assign title = titleAndContent[0] | replace_first: \'>\', \'

\' | split: \'

\' -%} + {%- 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: \' Date: Thu, 25 Jun 2020 21:42:41 +0200 Subject: [PATCH 61/64] Fixed prettier style --- _sass/layout.scss | 13 +++++++++++-- _sass/navigation.scss | 22 ++++++++++++++-------- _sass/search.scss | 3 ++- 3 files changed, 27 insertions(+), 11 deletions(-) diff --git a/_sass/layout.scss b/_sass/layout.scss index 72e2dc3..70cb6a8 100644 --- a/_sass/layout.scss +++ b/_sass/layout.scss @@ -151,11 +151,20 @@ } .site-title:hover { - background-image: linear-gradient(-90deg, rgba($feedback-color, 1) 0%, rgba($feedback-color, 0.8) 80%, rgba($feedback-color, 0) 100%); + 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%); + background-image: linear-gradient( + -90deg, + rgba($feedback-color, 1) 0%, + rgba($feedback-color, 0.8) 100% + ); } // stylelint-disable selector-max-type diff --git a/_sass/navigation.scss b/_sass/navigation.scss index 32ac4b9..609390a 100644 --- a/_sass/navigation.scss +++ b/_sass/navigation.scss @@ -27,8 +27,7 @@ @if $nav-list-expander-right { padding-right: $nav-list-item-height-sm; padding-left: $gutter-spacing-sm; - } - @else { + } @else { padding-right: $gutter-spacing-sm; padding-left: $nav-list-item-height-sm; } @@ -39,8 +38,7 @@ @if $nav-list-expander-right { padding-right: $nav-list-item-height; padding-left: $gutter-spacing; - } - @else { + } @else { padding-right: $gutter-spacing; padding-left: $nav-list-item-height; } @@ -53,7 +51,12 @@ &:hover, &.active { - background-image: linear-gradient(-90deg, rgba($feedback-color, 1) 0%, rgba($feedback-color, 0.8) 80%, rgba($feedback-color, 0) 100%); + background-image: linear-gradient( + -90deg, + rgba($feedback-color, 1) 0%, + rgba($feedback-color, 0.8) 80%, + rgba($feedback-color, 0) 100% + ); } } @@ -80,7 +83,11 @@ } &:hover { - background-image: linear-gradient(-90deg, rgba($feedback-color, 1) 0%, rgba($feedback-color, 0.8) 100%); + background-image: linear-gradient( + -90deg, + rgba($feedback-color, 1) 0%, + rgba($feedback-color, 0.8) 100% + ); } @if $nav-list-expander-right { @@ -112,8 +119,7 @@ > .nav-list-expander svg { @if $nav-list-expander-right { transform: rotate(-90deg); - } - @else { + } @else { transform: rotate(90deg); } } diff --git a/_sass/search.scss b/_sass/search.scss index 2a4d4e8..647cdb8 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -256,7 +256,8 @@ 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; + transition: opacity ease $transition-duration, width 0s $transition-duration, + height 0s $transition-duration; } .search-active { From 868bb0e3ac740f34d1b14e64e462765dd3c39e60 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Thu, 25 Jun 2020 23:11:43 +0200 Subject: [PATCH 62/64] Apply suggestions from code review Co-authored-by: Patrick Marsceill --- docs/configuration.md | 4 ++-- docs/search.md | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/configuration.md b/docs/configuration.md index b93d601..f278714 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -56,9 +56,9 @@ search: # Display the relative url in search results # Supports true (default) or false rel_url: false - # Enable or disable the search button + # Enable or disable the search button that appears in the bottom right corner of every page # Supports true or false (default) - button: true + button: false ``` ## Aux links diff --git a/docs/search.md b/docs/search.md index dbc03d6..495884d 100644 --- a/docs/search.md +++ b/docs/search.md @@ -86,8 +86,10 @@ 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 +# Enable or disable the search button that appears in the bottom right corner of every page # Supports true or false (default) search.button: true ``` From 3f0b7254a25f2aca800f01a6e5dffcc947fc66c7 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Thu, 25 Jun 2020 23:19:24 +0200 Subject: [PATCH 63/64] Update _config.yml with default values --- _config.yml | 6 +++--- bin/just-the-docs | 0 docs/configuration.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) mode change 100644 => 100755 bin/just-the-docs diff --git a/_config.yml b/_config.yml index 2736794..20bf8a1 100644 --- a/_config.yml +++ b/_config.yml @@ -46,10 +46,10 @@ search: tokenizer_separator: /[\s/]+/ # Display the relative url in search results # Supports true (default) or false - rel_url: false - # Enable or disable the search button + 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: true + button: false # Enable or disable heading anchors heading_anchors: true diff --git a/bin/just-the-docs b/bin/just-the-docs old mode 100644 new mode 100755 diff --git a/docs/configuration.md b/docs/configuration.md index f278714..65471d2 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -55,7 +55,7 @@ search: tokenizer_separator: /[\s/]+/ # Display the relative url in search results # Supports true (default) or false - rel_url: 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 From 597c534279d59ebdeab00837ca2459410a83ff26 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Thu, 25 Jun 2020 23:48:24 +0200 Subject: [PATCH 64/64] Replaced svgs with feathericons.com --- _layouts/default.html | 26 ++++++++++++++++++-------- _sass/content.scss | 2 +- _sass/layout.scss | 2 +- _sass/navigation.scss | 4 ++-- _sass/search.scss | 6 +++--- 5 files changed, 25 insertions(+), 15 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index a40c0b7..1c0b215 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -8,25 +8,35 @@ layout: table_wrappers {% include head.html %} - + Link - + + + - Menu - + Search + + + - Search - + Menu + + + Expand - + + + Document - + + + diff --git a/_sass/content.scss b/_sass/content.scss index 965c9c8..5bf0ad5 100644 --- a/_sass/content.scss +++ b/_sass/content.scss @@ -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 70cb6a8..004cbe7 100644 --- a/_sass/layout.scss +++ b/_sass/layout.scss @@ -201,5 +201,5 @@ body { .icon { width: $sp-5; height: $sp-5; - fill: $link-color; + color: $link-color; } diff --git a/_sass/navigation.scss b/_sass/navigation.scss index 609390a..0417b4c 100644 --- a/_sass/navigation.scss +++ b/_sass/navigation.scss @@ -71,7 +71,7 @@ padding-right: #{$nav-list-item-height-sm / 4}; padding-bottom: #{$nav-list-item-height-sm / 4}; padding-left: #{$nav-list-item-height-sm / 4}; - fill: $link-color; + color: $link-color; @include mq(md) { width: $nav-list-item-height; @@ -110,7 +110,7 @@ } .nav-list-expander { - fill: $nav-child-link-color; + color: $nav-child-link-color; } } } diff --git a/_sass/search.scss b/_sass/search.scss index 647cdb8..8a7f410 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -68,7 +68,7 @@ outline: 0; + .search-label .search-icon { - fill: $link-color; + color: $link-color; } } } @@ -88,7 +88,7 @@ width: #{$sp-4 * 1.2}; height: #{$sp-4 * 1.2}; align-self: center; - fill: $grey-dk-000; + color: $grey-dk-000; } } @@ -171,7 +171,7 @@ width: $sp-4; height: $sp-4; margin-right: $sp-2; - fill: $link-color; + color: $link-color; flex-shrink: 0; }