mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-09-13 05:13:33 -06:00
Fix: improve build time (#1358)
* Remove "passive" toggle PR #1244 introduced the "passive" toggle, but just-the-docs.js subsequently disabled the only styling that used it, so it became redundant. This removes it. * Reduce build time for page-dependent CSS Fix #1323 - Remove `_includes/head_nav.html`. - Generate page-independent SCSS in `assets/css/just-the-docs-head-nav.css`. - Link to `/assets/css/just-the-docs-head-nav.css` in `head.html`. - Disable the above stylesheet in `assets/js/just-the-docs.js`. - Generate page-dependent CSS in `_includes/css/activation.scss.liquid` and include in `head.html`. * No override svg rotate * Disable both stylesheets safely * Move the site nav to a new include - Fix the complete site nav - Move the site nav to `_includes/site_nav.html` - Cache the site nav - Uncache `nav.html` * Move nav and site_nav to _includes/components * Replace id prefix * Update breadcrumbs.html Replace several filters by a single loop through all the pages, but breaking as soon as possible. Profiling indicates that this saves up to 50% of the breadcrumbs build time for the filters. * Update just-the-docs-head-nav.css Adjust the number of lines to keep * Update head.html Remove superflous type. * Update activation.scss.liquid Remove a superfluous closing brace. Adjust layout. * Use `scssify` to remove nesting Preliminary profiling indicates that using `scssify` on the small number of nested CSS rules produced by `activation.scss.liquid` is quick enough. * Update head.scss Manual attempt at prettier (pending installation in Atom). * Avoid generation of nested CSS Local profiling indicated that using `scssify` on each page takes about 1% of the build time. - Update `_includes/css/activation.scss.liquid` to generate non-nested CSS. - Remove use of `scssify` from `_includes/head.html`. * Ignore false positives from validator Ignores: `:1.810-1.823: error: CSS: Parse Error.` and `:1.811-1.824: error: CSS: Parse Error.`; had to shift things around since the local config overrides the CI flag. * Inline `_sass/head.css` * Update CHANGELOG.md --------- Co-authored-by: Matthew Wang <matt@matthewwang.me>
This commit is contained in:
Peter Mosses
GitHub
@@ -1,7 +1,8 @@
|
||||
{%- comment -%}
|
||||
Include as: {%- include css/activation.scss.liquid -%}
|
||||
Depends on: page, site.
|
||||
Results in: page-dependent SCSS rules for inclusion in a head style element.
|
||||
Results in: page-dependent (non-nested) CSS rules for inclusion in a head style element,
|
||||
which needs to be suppressed when JS is enabled.
|
||||
Includes:
|
||||
sorted_pages.html.
|
||||
Overwrites:
|
||||
@@ -11,7 +12,7 @@
|
||||
activation_first_level_index, activation_second_level_index, activation_third_level_index.
|
||||
Should not be cached, because it depends on page.
|
||||
(For a site with only top-level pages, the rendering of this file is always empty.
|
||||
This property could be detected, and might halve the build time for such sites.)
|
||||
This property could be detected, and used to reduce the build time for such sites.)
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- unless page.title == nil or page.nav_exclude == true -%}
|
||||
@@ -27,6 +28,11 @@
|
||||
{%- assign activation_first_level_reversed = nil -%}
|
||||
{%- assign activation_second_level_reversed = nil -%}
|
||||
|
||||
{%- comment -%}
|
||||
The generated CSS depends on the position of the current page in each level in
|
||||
the navigation.
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- assign activation_title = page.grand_parent | default: page.parent | default: page.title -%}
|
||||
{%- assign activation_first_level = activation_pages
|
||||
| where_exp: "item", "item.parent == nil" -%}
|
||||
@@ -85,10 +91,18 @@
|
||||
|
||||
{%- unless activation_second_level_index == nil and activation_third_level_index -%}
|
||||
|
||||
{%- comment -%}
|
||||
The generated CSS uses a prefix that depends on the number of ordinary pages
|
||||
and on the page collections.
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- if page.collection == nil -%}
|
||||
|
||||
{%- capture activation_collection_prefix -%}
|
||||
.site-nav > .nav-list:nth-child(1):not(.nav-category-list)
|
||||
.site-nav > .nav-list:nth-child(1):not(.nav-category-list)
|
||||
{%- endcapture -%}
|
||||
{%- capture activation_other_collection_prefix -%}
|
||||
.site-nav > .nav-list:not(:nth-child(1):not(.nav-category-list))
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- else -%}
|
||||
@@ -114,57 +128,92 @@
|
||||
{%- capture activation_collection_prefix -%}
|
||||
.site-nav > .nav-list:nth-of-type({{ activation_index }}){% if site.just_the_docs.collections[page.collection].nav_fold == true %} > .nav-list-item > .nav-list{% endif %}
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- capture activation_other_collection_prefix -%}
|
||||
.site-nav > .nav-list:not(:nth-of-type({{ activation_index }}))
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- endif -%}
|
||||
|
||||
// Styling for the nav-list-link to the current page:
|
||||
{{ activation_collection_prefix }} {
|
||||
> .nav-list-item:not(.external):nth-child({{ activation_first_level_index }}){%- if activation_second_level_index %} > .nav-list > .nav-list-item:nth-child({{ activation_second_level_index }}){%- if activation_third_level_index %} > .nav-list > .nav-list-item:nth-child({{ activation_third_level_index }}){% endif %}{% endif %} {
|
||||
> .nav-list-link {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(
|
||||
-90deg,
|
||||
rgba($feedback-color, 1) 0%,
|
||||
rgba($feedback-color, 0.8) 80%,
|
||||
rgba($feedback-color, 0) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
{%- comment -%}
|
||||
The required background image of the link to the current page may involve SCSS.
|
||||
To avoid page-dependent SCSS, all nav links initially have that background image.
|
||||
The following rule removes the image from the links to all parents, siblings,
|
||||
and children of the current page.
|
||||
{%- endcomment %}
|
||||
|
||||
{% if activation_third_level_index -%}
|
||||
|
||||
{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list-link,
|
||||
{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item > .nav-list-link,
|
||||
{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item > .nav-list > .nav-list-item:not(:nth-child({{ activation_third_level_index }})) > .nav-list-link {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
// Styling for nav-list-expanders at first and second levels:
|
||||
{{ activation_collection_prefix }} {
|
||||
> .nav-list-item:nth-child({{ activation_first_level_index }}){%- if activation_second_level_index %},
|
||||
> .nav-list-item:nth-child({{ activation_first_level_index }}) > .nav-list > .nav-list-item:nth-child({{ activation_second_level_index }}){% endif %} {
|
||||
> .nav-list-expander svg {
|
||||
@if $nav-list-expander-right {
|
||||
transform: rotate(-90deg);
|
||||
} @else {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
{%- elsif activation_second_level_index -%}
|
||||
|
||||
> .nav-list {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list-link,
|
||||
{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item:not(:nth-child({{ activation_second_level_index }})) > .nav-list-link,
|
||||
{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item > .nav-list > .nav-list-item > .nav-list-link {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
// Styling for nav-list-expander for categories:
|
||||
.site-nav > .nav-category-list > .nav-list-item {
|
||||
> .nav-list-expander svg {
|
||||
@if $nav-list-expander-right {
|
||||
transform: rotate(-90deg);
|
||||
} @else {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
{%- else -%}
|
||||
|
||||
> .nav-list {
|
||||
display: block;
|
||||
}
|
||||
{{ activation_collection_prefix }} > .nav-list-item:not(.external):not(:nth-child({{ activation_first_level_index }})) > .nav-list-link,
|
||||
{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item > .nav-list-link,
|
||||
{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item > .nav-list > .nav-list-item > .nav-list-link {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
{%- endif %}
|
||||
|
||||
{%- comment -%}
|
||||
The following rule removes the image from the links to pages in other collections.
|
||||
{%- endcomment %}
|
||||
|
||||
{{ activation_other_collection_prefix }} .nav-list-link,
|
||||
.site-nav .nav-list-link.external {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
{%- comment -%}
|
||||
The following rule styles the link to the current page.
|
||||
{%- endcomment %}
|
||||
|
||||
{{ activation_collection_prefix }} > .nav-list-item:not(.external):nth-child({{ activation_first_level_index }})
|
||||
{%- if activation_second_level_index %} > .nav-list > .nav-list-item:nth-child({{ activation_second_level_index }})
|
||||
{%- if activation_third_level_index %} > .nav-list > .nav-list-item:nth-child({{ activation_third_level_index }})
|
||||
{%- endif -%}
|
||||
{%- endif %} > .nav-list-link {
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
{%- comment -%}
|
||||
The following rules unfold all collections, and display the links to any children
|
||||
of the current page.
|
||||
|
||||
To avoid dependence on the SCSS variable nav-list-expander-right, the direction
|
||||
of the rotation of the expander icon is fixed, and corresponds to the appearance
|
||||
when nav-list-expander-right is true. This results in a minor visual difference
|
||||
between the appearance of active expander icons when JS is enabled/disabled and
|
||||
nav-list-expander-right is false, which seems unavoidable.
|
||||
{%- endcomment %}
|
||||
|
||||
.site-nav > .nav-category-list > .nav-list-item > .nav-list-expander svg,
|
||||
{{ activation_collection_prefix }} > .nav-list-item:nth-child({{ activation_first_level_index }}) > .nav-list-expander svg
|
||||
{%- if activation_second_level_index -%},
|
||||
{{ activation_collection_prefix }} > .nav-list-item:nth-child({{ activation_first_level_index }}) > .nav-list > .nav-list-item:nth-child({{ activation_second_level_index }}) > .nav-list-expander svg
|
||||
{%- endif %} {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.site-nav > .nav-category-list > .nav-list-item > .nav-list,
|
||||
{{ activation_collection_prefix }} > .nav-list-item:nth-child({{ activation_first_level_index }}) > .nav-list
|
||||
{%- if activation_second_level_index %},
|
||||
{{ activation_collection_prefix }} > .nav-list-item:nth-child({{ activation_first_level_index }}) > .nav-list > .nav-list-item:nth-child({{ activation_second_level_index }}) > .nav-list
|
||||
{%- endif %} {
|
||||
display: block;
|
||||
}
|
||||
|
||||
{%- endunless -%}
|
||||
|
||||
Reference in New Issue
Block a user