just-the-docs 0.6.2 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3c362693d611afbf87baeba763bc457fedd9dc2c0e61704c1c843969048f43a6
-  data.tar.gz: f3fa7e6c8ca7c926751d7221670c45457ad12e595dcccae5c2d8f025707b7630
+  metadata.gz: 6b96a130e7da963319bffcbfc09ce39881f538bfe8b56f2809251d29ab7aeb40
+  data.tar.gz: 7a1ec7d332331653d64e2adc7e8f157adf4fbb8f0041261f0b165032861b47ca
 SHA512:
-  metadata.gz: 9f751827832c8b1b958bd2c4d7f3b9812c3194a6a7e7bf023131e86cd4f408bad4037d09f99281e4212390265aa8a2dad709bd6f7005941433073e0d28bf545e
-  data.tar.gz: fd30ebd6d9b5b4af76e31b62b1ce1b9621fa2b26dc2b87972072a52d40c30f652003043a63e2b9cc8f13a882a3a8b3c9ac291c321e736dd4b499632f5193fe1b
+  metadata.gz: f033dfe192101707e7b6bebea2b6b0628a5d8a401a32bc6adda5bc483b126af8f98efa7eaf51dc62e399d0dfea09d39d96a91cf5c31b4a1c53d07fcb96a1a288
+  data.tar.gz: 5e9203f6620f854339e979b74811f677357baf57746aba62d242ffe1cc1f58de0eff2e8a8596e2377f317d65af6ad8e9b379a6a532e637b7bb32404f068a216e

data/CHANGELOG.md

@@ -19,6 +19,75 @@ Code changes to `main` that are *not* in the latest release:
 
 - N/A
 
