Fix accidental disabling of forward-declared stylesheets (#1373)

PR for the issue flagged in https://github.com/just-the-docs/just-the-docs/discussions/1359#discussioncomment-7267686 (and related to #1358, #1350, etc.). This PR essentially just disables the `head-nav` stylesheet by ID instead of relying on the index; this makes the code more robust against stylesheets that are arbitrarily entered into the document (such as by JavaScript, which is the case of #1359).
This commit is contained in:
Matt Wang 2023-10-25 11:52:44 -07:00 committed by GitHub
parent 56e0f1c800
commit 80bd7bfc9f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 12 deletions

View File

@ -28,6 +28,7 @@ Code changes to `main` that are *not* in the latest release:
- Fixed: erroneous parentheses in `site_nav` conditional by [@mattxwang] in [#1366] - Fixed: erroneous parentheses in `site_nav` conditional by [@mattxwang] in [#1366]
- Fixed: navigation scroll to active link regression by [@pdmosses] in [#1367] - Fixed: navigation scroll to active link regression by [@pdmosses] in [#1367]
- Fixed: invalid CSS rules in head elements by [@pdmosses] in [#1368] - Fixed: invalid CSS rules in head elements by [@pdmosses] in [#1368]
- Fixed: accidental disabling of forward-declared stylesheets by [@mattxwang] in [#1373]
{: .warning } {: .warning }
[#1358] moved `_includes/nav.html` to the `_includes/components` directory, [#1358] moved `_includes/nav.html` to the `_includes/components` directory,
@ -51,6 +52,7 @@ Users who were overriding that file will need to adjust their sites accordingly.
[#1366]: https://github.com/just-the-docs/just-the-docs/pull/1366 [#1366]: https://github.com/just-the-docs/just-the-docs/pull/1366
[#1367]: https://github.com/just-the-docs/just-the-docs/pull/1367 [#1367]: https://github.com/just-the-docs/just-the-docs/pull/1367
[#1368]: https://github.com/just-the-docs/just-the-docs/pull/1368 [#1368]: https://github.com/just-the-docs/just-the-docs/pull/1368
[#1373]: https://github.com/just-the-docs/just-the-docs/pull/1373
[#1377]: https://github.com/just-the-docs/just-the-docs/pull/1377 [#1377]: https://github.com/just-the-docs/just-the-docs/pull/1377
## Release v0.6.2 ## Release v0.6.2

View File

@ -5,7 +5,7 @@
Results in: HTML for the head element. Results in: HTML for the head element.
Includes: Includes:
css/activation.scss.liquid, head_custom.html. css/activation.scss.liquid, head_custom.html.
Overwrites: Overwrites:
ga_tracking_ids, ga_property, file, favicon. ga_tracking_ids, ga_property, file, favicon.
Should not be cached, because included files depend on page. Should not be cached, because included files depend on page.
{%- endcomment -%} {%- endcomment -%}
@ -15,9 +15,9 @@
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" href="{{ '/assets/css/just-the-docs-default.css' | relative_url }}"> <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-default.css' | relative_url }}">
<link rel="stylesheet" href="{{ '/assets/css/just-the-docs-head-nav.css' | relative_url }}"> <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-head-nav.css' | relative_url }}" id="jtd-head-nav-stylesheet">
<style id="jtd-nav-activation"> <style id="jtd-nav-activation">
{% include css/activation.scss.liquid %} {% include css/activation.scss.liquid %}
</style> </style>

View File

@ -38,7 +38,7 @@ function initNav() {
const siteNav = document.getElementById('site-nav'); const siteNav = document.getElementById('site-nav');
const mainHeader = document.getElementById('main-header'); const mainHeader = document.getElementById('main-header');
const menuButton = document.getElementById('menu-button'); const menuButton = document.getElementById('menu-button');
disableHeadStyleSheets(); disableHeadStyleSheets();
jtd.addEvent(menuButton, 'click', function(e){ jtd.addEvent(menuButton, 'click', function(e){
@ -69,15 +69,19 @@ function initNav() {
} }
// The <head> element is assumed to include the following stylesheets: // The <head> element is assumed to include the following stylesheets:
// 0. a <link> to /assets/css/just-the-docs-default.css // - a <link> to /assets/css/just-the-docs-head-nav.css,
// 1. a <link> to /assets/css/just-the-docs-head-nav.css // with id 'jtd-head-nav-stylesheet'
// 2. a <style> containing the result of _includes/css/activation.scss.liquid. // - a <style> containing the result of _includes/css/activation.scss.liquid.
// It also includes any styles provided by users in _includes/head_custom.html. // To avoid relying on the order of stylesheets (which can change with HTML
// Stylesheet 2 may be missing (compression can remove empty <style> elements) // compression, user-added JavaScript, and other side effects), stylesheets
// so disableHeadStyleSheet() needs to access it by its id. // are only interacted with via ID
function disableHeadStyleSheets() { function disableHeadStyleSheets() {
document.styleSheets[1].disabled = true; const headNav = document.getElementById('jtd-head-nav-stylesheet');
if (headNav) {
headNav.disabled = true;
}
const activation = document.getElementById('jtd-nav-activation'); const activation = document.getElementById('jtd-nav-activation');
if (activation) { if (activation) {
activation.disabled = true; activation.disabled = true;