From b3f52fedad707ef820cafa5b775146f2ebddbabc Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sat, 4 May 2019 21:59:33 +0200 Subject: [PATCH 01/27] Added html compression --- _config.yml | 10 +++++++++- _includes/head.html | 10 +++++----- _layouts/default.html | 4 ++++ _layouts/vendor/compress.html | 10 ++++++++++ 4 files changed, 28 insertions(+), 6 deletions(-) create mode 100644 _layouts/vendor/compress.html diff --git a/_config.yml b/_config.yml index 4b93827..f202cdb 100644 --- a/_config.yml +++ b/_config.yml @@ -37,4 +37,12 @@ color_scheme: nil ga_tracking: UA-2709176-10 plugins: - - jekyll-seo-tag \ No newline at end of file + - jekyll-seo-tag + +compress_html: + clippings: all + comments: all + endings: all + startings: [] + blank_lines: false + profile: false \ No newline at end of file diff --git a/_includes/head.html b/_includes/head.html index 13cdbaf..0789ea5 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -6,13 +6,13 @@ {{ page.title }} - {{ site.title }} {% if page.description %} - + {% endif %} {% endif %} - + - + {% if site.ga_tracking != nil %} + {% endif %} - + diff --git a/_layouts/default.html b/_layouts/default.html index 2d5fe6b..c2d1c99 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,3 +1,7 @@ +--- +layout: vendor/compress +--- + diff --git a/_layouts/vendor/compress.html b/_layouts/vendor/compress.html new file mode 100644 index 0000000..bb34487 --- /dev/null +++ b/_layouts/vendor/compress.html @@ -0,0 +1,10 @@ +--- +# Jekyll layout that compresses HTML +# v3.1.0 +# http://jch.penibelst.de/ +# © 2014–2015 Anatol Broder +# MIT License +--- + +{% capture _LINE_FEED %} +{% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment or site.compress_html.ignore.envs == "all" %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "" %}{% endif %}{% unless _pre_before contains "" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " ;; ;" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %}
Step Bytes
raw {{ content | size }}{% if _profile_endings %}
endings {{ _profile_endings }}{% endif %}{% if _profile_startings %}
startings {{ _profile_startings }}{% endif %}{% if _profile_comments %}
comments {{ _profile_comments }}{% endif %}{% if _profile_collapse %}
collapse {{ _profile_collapse }}{% endif %}{% if _profile_clippings %}
clippings {{ _profile_clippings }}{% endif %}
{% endif %}{% endif %} From f4ee29d0c33eef84ffb91e27c36ea9f7c4a7c6d6 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sat, 4 May 2019 22:20:36 +0200 Subject: [PATCH 02/27] Fixed script tags --- docs/configuration.md | 12 ++++++------ docs/customization.md | 12 ++++++------ 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/configuration.md b/docs/configuration.md index 4a4caef..095fc20 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -47,16 +47,16 @@ color_scheme: "dark" diff --git a/docs/customization.md b/docs/customization.md index f3fe1c0..11d4526 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -35,16 +35,16 @@ color_scheme: "dark" From 03e2345833f92d6f3841db66bffd0f2ed8461bf2 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sat, 4 May 2019 22:22:56 +0200 Subject: [PATCH 03/27] Added anchor headings --- _includes/vendor/anchor_headings.html | 100 ++++++++++++++++++++++++++ _layouts/anchor_headings.html | 5 ++ _layouts/default.html | 2 +- _sass/anchor_headings.scss | 12 ++++ assets/css/just-the-docs.scss | 1 + 5 files changed, 119 insertions(+), 1 deletion(-) create mode 100755 _includes/vendor/anchor_headings.html create mode 100644 _layouts/anchor_headings.html create mode 100644 _sass/anchor_headings.scss diff --git a/_includes/vendor/anchor_headings.html b/_includes/vendor/anchor_headings.html new file mode 100755 index 0000000..25397df --- /dev/null +++ b/_includes/vendor/anchor_headings.html @@ -0,0 +1,100 @@ +{% capture headingsWorkspace %} + {% comment %} + Version 1.0.3 + https://github.com/allejo/jekyll-anchor-headings + + "Be the pull request you wish to see in the world." ~Ben Balter + + Usage: + {% include anchor_headings.html html=content %} + + Parameters: + * html (string) - the HTML of compiled markdown generated by kramdown in Jekyll + + Optional Parameters: + * beforeHeading (bool) : false - Set to true if the anchor should be placed _before_ the heading's content + * anchorBody (string) : '' - The content that will be placed inside the anchor; the `%heading%` placeholder is available + * anchorClass (string) : '' - The class(es) that will be used for each anchor. Separate multiple classes with a space + * anchorTitle (string) : '' - The `title` attribute that will be used for anchors + * h_min (int) : 1 - The minimum header level to build an anchor for; any header lower than this value will be ignored + * h_max (int) : 6 - The maximum header level to build an anchor for; any header greater than this value will be ignored + * bodyPrefix (string) : '' - Anything that should be inserted inside of the heading tag _before_ its anchor and content + * bodySuffix (string) : '' - Anything that should be inserted inside of the heading tag _after_ its anchor and content + + Output: + The original HTML with the addition of anchors inside of all of the h1-h6 headings. + {% endcomment %} + + {% assign minHeader = include.h_min | default: 1 %} + {% assign maxHeader = include.h_max | default: 6 %} + {% assign beforeHeading = include.beforeHeading %} + {% assign nodes = include.html | split: ' + {% if headerLevel == 0 %} + {% if nextChar != '<' and nextChar != '' %} + {% capture node %}' | first }}>{% endcapture %} + {% assign header = _workspace[0] | replace: _hAttrToStrip, '' %} + + + {% capture anchor %}{% endcapture %} + + {% if html_id and headerLevel >= minHeader and headerLevel <= maxHeader %} + {% capture anchor %}href="#{{ html_id}}"{% endcapture %} + + {% if include.anchorClass %} + {% capture anchor %}{{ anchor }} class="{{ include.anchorClass }}"{% endcapture %} + {% endif %} + + {% if include.anchorTitle %} + {% capture anchor %}{{ anchor }} title="{{ include.anchorTitle | replace: '%heading%', header }}"{% endcapture %} + {% endif %} + + {% capture anchor %}{{ include.anchorBody | replace: '%heading%', header | default: '' }}{% endcapture %} + + + {% if beforeHeading %} + {% capture anchor %}{{ anchor }} {% endcapture %} + {% else %} + {% capture anchor %} {{ anchor }}{% endcapture %} + {% endif %} + {% endif %} + + {% capture new_heading %} + diff --git a/_sass/anchor_headings.scss b/_sass/anchor_headings.scss new file mode 100644 index 0000000..da55202 --- /dev/null +++ b/_sass/anchor_headings.scss @@ -0,0 +1,12 @@ +a.anchor_heading { + visibility: hidden; +} + +h1:hover > a.anchor_heading, +h2:hover > a.anchor_heading, +h3:hover > a.anchor_heading, +h4:hover > a.anchor_heading, +h5:hover > a.anchor_heading, +h6:hover > a.anchor_heading { + visibility: visible; +} \ No newline at end of file diff --git a/assets/css/just-the-docs.scss b/assets/css/just-the-docs.scss index 6a2eefa..b6d17d5 100644 --- a/assets/css/just-the-docs.scss +++ b/assets/css/just-the-docs.scss @@ -41,4 +41,5 @@ @import "./search"; @import "./tables"; @import "./code"; +@import "./anchor_headings"; @import "./utilities/utilities"; From 94f2aaf9648992ffcb72368cbef4e27ce92badbb Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sat, 4 May 2019 23:18:56 +0200 Subject: [PATCH 04/27] Added table wrappers, fixed anchor headings --- _layouts/anchor_headings.html | 5 ----- _layouts/default.html | 5 +++-- _layouts/table_wrappers.html | 7 +++++++ _sass/tables.scss | 11 ++++++----- 4 files changed, 16 insertions(+), 12 deletions(-) delete mode 100644 _layouts/anchor_headings.html create mode 100644 _layouts/table_wrappers.html diff --git a/_layouts/anchor_headings.html b/_layouts/anchor_headings.html deleted file mode 100644 index efec628..0000000 --- a/_layouts/anchor_headings.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -layout: vendor/compress ---- - -{% include vendor/anchor_headings.html html=content anchorBody="#" anchorClass="anchor_heading" %} \ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index 0b3928d..0ee5dcc 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,5 +1,5 @@ --- -layout: anchor_headings +layout: table_wrappers --- @@ -57,7 +57,8 @@ layout: anchor_headings {% endif %} {% endunless %}
- {{ content }} + + {% include vendor/anchor_headings.html html=content anchorBody="#" anchorClass="anchor_heading" %} {% if page.has_children == true and page.has_toc != false %}
diff --git a/_layouts/table_wrappers.html b/_layouts/table_wrappers.html new file mode 100644 index 0000000..cc6187a --- /dev/null +++ b/_layouts/table_wrappers.html @@ -0,0 +1,7 @@ +--- +layout: vendor/compress +--- + +{% assign content_ = content | replace: '', '
' %} +{{ content_ }} \ No newline at end of file diff --git a/_sass/tables.scss b/_sass/tables.scss index 39bc0dc..c5be606 100644 --- a/_sass/tables.scss +++ b/_sass/tables.scss @@ -3,18 +3,19 @@ // // stylelint-disable max-nesting-depth, selector-no-type, selector-max-type -table { +.table-wrapper { display: block; width: 100%; max-width: 100%; margin-bottom: $sp-5; overflow-x: auto; - border-collapse: separate; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05); +} - @include mq(sm) { - display: table; - } +table { + display: table; + min-width: 100%; + border-collapse: separate; } th, From 0142d2874b44b2cf9dc5b8d74e4ff500381e0f88 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Fri, 10 May 2019 05:08:57 +0200 Subject: [PATCH 05/27] Enabled customization of html head --- _includes/head.html | 2 ++ _includes/head_custom.html | 0 2 files changed, 2 insertions(+) create mode 100644 _includes/head_custom.html diff --git a/_includes/head.html b/_includes/head.html index 0789ea5..47e2491 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -31,4 +31,6 @@ {% seo %} + +{% include head_custom.html %} diff --git a/_includes/head_custom.html b/_includes/head_custom.html new file mode 100644 index 0000000..e69de29 From 8c603aac1e10f7cbc6e70e74465b1fbcdd74ca24 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sun, 12 May 2019 14:12:00 +0200 Subject: [PATCH 06/27] Improved layout, unified spacing/font-sizes/border-radius/box-shadow --- _includes/title.html | 1 + _layouts/default.html | 82 ++++++++++++++++--------------- _sass/buttons.scss | 2 +- _sass/layout.scss | 91 +++++++++++++++++++++++++---------- _sass/navigation.scss | 35 ++------------ _sass/search.scss | 74 ++++++++++++++-------------- _sass/support/_variables.scss | 11 +---- _sass/tables.scss | 29 +---------- assets/js/just-the-docs.js | 10 ++-- 9 files changed, 157 insertions(+), 178 deletions(-) create mode 100644 _includes/title.html diff --git a/_includes/title.html b/_includes/title.html new file mode 100644 index 0000000..f6d5669 --- /dev/null +++ b/_includes/title.html @@ -0,0 +1 @@ +{{ site.title }} \ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index 0ee5dcc..3a18b58 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -10,8 +10,10 @@ layout: table_wrappers
- {{ site.title }} - +
+ {% include title.html %} + Menu +
{% include nav.html %}
@@ -20,10 +22,10 @@ layout: table_wrappers
-
-
+
+
{% if site.search_enabled != nil %} -
+
Search @@ -32,48 +34,48 @@ layout: table_wrappers
{% endif %} {% if site.aux_links != nil %} -
-
-
- {% unless page.url == "/" %} - {% if page.parent %} - - {% endif %} - {% endunless %} -
- - {% include vendor/anchor_headings.html html=content anchorBody="#" anchorClass="anchor_heading" %} - - {% 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 %} + {% endfor %} + + {% endif %} +
diff --git a/_sass/buttons.scss b/_sass/buttons.scss index 05db0ed..57660e0 100644 --- a/_sass/buttons.scss +++ b/_sass/buttons.scss @@ -21,7 +21,7 @@ cursor: pointer; background-color: $base-button-color; border-width: 0; - border-radius: 3px; + border-radius: $border-radius; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); appearance: none; diff --git a/_sass/layout.scss b/_sass/layout.scss index ddd56fa..068b6ab 100644 --- a/_sass/layout.scss +++ b/_sass/layout.scss @@ -19,17 +19,13 @@ z-index: 100; display: flex; flex-wrap: wrap; - padding-top: $gutter-spacing-sm; - padding-bottom: $gutter-spacing-sm; background-color: $sidebar-color; @include mq(md) { flex-wrap: nowrap; position: absolute; - width: $nav-width + 16px; + width: $nav-width; height: 100%; - padding-top: $gutter-spacing * 2; - padding-bottom: 0; flex-direction: column; border-right: $border $border-color; align-items: flex-end; @@ -48,7 +44,6 @@ left: 0; width: 100%; height: 100%; - min-height: 600px; -webkit-overflow-scrolling: touch; overflow-x: hidden; overflow-y: scroll; @@ -56,20 +51,13 @@ } .main-content { - padding-top: $gutter-spacing-sm; - @include container; - @include mq(md) { position: relative; max-width: $content-width; - padding-top: $gutter-spacing; - padding-bottom: $gutter-spacing; - padding-left: $gutter-spacing * 1.5; margin-left: $nav-width; } @include mq(lg) { - padding-left: $gutter-spacing; margin-left: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width}); } } @@ -78,48 +66,99 @@ outline: none; } +.page { + @include container; + padding-top: $gutter-spacing-sm; + padding-bottom: $gutter-spacing-sm; + + @include mq(md) { + padding-top: $gutter-spacing; + padding-bottom: $gutter-spacing; + } +} + .page-header { + @include container; + display: none; + padding-top: $gutter-spacing-sm; + padding-bottom: $gutter-spacing-sm; background-color: $sidebar-color; @include mq(md) { background-color: $body-background-color; + display: flex; + justify-content: flex-end; + height: $header-height; + border-bottom: $border $border-color; } - .main-content { - padding-top: 0; + &.nav-open { + display: block; @include mq(md) { display: flex; - justify-content: flex-end; - height: 60px; - padding-top: $sp-4; - padding-bottom: $sp-4; - border-bottom: $border $border-color; } } } .navigation, -.site-title, +.site-header, .site-footer { - @include container; - width: 100%; @include mq(lg) { - width: $nav-width + 32px; + width: $nav-width; } } .navigation { + @include container; + @include mq(md) { padding-top: $sp-8; + padding-bottom: $gutter-spacing-sm; overflow-y: auto; flex: 1 1 auto; } } +.site-header { + display: flex; + align-items: center; + + @include mq(md) { + height: $header-height; + min-height: $header-height; + max-height: $header-height; + z-index: 101; + border-bottom: $border $border-color; + } +} + +.site-title { + @include container; + flex-grow: 1; + display: flex; + height: 100%; + align-items: center; + padding-top: $gutter-spacing-sm; + padding-bottom: $gutter-spacing-sm; + color: $body-heading-color; + @include fs-6; +} + +.site-button { + height: 100%; + padding: $gutter-spacing-sm; + display: flex; + align-items: center; + + @include mq(md) { + display: none; + } +} + // stylelint-disable selector-max-type body { @@ -135,15 +174,15 @@ body { // stylelint-enable selector-max-type .site-footer { + @include container; position: absolute; bottom: 0; padding-top: $sp-4; padding-bottom: $sp-4; + background-color: $sidebar-color; @include mq(md) { position: static; - align-self: flex-end; justify-self: end; - background-color: $sidebar-color; } } diff --git a/_sass/navigation.scss b/_sass/navigation.scss index 364c569..283f812 100644 --- a/_sass/navigation.scss +++ b/_sass/navigation.scss @@ -2,32 +2,11 @@ // Main nav, breadcrumb, etc... // -.site-title { - display: block; - flex: 1 1 auto; - color: $body-heading-color; - background-color: $sidebar-color; - - @include mq(md) { - position: absolute; - top: 0; - right: 0; - z-index: 101; - height: 60px; - padding-top: $sp-4; - border-bottom: $border $border-color; - } -} - .navigation-list { padding: 0; - margin-top: $sp-4; + margin-top: 0; margin-bottom: 0; list-style: none; - - @include mq(md) { - margin-top: 0; - } } .navigation-list-child-list { @@ -90,8 +69,7 @@ // Small screen nav -.main-nav, -.aux-nav { +.main-nav { display: none; &.nav-open { @@ -102,13 +80,8 @@ } } -.navigation-list-toggle { - position: absolute; - right: $sp-4; - - @include mq(md) { - display: none !important; - } +.aux-nav { + align-self: center; } // Breadcrumb nav diff --git a/_sass/search.scss b/_sass/search.scss index 32ec1db..6485c03 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -5,51 +5,35 @@ .search { position: relative; z-index: 99; - display: none; flex-grow: 1; - padding: $sp-2; + height: 100%; margin-bottom: $sp-3; - background-color: $white; - border-radius: 3px; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 3px 10px rgba(0, 0, 0, 0.05); @include mq(md) { - display: block; - padding-top: $sp-1; - padding-right: 0; - padding-bottom: 0; - padding-left: 0; margin-bottom: 0; - background-color: transparent; - box-shadow: none; - } - - &.nav-open { - display: block; - } -} - -.search-results-wrap { - display: none; - - &.active { - position: absolute; - top: $sp-1; - z-index: 100; - display: block; - width: 300px; - margin-top: $gutter-spacing; - background: lighten($body-background-color, 1%); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05); } } .search-input-wrap { display: flex; + height: 100%; background-color: $body-background-color; + padding: $sp-2; + 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 mq(md) { + padding-top: 0; + padding-right: 0; + padding-bottom: 0; + padding-left: 0; + border-radius: 0; + box-shadow: none; + } } .search-input { + align-self: center; width: 100%; padding-top: $sp-1; padding-bottom: $sp-1; @@ -69,14 +53,10 @@ } } - @include fs-5; - - @include mq(sm) { - @include fs-3; - } + @include fs-4; @include mq(md) { - @include fs-2; + @include fs-3; } } @@ -87,12 +67,30 @@ order: 1; } +.search-results-wrap { + position: absolute; + display: none; + z-index: 100; + width: 100%; + border-radius: $border-radius; + background: lighten($body-background-color, 1%); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); + + &.active { + display: block; + } +} + .search-results-list { padding-left: 0; margin-top: $sp-1; margin-bottom: $sp-1; list-style: none; - @include fs-3; + @include fs-4; + + @include mq(md) { + @include fs-3; + } } .search-results-list-item { diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss index 8a09eda..59a7c4e 100644 --- a/_sass/support/_variables.scss +++ b/_sass/support/_variables.scss @@ -118,13 +118,6 @@ $border-color: $grey-lt-100 !default; $gutter-spacing: $sp-6 !default; $gutter-spacing-sm: $sp-4 !default; -$nav-width: 232px !default; +$nav-width: 264px !default; $content-width: 800px !default; - -$media-queries: ( - xs: 320px, - sm: 500px, - md: 740px, - lg: 800px, - xl: 1316px -) !default; +$header-height: 60px !default; diff --git a/_sass/tables.scss b/_sass/tables.scss index c5be606..08edee2 100644 --- a/_sass/tables.scss +++ b/_sass/tables.scss @@ -9,7 +9,8 @@ max-width: 100%; margin-bottom: $sp-5; overflow-x: auto; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05); + border-radius: $border-radius; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); } table { @@ -35,38 +36,12 @@ td { } } -thead, -tbody:first-child { - tr { - &:first-of-type { - th, - td { - &:first-of-type { - border-top-left-radius: $border-radius; - } - - &:last-of-type { - border-top-right-radius: $border-radius; - } - } - } - } -} - tbody { tr { &:last-of-type { th, td { border-bottom: 0; - - &:first-of-type { - border-bottom-left-radius: $border-radius; - } - - &:last-of-type { - border-bottom-right-radius: $border-radius; - } } } } diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index b3fca27..bc0a635 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -10,19 +10,17 @@ function removeEvent(el, type, handler) { // Show/hide mobile menu function toggleNav(){ - const nav = document.querySelector('.js-main-nav'); - const auxNav = document.querySelector('.js-aux-nav'); + const mainNav = document.querySelector('.js-main-nav'); + const pageHeader = document.querySelector('.js-page-header'); const navTrigger = document.querySelector('.js-main-nav-trigger'); - const search = document.querySelector('.js-search'); addEvent(navTrigger, 'click', function(){ var text = navTrigger.innerText; var textToggle = navTrigger.getAttribute('data-text-toggle'); - nav.classList.toggle('nav-open'); - auxNav.classList.toggle('nav-open'); + mainNav.classList.toggle('nav-open'); + pageHeader.classList.toggle('nav-open'); navTrigger.classList.toggle('nav-open'); - search.classList.toggle('nav-open'); navTrigger.innerText = textToggle; navTrigger.setAttribute('data-text-toggle', text); textToggle = text; From e9f016ac0f691112e8e6b192ddfeb096581da6bf Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sun, 12 May 2019 21:49:19 +0200 Subject: [PATCH 07/27] Improved responsiveness of sidebar --- _sass/layout.scss | 4 ++-- _sass/support/_variables.scss | 25 +++++++++++++------------ assets/js/just-the-docs.js | 3 ++- 3 files changed, 17 insertions(+), 15 deletions(-) diff --git a/_sass/layout.scss b/_sass/layout.scss index 068b6ab..0dc4c08 100644 --- a/_sass/layout.scss +++ b/_sass/layout.scss @@ -24,7 +24,7 @@ @include mq(md) { flex-wrap: nowrap; position: absolute; - width: $nav-width; + width: $nav-width-md; height: 100%; flex-direction: column; border-right: $border $border-color; @@ -54,7 +54,7 @@ @include mq(md) { position: relative; max-width: $content-width; - margin-left: $nav-width; + margin-left: $nav-width-md; } @include mq(lg) { diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss index 59a7c4e..4e1bf8d 100644 --- a/_sass/support/_variables.scss +++ b/_sass/support/_variables.scss @@ -61,18 +61,6 @@ $link-color: $purple-000 !default; $btn-primary-color: $purple-100 !default; $base-button-color: #f7f7f7 !default; -// -// Media queries in pixels -// - -$media-queries: ( - xs: 320px, - sm: 500px, - md: 740px, - lg: 1120px, - xl: 1400px -) !default; - // // Spacing // @@ -119,5 +107,18 @@ $border-color: $grey-lt-100 !default; $gutter-spacing: $sp-6 !default; $gutter-spacing-sm: $sp-4 !default; $nav-width: 264px !default; +$nav-width-md: 248px !default; $content-width: 800px !default; $header-height: 60px !default; + +// +// Media queries in pixels +// + +$media-queries: ( + xs: 320px, + sm: 500px, + md: $content-width, + lg: $content-width + $nav-width, + xl: 1400px +) !default; diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index bc0a635..a8ae98e 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -14,7 +14,8 @@ function toggleNav(){ const pageHeader = document.querySelector('.js-page-header'); const navTrigger = document.querySelector('.js-main-nav-trigger'); - addEvent(navTrigger, 'click', function(){ + addEvent(navTrigger, 'click', function(e){ + e.preventDefault(); var text = navTrigger.innerText; var textToggle = navTrigger.getAttribute('data-text-toggle'); From e64a6aa239b4181c083d376acb5628c52dfe45d6 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sat, 18 May 2019 23:07:02 +0200 Subject: [PATCH 08/27] Updated lunr.js, added search navigation and preview/highlighting --- _sass/layout.scss | 1 - _sass/search.scss | 54 +++++++- _sass/support/_variables.scss | 2 + assets/js/just-the-docs.js | 225 +++++++++++++++++++++++++--------- assets/js/vendor/lunr.min.js | 6 +- 5 files changed, 219 insertions(+), 69 deletions(-) diff --git a/_sass/layout.scss b/_sass/layout.scss index 0dc4c08..e92584c 100644 --- a/_sass/layout.scss +++ b/_sass/layout.scss @@ -179,7 +179,6 @@ body { bottom: 0; padding-top: $sp-4; padding-bottom: $sp-4; - background-color: $sidebar-color; @include mq(md) { position: static; diff --git a/_sass/search.scss b/_sass/search.scss index 6485c03..1bb0018 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -79,6 +79,10 @@ &.active { display: block; } + + @include mq(md) { + width: $search-results-width; + } } .search-results-list { @@ -98,15 +102,57 @@ margin: 0; } -.search-results-link { +.search-result { display: block; padding-top: $sp-1; - padding-right: $sp-3; padding-bottom: $sp-1; padding-left: $sp-3; + padding-right: $sp-3; &:hover { - color: $body-heading-color; - background-color: darken($body-background-color, 2%); + background-color: darken($body-background-color, 5%); + } + + @include mq(md) { + padding-left: $sp-4; + padding-right: $sp-4; + + &.active { + background-color: darken($body-background-color, 5%); + } + } + + .search-result-title { + display: block; + padding-top: $sp-2; + padding-bottom: $sp-2; + padding-right: $sp-4; + + @include mq(sm) { + display: inline-block; + width: 40%; + vertical-align: top; + } + } + + .search-result-preview { + display: block; + padding-top: $sp-2; + padding-bottom: $sp-2; + padding-left: $sp-4; + border-left: $border; + border-left-color: $border-color; + color: $search-result-preview-color; + @include fs-2; + + @include mq(sm) { + display: inline-block; + width: 60%; + } + } + + .search-result-highlight { + color: $link-color; + font-weight: bold; } } diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss index 4e1bf8d..3605a44 100644 --- a/_sass/support/_variables.scss +++ b/_sass/support/_variables.scss @@ -56,6 +56,7 @@ $code-background-color: $grey-lt-000 !default; $body-text-color: $grey-dk-100 !default; $body-heading-color: $grey-dk-300 !default; +$search-result-preview-color: $grey-dk-100 !default; $nav-child-link-color: $grey-dk-100 !default; $link-color: $purple-000 !default; $btn-primary-color: $purple-100 !default; @@ -110,6 +111,7 @@ $nav-width: 264px !default; $nav-width-md: 248px !default; $content-width: 800px !default; $header-height: 60px !default; +$search-results-width: 488px !default; // // Media queries in pixels diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index a8ae98e..f5d7cc3 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -31,13 +31,6 @@ function toggleNav(){ // Site search function initSearch() { - var index = lunr(function () { - this.ref('id'); - this.field('title', { boost: 20 }); - this.field('content', { boost: 10 }); - this.field('url'); - }); - // Get the generated search_data.json file so lunr.js can search it locally. sc = document.getElementsByTagName("script"); @@ -62,17 +55,25 @@ function initSearch() { if (request.status >= 200 && request.status < 400) { // Success! var data = JSON.parse(request.responseText); - var keys = Object.keys(data); - for(var i in data) { - index.add({ - id: data[i].id, - title: data[i].title, - content: data[i].content, - url: data[i].url - }); - } - searchResults(data); + var index = lunr(function () { + this.ref('id'); + this.field('title', { boost: 200 }); + this.field('content', { boost: 2 }); + this.field('url'); + this.metadataWhitelist = ['position'] + + for (var i in data) { + this.add({ + id: data[i].id, + title: data[i].title, + content: data[i].content, + url: data[i].url + }); + } + }); + + searchResults(index, data); } else { // We reached our target server, but it returned an error console.log('Error loading ajax request. Request status:' + request.status); @@ -86,66 +87,168 @@ function initSearch() { request.send(); - function searchResults(dataStore) { + 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 store = dataStore; function hideResults() { searchResults.innerHTML = ''; searchResults.classList.remove('active'); } - addEvent(searchInput, 'keyup', function(e){ - var query = this.value; - - searchResults.innerHTML = ''; - searchResults.classList.remove('active'); - - if (query === '') { - hideResults(); - } else { - var results = index.search(query); - - if (results.length > 0) { - searchResults.classList.add('active'); - var resultsList = document.createElement('ul'); - searchResults.appendChild(resultsList); - - for (var i in results) { - var resultsListItem = document.createElement('li'); - var resultsLink = document.createElement('a'); - var resultsUrlDesc = document.createElement('span'); - var resultsUrl = store[results[i].ref].url; - var resultsRelUrl = store[results[i].ref].relUrl; - var resultsTitle = store[results[i].ref].title; - - resultsLink.setAttribute('href', resultsUrl); - resultsLink.innerText = resultsTitle; - resultsUrlDesc.innerText = resultsRelUrl; - - resultsList.classList.add('search-results-list'); - resultsListItem.classList.add('search-results-list-item'); - resultsLink.classList.add('search-results-link'); - resultsUrlDesc.classList.add('fs-2','text-grey-dk-000','d-block'); - - resultsList.appendChild(resultsListItem); - resultsListItem.appendChild(resultsLink); - resultsLink.appendChild(resultsUrlDesc); + addEvent(searchInput, 'keydown', function(e){ + switch (e.keyCode) { + case 38: // arrow up + var active = document.querySelector('.search-result.active'); + if (active.parentElement.previousSibling) { + var previous = active.parentElement.previousSibling.querySelector('.search-result'); + active.classList.remove('active'); + previous.classList.add('active'); } - } + return; + case 40: // arrow down + var active = document.querySelector('.search-result.active'); + if (active.parentElement.nextSibling) { + var next = active.parentElement.nextSibling.querySelector('.search-result'); + active.classList.remove('active'); + next.classList.add('active'); + } + return; + case 13: // enter + var active = document.querySelector('.search-result.active'); + active.click(); + return; + } + }); - // When esc key is pressed, hide the results and clear the field - if (e.keyCode == 27) { + addEvent(searchInput, 'keyup', function(e){ + switch (e.keyCode) { + case 27: // When esc key is pressed, hide the results and clear the field hideResults(); searchInput.value = ''; + return; + case 38: // arrow up + case 40: // arrow down + case 13: // enter + return; + } + + hideResults(); + + var input = this.value; + if (input === '') { + return; + } + + var results = index.query(function (query) { + var tokens = lunr.tokenizer(input) + query.term(tokens, { + boost: 10 + }); + query.term(tokens, { + wildcard: lunr.Query.wildcard.TRAILING + }); + }); + + if (results.length > 0) { + searchResults.classList.add('active'); + var resultsList = document.createElement('ul'); + resultsList.classList.add('search-results-list'); + searchResults.appendChild(resultsList); + + for (var i in results) { + var result = results[i]; + var doc = docs[result.ref]; + + var resultsListItem = document.createElement('li'); + resultsListItem.classList.add('search-results-list-item'); + resultsList.appendChild(resultsListItem); + + var resultLink = document.createElement('a'); + resultLink.classList.add('search-result'); + if (i == 0) { + resultLink.classList.add('active'); + } + resultLink.setAttribute('href', doc.url); + resultsListItem.appendChild(resultLink); + + var resultTitle = document.createElement('div'); + resultTitle.classList.add('search-result-title'); + resultTitle.innerText = doc.title; + resultLink.appendChild(resultTitle); + + var metadata = result.matchData.metadata; + var contentFound = false; + for (var j in metadata) { + if (metadata[j].title) { + var position = metadata[j].title.position[0]; + var start = position[0]; + var end = position[0] + position[1]; + resultTitle.innerHTML = doc.title.substring(0, start) + '' + doc.title.substring(start, end) + '' + doc.title.substring(end, doc.title.length); + + } else if (metadata[j].content && !contentFound) { + contentFound = true; + + var position = metadata[j].content.position[0]; + var start = position[0]; + var end = position[0] + position[1]; + var previewStart = start; + var previewEnd = end; + var ellipsesBefore = true; + var ellipsesAfter = true; + for (var k = 0; k < 3; k++) { + var nextSpace = doc.content.lastIndexOf(' ', previewStart - 2); + var nextDot = doc.content.lastIndexOf('.', previewStart - 2); + if ((nextDot > 0) && (nextDot > nextSpace)) { + previewStart = nextDot + 1; + ellipsesBefore = false; + break; + } + if (nextSpace < 0) { + previewStart = 0; + ellipsesBefore = false; + break; + } + previewStart = nextSpace + 1; + } + for (var k = 0; k < 10; k++) { + var nextSpace = doc.content.indexOf(' ', previewEnd + 1); + var nextDot = doc.content.indexOf('.', previewEnd + 1); + if ((nextDot > 0) && (nextDot < nextSpace)) { + previewEnd = nextDot + 1; + ellipsesAfter = false; + break; + } + if (nextSpace < 0) { + previewEnd = doc.content.length; + ellipsesAfter = false; + break; + } + previewEnd = nextSpace; + } + var preview = doc.content.substring(previewStart, start); + if (ellipsesBefore) { + preview = '... ' + preview; + } + preview += '' + doc.content.substring(start, end) + ''; + 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); + } + } } } }); - addEvent(searchInput, 'blur', function(){ - setTimeout(function(){ hideResults() }, 300); - }); + addEvent(searchInput, 'blur', hideResults); } } diff --git a/assets/js/vendor/lunr.min.js b/assets/js/vendor/lunr.min.js index 9960ccd..34b279d 100644 --- a/assets/js/vendor/lunr.min.js +++ b/assets/js/vendor/lunr.min.js @@ -1,6 +1,6 @@ /** - * lunr - http://lunrjs.com - A bit like Solr, but much smaller and not as bright - 1.0.0 - * Copyright (C) 2017 Oliver Nightingale + * lunr - http://lunrjs.com - A bit like Solr, but much smaller and not as bright - 2.3.6 + * Copyright (C) 2019 Oliver Nightingale * @license MIT */ -!function(){var t=function(e){var n=new t.Index;return n.pipeline.add(t.trimmer,t.stopWordFilter,t.stemmer),e&&e.call(n,n),n};t.version="1.0.0",t.utils={},t.utils.warn=function(t){return function(e){t.console&&console.warn&&console.warn(e)}}(this),t.utils.asString=function(t){return void 0===t||null===t?"":t.toString()},t.EventEmitter=function(){this.events={}},t.EventEmitter.prototype.addListener=function(){var t=Array.prototype.slice.call(arguments),e=t.pop(),n=t;if("function"!=typeof e)throw new TypeError("last argument must be a function");n.forEach(function(t){this.hasHandler(t)||(this.events[t]=[]),this.events[t].push(e)},this)},t.EventEmitter.prototype.removeListener=function(t,e){if(this.hasHandler(t)){var n=this.events[t].indexOf(e);this.events[t].splice(n,1),this.events[t].length||delete this.events[t]}},t.EventEmitter.prototype.emit=function(t){if(this.hasHandler(t)){var e=Array.prototype.slice.call(arguments,1);this.events[t].forEach(function(t){t.apply(void 0,e)})}},t.EventEmitter.prototype.hasHandler=function(t){return t in this.events},t.tokenizer=function(e){return arguments.length&&null!=e&&void 0!=e?Array.isArray(e)?e.map(function(e){return t.utils.asString(e).toLowerCase()}):e.toString().trim().toLowerCase().split(t.tokenizer.separator):[]},t.tokenizer.separator=/[\s\-]+/,t.tokenizer.load=function(t){var e=this.registeredFunctions[t];if(!e)throw new Error("Cannot load un-registered function: "+t);return e},t.tokenizer.label="default",t.tokenizer.registeredFunctions={"default":t.tokenizer},t.tokenizer.registerFunction=function(e,n){n in this.registeredFunctions&&t.utils.warn("Overwriting existing tokenizer: "+n),e.label=n,this.registeredFunctions[n]=e},t.Pipeline=function(){this._stack=[]},t.Pipeline.registeredFunctions={},t.Pipeline.registerFunction=function(e,n){n in this.registeredFunctions&&t.utils.warn("Overwriting existing registered function: "+n),e.label=n,t.Pipeline.registeredFunctions[e.label]=e},t.Pipeline.warnIfFunctionNotRegistered=function(e){var n=e.label&&e.label in this.registeredFunctions;n||t.utils.warn("Function is not registered with pipeline. This may cause problems when serialising the index.\n",e)},t.Pipeline.load=function(e){var n=new t.Pipeline;return e.forEach(function(e){var i=t.Pipeline.registeredFunctions[e];if(!i)throw new Error("Cannot load un-registered function: "+e);n.add(i)}),n},t.Pipeline.prototype.add=function(){var e=Array.prototype.slice.call(arguments);e.forEach(function(e){t.Pipeline.warnIfFunctionNotRegistered(e),this._stack.push(e)},this)},t.Pipeline.prototype.after=function(e,n){t.Pipeline.warnIfFunctionNotRegistered(n);var i=this._stack.indexOf(e);if(-1==i)throw new Error("Cannot find existingFn");i+=1,this._stack.splice(i,0,n)},t.Pipeline.prototype.before=function(e,n){t.Pipeline.warnIfFunctionNotRegistered(n);var i=this._stack.indexOf(e);if(-1==i)throw new Error("Cannot find existingFn");this._stack.splice(i,0,n)},t.Pipeline.prototype.remove=function(t){var e=this._stack.indexOf(t);-1!=e&&this._stack.splice(e,1)},t.Pipeline.prototype.run=function(t){for(var e=[],n=t.length,i=this._stack.length,r=0;n>r;r++){for(var o=t[r],s=0;i>s&&(o=this._stack[s](o,r,t),void 0!==o&&""!==o);s++);void 0!==o&&""!==o&&e.push(o)}return e},t.Pipeline.prototype.reset=function(){this._stack=[]},t.Pipeline.prototype.toJSON=function(){return this._stack.map(function(e){return t.Pipeline.warnIfFunctionNotRegistered(e),e.label})},t.Vector=function(){this._magnitude=null,this.list=void 0,this.length=0},t.Vector.Node=function(t,e,n){this.idx=t,this.val=e,this.next=n},t.Vector.prototype.insert=function(e,n){this._magnitude=void 0;var i=this.list;if(!i)return this.list=new t.Vector.Node(e,n,i),this.length++;if(en.idx?n=n.next:(i+=e.val*n.val,e=e.next,n=n.next);return i},t.Vector.prototype.similarity=function(t){return this.dot(t)/(this.magnitude()*t.magnitude())},t.SortedSet=function(){this.length=0,this.elements=[]},t.SortedSet.load=function(t){var e=new this;return e.elements=t,e.length=t.length,e},t.SortedSet.prototype.add=function(){var t,e;for(t=0;t1;){if(o===t)return r;t>o&&(e=r),o>t&&(n=r),i=n-e,r=e+Math.floor(i/2),o=this.elements[r]}return o===t?r:-1},t.SortedSet.prototype.locationFor=function(t){for(var e=0,n=this.elements.length,i=n-e,r=e+Math.floor(i/2),o=this.elements[r];i>1;)t>o&&(e=r),o>t&&(n=r),i=n-e,r=e+Math.floor(i/2),o=this.elements[r];return o>t?r:t>o?r+1:void 0},t.SortedSet.prototype.intersect=function(e){for(var n=new t.SortedSet,i=0,r=0,o=this.length,s=e.length,a=this.elements,h=e.elements;;){if(i>o-1||r>s-1)break;a[i]!==h[r]?a[i]h[r]&&r++:(n.add(a[i]),i++,r++)}return n},t.SortedSet.prototype.clone=function(){var e=new t.SortedSet;return e.elements=this.toArray(),e.length=e.elements.length,e},t.SortedSet.prototype.union=function(t){var e,n,i;this.length>=t.length?(e=this,n=t):(e=t,n=this),i=e.clone();for(var r=0,o=n.toArray();rp;p++)c[p]===a&&d++;h+=d/f*l.boost}}this.tokenStore.add(a,{ref:o,tf:h})}n&&this.eventEmitter.emit("add",e,this)},t.Index.prototype.remove=function(t,e){var n=t[this._ref],e=void 0===e?!0:e;if(this.documentStore.has(n)){var i=this.documentStore.get(n);this.documentStore.remove(n),i.forEach(function(t){this.tokenStore.remove(t,n)},this),e&&this.eventEmitter.emit("remove",t,this)}},t.Index.prototype.update=function(t,e){var e=void 0===e?!0:e;this.remove(t,!1),this.add(t,!1),e&&this.eventEmitter.emit("update",t,this)},t.Index.prototype.idf=function(t){var e="@"+t;if(Object.prototype.hasOwnProperty.call(this._idfCache,e))return this._idfCache[e];var n=this.tokenStore.count(t),i=1;return n>0&&(i=1+Math.log(this.documentStore.length/n)),this._idfCache[e]=i},t.Index.prototype.search=function(e){var n=this.pipeline.run(this.tokenizerFn(e)),i=new t.Vector,r=[],o=this._fields.reduce(function(t,e){return t+e.boost},0),s=n.some(function(t){return this.tokenStore.has(t)},this);if(!s)return[];n.forEach(function(e,n,s){var a=1/s.length*this._fields.length*o,h=this,u=this.tokenStore.expand(e).reduce(function(n,r){var o=h.corpusTokens.indexOf(r),s=h.idf(r),u=1,l=new t.SortedSet;if(r!==e){var c=Math.max(3,r.length-e.length);u=1/Math.log(c)}o>-1&&i.insert(o,a*s*u);for(var f=h.tokenStore.get(r),d=Object.keys(f),p=d.length,v=0;p>v;v++)l.add(f[d[v]].ref);return n.union(l)},new t.SortedSet);r.push(u)},this);var a=r.reduce(function(t,e){return t.intersect(e)});return a.map(function(t){return{ref:t,score:i.similarity(this.documentVector(t))}},this).sort(function(t,e){return e.score-t.score})},t.Index.prototype.documentVector=function(e){for(var n=this.documentStore.get(e),i=n.length,r=new t.Vector,o=0;i>o;o++){var s=n.elements[o],a=this.tokenStore.get(s)[e].tf,h=this.idf(s);r.insert(this.corpusTokens.indexOf(s),a*h)}return r},t.Index.prototype.toJSON=function(){return{version:t.version,fields:this._fields,ref:this._ref,tokenizer:this.tokenizerFn.label,documentStore:this.documentStore.toJSON(),tokenStore:this.tokenStore.toJSON(),corpusTokens:this.corpusTokens.toJSON(),pipeline:this.pipeline.toJSON()}},t.Index.prototype.use=function(t){var e=Array.prototype.slice.call(arguments,1);e.unshift(this),t.apply(this,e)},t.Store=function(){this.store={},this.length=0},t.Store.load=function(e){var n=new this;return n.length=e.length,n.store=Object.keys(e.store).reduce(function(n,i){return n[i]=t.SortedSet.load(e.store[i]),n},{}),n},t.Store.prototype.set=function(t,e){this.has(t)||this.length++,this.store[t]=e},t.Store.prototype.get=function(t){return this.store[t]},t.Store.prototype.has=function(t){return t in this.store},t.Store.prototype.remove=function(t){this.has(t)&&(delete this.store[t],this.length--)},t.Store.prototype.toJSON=function(){return{store:this.store,length:this.length}},t.stemmer=function(){var t={ational:"ate",tional:"tion",enci:"ence",anci:"ance",izer:"ize",bli:"ble",alli:"al",entli:"ent",eli:"e",ousli:"ous",ization:"ize",ation:"ate",ator:"ate",alism:"al",iveness:"ive",fulness:"ful",ousness:"ous",aliti:"al",iviti:"ive",biliti:"ble",logi:"log"},e={icate:"ic",ative:"",alize:"al",iciti:"ic",ical:"ic",ful:"",ness:""},n="[^aeiou]",i="[aeiouy]",r=n+"[^aeiouy]*",o=i+"[aeiou]*",s="^("+r+")?"+o+r,a="^("+r+")?"+o+r+"("+o+")?$",h="^("+r+")?"+o+r+o+r,u="^("+r+")?"+i,l=new RegExp(s),c=new RegExp(h),f=new RegExp(a),d=new RegExp(u),p=/^(.+?)(ss|i)es$/,v=/^(.+?)([^s])s$/,g=/^(.+?)eed$/,m=/^(.+?)(ed|ing)$/,y=/.$/,S=/(at|bl|iz)$/,w=new RegExp("([^aeiouylsz])\\1$"),k=new RegExp("^"+r+i+"[^aeiouwxy]$"),x=/^(.+?[^aeiou])y$/,b=/^(.+?)(ational|tional|enci|anci|izer|bli|alli|entli|eli|ousli|ization|ation|ator|alism|iveness|fulness|ousness|aliti|iviti|biliti|logi)$/,E=/^(.+?)(icate|ative|alize|iciti|ical|ful|ness)$/,F=/^(.+?)(al|ance|ence|er|ic|able|ible|ant|ement|ment|ent|ou|ism|ate|iti|ous|ive|ize)$/,_=/^(.+?)(s|t)(ion)$/,z=/^(.+?)e$/,O=/ll$/,P=new RegExp("^"+r+i+"[^aeiouwxy]$"),T=function(n){var i,r,o,s,a,h,u;if(n.length<3)return n;if(o=n.substr(0,1),"y"==o&&(n=o.toUpperCase()+n.substr(1)),s=p,a=v,s.test(n)?n=n.replace(s,"$1$2"):a.test(n)&&(n=n.replace(a,"$1$2")),s=g,a=m,s.test(n)){var T=s.exec(n);s=l,s.test(T[1])&&(s=y,n=n.replace(s,""))}else if(a.test(n)){var T=a.exec(n);i=T[1],a=d,a.test(i)&&(n=i,a=S,h=w,u=k,a.test(n)?n+="e":h.test(n)?(s=y,n=n.replace(s,"")):u.test(n)&&(n+="e"))}if(s=x,s.test(n)){var T=s.exec(n);i=T[1],n=i+"i"}if(s=b,s.test(n)){var T=s.exec(n);i=T[1],r=T[2],s=l,s.test(i)&&(n=i+t[r])}if(s=E,s.test(n)){var T=s.exec(n);i=T[1],r=T[2],s=l,s.test(i)&&(n=i+e[r])}if(s=F,a=_,s.test(n)){var T=s.exec(n);i=T[1],s=c,s.test(i)&&(n=i)}else if(a.test(n)){var T=a.exec(n);i=T[1]+T[2],a=c,a.test(i)&&(n=i)}if(s=z,s.test(n)){var T=s.exec(n);i=T[1],s=c,a=f,h=P,(s.test(i)||a.test(i)&&!h.test(i))&&(n=i)}return s=O,a=c,s.test(n)&&a.test(n)&&(s=y,n=n.replace(s,"")),"y"==o&&(n=o.toLowerCase()+n.substr(1)),n};return T}(),t.Pipeline.registerFunction(t.stemmer,"stemmer"),t.generateStopWordFilter=function(t){var e=t.reduce(function(t,e){return t[e]=e,t},{});return function(t){return t&&e[t]!==t?t:void 0}},t.stopWordFilter=t.generateStopWordFilter(["a","able","about","across","after","all","almost","also","am","among","an","and","any","are","as","at","be","because","been","but","by","can","cannot","could","dear","did","do","does","either","else","ever","every","for","from","get","got","had","has","have","he","her","hers","him","his","how","however","i","if","in","into","is","it","its","just","least","let","like","likely","may","me","might","most","must","my","neither","no","nor","not","of","off","often","on","only","or","other","our","own","rather","said","say","says","she","should","since","so","some","than","that","the","their","them","then","there","these","they","this","tis","to","too","twas","us","wants","was","we","were","what","when","where","which","while","who","whom","why","will","with","would","yet","you","your"]),t.Pipeline.registerFunction(t.stopWordFilter,"stopWordFilter"),t.trimmer=function(t){return t.replace(/^\W+/,"").replace(/\W+$/,"")},t.Pipeline.registerFunction(t.trimmer,"trimmer"),t.TokenStore=function(){this.root={docs:{}},this.length=0},t.TokenStore.load=function(t){var e=new this;return e.root=t.root,e.length=t.length,e},t.TokenStore.prototype.add=function(t,e,n){var n=n||this.root,i=t.charAt(0),r=t.slice(1);return i in n||(n[i]={docs:{}}),0===r.length?(n[i].docs[e.ref]=e,void(this.length+=1)):this.add(r,e,n[i])},t.TokenStore.prototype.has=function(t){if(!t)return!1;for(var e=this.root,n=0;n0){var c=e.utils.clone(r)||{};c.position=[a,l],c.index=s.length,s.push(new e.Token(i.slice(a,o),c))}a=o+1}}return s},e.tokenizer.separator=/[\s\-]+/,e.Pipeline=function(){this._stack=[]},e.Pipeline.registeredFunctions=Object.create(null),e.Pipeline.registerFunction=function(t,r){r in this.registeredFunctions&&e.utils.warn("Overwriting existing registered function: "+r),t.label=r,e.Pipeline.registeredFunctions[t.label]=t},e.Pipeline.warnIfFunctionNotRegistered=function(t){var r=t.label&&t.label in this.registeredFunctions;r||e.utils.warn("Function is not registered with pipeline. This may cause problems when serialising the index.\n",t)},e.Pipeline.load=function(t){var r=new e.Pipeline;return t.forEach(function(t){var i=e.Pipeline.registeredFunctions[t];if(!i)throw new Error("Cannot load unregistered function: "+t);r.add(i)}),r},e.Pipeline.prototype.add=function(){var t=Array.prototype.slice.call(arguments);t.forEach(function(t){e.Pipeline.warnIfFunctionNotRegistered(t),this._stack.push(t)},this)},e.Pipeline.prototype.after=function(t,r){e.Pipeline.warnIfFunctionNotRegistered(r);var i=this._stack.indexOf(t);if(i==-1)throw new Error("Cannot find existingFn");i+=1,this._stack.splice(i,0,r)},e.Pipeline.prototype.before=function(t,r){e.Pipeline.warnIfFunctionNotRegistered(r);var i=this._stack.indexOf(t);if(i==-1)throw new Error("Cannot find existingFn");this._stack.splice(i,0,r)},e.Pipeline.prototype.remove=function(e){var t=this._stack.indexOf(e);t!=-1&&this._stack.splice(t,1)},e.Pipeline.prototype.run=function(e){for(var t=this._stack.length,r=0;r1&&(se&&(r=n),s!=e);)i=r-t,n=t+Math.floor(i/2),s=this.elements[2*n];return s==e?2*n:s>e?2*n:sa?l+=2:o==a&&(t+=r[u+1]*i[l+1],u+=2,l+=2);return t},e.Vector.prototype.similarity=function(e){return this.dot(e)/this.magnitude()||0},e.Vector.prototype.toArray=function(){for(var e=new Array(this.elements.length/2),t=1,r=0;t0){var o,a=s.str.charAt(0);a in s.node.edges?o=s.node.edges[a]:(o=new e.TokenSet,s.node.edges[a]=o),1==s.str.length&&(o["final"]=!0),n.push({node:o,editsRemaining:s.editsRemaining,str:s.str.slice(1)})}if(0!=s.editsRemaining){if("*"in s.node.edges)var u=s.node.edges["*"];else{var u=new e.TokenSet;s.node.edges["*"]=u}if(0==s.str.length&&(u["final"]=!0),n.push({node:u,editsRemaining:s.editsRemaining-1,str:s.str}),s.str.length>1&&n.push({node:s.node,editsRemaining:s.editsRemaining-1,str:s.str.slice(1)}),1==s.str.length&&(s.node["final"]=!0),s.str.length>=1){if("*"in s.node.edges)var l=s.node.edges["*"];else{var l=new e.TokenSet;s.node.edges["*"]=l}1==s.str.length&&(l["final"]=!0),n.push({node:l,editsRemaining:s.editsRemaining-1,str:s.str.slice(1)})}if(s.str.length>1){var c,h=s.str.charAt(0),d=s.str.charAt(1);d in s.node.edges?c=s.node.edges[d]:(c=new e.TokenSet,s.node.edges[d]=c),1==s.str.length&&(c["final"]=!0),n.push({node:c,editsRemaining:s.editsRemaining-1,str:h+s.str.slice(2)})}}}return i},e.TokenSet.fromString=function(t){for(var r=new e.TokenSet,i=r,n=0,s=t.length;n=e;t--){var r=this.uncheckedNodes[t],i=r.child.toString();i in this.minimizedNodes?r.parent.edges[r["char"]]=this.minimizedNodes[i]:(r.child._str=i,this.minimizedNodes[i]=r.child),this.uncheckedNodes.pop()}},e.Index=function(e){this.invertedIndex=e.invertedIndex,this.fieldVectors=e.fieldVectors,this.tokenSet=e.tokenSet,this.fields=e.fields,this.pipeline=e.pipeline},e.Index.prototype.search=function(t){return this.query(function(r){var i=new e.QueryParser(t,r);i.parse()})},e.Index.prototype.query=function(t){for(var r=new e.Query(this.fields),i=Object.create(null),n=Object.create(null),s=Object.create(null),o=Object.create(null),a=Object.create(null),u=0;u1?this._b=1:this._b=e},e.Builder.prototype.k1=function(e){this._k1=e},e.Builder.prototype.add=function(t,r){var i=t[this._ref],n=Object.keys(this._fields);this._documents[i]=r||{},this.documentCount+=1;for(var s=0;s=this.length)return e.QueryLexer.EOS;var t=this.str.charAt(this.pos);return this.pos+=1,t},e.QueryLexer.prototype.width=function(){return this.pos-this.start},e.QueryLexer.prototype.ignore=function(){this.start==this.pos&&(this.pos+=1),this.start=this.pos},e.QueryLexer.prototype.backup=function(){this.pos-=1},e.QueryLexer.prototype.acceptDigitRun=function(){var t,r;do t=this.next(),r=t.charCodeAt(0);while(r>47&&r<58);t!=e.QueryLexer.EOS&&this.backup()},e.QueryLexer.prototype.more=function(){return this.pos1&&(t.backup(),t.emit(e.QueryLexer.TERM)),t.ignore(),t.more())return e.QueryLexer.lexText},e.QueryLexer.lexEditDistance=function(t){return t.ignore(),t.acceptDigitRun(),t.emit(e.QueryLexer.EDIT_DISTANCE),e.QueryLexer.lexText},e.QueryLexer.lexBoost=function(t){return t.ignore(),t.acceptDigitRun(),t.emit(e.QueryLexer.BOOST),e.QueryLexer.lexText},e.QueryLexer.lexEOS=function(t){t.width()>0&&t.emit(e.QueryLexer.TERM)},e.QueryLexer.termSeparator=e.tokenizer.separator,e.QueryLexer.lexText=function(t){for(;;){var r=t.next();if(r==e.QueryLexer.EOS)return e.QueryLexer.lexEOS;if(92!=r.charCodeAt(0)){if(":"==r)return e.QueryLexer.lexField;if("~"==r)return t.backup(),t.width()>0&&t.emit(e.QueryLexer.TERM),e.QueryLexer.lexEditDistance;if("^"==r)return t.backup(),t.width()>0&&t.emit(e.QueryLexer.TERM),e.QueryLexer.lexBoost;if("+"==r&&1===t.width())return t.emit(e.QueryLexer.PRESENCE),e.QueryLexer.lexText;if("-"==r&&1===t.width())return t.emit(e.QueryLexer.PRESENCE),e.QueryLexer.lexText;if(r.match(e.QueryLexer.termSeparator))return e.QueryLexer.lexTerm}else t.escapeCharacter()}},e.QueryParser=function(t,r){this.lexer=new e.QueryLexer(t),this.query=r,this.currentClause={},this.lexemeIdx=0},e.QueryParser.prototype.parse=function(){this.lexer.run(),this.lexemes=this.lexer.lexemes;for(var t=e.QueryParser.parseClause;t;)t=t(this);return this.query},e.QueryParser.prototype.peekLexeme=function(){return this.lexemes[this.lexemeIdx]},e.QueryParser.prototype.consumeLexeme=function(){var e=this.peekLexeme();return this.lexemeIdx+=1,e},e.QueryParser.prototype.nextClause=function(){var e=this.currentClause;this.query.clause(e),this.currentClause={}},e.QueryParser.parseClause=function(t){var r=t.peekLexeme();if(void 0!=r)switch(r.type){case e.QueryLexer.PRESENCE:return e.QueryParser.parsePresence;case e.QueryLexer.FIELD:return e.QueryParser.parseField;case e.QueryLexer.TERM:return e.QueryParser.parseTerm;default:var i="expected either a field or a term, found "+r.type;throw r.str.length>=1&&(i+=" with value '"+r.str+"'"),new e.QueryParseError(i,r.start,r.end)}},e.QueryParser.parsePresence=function(t){var r=t.consumeLexeme();if(void 0!=r){switch(r.str){case"-":t.currentClause.presence=e.Query.presence.PROHIBITED;break;case"+":t.currentClause.presence=e.Query.presence.REQUIRED;break;default:var i="unrecognised presence operator'"+r.str+"'";throw new e.QueryParseError(i,r.start,r.end)}var n=t.peekLexeme();if(void 0==n){var i="expecting term or field, found nothing";throw new e.QueryParseError(i,r.start,r.end)}switch(n.type){case e.QueryLexer.FIELD:return e.QueryParser.parseField;case e.QueryLexer.TERM:return e.QueryParser.parseTerm;default:var i="expecting term or field, found '"+n.type+"'";throw new e.QueryParseError(i,n.start,n.end)}}},e.QueryParser.parseField=function(t){var r=t.consumeLexeme();if(void 0!=r){if(t.query.allFields.indexOf(r.str)==-1){var i=t.query.allFields.map(function(e){return"'"+e+"'"}).join(", "),n="unrecognised field '"+r.str+"', possible fields: "+i;throw new e.QueryParseError(n,r.start,r.end)}t.currentClause.fields=[r.str];var s=t.peekLexeme();if(void 0==s){var n="expecting term, found nothing";throw new e.QueryParseError(n,r.start,r.end)}switch(s.type){case e.QueryLexer.TERM:return e.QueryParser.parseTerm;default:var n="expecting term, found '"+s.type+"'";throw new e.QueryParseError(n,s.start,s.end)}}},e.QueryParser.parseTerm=function(t){var r=t.consumeLexeme();if(void 0!=r){t.currentClause.term=r.str.toLowerCase(),r.str.indexOf("*")!=-1&&(t.currentClause.usePipeline=!1);var i=t.peekLexeme();if(void 0==i)return void t.nextClause();switch(i.type){case e.QueryLexer.TERM:return t.nextClause(),e.QueryParser.parseTerm;case e.QueryLexer.FIELD:return t.nextClause(),e.QueryParser.parseField;case e.QueryLexer.EDIT_DISTANCE:return e.QueryParser.parseEditDistance;case e.QueryLexer.BOOST:return e.QueryParser.parseBoost;case e.QueryLexer.PRESENCE:return t.nextClause(),e.QueryParser.parsePresence;default:var n="Unexpected lexeme type '"+i.type+"'";throw new e.QueryParseError(n,i.start,i.end)}}},e.QueryParser.parseEditDistance=function(t){var r=t.consumeLexeme();if(void 0!=r){var i=parseInt(r.str,10);if(isNaN(i)){var n="edit distance must be numeric";throw new e.QueryParseError(n,r.start,r.end)}t.currentClause.editDistance=i;var s=t.peekLexeme();if(void 0==s)return void t.nextClause();switch(s.type){case e.QueryLexer.TERM:return t.nextClause(),e.QueryParser.parseTerm;case e.QueryLexer.FIELD:return t.nextClause(),e.QueryParser.parseField;case e.QueryLexer.EDIT_DISTANCE:return e.QueryParser.parseEditDistance;case e.QueryLexer.BOOST:return e.QueryParser.parseBoost;case e.QueryLexer.PRESENCE:return t.nextClause(),e.QueryParser.parsePresence;default:var n="Unexpected lexeme type '"+s.type+"'";throw new e.QueryParseError(n,s.start,s.end)}}},e.QueryParser.parseBoost=function(t){var r=t.consumeLexeme();if(void 0!=r){var i=parseInt(r.str,10);if(isNaN(i)){var n="boost must be numeric";throw new e.QueryParseError(n,r.start,r.end)}t.currentClause.boost=i;var s=t.peekLexeme();if(void 0==s)return void t.nextClause();switch(s.type){case e.QueryLexer.TERM:return t.nextClause(),e.QueryParser.parseTerm;case e.QueryLexer.FIELD:return t.nextClause(),e.QueryParser.parseField;case e.QueryLexer.EDIT_DISTANCE:return e.QueryParser.parseEditDistance;case e.QueryLexer.BOOST:return e.QueryParser.parseBoost;case e.QueryLexer.PRESENCE:return t.nextClause(),e.QueryParser.parsePresence;default:var n="Unexpected lexeme type '"+s.type+"'";throw new e.QueryParseError(n,s.start,s.end)}}},function(e,t){"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t():e.lunr=t()}(this,function(){return e})}(); From 6f225b0d28067c0957539756f58a5a81aea8b89b Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sat, 18 May 2019 23:51:30 +0200 Subject: [PATCH 09/27] Improved search navigation --- _sass/search.scss | 6 +---- assets/js/just-the-docs.js | 55 +++++++++++++++++++------------------- 2 files changed, 28 insertions(+), 33 deletions(-) diff --git a/_sass/search.scss b/_sass/search.scss index 1bb0018..56d9f98 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -109,17 +109,13 @@ padding-left: $sp-3; padding-right: $sp-3; - &:hover { + &:hover, &.active { background-color: darken($body-background-color, 5%); } @include mq(md) { padding-left: $sp-4; padding-right: $sp-4; - - &.active { - background-color: darken($body-background-color, 5%); - } } .search-result-title { diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index f5d7cc3..cf54736 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -1,3 +1,6 @@ +--- +--- + // Event handling function addEvent(el, type, handler) { @@ -31,25 +34,8 @@ function toggleNav(){ // Site search function initSearch() { - // Get the generated search_data.json file so lunr.js can search it locally. - - sc = document.getElementsByTagName("script"); - source = ''; - - for(idx = 0; idx < sc.length; idx++) - { - s = sc.item(idx); - - if(s.src && s.src.match(/just-the-docs\.js$/)) - { source = s.src; } - } - - jsPath = source.replace('just-the-docs.js', ''); - - jsonPath = jsPath + 'search-data.json'; - var request = new XMLHttpRequest(); - request.open('GET', jsonPath, true); + request.open('GET', '{{ "assets/js/search-data.json" | absolute_url }}', true); request.onload = function() { if (request.status >= 200 && request.status < 400) { @@ -101,24 +87,39 @@ function initSearch() { addEvent(searchInput, 'keydown', function(e){ switch (e.keyCode) { case 38: // arrow up + e.preventDefault(); var active = document.querySelector('.search-result.active'); - if (active.parentElement.previousSibling) { - var previous = active.parentElement.previousSibling.querySelector('.search-result'); + if (active) { active.classList.remove('active'); - previous.classList.add('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.parentElement.nextSibling) { - var next = active.parentElement.nextSibling.querySelector('.search-result'); - active.classList.remove('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'); next.classList.add('active'); } return; case 13: // enter + e.preventDefault(); var active = document.querySelector('.search-result.active'); - active.click(); + if (active) { + active.click(); + } else { + var first = document.querySelector('.search-result'); + first.click(); + } return; } }); @@ -132,6 +133,7 @@ function initSearch() { case 38: // arrow up case 40: // arrow down case 13: // enter + e.preventDefault(); return; } @@ -168,9 +170,6 @@ function initSearch() { var resultLink = document.createElement('a'); resultLink.classList.add('search-result'); - if (i == 0) { - resultLink.classList.add('active'); - } resultLink.setAttribute('href', doc.url); resultsListItem.appendChild(resultLink); From 48a4a379772678f7fd7da59e446df0c15852ad17 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sun, 19 May 2019 02:41:18 +0200 Subject: [PATCH 10/27] js fixes --- assets/js/just-the-docs.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index cf54736..e5a4449 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -108,7 +108,9 @@ function initSearch() { } } else { var next = document.querySelector('.search-result'); - next.classList.add('active'); + if (next) { + next.classList.add('active'); + } } return; case 13: // enter @@ -118,7 +120,9 @@ function initSearch() { active.click(); } else { var first = document.querySelector('.search-result'); - first.click(); + if (first) { + first.click(); + } } return; } @@ -247,7 +251,9 @@ function initSearch() { } }); - addEvent(searchInput, 'blur', hideResults); + addEvent(searchInput, 'blur', function(){ + setTimeout(function(){ hideResults() }, 300); + }); } } From 447ba4f20ceb9ddb47d72aa5422d10107177974c Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sun, 19 May 2019 02:41:40 +0200 Subject: [PATCH 11/27] Added variables for background colors --- _sass/color_schemes/dark.scss | 3 +++ _sass/search.scss | 13 +++++++------ _sass/support/_variables.scss | 2 ++ _sass/tables.scss | 4 ++-- assets/css/dark-mode-preview.scss | 1 + 5 files changed, 15 insertions(+), 8 deletions(-) diff --git a/_sass/color_schemes/dark.scss b/_sass/color_schemes/dark.scss index 6c2e8a9..f0e6505 100644 --- a/_sass/color_schemes/dark.scss +++ b/_sass/color_schemes/dark.scss @@ -6,9 +6,12 @@ $border-color: $grey-dk-200; $body-text-color: $grey-lt-300; $body-heading-color: $grey-lt-000; $nav-child-link-color: $grey-dk-000; +$search-result-preview-color: $grey-dk-000; $link-color: $blue-000; $btn-primary-color: $blue-200; $base-button-color: $grey-dk-250; $code-background-color: $grey-dk-250; +$search-background-color: $grey-dk-250; +$table-background-color: $grey-dk-250; diff --git a/_sass/search.scss b/_sass/search.scss index 56d9f98..c740ad9 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -17,7 +17,7 @@ .search-input-wrap { display: flex; height: 100%; - background-color: $body-background-color; + background-color: $search-background-color; padding: $sp-2; border-radius: $border-radius; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); @@ -28,6 +28,7 @@ padding-bottom: 0; padding-left: 0; border-radius: 0; + background-color: $body-background-color; box-shadow: none; } } @@ -37,12 +38,13 @@ width: 100%; padding-top: $sp-1; padding-bottom: $sp-1; - background-color: $body-background-color; + background-color: $search-background-color; border-top: 0; border-right: 0; border-bottom: 0; border-left: 0; order: 2; + @include fs-4; &:focus { outline: 0; @@ -53,9 +55,8 @@ } } - @include fs-4; - @include mq(md) { + background-color: $body-background-color; @include fs-3; } } @@ -73,7 +74,7 @@ z-index: 100; width: 100%; border-radius: $border-radius; - background: lighten($body-background-color, 1%); + background: $search-background-color; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); &.active { @@ -110,7 +111,7 @@ padding-right: $sp-3; &:hover, &.active { - background-color: darken($body-background-color, 5%); + background-color: darken($search-background-color, 5%); } @include mq(md) { diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss index 3605a44..4d5b349 100644 --- a/_sass/support/_variables.scss +++ b/_sass/support/_variables.scss @@ -52,6 +52,8 @@ $red-300: #dd2e2e !default; $body-background-color: $white !default; $sidebar-color: $grey-lt-000 !default; +$search-background-color: $white !default; +$table-background-color: $white !default; $code-background-color: $grey-lt-000 !default; $body-text-color: $grey-dk-100 !default; diff --git a/_sass/tables.scss b/_sass/tables.scss index 08edee2..e1e2c11 100644 --- a/_sass/tables.scss +++ b/_sass/tables.scss @@ -27,7 +27,7 @@ td { padding-right: $sp-3; padding-bottom: $sp-2; padding-left: $sp-3; - background-color: lighten($body-background-color, 2%); + background-color: $table-background-color; border-bottom: $border rgba($border-color, 0.5); border-left: $border $border-color; @@ -49,6 +49,6 @@ tbody { thead { th { - border-bottom: 1px solid $border-color; + border-bottom: $border $border-color; } } diff --git a/assets/css/dark-mode-preview.scss b/assets/css/dark-mode-preview.scss index 8b77da6..6f6fbea 100644 --- a/assets/css/dark-mode-preview.scss +++ b/assets/css/dark-mode-preview.scss @@ -33,6 +33,7 @@ @import "./search"; @import "./tables"; @import "./code"; +@import "./anchor_headings"; @import "./utilities/utilities"; // From 94956403786552fcd383f32be366ab02015e9141 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sun, 19 May 2019 17:21:20 +0200 Subject: [PATCH 12/27] Improved search preview --- _sass/search.scss | 2 ++ assets/js/just-the-docs.js | 5 +++-- assets/js/search-data.json | 2 +- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/_sass/search.scss b/_sass/search.scss index c740ad9..a8b6a8e 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -129,6 +129,7 @@ display: inline-block; width: 40%; vertical-align: top; + word-wrap: break-word; } } @@ -145,6 +146,7 @@ @include mq(sm) { display: inline-block; width: 60%; + vertical-align: top; } } diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index e5a4449..ff9b041 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -42,6 +42,7 @@ function initSearch() { // Success! var data = JSON.parse(request.responseText); + lunr.tokenizer.separator = /[\s\-/]+/ var index = lunr(function () { this.ref('id'); this.field('title', { boost: 200 }); @@ -220,7 +221,7 @@ function initSearch() { var nextSpace = doc.content.indexOf(' ', previewEnd + 1); var nextDot = doc.content.indexOf('.', previewEnd + 1); if ((nextDot > 0) && (nextDot < nextSpace)) { - previewEnd = nextDot + 1; + previewEnd = nextDot; ellipsesAfter = false; break; } @@ -238,7 +239,7 @@ function initSearch() { preview += '' + doc.content.substring(start, end) + ''; preview += doc.content.substring(end, previewEnd); if (ellipsesAfter) { - preview += '...'; + preview += ' ...'; } var resultPreview = document.createElement('div'); diff --git a/assets/js/search-data.json b/assets/js/search-data.json index 49cbc9d..f0ec51f 100644 --- a/assets/js/search-data.json +++ b/assets/js/search-data.json @@ -4,7 +4,7 @@ {% for page in site.html_pages %}{% if page.search_exclude != true %}"{{ forloop.index0 }}": { "id": "{{ forloop.index0 }}", "title": "{{ page.title | replace: '&', '&' }}", - "content": "{{ page.content | markdownify | strip_html | escape_once | remove: 'Table of contents' | remove: '```' | remove: '---' | replace: '\', ' ' | normalize_whitespace }}", + "content": "{{ page.content | markdownify | replace: ' Date: Sun, 19 May 2019 20:08:31 +0200 Subject: [PATCH 13/27] Simplified search-data.json --- assets/js/just-the-docs.js | 2 +- assets/js/search-data.json | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index ff9b041..dd7056c 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -52,7 +52,7 @@ function initSearch() { for (var i in data) { this.add({ - id: data[i].id, + id: i, title: data[i].title, content: data[i].content, url: data[i].url diff --git a/assets/js/search-data.json b/assets/js/search-data.json index f0ec51f..6f728cd 100644 --- a/assets/js/search-data.json +++ b/assets/js/search-data.json @@ -2,7 +2,6 @@ --- { {% for page in site.html_pages %}{% if page.search_exclude != true %}"{{ forloop.index0 }}": { - "id": "{{ forloop.index0 }}", "title": "{{ page.title | replace: '&', '&' }}", "content": "{{ page.content | markdownify | replace: ' Date: Sun, 19 May 2019 20:40:54 +0200 Subject: [PATCH 14/27] Include custom js, added js namespace --- assets/js/_custom.js | 0 assets/js/just-the-docs.js | 51 +++++++++++++++++++++----------------- 2 files changed, 28 insertions(+), 23 deletions(-) create mode 100644 assets/js/_custom.js diff --git a/assets/js/_custom.js b/assets/js/_custom.js new file mode 100644 index 0000000..e69de29 diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index dd7056c..344a355 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -1,23 +1,34 @@ --- --- +(function (jtd, undefined) { // Event handling -function addEvent(el, type, handler) { - if (el.attachEvent) el.attachEvent('on'+type, handler); else el.addEventListener(type, handler); +jtd.addEvent = function(el, type, handler) { + if (el.attachEvent) el.attachEvent('on'+type, handler); else el.addEventListener(type, handler); } -function removeEvent(el, type, handler) { - if (el.detachEvent) el.detachEvent('on'+type, handler); else el.removeEventListener(type, handler); +jtd.removeEvent = function(el, type, handler) { + if (el.detachEvent) el.detachEvent('on'+type, handler); else el.removeEventListener(type, handler); +} +jtd.onReady = function(ready) { + // in case the document is already rendered + if (document.readyState!='loading') ready(); + // modern browsers + else if (document.addEventListener) document.addEventListener('DOMContentLoaded', ready); + // IE <= 8 + else document.attachEvent('onreadystatechange', function(){ + if (document.readyState=='complete') ready(); + }); } // Show/hide mobile menu -function toggleNav(){ +function initNav() { const mainNav = document.querySelector('.js-main-nav'); const pageHeader = document.querySelector('.js-page-header'); const navTrigger = document.querySelector('.js-main-nav-trigger'); - addEvent(navTrigger, 'click', function(e){ + jtd.addEvent(navTrigger, 'click', function(e){ e.preventDefault(); var text = navTrigger.innerText; var textToggle = navTrigger.getAttribute('data-text-toggle'); @@ -37,7 +48,7 @@ function initSearch() { var request = new XMLHttpRequest(); request.open('GET', '{{ "assets/js/search-data.json" | absolute_url }}', true); - request.onload = function() { + request.onload = function(){ if (request.status >= 200 && request.status < 400) { // Success! var data = JSON.parse(request.responseText); @@ -67,7 +78,7 @@ function initSearch() { } }; - request.onerror = function() { + request.onerror = function(){ // There was a connection error of some sort console.log('There was a connection error'); }; @@ -85,7 +96,7 @@ function initSearch() { searchResults.classList.remove('active'); } - addEvent(searchInput, 'keydown', function(e){ + jtd.addEvent(searchInput, 'keydown', function(e){ switch (e.keyCode) { case 38: // arrow up e.preventDefault(); @@ -129,7 +140,7 @@ function initSearch() { } }); - addEvent(searchInput, 'keyup', function(e){ + jtd.addEvent(searchInput, 'keyup', function(e){ switch (e.keyCode) { case 27: // When esc key is pressed, hide the results and clear the field hideResults(); @@ -252,7 +263,7 @@ function initSearch() { } }); - addEvent(searchInput, 'blur', function(){ + jtd.addEvent(searchInput, 'blur', function(){ setTimeout(function(){ hideResults() }, 300); }); } @@ -263,22 +274,16 @@ function pageFocus() { mainContent.focus(); } - // Document ready -function ready(){ - toggleNav(); +jtd.onReady(function(){ + initNav(); pageFocus(); if (typeof lunr !== 'undefined') { initSearch(); } -} - -// in case the document is already rendered -if (document.readyState!='loading') ready(); -// modern browsers -else if (document.addEventListener) document.addEventListener('DOMContentLoaded', ready); -// IE <= 8 -else document.attachEvent('onreadystatechange', function(){ - if (document.readyState=='complete') ready(); }); + +})(window.jtd = window.jtd || {}); + +{% include_relative _custom.js %} \ No newline at end of file From 8d60dda67ea2a82fe39a309419e06c7d53229012 Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Tue, 13 Aug 2019 16:22:40 -0400 Subject: [PATCH 15/27] Make heading anchor link icon --- _layouts/default.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index 3a18b58..833f7c0 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -58,8 +58,11 @@ layout: table_wrappers {% endif %} {% endunless %}
- - {% include vendor/anchor_headings.html html=content anchorBody="#" anchorClass="anchor_heading" %} + {% if site.anchor_headings != false %} + {% include vendor/anchor_headings.html html=content beforeHeading = "true" anchorBody="" anchorClass="anchor-heading" %} + {% else %} + {{ content }} + {% endif %} {% if page.has_children == true and page.has_toc != false %}
From 15f1faae8a909532c68ddebfb3a0d2c78af24a3c Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Tue, 13 Aug 2019 16:23:38 -0400 Subject: [PATCH 16/27] Anchor heading css --- _sass/anchor_headings.scss | 12 ------------ _sass/content.scss | 30 ++++++++++++++++++++++++++++++ 2 files changed, 30 insertions(+), 12 deletions(-) delete mode 100644 _sass/anchor_headings.scss diff --git a/_sass/anchor_headings.scss b/_sass/anchor_headings.scss deleted file mode 100644 index da55202..0000000 --- a/_sass/anchor_headings.scss +++ /dev/null @@ -1,12 +0,0 @@ -a.anchor_heading { - visibility: hidden; -} - -h1:hover > a.anchor_heading, -h2:hover > a.anchor_heading, -h3:hover > a.anchor_heading, -h4:hover > a.anchor_heading, -h5:hover > a.anchor_heading, -h6:hover > a.anchor_heading { - visibility: visible; -} \ No newline at end of file diff --git a/_sass/content.scss b/_sass/content.scss index 7361bfc..0ea0629 100644 --- a/_sass/content.scss +++ b/_sass/content.scss @@ -111,4 +111,34 @@ margin-left: 1em; font-weight: 500; } + + .anchor-heading { + fill: $link-color; + visibility: hidden; + + @include mq(md) { + position: absolute; + left: -$sp-5; + width: $sp-5; + height: 100%; + } + } + + h1:hover > .anchor-heading, + h2:hover > .anchor-heading, + h3:hover > .anchor-heading, + h4:hover > .anchor-heading, + h5:hover > .anchor-heading, + h6:hover > .anchor-heading { + visibility: visible; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + position: relative; + } } From 7fa630764041b9688f16aae61420128964fb8e83 Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Tue, 13 Aug 2019 17:23:35 -0400 Subject: [PATCH 17/27] Header menu button and anchor links --- _config.yml | 3 +++ _layouts/default.html | 4 ++-- _sass/content.scss | 8 +++++--- _sass/layout.scss | 13 +++++++++---- 4 files changed, 19 insertions(+), 9 deletions(-) diff --git a/_config.yml b/_config.yml index f202cdb..2af8202 100644 --- a/_config.yml +++ b/_config.yml @@ -24,6 +24,9 @@ exclude: ["node_modules/", "*.gemspec", "*.gem", "Gemfile", "Gemfile.lock", "pac # Enable or disable the site search search_enabled: true +# Enable or disable heading anchors +heading_anchors: true + # Aux links for the upper right navigation aux_links: "Just the Docs on GitHub": diff --git a/_layouts/default.html b/_layouts/default.html index 833f7c0..209597c 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -12,7 +12,7 @@ layout: table_wrappers
{% include title.html %} - Menu +
{% include nav.html %} @@ -58,7 +58,7 @@ layout: table_wrappers {% endif %} {% endunless %}
- {% if site.anchor_headings != false %} + {% if site.heading_anchors != nil %} {% include vendor/anchor_headings.html html=content beforeHeading = "true" anchorBody="" anchorClass="anchor-heading" %} {% else %} {{ content }} diff --git a/_sass/content.scss b/_sass/content.scss index 0ea0629..275599e 100644 --- a/_sass/content.scss +++ b/_sass/content.scss @@ -113,14 +113,16 @@ } .anchor-heading { + position: absolute; + right: -$sp-3; + width: $sp-5; + height: 100%; fill: $link-color; visibility: hidden; @include mq(md) { - position: absolute; + right: auto; left: -$sp-5; - width: $sp-5; - height: 100%; } } diff --git a/_sass/layout.scss b/_sass/layout.scss index e92584c..ddd5180 100644 --- a/_sass/layout.scss +++ b/_sass/layout.scss @@ -85,10 +85,10 @@ background-color: $sidebar-color; @include mq(md) { - background-color: $body-background-color; display: flex; justify-content: flex-end; height: $header-height; + background-color: $body-background-color; border-bottom: $border $border-color; } @@ -128,10 +128,10 @@ align-items: center; @include mq(md) { + z-index: 101; height: $header-height; min-height: $header-height; max-height: $header-height; - z-index: 101; border-bottom: $border $border-color; } } @@ -148,11 +148,16 @@ @include fs-6; } -.site-button { +.menu-button { + appearance: none; + display: flex; height: 100%; padding: $gutter-spacing-sm; - display: flex; align-items: center; + color: $link-color; + text-transform: uppercase; + background: transparent; + border: 0; @include mq(md) { display: none; From 2b2ebf6033d6fa894928a972f91b32b64411e33c Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Tue, 13 Aug 2019 17:24:23 -0400 Subject: [PATCH 18/27] Lint and docs --- _config.yml | 2 +- _sass/search.scss | 8 ++++---- assets/css/dark-mode-preview.scss | 1 - assets/css/just-the-docs.scss | 1 - docs/configuration.md | 10 ++++++++++ 5 files changed, 15 insertions(+), 7 deletions(-) diff --git a/_config.yml b/_config.yml index 2af8202..46b37fb 100644 --- a/_config.yml +++ b/_config.yml @@ -48,4 +48,4 @@ compress_html: endings: all startings: [] blank_lines: false - profile: false \ No newline at end of file + profile: false diff --git a/_sass/search.scss b/_sass/search.scss index a8b6a8e..3eaa24f 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -17,8 +17,8 @@ .search-input-wrap { display: flex; height: 100%; - background-color: $search-background-color; padding: $sp-2; + background-color: $search-background-color; border-radius: $border-radius; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); @@ -27,8 +27,8 @@ padding-right: 0; padding-bottom: 0; padding-left: 0; - border-radius: 0; background-color: $body-background-color; + border-radius: 0; box-shadow: none; } } @@ -70,11 +70,11 @@ .search-results-wrap { position: absolute; - display: none; z-index: 100; + display: none; width: 100%; - border-radius: $border-radius; background: $search-background-color; + border-radius: $border-radius; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); &.active { diff --git a/assets/css/dark-mode-preview.scss b/assets/css/dark-mode-preview.scss index 6f6fbea..8b77da6 100644 --- a/assets/css/dark-mode-preview.scss +++ b/assets/css/dark-mode-preview.scss @@ -33,7 +33,6 @@ @import "./search"; @import "./tables"; @import "./code"; -@import "./anchor_headings"; @import "./utilities/utilities"; // diff --git a/assets/css/just-the-docs.scss b/assets/css/just-the-docs.scss index b6d17d5..6a2eefa 100644 --- a/assets/css/just-the-docs.scss +++ b/assets/css/just-the-docs.scss @@ -41,5 +41,4 @@ @import "./search"; @import "./tables"; @import "./code"; -@import "./anchor_headings"; @import "./utilities/utilities"; diff --git a/docs/configuration.md b/docs/configuration.md index 095fc20..f4646cb 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -38,6 +38,16 @@ aux_links: - "//github.com/pmarsceill/just-the-docs" ``` +## Heading anchors +```yaml +# Heading anchors appear on hover over h1-h6 tags +# allowing users to deep link to a particular heading +# on a page. +# +# Supprts true (default) or false/nil +heading_anchors: true +``` + ## Color scheme ```yaml From d0325e948e3081e5b24c3722f3e75cdf2331e465 Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Tue, 13 Aug 2019 17:24:36 -0400 Subject: [PATCH 19/27] Fix up search results display --- _sass/search.scss | 88 +++++++++++++++++++++----------------- assets/js/just-the-docs.js | 7 ++- 2 files changed, 55 insertions(+), 40 deletions(-) diff --git a/_sass/search.scss b/_sass/search.scss index 3eaa24f..bef2df7 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -106,52 +106,62 @@ .search-result { display: block; padding-top: $sp-1; + padding-right: $sp-3; padding-bottom: $sp-1; padding-left: $sp-3; - padding-right: $sp-3; - &:hover, &.active { - background-color: darken($search-background-color, 5%); + &:hover, + &.active { + background-color: $sidebar-color; } @include mq(md) { - padding-left: $sp-4; padding-right: $sp-4; - } - - .search-result-title { - display: block; - padding-top: $sp-2; - padding-bottom: $sp-2; - padding-right: $sp-4; - - @include mq(sm) { - display: inline-block; - width: 40%; - vertical-align: top; - word-wrap: break-word; - } - } - - .search-result-preview { - display: block; - padding-top: $sp-2; - padding-bottom: $sp-2; padding-left: $sp-4; - border-left: $border; - border-left-color: $border-color; - color: $search-result-preview-color; - @include fs-2; - - @include mq(sm) { - display: inline-block; - width: 60%; - vertical-align: top; - } - } - - .search-result-highlight { - color: $link-color; - font-weight: bold; } } + +.search-result-title { + display: block; + padding-top: $sp-2; + padding-right: $sp-4; + padding-bottom: $sp-2; + + @include mq(sm) { + display: inline-block; + width: 40%; + word-wrap: break-word; + vertical-align: top; + } +} + +.search-result-rel-url { + display: block; + overflow: hidden; + color: $search-result-preview-color; + text-overflow: ellipsis; + white-space: nowrap; + @include fs-1; +} + +.search-result-preview { + display: block; + padding-top: $sp-2; + padding-bottom: $sp-2; + padding-left: $sp-4; + color: $search-result-preview-color; + border-left: $border; + border-left-color: $border-color; + @include fs-2; + + @include mq(sm) { + display: inline-block; + width: 60%; + vertical-align: top; + } +} + +.search-result-highlight { + font-weight: bold; + color: $link-color; +} diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index 344a355..02e15a7 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -194,6 +194,11 @@ function initSearch() { resultTitle.innerText = doc.title; resultLink.appendChild(resultTitle); + var resultRelUrl = document.createElement('span'); + resultRelUrl.classList.add('search-result-rel-url'); + resultRelUrl.innerText = doc.relUrl; + resultTitle.appendChild(resultRelUrl); + var metadata = result.matchData.metadata; var contentFound = false; for (var j in metadata) { @@ -286,4 +291,4 @@ jtd.onReady(function(){ })(window.jtd = window.jtd || {}); -{% include_relative _custom.js %} \ No newline at end of file +{% include_relative _custom.js %} From e37065423796ac17d883e8f07b3dce3557ebef60 Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Tue, 13 Aug 2019 17:34:28 -0400 Subject: [PATCH 20/27] Add a lil more padding on last table row --- _sass/tables.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/_sass/tables.scss b/_sass/tables.scss index e1e2c11..b2ac7cd 100644 --- a/_sass/tables.scss +++ b/_sass/tables.scss @@ -43,6 +43,10 @@ tbody { td { border-bottom: 0; } + + td { + padding-bottom: $sp-3; + } } } } From 5867dc078f6ec0bc183c1690e7541e5a603c3d26 Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Tue, 13 Aug 2019 17:34:42 -0400 Subject: [PATCH 21/27] Add rel path to title matches --- assets/js/just-the-docs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index 02e15a7..0b5000b 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -206,7 +206,7 @@ function initSearch() { var position = metadata[j].title.position[0]; var start = position[0]; var end = position[0] + position[1]; - resultTitle.innerHTML = doc.title.substring(0, start) + '' + doc.title.substring(start, end) + '' + doc.title.substring(end, doc.title.length); + resultTitle.innerHTML = doc.title.substring(0, start) + '' + doc.title.substring(start, end) + '' + doc.title.substring(end, doc.title.length)+''+doc.relUrl+''; } else if (metadata[j].content && !contentFound) { contentFound = true; From 4a574a2ec29fe7440a70aba0c430cdaf38c9cfb7 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Mon, 20 May 2019 09:53:02 +0200 Subject: [PATCH 22/27] Fixed custom js --- assets/js/{_custom.js => custom.js} | 0 assets/js/just-the-docs.js | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename assets/js/{_custom.js => custom.js} (100%) diff --git a/assets/js/_custom.js b/assets/js/custom.js similarity index 100% rename from assets/js/_custom.js rename to assets/js/custom.js diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index 0b5000b..1bdce7f 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -291,4 +291,4 @@ jtd.onReady(function(){ })(window.jtd = window.jtd || {}); -{% include_relative _custom.js %} +{% include_relative custom.js %} From c227db4406093deeb033712cc4d94f75600f1119 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sat, 20 Jul 2019 21:51:26 +0200 Subject: [PATCH 23/27] Moved custom.js to includes --- {assets => _includes}/js/custom.js | 0 assets/js/just-the-docs.js | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename {assets => _includes}/js/custom.js (100%) diff --git a/assets/js/custom.js b/_includes/js/custom.js similarity index 100% rename from assets/js/custom.js rename to _includes/js/custom.js diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index 1bdce7f..aadbf82 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -291,4 +291,4 @@ jtd.onReady(function(){ })(window.jtd = window.jtd || {}); -{% include_relative custom.js %} +{% include js/custom.js %} From b1072a3fcaa1dd8686d17cef04e6565e47e4b9c1 Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Wed, 14 Aug 2019 10:07:45 -0400 Subject: [PATCH 24/27] Bump line-height on content --- _sass/content.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/_sass/content.scss b/_sass/content.scss index 275599e..812a35a 100644 --- a/_sass/content.scss +++ b/_sass/content.scss @@ -6,6 +6,8 @@ // stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type .page-content { + line-height: 1.6; + a { overflow: hidden; text-overflow: ellipsis; From 3eadd49ee74a76dc3026e34ebba3c8ef58f71af7 Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Wed, 14 Aug 2019 10:08:01 -0400 Subject: [PATCH 25/27] Fix new namespace on event --- docs/configuration.md | 2 +- docs/customization.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/configuration.md b/docs/configuration.md index f4646cb..d39f370 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -62,7 +62,7 @@ const cssFile = document.querySelector('[rel="stylesheet"]'); const originalCssRef = cssFile.getAttribute('href'); const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css'); -addEvent(toggleDarkMode, 'click', function(){ +jtd.addEvent(toggleDarkMode, 'click', function(){ if (cssFile.getAttribute('href') === originalCssRef) { cssFile.setAttribute('href', darkModeCssRef); } else { diff --git a/docs/customization.md b/docs/customization.md index 11d4526..de4ea02 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -40,7 +40,7 @@ const cssFile = document.querySelector('[rel="stylesheet"]'); const originalCssRef = cssFile.getAttribute('href'); const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css'); -addEvent(toggleDarkMode, 'click', function(){ +jtd.addEvent(toggleDarkMode, 'click', function(){ if (cssFile.getAttribute('href') === originalCssRef) { cssFile.setAttribute('href', darkModeCssRef); } else { From fe41e189948a1ee1d8c6e3a3729f6dd354a18400 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sat, 10 Aug 2019 23:20:29 +0200 Subject: [PATCH 26/27] Fix js and also bump out page content line height --- _sass/content.scss | 2 +- _sass/support/_variables.scss | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/_sass/content.scss b/_sass/content.scss index 812a35a..96b0659 100644 --- a/_sass/content.scss +++ b/_sass/content.scss @@ -6,7 +6,7 @@ // stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type .page-content { - line-height: 1.6; + line-height: $content-line-height; a { overflow: hidden; diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss index 4d5b349..127c0e2 100644 --- a/_sass/support/_variables.scss +++ b/_sass/support/_variables.scss @@ -6,6 +6,7 @@ $body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetic $mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace !default; $root-font-size: 16px !default; // Base font-size for rems $body-line-height: 1.4 !default; +$content-line-height: 1.5 !default; $body-heading-line-height: 1.15 !default !default; // @@ -58,7 +59,7 @@ $code-background-color: $grey-lt-000 !default; $body-text-color: $grey-dk-100 !default; $body-heading-color: $grey-dk-300 !default; -$search-result-preview-color: $grey-dk-100 !default; +$search-result-preview-color: $grey-dk-000 !default; $nav-child-link-color: $grey-dk-100 !default; $link-color: $purple-000 !default; $btn-primary-color: $purple-100 !default; @@ -113,7 +114,7 @@ $nav-width: 264px !default; $nav-width-md: 248px !default; $content-width: 800px !default; $header-height: 60px !default; -$search-results-width: 488px !default; +$search-results-width: 500px !default; // // Media queries in pixels From 225604723a4fa670a8fc47f7e02255502415c262 Mon Sep 17 00:00:00 2001 From: Patrick Marsceill Date: Wed, 14 Aug 2019 10:40:19 -0400 Subject: [PATCH 27/27] Fix docs and custom scss --- _sass/custom/custom.scss | 247 ++++++++++++++++++++------------------- docs/configuration.md | 9 +- 2 files changed, 133 insertions(+), 123 deletions(-) diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss index 82064a5..9ac503b 100644 --- a/_sass/custom/custom.scss +++ b/_sass/custom/custom.scss @@ -1,120 +1,129 @@ -// // -// // Typography -// // -// -// $body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif; -// $mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace; -// $root-font-size: 16px; // Base font-size for rems -// $body-line-height: 1.4; -// $body-heading-line-height: 1.15; -// -// // -// // Colors -// // -// -// $white: #fff; -// -// $grey-dk-000: #959396; -// $grey-dk-100: #5c5962; -// $grey-dk-200: #44434d; -// $grey-dk-250: #302d36 !default; -// $grey-dk-300: #27262b; -// -// $grey-lt-000: #f5f6fa; -// $grey-lt-100: #eeebee; -// $grey-lt-200: #ecebed; -// $grey-lt-300: #e6e1e8; -// -// $purple-000: #7253ed; -// $purple-100: #5e41d0; -// $purple-200: #4e26af; -// $purple-300: #381885; -// -// $blue-000: #2c84fa; -// $blue-100: #2869e6; -// $blue-200: #264caf; -// $blue-300: #183385; -// -// $green-000: #41d693; -// $green-100: #11b584; -// $green-200: #009c7b; -// $green-300: #026e57; -// -// $body-background-color: $white !default; -// $sidebar-color: $grey-lt-000 !default; -// $code-background-color: $grey-lt-000 !default; +//// +//// Typography +//// -// $body-text-color: $grey-dk-100 !default; -// $body-heading-color: $grey-dk-300 !default; -// $nav-child-link-color: $grey-dk-100 !default; -// $link-color: $purple-000 !default; -// $btn-primary-color: $purple-100 !default; -// $base-button-color: #f7f7f7 !default; -// -// // -// // Media queries in pixels -// // -// -// $media-queries: ( -// xs: 320px, -// sm: 500px, -// md: 740px, -// lg: 1120px, -// xl: 1400px -// ); -// -// // -// // Spacing -// // -// -// $spacing-unit: 1rem; // 1rem == 16px -// -// $spacers: ( -// sp-0: 0, -// sp-1: $spacing-unit * 0.25, -// sp-2: $spacing-unit * 0.5, -// sp-3: $spacing-unit * 0.75, -// sp-4: $spacing-unit, -// sp-5: $spacing-unit * 1.5, -// sp-6: $spacing-unit * 2, -// sp-7: $spacing-unit * 2.5, -// sp-8: $spacing-unit * 3, -// sp-9: $spacing-unit * 3.5, -// sp-10: $spacing-unit * 4 -// ); -// -// $sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px -// $sp-2: map-get($spacers, sp-2); // 0.5 rem == 8px -// $sp-3: map-get($spacers, sp-3); // 0.75 rem == 12px -// $sp-4: map-get($spacers, sp-4); // 1 rem == 16px -// $sp-5: map-get($spacers, sp-5); // 1.5 rem == 24px -// $sp-6: map-get($spacers, sp-6); // 2 rem == 32px -// $sp-7: map-get($spacers, sp-7); // 2.5 rem == 40px -// $sp-8: map-get($spacers, sp-8); // 3 rem == 48px -// $sp-9: map-get($spacers, sp-9); // 4 rem == 48px -// $sp-10: map-get($spacers, sp-10); // 4.5 rem == 48px -// -// // -// // Borders -// // -// -// $border: 1px solid; -// $border-radius: 4px; -// $border-color: $grey-lt-100; -// -// // -// // Grid system -// // -// -// $gutter-spacing: $sp-6; -// $gutter-spacing-sm: $sp-4; -// $nav-width: 232px; -// $content-width: 800px; -// -// $media-queries: ( -// xs: 320px, -// sm: 500px, -// md: 740px, -// lg: 800px, -// xl: 1316px -// ); +//$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif; +//$mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace; +//$root-font-size: 16px; // Base font-size for rems +//$body-line-height: 1.4; +//$content-line-height: 1.5; +//$body-heading-line-height: 1.15; + +//// +//// Colors +//// + +//$white: #fff; + +//$grey-dk-000: #959396; +//$grey-dk-100: #5c5962; +//$grey-dk-200: #44434d; +//$grey-dk-250: #302d36; +//$grey-dk-300: #27262b; + +//$grey-lt-000: #f5f6fa; +//$grey-lt-100: #eeebee; +//$grey-lt-200: #ecebed; +//$grey-lt-300: #e6e1e8; + +//$purple-000: #7253ed; +//$purple-100: #5e41d0; +//$purple-200: #4e26af; +//$purple-300: #381885; + +//$blue-000: #2c84fa; +//$blue-100: #2869e6; +//$blue-200: #264caf; +//$blue-300: #183385; + +//$green-000: #41d693; +//$green-100: #11b584; +//$green-200: #009c7b; +//$green-300: #026e57; + +//$yellow-000: #ffeb82; +//$yellow-100: #fadf50; +//$yellow-200: #f7d12e; +//$yellow-300: #e7af06; + +//$red-000: #f77e7e; +//$red-100: #f96e65; +//$red-200: #e94c4c; +//$red-300: #dd2e2e; + +//$body-background-color: $white; +//$sidebar-color: $grey-lt-000; +//$search-background-color: $white; +//$table-background-color: $white; +//$code-background-color: $grey-lt-000; + +//$body-text-color: $grey-dk-100; +//$body-heading-color: $grey-dk-300; +//$search-result-preview-color: $grey-dk-000; +//$nav-child-link-color: $grey-dk-100; +//$link-color: $purple-000; +//$btn-primary-color: $purple-100; +//$base-button-color: #f7f7f7; + +//// +//// Spacing +//// + +//$spacing-unit: 1rem; // 1rem == 16px + +//$spacers: ( +//sp-0: 0, +//sp-1: $spacing-unit * 0.25, +//sp-2: $spacing-unit * 0.5, +//sp-3: $spacing-unit * 0.75, +//sp-4: $spacing-unit, +//sp-5: $spacing-unit * 1.5, +//sp-6: $spacing-unit * 2, +//sp-7: $spacing-unit * 2.5, +//sp-8: $spacing-unit * 3, +//sp-9: $spacing-unit * 3.5, +//sp-10: $spacing-unit * 4 +//); + +//$sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px +//$sp-2: map-get($spacers, sp-2); // 0.5 rem == 8px +//$sp-3: map-get($spacers, sp-3); // 0.75 rem == 12px +//$sp-4: map-get($spacers, sp-4); // 1 rem == 16px +//$sp-5: map-get($spacers, sp-5); // 1.5 rem == 24px +//$sp-6: map-get($spacers, sp-6); // 2 rem == 32px +//$sp-7: map-get($spacers, sp-7); // 2.5 rem == 40px +//$sp-8: map-get($spacers, sp-8); // 3 rem == 48px +//$sp-9: map-get($spacers, sp-9); // 4 rem == 48px +//$sp-10: map-get($spacers, sp-10); // 4.5 rem == 48px + +//// +//// Borders +//// + +//$border: 1px solid; +//$border-radius: 4px; +//$border-color: $grey-lt-100; + +//// +//// Grid system +//// + +//$gutter-spacing: $sp-6; +//$gutter-spacing-sm: $sp-4; +//$nav-width: 264px; +//$nav-width-md: 248px; +//$content-width: 800px; +//$header-height: 60px; +//$search-results-width: 500px; + +//// +//// Media queries in pixels +//// + +//$media-queries: ( +//xs: 320px, +//sm: 500px, +//md: $content-width, +//lg: $content-width + $nav-width, +//xl: 1400px +//); diff --git a/docs/configuration.md b/docs/configuration.md index d39f370..dd8637c 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -26,6 +26,7 @@ View this site's [_config.yml](https://github.com/pmarsceill/just-the-docs/tree/ ```yaml # Enable or disable the site search +# Support true (default) or false search_enabled: true ``` @@ -38,11 +39,11 @@ aux_links: - "//github.com/pmarsceill/just-the-docs" ``` -## Heading anchors +## Heading anchor links ```yaml -# Heading anchors appear on hover over h1-h6 tags -# allowing users to deep link to a particular heading -# on a page. +# Heading anchor links appear on hover over h1-h6 tags +# in page content allowing users to deep link to a particular +# heading on a page. # # Supprts true (default) or false/nil heading_anchors: true