+## Release v0.7.0
+
+Hi folks! This is a minor release that adds a new configuration option for opening external links in a new tab and provides many bugfixes (in both correctness and performance) for Just the Docs users with large sites. We anticipate that for most users, this is a straightforward upgrade. However, it introduces some potentially-breaking *internal* changes to undocumented features of the theme.
+
+### Migrating to `v0.7.0`
+
+**Migration**: users will need to migrate if:
+
+- they overrode `_includes/nav.html`, which has moved to `_includes/components/nav.html`
+- they have an element with the IDs `jtd-nav-activation` or `jtd-head-nav-stylesheet`
+
+For more, refer to the [migration guide](https://just-the-docs.com/MIGRATION/).
+
+### Using Release `v0.7.0`
+
+Users who have not pinned the theme version will be **automatically upgraded to `v0.7.0` the next time they build their site**.
+
+To use this release explicitly as a remote theme:
+
+```yml
+remote_theme: just-the-docs/just-the-docs@v0.7.0
+```
+
+To use this version explicitly as a gem-based theme, pin the version in your `Gemfile` and re-run `bundle install` or `bundle update just-the-docs`:
+
+```ruby
+gem "just-the-docs", "0.7.0"
+```
+
+To use and pin a previous version of the theme, replace the `0.7.0` with the desired release tag.
+
+### New Features
+
+- Added: configuration options for opening external links in new tab by [@CarbonNeuron] in [#1360]
+
+### Bugfixes
+
+- Fixed: remove href from the navigation link to the current page by [@pdmosses] in [#1356]
+- Fixed: improve build time by [@pdmosses] in [#1358]
+- Fixed: erroneous parentheses in `site_nav` conditional by [@mattxwang] in [#1366]
+- Fixed: navigation scroll to active link regression by [@pdmosses] in [#1367]
+- Fixed: invalid CSS rules in head elements by [@pdmosses] in [#1368]
+- Fixed: accidental disabling of forward-declared stylesheets by [@mattxwang] in [#1373]
+
+{: .warning }
+[#1358] moved `_includes/nav.html` to the `_includes/components` directory,
+Users who were overriding that file will need to adjust their sites accordingly.
+
+### Documentation:
+
+- Docs: fix typos in `CHANGELOG` and `MIGRATION` by [@thapasusheel] in [#1377]
+
+### New Contributors
+
+- [@CarbonNeuron] made their first contribution in [#1360]
+- [@thapasusheel] made their first contribution in [#1377]
+
+[@CarbonNeuron]: https://github.com/CarbonNeuron
+[@thapasusheel]: https://github.com/thapasusheel
+
+[#1356]: https://github.com/just-the-docs/just-the-docs/pull/1356
+[#1358]: https://github.com/just-the-docs/just-the-docs/pull/1358
+[#1360]: https://github.com/just-the-docs/just-the-docs/pull/1360
+[#1366]: https://github.com/just-the-docs/just-the-docs/pull/1366
+[#1367]: https://github.com/just-the-docs/just-the-docs/pull/1367
+[#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
+
 ## Release v0.6.2
 
 Hi all, this is a small patch release that includes two changes: adding a missing Windows emoji font fallback, and removing some (now-unused) code introduced in 0.6.
@@ -644,7 +713,7 @@ This RC does not introduce any major user-facing features. It adds more customiz
 
 ### Trying out pre-release `v0.4.0.rc5`
 
-Simlar to the prior release, `v0.4.0.rc5` is a **release candidate** for the theme (i.e., a pre-release) with release `v0.4.0` following immediately after. While we don't anticipate many users using this RC, it is still possible to opt-in.
+Similar to the prior release, `v0.4.0.rc5` is a **release candidate** for the theme (i.e., a pre-release) with release `v0.4.0` following immediately after. While we don't anticipate many users using this RC, it is still possible to opt-in.
 
 To use this RC explicitly as a remote theme:
 
@@ -745,7 +814,7 @@ Have any questions, thoughts, or concerns? We'd love to hear from you! Please [o
 
 ### Trying out pre-release `v0.4.0.rc4`
 
-Simlar to the prior release, `v0.4.0.rc4` is a **release candidate** for the theme (i.e., a pre-release) with release `v0.4.0` coming soon. We want your help in testing the changes! As of now, the gem on RubyGems and the repository are updated to `v0.4.0.rc4`.
+Similar to the prior release, `v0.4.0.rc4` is a **release candidate** for the theme (i.e., a pre-release) with release `v0.4.0` coming soon. We want your help in testing the changes! As of now, the gem on RubyGems and the repository are updated to `v0.4.0.rc4`.
 
 To use this RC explicitly as a remote theme:
 
@@ -866,7 +935,7 @@ As soon as we get stable test results from major downstream users, we'll push ou
 
 ### Trying out pre-release `v0.4.0.rc3`
 
-Simlar to the prior release, `v0.4.0.rc3` is a **release candidate** for the theme (i.e., a pre-release) with release `v0.4.0` coming soon. We want your help in testing the changes! As of now, the gem on RubyGems and the repository are updated to `v0.4.0.rc3`.
+Similar to the prior release, `v0.4.0.rc3` is a **release candidate** for the theme (i.e., a pre-release) with release `v0.4.0` coming soon. We want your help in testing the changes! As of now, the gem on RubyGems and the repository are updated to `v0.4.0.rc3`.
 
 To use this RC explicitly as a remote theme:
 
@@ -942,7 +1011,7 @@ The intention of this release candidate is to gather even more feedback on a pot
 
 ### Trying out pre-release `v0.4.0.rc2`
 
-Simlar to the prior release, `v0.4.0.rc2` is a **release candidate** for the theme (i.e., a pre-release) with release `v0.4.0` coming soon. We want your help in testing the changes! As of now, the gem on RubyGems and the repository are updated to `v0.4.0.rc2`.
+Similar to the prior release, `v0.4.0.rc2` is a **release candidate** for the theme (i.e., a pre-release) with release `v0.4.0` coming soon. We want your help in testing the changes! As of now, the gem on RubyGems and the repository are updated to `v0.4.0.rc2`.
 
 To use this RC explicitly as a remote theme:
 
@@ -1030,7 +1099,7 @@ We want your feedback! Are these changes helpful? Are our docs easy to understan
 
 ### Trying out pre-release `v0.4.0.rc1`
 
-Due to the massive scope of these changes, we're making `v0.4.0.rc1` avaialble as a **release candidate** for the theme (i.e., a pre-release) with release `v0.4.0` coming soon. We want your help in testing the changes! As of now, the gem on RubyGems and the repository are updated to `v0.4.0.rc1`.
+Due to the massive scope of these changes, we're making `v0.4.0.rc1` available as a **release candidate** for the theme (i.e., a pre-release) with release `v0.4.0` coming soon. We want your help in testing the changes! As of now, the gem on RubyGems and the repository are updated to `v0.4.0.rc1`.
 
 To use this RC explicitly as a remote theme:
 
@@ -1542,7 +1611,7 @@ fixes #291 #256 #293 #177
 
 ## v0.2.1
 
-This update fixes security vulnerablities in the lodash sub-dependency and bumps other dev dependencies to their latest version.
+This update fixes security vulnerabilities in the lodash sub-dependency and bumps other dev dependencies to their latest version.
 
 ## v0.2.0
 

data/_includes/components/breadcrumbs.html

@@ -3,30 +3,38 @@
   Depends on: page, site.
   Results in: HTML for the breadcrumbs component.
   Overwrites:
-    pages_list, parent_page, grandparent_page.
+    node, pages_list, parent_page, grandparent_page.
 {%- endcomment -%}
 
 {%- if page.url != "/" and page.parent -%}
 
-  {%- assign pages_list = site[page.collection]
-      | default: site.html_pages
-      | where_exp: "item", "item.title != nil"
-      | where_exp: "item", "item.has_children != nil" -%}
-
-  {%- if page.grand_parent -%}
-    {%- assign parent_page = pages_list
-        | where: "title", page.parent
-        | where: "parent", page.grand_parent
-        | first -%}
-    {%- assign grandparent_page = pages_list
-        | where: "title", page.grand_parent
-        | first -%}
-  {%- else -%}
-    {%- assign parent_page = pages_list
-        | where: "title", page.parent
-        | where_exp: "item", "item.parent == nil"
-        | first -%}
-  {%- endif -%}
+  {%- assign pages_list = site[page.collection] | default: site.html_pages -%}
+
+  {%- assign parent_page = nil -%}
+  {%- assign grandparent_page = nil -%}
+
+  {%- for node in pages_list -%}
+  
+    {%- if node.has_children and page.grand_parent -%}
+
+      {%- if node.title == page.parent and node.parent == page.grand_parent -%}
+        {%- assign parent_page = node -%}
+      {%- endif -%}
+      {%- if node.title ==  page.grand_parent -%}
+        {%- assign grandparent_page = node -%}
+      {%- endif -%}
+      {%- if parent_page and grandparent_page -%}
+        {%- break -%}
+      {%- endif -%}
+
+    {%- elsif node.has_children and node.title == page.parent and node.parent == nil -%}
+
+      {%- assign parent_page = node -%}
+      {%- break -%}
+
+    {%- endif -%}
+
+  {%- endfor -%}
 
 <nav aria-label="Breadcrumb" class="breadcrumb-nav">
   <ol class="breadcrumb-nav-list">

data/_includes/{nav.html → components/nav.html}

@@ -1,5 +1,5 @@
 {%- comment -%}
-  Include as: {%- include_cached nav.html pages=pages -%}
+  Include as: {%- include components/nav.html pages=pages -%}
   Depends on: include.pages.
   Results in: HTML for the navigation panel.
   Includes:

data/_includes/components/sidebar.html

@@ -3,10 +3,9 @@
   Depends on: page(?), site.
   Results in: HTML for the side bar.
   Includes:
-    title.html, nav.html, nav_footer_custom.html
-  Overwrites: 
-    pages_top_size, collections_size, collection_entry,
-    collection_key, collection_value, collection, nav_footer_custom.
+    title.html, components/site_nav.html, nav_footer_custom.html
+  Overwrites:
+    nav_footer_custom.
   Should not be cached, because nav_footer_custom.html might depend on page.
 {%- endcomment -%}
 
@@ -17,58 +16,8 @@
       <svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg>
     </button>
   </div>
-  <nav aria-label="Main" id="site-nav" class="site-nav">
-    {% assign pages_top_size = site.html_pages
-          | where_exp:"item", "item.title != nil"
-          | where_exp:"item", "item.parent == nil"
-          | where_exp:"item", "item.nav_exclude != true"
-          | size %}
-    {% if pages_top_size > 0 %}
-      {% include_cached nav.html pages=site.html_pages %}
-    {% endif %}
-    {%- if site.nav_external_links -%}
-      <ul class="nav-list">
-        {%- for node in site.nav_external_links -%}
-          <li class="nav-list-item external">
-            <a href="{{ node.url | absolute_url }}" class="nav-list-link external">
-              {{ node.title }}
-              {% unless node.hide_icon %}<svg viewBox="0 0 24 24" aria-labelledby="svg-external-link-title"><use xlink:href="#svg-external-link"></use></svg>{% endunless %}
-            </a>
-          </li>
-        {%- endfor -%}
-      </ul>
-    {%- endif -%}
-    {% if site.just_the_docs.collections %}
-      {% assign collections_size = site.just_the_docs.collections | size %}
-      {% for collection_entry in site.just_the_docs.collections %}
-        {% assign collection_key = collection_entry[0] %}
-        {% assign collection_value = collection_entry[1] %}
-        {% assign collection = site[collection_key] %}
-        {% if collection_value.nav_exclude != true %}
-          {% if collections_size > 1 or pages_top_size > 0 %}
-            {% if collection_value.nav_fold == true %}
-              <ul class="nav-list nav-category-list">
-                <li class="nav-list-item{% if page.collection == collection_key %} active{% endif %}">
-                  {%- if collection.size > 0 -%}
-                  <button class="nav-list-expander btn-reset" aria-label="Toggle collection {{ collection_value.name }}" aria-pressed="{% if page.collection == collection_key %}true{% else %}false{% endif %}">
-                    <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
-                  </button>
-                  {%- endif -%}
-                  <div class="nav-category">{{ collection_value.name }}</div>
-                  {% include_cached nav.html pages=collection %}
-                </li>
-              </ul>
-            {% else %}
-              <div class="nav-category">{{ collection_value.name }}</div>
-              {% include_cached nav.html pages=collection %}
-            {% endif %}
-          {% else %}
-            {% include_cached nav.html pages=collection %}
-          {% endif %}
-        {% endif %}
-      {% endfor %}
-    {% endif %}
-  </nav>
+
+  {% include_cached components/site_nav.html %}
 
   {% capture nav_footer_custom %}
     {%- include nav_footer_custom.html -%}

data/_includes/components/site_nav.html

@@ -0,0 +1,67 @@
+{%- comment -%}
+  Include as: {%- include_cached components/site_nav.html -%}
+  Depends on: site.
+  Results in: HTML for the site-nav.
+  Includes:
+    components/nav.html
+  Overwrites:
+    pages_top_size, collections_size, collection_entry,
+    collection_key, collection_value, collection.
+{%- endcomment -%}
+
+<nav aria-label="Main" id="site-nav" class="site-nav">
+  {% assign pages_top_size = site.html_pages
+        | where_exp:"item", "item.title != nil"
+        | where_exp:"item", "item.parent == nil"
+        | where_exp:"item", "item.nav_exclude != true"
+        | size %}
+  {% if pages_top_size > 0 %}
+    {% include components/nav.html pages=site.html_pages %}
+  {% endif %}
+  {%- if site.nav_external_links -%}
+    <ul class="nav-list">
+      {%- for node in site.nav_external_links -%}
+        <li class="nav-list-item external">
+          <a href="{{ node.url | absolute_url }}" class="nav-list-link external"
+            {% if node.opens_in_new_tab or node.opens_in_new_tab == nil and site.nav_external_links_new_tab %}
+              target="_blank" rel="noopener noreferrer"
+            {% endif %}
+          >
+            {{ node.title }}
+            {% unless node.hide_icon %}<svg viewBox="0 0 24 24" aria-labelledby="svg-external-link-title"><use xlink:href="#svg-external-link"></use></svg>{% endunless %}
+          </a>
+        </li>
+      {%- endfor -%}
+    </ul>
+  {%- endif -%}
+  {% if site.just_the_docs.collections %}
+    {% assign collections_size = site.just_the_docs.collections | size %}
+    {% for collection_entry in site.just_the_docs.collections %}
+      {% assign collection_key = collection_entry[0] %}
+      {% assign collection_value = collection_entry[1] %}
+      {% assign collection = site[collection_key] %}
+      {% if collection_value.nav_exclude != true %}
+        {% if collections_size > 1 or pages_top_size > 0 %}
+          {% if collection_value.nav_fold == true %}
+            <ul class="nav-list nav-category-list">
+              <li class="nav-list-item">
+                {%- if collection.size > 0 -%}
+                <button class="nav-list-expander btn-reset" aria-label="Toggle collection {{ collection_value.name }}" aria-pressed="false">
+                  <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
+                </button>
+                {%- endif -%}
+                <div class="nav-category">{{ collection_value.name }}</div>
+                {% include components/nav.html pages=collection %}
+              </li>
+            </ul>
+          {% else %}
+            <div class="nav-category">{{ collection_value.name }}</div>
+            {% include components/nav.html pages=collection %}
+          {% endif %}
+        {% else %}
+          {% include components/nav.html pages=collection %}
+        {% endif %}
+      {% endif %}
+    {% endfor %}
+  {% endif %}
+</nav>

data/_includes/css/activation.scss.liquid

@@ -1,20 +1,47 @@
 {%- 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: 
-    activation_pages, activation_pages_top_size, activation_page, activation_title,
+    activation_no_nav_link, activation_pages, activation_pages_top_size, activation_page, activation_title,
     activation_first_level, activation_second_level, activation_third_level,
     activation_first_level_reversed, activation_second_level_reversed,
-    activation_first_level_index, activation_second_level_index, activation_third_level_index.
+    activation_first_level_index, activation_second_level_index, activation_third_level_index,
+    activation_index, activation_collection_prefix, activation_other_collection_prefix.
   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 -%}
+{%- comment -%}
+  The CSS rules in activation_no_nav_link are for use on pages excluded from the main navigation.
+  - The first rule ensures that no nav-link has a background image.
+  - The other two rules ensure that all folding collections are expanded.
+{%- endcomment -%}
+
+{%- capture activation_no_nav_link %}
+.site-nav ul li a {
+  background-image: none;
+}
+
+{%- if site.just_the_docs.collections %}
+.site-nav > ul.nav-category-list > li > button svg {
+  transform: rotate(-90deg);
+}
+.site-nav > ul.nav-category-list > li.nav-list-item > ul.nav-list {
+  display: block;
+}
+{%- endif %}
+{% endcapture -%}
+
+{%- if page.title == nil or page.nav_exclude == true -%}
+
+{{ activation_no_nav_link }}
+
+{%- else -%}
 
 {%- assign activation_pages = site[page.collection]
       | default: site.html_pages
@@ -27,6 +54,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" -%}
@@ -39,7 +71,11 @@
   {%- endif -%}
 {%- endfor -%}
 
-{%- unless activation_first_level_index == nil -%}
+{%- if activation_first_level_index == nil -%}
+
+{{ activation_no_nav_link }}
+
+{%- else -%}
 
 {%- if page.grand_parent -%}
   {%- assign activation_title = page.parent -%}
@@ -83,90 +119,163 @@
   {%- endfor -%}
 {%- endif -%}
 
-{%- unless activation_second_level_index == nil and activation_third_level_index -%}
+{%- if activation_second_level_index == nil and activation_third_level_index -%}
+
+{{ activation_no_nav_link }}
+
+{%- else -%}
+
+{%- comment -%}
+  The site-nav is:
+  - an optional ul.nav-list with li.nav-list-items for non-collection top-level pages
+  - an optional ul.nav-list with li.nav-list-item.externals
+  - any number of just-the-docs.collections
+  
+  A non-foldable collection is:
+  - a div.nav-category with the collection name, followed by:
+  - a ul.nav-list with li.nav-list-items for its top-level pages
+  
+  A foldable collection is:
+  - a ul.nav-list.nav-category-list with a single li.nav-list-item containing:
+    - an optional button with the expander svg
+    - a div.nav-category with the collection name
+    - a ul.nav-list with li.nav-list-items for its top-level pages
+  
+  The generated CSS uses:
+  - activation_collection_prefix, to select the site-nav > ul.nav-list for the page
+  - activation_other_collection_prefix, to select all the other site-nav > ul.nav-lists
+{%- endcomment -%}
 
 {%- if page.collection == nil -%}
 
   {%- capture activation_collection_prefix -%}
-  .site-nav > .nav-list:nth-child(1):not(.nav-category-list) 
+  .site-nav > ul.nav-list:first-child
+  {%- endcapture -%}
+
+  {%- capture activation_other_collection_prefix -%}
+  .site-nav > ul.nav-list:not(:first-child)
   {%- endcapture -%}
 
 {%- else -%}
 
   {%- for activation_collection in site.just_the_docs.collections -%}
     {%- if activation_collection[0] == page.collection -%}
-      {%- assign activation_collection_index = forloop.index -%}
+      {%- assign activation_index = forloop.index -%}
       {%- break -%}
     {%- endif -%}
   {%- endfor -%}
-  {%- assign activation_index = activation_collection_index -%}
+
   {%- assign activation_pages_top_size = site.html_pages
           | where_exp:"item", "item.title != nil"
           | where_exp:"item", "item.parent == nil"
           | where_exp:"item", "item.nav_exclude != true"
           | size -%}
-  {%- if activation_pages_top_size > 0  -%}
+  {%- if activation_pages_top_size > 0 -%}
     {%- assign activation_index = activation_index | plus: 1 -%}
   {%- endif -%}
+
   {%- if site.nav_external_links -%}
     {%- assign activation_index = activation_index | plus: 1 -%}
   {%- endif -%}
+
   {%- 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 %}
+  .site-nav > ul:nth-of-type({{ activation_index }})
+  {%- if site.just_the_docs.collections[page.collection].nav_fold %} > li > ul
+  {%- endif -%}
   {%- endcapture -%}
-  
+
+  {%- capture activation_other_collection_prefix -%}
+  .site-nav > ul: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 }} > li > a,
+{{ activation_collection_prefix }} > li > ul > li > a,
+{{ activation_collection_prefix }} > li > ul > li > ul > li:not(:nth-child({{ activation_third_level_index }})) > a {
+  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);
-      }
-    }
-
-    > .nav-list {
-      display: block;
-    }
-  }
+{%- elsif activation_second_level_index -%}
+
+{{ activation_collection_prefix }} > li > a,
+{{ activation_collection_prefix }} > li > ul > li:not(:nth-child({{ activation_second_level_index }})) > a,
+{{ activation_collection_prefix }} > li > ul > li > ul > li > a {
+  background-image: none;
+}
+
+{%- else -%}
+
+{{ activation_collection_prefix }} > li:not(:nth-child({{ activation_first_level_index }})) > a,
+{{ activation_collection_prefix }} > li > ul > li > a,
+{{ activation_collection_prefix }} > li > ul > li > ul > li > a {
+  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);
-    }
-  }
-
-  > .nav-list {
-    display: block;
-  }
+{%- endif %}
+
+{%- comment -%}
+  The following rule removes the image from the links to pages in other collections.
+{%- endcomment %}
+
+{{ activation_other_collection_prefix }} a,
+.site-nav li.external a {
+  background-image: none;
 }
 
-{%- endunless -%}
-{%- endunless -%}
-{%- endunless -%}
+{%- comment -%}
+  The following rule styles the link to the current page.
+{%- endcomment %}
+
+{{ activation_collection_prefix }} > li:nth-child({{ activation_first_level_index }})
+{%- if activation_second_level_index %} > ul > li:nth-child({{ activation_second_level_index }})
+{%- if activation_third_level_index %} > ul > li:nth-child({{ activation_third_level_index }})
+{%- endif -%}
+{%- endif %} > a {
+  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 %}
+
+{%- if site.just_the_docs.collections %}
+.site-nav > ul.nav-category-list > li > button svg,
+{% endif -%}
+{{ activation_collection_prefix }} > li:nth-child({{ activation_first_level_index }}) > button svg
+{%- if activation_second_level_index -%},
+{{ activation_collection_prefix }} > li:nth-child({{ activation_first_level_index }}) > ul > li:nth-child({{ activation_second_level_index }}) > button svg
+{%- endif %} {
+  transform: rotate(-90deg);
+}
+
+{%- if site.just_the_docs.collections %}
+.site-nav > ul.nav-category-list > li.nav-list-item > ul.nav-list,
+{% endif -%}
+{{ activation_collection_prefix }} > li.nav-list-item:nth-child({{ activation_first_level_index }}) > ul.nav-list
+{%- if activation_second_level_index %},
+{{ activation_collection_prefix }} > li.nav-list-item:nth-child({{ activation_first_level_index }}) > ul.nav-list > li.nav-list-item:nth-child({{ activation_second_level_index }}) > ul.nav-list
+{%- endif %} {
+  display: block;
+}
+
+{%- endif -%}
+{%- endif -%}
+{%- endif -%}

data/_includes/head.html

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

data/assets/css/just-the-docs-head-nav.css

@@ -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 %}
+.site-nav ul li a {
+  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 }}

data/assets/js/just-the-docs.js

@@ -38,8 +38,8 @@ function initNav() {
   const siteNav = document.getElementById('site-nav');
   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,23 @@ 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:
+// - a <link> to /assets/css/just-the-docs-head-nav.css,
+//             with id 'jtd-head-nav-stylesheet'
+// - a <style> containing the result of _includes/css/activation.scss.liquid.
+// To avoid relying on the order of stylesheets (which can change with HTML
+// compression, user-added JavaScript, and other side effects), stylesheets
+// are only interacted with via ID
+
+function disableHeadStyleSheets() {
+  const headNav = document.getElementById('jtd-head-nav-stylesheet');
+  if (headNav) {
+    headNav.disabled = true;
+  }
 
-function disableHeadStyleSheet() {
-  if (document.styleSheets[1]) {
-    document.styleSheets[1].disabled = true;
+  const activation = document.getElementById('jtd-nav-activation');
+  if (activation) {
+    activation.disabled = true;
   }
 }
 
@@ -491,6 +501,7 @@ function scrollNav() {
   if (targetLink) {
     const rect = targetLink.getBoundingClientRect();
     document.getElementById('site-nav').scrollBy(0, rect.top - 3*rect.height);
+    targetLink.removeAttribute('href');
   }
 }
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: just-the-docs
 version: !ruby/object:Gem::Version
-  version: 0.6.2
+  version: 0.7.0
 platform: ruby
 authors:
 - Patrick Marsceill
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-09-20 00:00:00.000000000 Z
+date: 2023-10-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -100,9 +100,11 @@ files:
 - _includes/components/footer.html
 - _includes/components/header.html
 - _includes/components/mermaid.html
+- _includes/components/nav.html
 - _includes/components/search_footer.html
 - _includes/components/search_header.html
 - _includes/components/sidebar.html
+- _includes/components/site_nav.html
 - _includes/css/activation.scss.liquid
 - _includes/css/callouts.scss.liquid
 - _includes/css/custom.scss.liquid
@@ -112,7 +114,6 @@ files:
 - _includes/footer_custom.html
 - _includes/head.html
 - _includes/head_custom.html
-- _includes/head_nav.html
 - _includes/header_custom.html
 - _includes/icons/code_copy.html
 - _includes/icons/document.html
@@ -126,7 +127,6 @@ files:
 - _includes/lunr/custom-data.json
 - _includes/lunr/custom-index.js
 - _includes/mermaid_config.js
-- _includes/nav.html
 - _includes/nav_footer_custom.html
 - _includes/search_placeholder_custom.html
 - _includes/sorted_pages.html
@@ -179,6 +179,7 @@ files:
 - _sass/vendor/normalize.scss/normalize.scss
 - assets/css/just-the-docs-dark.scss
 - assets/css/just-the-docs-default.scss
+- assets/css/just-the-docs-head-nav.css
 - assets/css/just-the-docs-light.scss
 - assets/js/just-the-docs.js
 - assets/js/vendor/lunr.min.js

data/_includes/head_nav.html

@@ -1,48 +0,0 @@
-{%- comment -%}
-  Include as: {%- include head_nav.html -%}
-  Depends on: site.color_scheme.
-  Results in: HTML for a page-specific style element.
-  Includes:
-    css/activation.scss.liquid.
-  Overwrites: 
-    activation, test_scss, scss, css, index, count.
-  Should not be cached, because css/activation.scss.liquid depends on page.
-{%- endcomment -%}
-
-{% capture activation %}
-  {% include css/activation.scss.liquid %}
-{%- endcapture -%}
-
-{% capture test_scss %}
-  @import "./support/support";
-  @import "./color_schemes/light";
-  {{ activation }}
-{%- endcapture -%}
-
-{%- capture scss -%}
-  @import "./support/support";
-  @import "./custom/setup";
-  {% if site.color_scheme and site.color_scheme != "nil" -%}
-    {%- assign color_scheme = site.color_scheme -%}
-  {%- else -%}
-    {%- assign color_scheme = "light" -%}
-  {%- endif %}
-  @import "./color_schemes/light";
-  {% unless color_scheme == "light" %}
-  @import "./color_schemes/{{ color_scheme }}";
-  {% endunless %}
-  {{ activation }}
-{%- endcapture -%}
-
-{%- comment -%}
-  Convert to CSS, then remove the color_scheme import rules to avoid duplication.
-  The value of count is page-dependent, but independent of custom color schemes.
-{%- endcomment -%}
-{%- assign count = test_scss  | scssify | split: ".site-nav" | size -%}
-{%- unless count == 1 %}
-{%- assign index = 1 | minus: count -%}
-{%- assign css = scss | scssify | split: ".site-nav" | slice: index, count | join: ".site-nav" -%}
-<style type="text/css">
-{{ css | prepend: ".site-nav" }}
-</style>
-{%- endunless %}