steve/just-the-docs
1
0
Fork 0
mirror of https://github.com/snachodog/just-the-docs.git synced 2025-09-12 21:03:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix: improve build time (#1358)

Browse Source 
* 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
2023-10-01 14:47:26 +02:00
committed by GitHub
parent cd4f1b02b2
commit 2ccc451c2a
12 changed files with 247 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
assets/css/just-the-docs-head-nav.css Normal file
View File

@@ -0,0 +1,24 @@
---
---
{%- if site.color_scheme and site.color_scheme != "nil" -%}
{%- assign color_scheme = site.color_scheme -%}
{%- else -%}
{%- assign color_scheme = "light" -%}
{%- endif -%}
{%- capture newline %}
{% endcapture -%}
{%- capture scss -%}
{% include css/just-the-docs.scss.liquid color_scheme=color_scheme %}
.nav-list .nav-list-item .nav-list-link {
background-image: linear-gradient(
-90deg,
rgba($feedback-color, 1) 0%,
rgba($feedback-color, 0.8) 80%,
rgba($feedback-color, 0) 100%
);
}
{%- endcapture -%}
{{ scss | scssify | split: newline | slice: -3, 3 | join: newline }}

20
assets/js/just-the-docs.js
View File

@@ -39,7 +39,7 @@ function initNav() {
const mainHeader = document.getElementById('main-header');
const menuButton = document.getElementById('menu-button');
disableHeadStyleSheet();
disableHeadStyleSheets();
jtd.addEvent(menuButton, 'click', function(e){
e.preventDefault();
@@ -68,13 +68,19 @@ function initNav() {
{%- endif %}
}
// The page-specific <style> in the <head> is needed only when JS is disabled.
// Moreover, it incorrectly overrides dynamic stylesheets set by setTheme(theme).
// The page-specific stylesheet is assumed to have index 1 in the list of stylesheets.
// The <head> element is assumed to include the following stylesheets:
// 0. a <link> to /assets/css/just-the-docs-default.css
// 1. a <link> to /assets/css/just-the-docs-head-nav.css
// 2. a <style> containing the result of _includes/css/activation.scss.liquid.
// It also includes any styles provided by users in _includes/head_custom.html.
// Stylesheet 2 may be missing (compression can remove empty <style> elements)
// so disableHeadStyleSheet() needs to access it by its id.
function disableHeadStyleSheet() {
if (document.styleSheets[1]) {
document.styleSheets[1].disabled = true;
function disableHeadStyleSheets() {
document.styleSheets[1].disabled = true;
const activation = document.getElementById('jtd-nav-activation');
if (activation) {
activation.disabled = true;
}
}