just-the-docs 0.5.1 → 0.5.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 83da987642bb3ab4e6effd437df8ba6f9bfeffc3a165d3b616acacd02557d6a9
-  data.tar.gz: 5e8c992d3e888e62762b1cfc0a6c09687f4846273241b30afb9f504f3ee93011
+  metadata.gz: 3c914f96a39d67612eb720be6798e3d98f66e6c30eb9897844857bb3eaa0c9de
+  data.tar.gz: e0e87b2c3bfea07a57a850fa1dcac7aeed496fbb9254618312f18ecd37152cfe
 SHA512:
-  metadata.gz: f0102310b666323d527447ed3c0794a119801730b41c058aa6467921dbccb1d145d57f6776046a539395181b9d154448098178f2aa19b13ab493dcc646191d60
-  data.tar.gz: c44bcffa016a9769b09105d567c3280aaa9e2e60914622d20438ddfb7aeac938adafdf98bc382edb61176c994ed9b518320be248189107033a7e072945dfce50
+  metadata.gz: 84f2f452bcbd0094849a076b9db382fac613ea4ca2584b1f754c8cfdcf449ea84aeb7264ed7b1f98ff3127500a5c038d93444294779a5119aa51cb160130e6b7
+  data.tar.gz: 932fdf1cd13b62dd30ebbd507bfcb4661b81d549efed16e5ef0f61a1b3b0222668a97d5c1ac3057512f764ee8836d28e48f1962026f4de97f9b33bb153de95a6

data/CHANGELOG.md

@@ -16,7 +16,7 @@ The project underwent a major maintenance shift in March 2022.
 This website is built from the `HEAD` of the `main` branch of the theme repository.
 
 {: .warning }
-This website includes docs for some new features that are not available in `v0.5.0`!
+This website includes docs for some new features that are not available in `v0.5.2`!
 
 Code changes to `main` that are *not* in the latest release:
 
@@ -26,6 +26,79 @@ Docs changes in `main` that are *not* in the latest release:
 
 - N/A
 
+## Release v0.5.3
+
+Hi all, this is a minor patch release that only includes one change: changing all text-based CSS properties to use `rem` instead of hard-coded `px` values. This has two effects:
+
+1. All deprecation warnings are now fixed on build; you should now get a clean build with `jekyll build`.
+2. We have **deprecated the `$root-font-size` SCSS variable**. We will remove it in an upcoming release of the theme.
+
+If you use the stock Just the Docs theme, this release should have no impact on your final built site. If you change the `$root-font-size` SCSS variable, you might experience light layout shifts.
+
+### Using Release `v0.5.3`
+
+Users who have not pinned the theme version will be **automatically upgraded to `v0.5.3` 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.5.3
+```
+
+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.5.3"
+```
+
+To use and pin a previous version of the theme, replace the `0.5.3` with the desired release tag.
+
+### Bugfixes
+
+- Fixed: font-size scaling for text-related CSS properties by using `rem` instead of fixed `px` values; deprecate `$root-font-size` by [@mattxwang] in [#1169]
+
+[#1169]: https://github.com/just-the-docs/just-the-docs/pull/1169
+
+## Release v0.5.2
+
+Hi all, this is a minor patch release that mostly focuses on accessibility. Since we follow semantic versioning, this should be a smooth upgrade with no breaking changes.
+
+In addition, the theme docs website has a new canonical URL: <https://just-the-docs.com>. We've also retroactively published the theme docs website for version `v0.3.3` at <https://v0-3-3-docs.just-the-docs.com/>. Thank you to our GitHub sponsors for funding our domain name!
+
+### Using Release `v0.5.2`
+
+Users who have not pinned the theme version will be **automatically upgraded to `v0.5.2` 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.5.2
+```
+
+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.5.2"
+```
+
+To use and pin a previous version of the theme, replace the `0.5.2` with the desired release tag.
+
+### Bugfixes
+
+- Fixed: liquid variable leakage in navigation components by [@pdmosses] in [#1243]
+- Fixed: ARIA roles and labels for search, header, logo, mobile menu button, and main content by [@joelhawksley] in [#1259]
+- Fixed: ARIA labels for all anchors with `href="#"`; adds `aria-pressed` information for toggles by [@mattxwang] in [#1262]
+
+### New Contributors
+
+- [@joelhawksley] made their first contribution in [#1259]
+
+[@joelhawksley]: https://github.com/joelhawksley
+
+[#1243]: https://github.com/just-the-docs/just-the-docs/pull/1243
+[#1259]: https://github.com/just-the-docs/just-the-docs/pull/1259
+[#1262]: https://github.com/just-the-docs/just-the-docs/pull/1262
+
 ## Release v0.5.1
 
 Hi all, this is a very small minor patch release that has two small behavioral bugfixes: fixing a regression introduced in `v0.5.0` on Safari versions `<16.4` (broken media query), and the copy code button providing incorrect feedback in insecure browser contexts. This should be a smooth upgrade with no breaking changes.
@@ -87,7 +160,7 @@ As always, we'd love your feedback. [Open an issue](https://github.com/just-the-
 
 **Migration**: users with a custom `setup.scss` cannot rely on variables or functions defined in `color_scheme`. This reverts to the behaviour in `v0.4.1`. Users should instead move those variables or functions to the `color_scheme` files themselves.
 
-For more, refer to the [migration guide](https://just-the-docs.github.io/just-the-docs/MIGRATION/).
+For more, refer to the [migration guide](https://just-the-docs.com/MIGRATION/).
 
 ### Using Release `v0.5.0`
 
@@ -127,7 +200,7 @@ To use and pin a previous version of the theme, replace the `0.5.0` with the des
 
 Hello! We're back again with another small release. Like `v0.4.1`, this release is a [semver patch](https://semver.org/): it only includes bugfixes, and is fully backwards-compatible.
 
-The big highlight of this theme is fixing our light scheme code highlighting contrast issues; this was one of our most-requested features! This change is fully backwards-compatible; users can [opt-in to our old highlighting theme](https://just-the-docs.github.io/just-the-docs/docs/customization/#deprecated-legacy_light) by using `legacy_light` instead of `light`.
+The big highlight of this theme is fixing our light scheme code highlighting contrast issues; this was one of our most-requested features! This change is fully backwards-compatible; users can [opt-in to our old highlighting theme](https://just-the-docs.com/docs/customization/#deprecated-legacy_light) by using `legacy_light` instead of `light`.
 
 As always, we'd love your feedback. [Open an issue](https://github.com/just-the-docs/just-the-docs/issues) or [start a discussion](https://github.com/just-the-docs/just-the-docs/discussions) for bug reports, feature requests, and any other feedback. Thanks for continuing to use Just the Docs!
 
@@ -228,16 +301,16 @@ We're so excited to release Just the Docs `v0.4.0`. This release has been almost
 `v0.4.0` contains many new features and bugfixes. We enumerate all of them in further sections in this changelog; however, we'd like to call out some of the most-requested changes:
 
 - better support for dark theme: dark highlighting, search input color
-- [callouts](https://just-the-docs.github.io/just-the-docs/docs/ui-components/callouts/), a new design component to highlight content
-- [configuring mermaid.js](https://just-the-docs.github.io/just-the-docs/docs/ui-components/code/#mermaid-diagram-code-blocks), a markdown-native diagram visualization library
-- [copy code button](https://just-the-docs.github.io/just-the-docs/docs/ui-components/code/#copy-button) for code snippets
-- [external navigation links](https://just-the-docs.github.io/just-the-docs/docs/navigation-structure/#external-navigation-links)
+- [callouts](https://just-the-docs.com/docs/ui-components/callouts/), a new design component to highlight content
+- [configuring mermaid.js](https://just-the-docs.com/docs/ui-components/code/#mermaid-diagram-code-blocks), a markdown-native diagram visualization library
+- [copy code button](https://just-the-docs.com/docs/ui-components/code/#copy-button) for code snippets
+- [external navigation links](https://just-the-docs.com/docs/navigation-structure/#external-navigation-links)
 - major improvements to nav generation efficiency and robustness
 - minor improvements to built-in accessibility (SVG icons, nav titles, skip to main content)
-- [modularized site components](https://just-the-docs.github.io/just-the-docs/docs/customization/#custom-layouts-and-includes) (advanced feature)
-- [new custom includes](https://just-the-docs.github.io/just-the-docs/docs/customization/#override-includes): table of contents heading, navigation panel footer, search placeholder, lunr search indices
+- [modularized site components](https://just-the-docs.com/docs/customization/#custom-layouts-and-includes) (advanced feature)
+- [new custom includes](https://just-the-docs.com/docs/customization/#override-includes): table of contents heading, navigation panel footer, search placeholder, lunr search indices
 - bugfixes involving WEBrick and Ruby 3, Liquid processing in CSS comments, nested task lists, relative URLs, scroll navigation, corrupted search data from rake, breadcrumbs, and more!
-- more documentation for [custom includes](https://just-the-docs.github.io/just-the-docs/docs/customization/#override-includes), this changelog, and the [migration guide](https://just-the-docs.github.io/just-the-docs/MIGRATION/)
+- more documentation for [custom includes](https://just-the-docs.com/docs/customization/#override-includes), this changelog, and the [migration guide](https://just-the-docs.com/MIGRATION/)
 
 *After usage instructions and the roadmap, we enumerate all changes from `v0.3.3`.*
 
@@ -270,7 +343,7 @@ remote_theme: just-the-docs/just-the-docs@v0.3.3
 
 ### Migration Guide and Strategies
 
-We've developed a new [migration guide](https://just-the-docs.github.io/just-the-docs/MIGRATION/) for users to migrate from version `v0.3.3` to `v0.4.0`. It outlines major changes in project maintenance (e.g. new repository link, team) as well as breaking changes that may break your site (and potential solutions). We suggest that all users refer to the guide before manually upgrading their site.
+We've developed a new [migration guide](https://just-the-docs.com/MIGRATION/) for users to migrate from version `v0.3.3` to `v0.4.0`. It outlines major changes in project maintenance (e.g. new repository link, team) as well as breaking changes that may break your site (and potential solutions). We suggest that all users refer to the guide before manually upgrading their site.
 
 **For the vast majority of users, we do not anticipate that this will be a breaking change.** The major touch points are surrounding new includes, navigation (ordering, pages, and collections), the favicon, and a shift to relative URLs. However, users who heavily customize the theme (primarily by overriding includes) will likely have to make minor changes.
 

data/README.md

@@ -5,7 +5,7 @@
 <p align="center">
     <h1 align="center">Just the Docs</h1>
     <p align="center">A modern, highly customizable, and responsive Jekyll theme for documentation with built-in search.<br>Easily hosted on GitHub Pages with few dependencies.</p>
-    <p align="center"><strong><a href="https://just-the-docs.github.io/just-the-docs/">See it in action!</a></strong></p>
+    <p align="center"><strong><a href="https://just-the-docs.com/">See it in action!</a></strong></p>
     <br><br><br>
 </p>
 
@@ -102,7 +102,7 @@ The theme is available as open source under the terms of the [MIT License](http:
 
 [Jekyll]: https://jekyllrb.com
 [Just the Docs Template]: https://just-the-docs.github.io/just-the-docs-template/
-[Just the Docs]: https://just-the-docs.github.io/just-the-docs/
+[Just the Docs]: https://just-the-docs.com
 [Just the Docs repo]: https://github.com/just-the-docs/just-the-docs
 [GitHub Pages]: https://pages.github.com/
 [Template README]: https://github.com/just-the-docs/just-the-docs-template/blob/main/README.md

data/_includes/components/breadcrumbs.html

@@ -1,15 +1,43 @@
-{% unless page.url == "/" %}
-  {% if page.parent %}
-    <nav aria-label="Breadcrumb" class="breadcrumb-nav">
-      <ol class="breadcrumb-nav-list">
-        {% if page.grand_parent %}
-          <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
-          <li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
-        {% else %}
-          <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
-        {% endif %}
-        <li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
-      </ol>
-    </nav>
-  {% endif %}
-{% endunless %}
+{%- comment -%}
+  Include as: {%- include components/breadcrumbs.html -%}
+  Depends on: page, site.
+  Results in: HTML for the breadcrumbs component.
+  Overwrites:
+    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 -%}
+
+<nav aria-label="Breadcrumb" class="breadcrumb-nav">
+  <ol class="breadcrumb-nav-list">
+  {% if page.parent -%}
+  {%- if page.grand_parent %}
+    <li class="breadcrumb-nav-list-item"><a href="{{ grandparent_page.url | relative_url }}">{{ page.grand_parent }}</a></li>
+  {%- endif %}
+    <li class="breadcrumb-nav-list-item"><a href="{{ parent_page.url | relative_url }}">{{ page.parent }}</a></li>
+  {% endif -%}
+    <li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
+  </ol>
+</nav>
+
+{%- endif -%}

data/_includes/components/children_nav.html

@@ -1,9 +1,33 @@
+{%- comment -%}
+  Include as: {%- include components/children_nav.html -%}
+  Depends on: page, site.
+  Results in: HTML for the children-navigation component.
+  Includes:
+    sorted_pages.html
+    toc_heading_custom.html
+  Overwrites:
+    child_pages.
+{%- endcomment -%}
+
+{%- if page.has_children == true and page.has_toc != false -%}
+  {%- assign child_pages = site[page.collection]
+        | default: site.html_pages
+        | where: "parent", page.title
+        | where: "grand_parent", page.parent -%}
+
+  {%- include sorted_pages.html pages = child_pages -%}
+
+  {%- if page.child_nav_order == 'desc' or page.child_nav_order == 'reversed' -%}
+    {%- assign sorted_pages = sorted_pages | reverse -%}
+  {%- endif -%}
+{%- endif -%}
+
 <hr>
 {% include toc_heading_custom.html %}
 <ul>
-  {% for child in include.toc_list %}
-    <li>
-      <a href="{{ child.url | relative_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
-    </li>
-  {% endfor %}
+{% for child in sorted_pages %}
+  <li>
+    <a href="{{ child.url | relative_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
+  </li>
+{% endfor %}
 </ul>

data/_includes/components/search_footer.html

@@ -1,7 +1,7 @@
 {% if site.search.button %}
-<a href="#" id="search-button" class="search-button">
-  <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg>
-</a>
+<button id="search-button" class="search-button btn-reset" aria-label="Focus on search">
+  <svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-search"></use></svg>
+</button>
 {% endif %}
 
 <div class="search-overlay"></div>

data/_includes/components/search_header.html

@@ -1,6 +1,6 @@
 {% capture search_placeholder %}{% include search_placeholder_custom.html %}{% endcapture %}
 
-<div class="search">
+<div class="search" role="search">
   <div class="search-input-wrap">
     <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="{{ search_placeholder | strip_html | strip }}" aria-label="{{ search_placeholder | strip_html| strip }}" autocomplete="off">
     <label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label>

data/_includes/components/sidebar.html

@@ -1,8 +1,8 @@
 <div class="side-bar">
-  <div class="site-header">
+  <div class="site-header" role="banner">
     <a href="{{ '/' | relative_url }}" class="site-title lh-tight">{% include title.html %}</a>
-    <a href="#" id="menu-button" class="site-button">
-      <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-menu"></use></svg>
+    <button id="menu-button" class="site-button btn-reset" aria-label="Toggle menu" aria-pressed="false">
+      <svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg>
     </a>
   </div>
   <nav aria-label="Main" id="site-nav" class="site-nav">
@@ -38,7 +38,9 @@
               <ul class="nav-list nav-category-list">
                 <li class="nav-list-item{% if page.collection == collection_key %} active{% endif %}">
                   {%- if collection.size > 0 -%}
-                  <a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg></a>
+                  <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 nav.html pages=collection key=collection_key %}

data/_includes/nav.html

@@ -1,160 +1,54 @@
 {%- comment -%}
-  The `nav_order` values of pages affect the order in which they are shown in
-  the navigation panel and in the automatically generated tables of contents.
-  Sibling pages with the same `nav_order` value may be shown in any order.
-  Sibling pages with no `nav_order` value are shown after all pages that have
-  explicit `nav_order` values, ordered by their `title` values.
-  
-  The `nav_order` and `title` values can be numbers or strings. To avoid build
-  failures, we sort numbers and strings separately. We sort numbers by their
-  values, and strings lexicographically. The case-sensitivity of string sorting
-  is determined by the configuration setting of `nav_sort`. Pages with no `title`
-  value are excluded from the navigation.
-
-  Note: Numbers used as `title` or `nav_order` values should not be in quotes,
-  unless you intend them to be lexicographically ordered. Numbers are written
-  without spaces or thousands-separators. Negative numbers are preceded by `-`.
-  Floats are written with the integral and fractional parts separated by `.`.
-  (Bounds on the magnitude and precision are presumably the same as in Liquid.)
+  Include as: {%- include nav.html pages = pages key = key -%}
+  Depends on: include.pages, include.key, page, site.
+  Results in: HTML for the navigation panel.
+  Includes:
+    sorted_pages.html
+  Overwrites:
+    nav_pages, first_level_pages, second_level_pages, third_level_pages,
+    node, children_list, child, grand_children_list, grand_child.
 {%- endcomment -%}
 
-{%- assign title_pages = include.pages
-      | where_exp: "item", "item.title != nil" -%}
-
-{%- comment -%}
-  A page with `nav_exclude: true` does not appear in the main navigation.
-  If it has a `parent`, it may appear in the parent's table of contents.
-  If it specifies `has_children: true`, it should appear in the breadcrumbs
-  of the child pages, but its order in relation to other pages is irrelevant.
-  Pages that never appear can be removed from the pages that need to be sorted.
-  This optimisation can be significant on a site with many pages.
-  
-  In Jekyll 4, the pages to be sorted can be filtered by:
-  
-  {%- assign title_pages = title_pages
-        | where_exp: "item", "item.nav_exclude != true or item.parent != nil" -%}
-  
-  That filter is not allowed in Jekyll 3. The following iterative code gives the
-  same effect, but it is activated only when it will filter more than 50% of the
-  pages.
-{%- endcomment -%}
+{%- assign nav_pages = include.pages
+    | where_exp: "item", "item.title != nil"
+    | where_exp: "item", "item.nav_exclude != true" -%}
 
-{%- unless title_pages == empty -%}
-  {%- assign unsorted_pages = title_pages
-        | where_exp: "item", "item.parent == nil" 
-        | where_exp: "item", "item.nav_exclude == true" -%}
-  {%- assign title_pages_size = title_pages.size -%}
-  {%- assign unsorted_pages_percent = unsorted_pages.size
-        | times: 100 | divided_by: title_pages_size -%}
-  {%- if unsorted_pages_percent > 50 -%}
-    {%- assign sorted_pages = "" | split: "" -%}
-    {%- for item in title_pages -%}
-      {%- if item.nav_exclude != true or item.parent -%}
-        {%- assign sorted_pages = sorted_pages | push: item -%}
-      {%- endif -%}
-    {%- endfor -%}
-    {%- assign title_pages = sorted_pages -%}
-  {%- endif -%}
-{%- endunless -%}
+{%- include sorted_pages.html pages = nav_pages -%}
 
-{%- assign nav_order_pages = title_pages
-      | where_exp: "item", "item.nav_order != nil" -%}
-{%- assign title_order_pages = title_pages
-      | where_exp: "item", "item.nav_order == nil" -%}
+{%- assign first_level_pages = sorted_pages
+    | where_exp: "item", "item.parent == nil" -%}
+{%- assign second_level_pages = sorted_pages
+    | where_exp: "item", "item.parent != nil"
+    | where_exp: "item", "item.grand_parent == nil" -%}
+{%- assign third_level_pages = sorted_pages
+    | where_exp: "item", "item.grand_parent != nil" -%}
 
 {%- comment -%}
-  Divide the arrays of `nav_order_pages` and `title_order_pages` according to
-  the type of value.
-  
-  The first character of the result of `jsonify` is `"` only for strings.
-  Grouping by a single character also ensures the number of groups is small.
-{%- endcomment -%}
-
-{%- assign nav_number_pages = "" | split: "" -%}
-{%- assign nav_string_pages = "" | split: "" -%}
-{%- assign nav_order_groups = nav_order_pages
-      | group_by_exp: "item", "item.nav_order | jsonify | slice: 0" -%}
-{%- for group in nav_order_groups -%}
-  {%- if group.name == '"' -%}
-    {%- assign nav_string_pages = group.items -%}
-  {%- else -%}
-    {%- assign nav_number_pages = nav_number_pages | concat: group.items -%}
-  {%- endif -%}
-{%- endfor -%}
-
-{%- unless nav_number_pages == empty -%}
-  {%- assign nav_number_pages = nav_number_pages | sort: "nav_order" -%}
-{%- endunless -%}
-
-{%- unless nav_string_pages == empty -%}
-  {%- if site.nav_sort == 'case_insensitive' -%}
-    {%- assign nav_string_pages = nav_string_pages | sort_natural: "nav_order" -%}
-  {%- else -%}
-    {%- assign nav_string_pages = nav_string_pages | sort: "nav_order" -%}
-  {%- endif -%}
-{%- endunless -%}
-
-{%- assign title_number_pages = "" | split: "" -%}
-{%- assign title_string_pages = "" | split: "" -%}
-{%- assign title_order_groups = title_order_pages
-      | group_by_exp: "item", "item.title | jsonify | slice: 0" -%}
-{%- for group in title_order_groups -%}
-  {%- if group.name == '"' -%}
-    {%- assign title_string_pages = group.items -%}
-  {%- else -%}
-    {%- assign title_number_pages = title_number_pages | concat: group.items -%}
-  {%- endif -%}
-{%- endfor -%}
-
-{%- unless title_number_pages == empty -%}
-  {%- assign title_number_pages = title_number_pages | sort: "title" -%}
-{%- endunless -%}
-
-{%- unless title_string_pages == empty -%}
-  {%- if site.nav_sort == 'case_insensitive' -%}
-    {%- assign title_string_pages = title_string_pages | sort_natural: "title" -%}
-  {%- else -%}
-    {%- assign title_string_pages = title_string_pages | sort: "title" -%}
-  {%- endif -%}
-{%- endunless -%}
-
-{%- assign pages_list = nav_number_pages | concat: nav_string_pages
-      | concat: title_number_pages | concat: title_string_pages -%}
+  The order of sibling pages in `sorted_pages` determines the order of display of
+  links to them in lists of navigation links.
 
-{%- assign first_level_pages = pages_list
-      | where_exp: "item", "item.parent == nil" -%}
-{%- assign second_level_pages = pages_list
-      | where_exp: "item", "item.parent != nil"
-      | where_exp: "item", "item.grand_parent == nil" -%}
-{%- assign third_level_pages = pages_list
-      | where_exp: "item", "item.grand_parent != nil" -%}
-
-{%- comment -%}
-  The order of sibling pages in `pages_list` determines the order of display of
-  links to them in lists of navigation links and in auto-generated TOCs.
-  
   Note that Liquid evaluates conditions from right to left (and it does not allow
   the use of parentheses). Some conditions are not so easy to express clearly...
-  
+
   For example, consider the following condition:
-  
-    C: page.collection = = include.key and 
-       page.url = = node.url or 
-       page.grand_parent = = node.title or 
-       page.parent = = node.title and 
+
+    C: page.collection = = include.key and
+       page.url = = node.url or
+       page.grand_parent = = node.title or
+       page.parent = = node.title and
        page.grand_parent = = nil
- 
+
   Here, `node` is a first-level page. The last part of the condition
   -- namely: `page.parent = = node.title and page.grand_parent = = nil` --
   is evaluated first; it holds if and only if `page` is a child of `node`.
-  
-  The condition `page.grand_parent = = node.title or ...` holds when 
+
+  The condition `page.grand_parent = = node.title or ...` holds when
   `page` is a grandchild of node, OR `...` holds.
-  
-  The condition `page.url = = node.url or ...` holds when 
+
+  The condition `page.url = = node.url or ...` holds when
   `page` is `node`, OR `...` holds.
-  
-  The condition C: `page.collection = = include.key and ...` holds when we are 
+
+  The condition C: `page.collection = = include.key and ...` holds when we are
   generating the nav links for a collection that includes `page`, AND `...` holds.
 {%- endcomment -%}
 
@@ -163,9 +57,9 @@
     {%- unless node.nav_exclude -%}
       <li class="nav-list-item{% if page.collection == include.key and page.url == node.url or page.grand_parent == node.title or page.parent == node.title and page.grand_parent == nil %} active{% endif %}">
         {%- if node.has_children -%}
-          <a href="#" class="nav-list-expander" aria-label="toggle links in {{ node.title }} category">
-            <svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg>
-          </a>
+        <button class="nav-list-expander btn-reset" aria-label="toggle items in {{ node.title }} category" aria-pressed="{% if page.collection == include.key and page.url == node.url or page.grand_parent == node.title or page.parent == node.title and page.grand_parent == nil %}true{% else %}false{% endif %}">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
+        </button>
         {%- endif -%}
         <a href="{{ node.url | relative_url }}" class="nav-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
         {%- if node.has_children -%}
@@ -179,9 +73,9 @@
             {%- unless child.nav_exclude -%}
             <li class="nav-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
               {%- if child.has_children -%}
-                <a href="#" class="nav-list-expander" aria-label="toggle links in {{ child.title }} category">
-                  <svg viewBox="0 0 24 24"><use xlink:href="#svg-arrow-right"></use></svg>
-                </a>
+                <button class="nav-list-expander btn-reset" aria-label="toggle items in {{ child.title }} category" aria-pressed="{% if page.url == child.url or page.parent == child.title %}true{% else %}false{% endif %}">
+                  <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
+                </button>
               {%- endif -%}
               <a href="{{ child.url | relative_url }}" class="nav-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
               {%- if child.has_children -%}
@@ -210,42 +104,3 @@
     {%- endunless -%}
 {%- endfor -%}
 </ul>
-
-{%- comment -%}
-  `page.collection` is the name of the Jekyll collection that contains the page,
-  if any, and otherwise nil. Similarly for `include.key`.
-  
-  If the current page is in the collection (if any) whose navigation is currently
-  being generated, the following code sets `first_level_url` to the URL used in
-  the page's top-level breadcrumb (if any), and `second_level_url` to that used
-  in the page's second-level breadcrumb (if any).
-  
-  For pages with children, the code also sets `toc_list` to the list of child pages,
-  reversing the order if needed.
-{%- endcomment -%}
-
-{%- if page.collection == include.key -%}
-  {%- for node in first_level_pages -%}
-      {%- if page.grand_parent == node.title or page.parent == node.title and page.grand_parent == nil -%}
-        {%- assign first_level_url = node.url | relative_url -%}
-      {%- endif -%}
-      {%- if node.has_children -%}
-        {%- assign children_list = second_level_pages | where: "parent", node.title -%}
-        {%- for child in children_list -%}
-          {%- if child.has_children -%}
-            {%- if page.url == child.url or page.parent == child.title and page.grand_parent == child.parent -%}
-              {%- assign second_level_url = child.url | relative_url -%}
-            {%- endif -%}
-          {%- endif -%}
-        {%- endfor -%}
-      {%- endif -%}
-  {%- endfor -%}
-  {%- if page.has_children == true and page.has_toc != false -%}
-    {%- assign toc_list = pages_list
-          | where: "parent", page.title
-          | where_exp: "item", "item.grand_parent == page.parent" -%}
-    {%- if page.child_nav_order == 'desc' or page.child_nav_order == 'reversed' -%}
-      {%- assign toc_list = toc_list | reverse -%}
-    {%- endif -%}
-  {%- endif -%}
-{%- endif -%}

data/_includes/sorted_pages.html

@@ -0,0 +1,95 @@
+{%- comment -%}
+  Include as: {%- include sorted_pages.html pages = pages -%}
+  Depends on: include.pages.
+  Assigns to: sorted_pages.
+  Overwrites: 
+    nav_order_pages, title_order_pages, 
+    nav_number_pages, nav_string_pages, nav_order_groups, group,
+    title_number_pages, title_string_pages, title_order_groups.
+{%- endcomment -%}
+
+{%- comment -%}
+  The `nav_order` values of pages affect the order in which they are shown in
+  the navigation panel and in the automatically generated tables of contents.
+  Sibling pages with the same `nav_order` value may be shown in any order.
+  Sibling pages with no `nav_order` value are shown after all pages that have
+  explicit `nav_order` values, ordered by their `title` values.
+  
+  The `nav_order` and `title` values can be numbers or strings. To avoid build
+  failures, we sort numbers and strings separately. We sort numbers by their
+  values, and strings lexicographically. The case-sensitivity of string sorting
+  is determined by the configuration setting of `nav_sort`. Pages with no `title`
+  value are excluded from the navigation.
+
+  Note: Numbers used as `title` or `nav_order` values should not be in quotes,
+  unless you intend them to be lexicographically ordered. Numbers are written
+  without spaces or thousands-separators. Negative numbers are preceded by `-`.
+  Floats are written with the integral and fractional parts separated by `.`.
+  (Bounds on the magnitude and precision are presumably the same as in Liquid.)
+{%- endcomment -%}
+
+{%- assign nav_order_pages = include.pages
+    | where_exp: "item", "item.nav_order != nil" -%}
+{%- assign title_order_pages = include.pages
+    | where_exp: "item", "item.nav_order == nil" -%}
+
+{%- comment -%}
+  Divide the arrays of `nav_order_pages` and `title_order_pages` according to
+  the type of value.
+  
+  The first character of the result of `jsonify` is `"` only for strings.
+  Grouping by a single character also ensures the number of groups is small.
+{%- endcomment -%}
+
+{%- assign nav_number_pages = "" | split: "" -%}
+{%- assign nav_string_pages = "" | split: "" -%}
+{%- assign nav_order_groups = nav_order_pages
+  | group_by_exp: "item", "item.nav_order | jsonify | slice: 0" -%}
+{%- for group in nav_order_groups -%}
+  {%- if group.name == '"' -%}
+    {%- assign nav_string_pages = group.items -%}
+  {%- else -%}
+    {%- assign nav_number_pages = nav_number_pages | concat: group.items -%}
+  {%- endif -%}
+{%- endfor -%}
+
+{%- unless nav_number_pages == empty -%}
+  {%- assign nav_number_pages = nav_number_pages | sort: "nav_order" -%}
+{%- endunless -%}
+
+{%- unless nav_string_pages == empty -%}
+  {%- if site.nav_sort == 'case_insensitive' -%}
+    {%- assign nav_string_pages = nav_string_pages | sort_natural: "nav_order" -%}
+  {%- else -%}
+    {%- assign nav_string_pages = nav_string_pages | sort: "nav_order" -%}
+  {%- endif -%}
+{%- endunless -%}
+
+{%- assign title_number_pages = "" | split: "" -%}
+{%- assign title_string_pages = "" | split: "" -%}
+{%- assign title_order_groups = title_order_pages
+    | group_by_exp: "item", "item.title | jsonify | slice: 0" -%}
+{%- for group in title_order_groups -%}
+  {%- if group.name == '"' -%}
+    {%- assign title_string_pages = group.items -%}
+  {%- else -%}
+    {%- assign title_number_pages = title_number_pages | concat: group.items -%}
+  {%- endif -%}
+{%- endfor -%}
+
+{%- unless title_number_pages == empty -%}
+  {%- assign title_number_pages = title_number_pages | sort: "title" -%}
+{%- endunless -%}
+
+{%- unless title_string_pages == empty -%}
+  {%- if site.nav_sort == 'case_insensitive' -%}
+    {%- assign title_string_pages = title_string_pages | sort_natural: "title" -%}
+  {%- else -%}
+    {%- assign title_string_pages = title_string_pages | sort: "title" -%}
+  {%- endif -%}
+{%- endunless -%}
+
+{%- assign sorted_pages = nav_number_pages
+    | concat: nav_string_pages
+    | concat: title_number_pages
+    | concat: title_string_pages -%}

data/_includes/title.html

@@ -1,5 +1,5 @@
 {% if site.logo %}
-  <div class="site-logo"></div>
+  <div class="site-logo" role="img" aria-label="{{ site.title }}"></div>
 {% else %}
   {{ site.title }}
 {% endif %}

data/_layouts/default.html

@@ -14,19 +14,19 @@ layout: table_wrappers
     {% include components/header.html %}
     <div id="main-content-wrap" class="main-content-wrap">
       {% include components/breadcrumbs.html %}
-      <div id="main-content" class="main-content" role="main">
-        {% if site.heading_anchors != false %}
-          {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#svg-link\"></use></svg>" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %}
-        {% else %}
-          {{ content }}
-        {% endif %}
-
-        {% if page.has_children == true and page.has_toc != false %}
-          {% include components/children_nav.html toc_list=toc_list %}
-        {% endif %}
+      <div id="main-content" class="main-content">
+        <main>
+          {% if site.heading_anchors != false %}
+            {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#svg-link\"></use></svg>" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %}
+          {% else %}
+            {{ content }}
+          {% endif %}
 
+          {% if page.has_children == true and page.has_toc != false %}
+            {% include components/children_nav.html %}
+          {% endif %}
+        </main>
         {% include components/footer.html %}
-
       </div>
     </div>
     {% if site.search_enabled != false %}

data/_layouts/minimal.html

@@ -9,32 +9,6 @@ layout: table_wrappers
 <body>
   <a class="skip-to-main" href="#main-content">Skip to main content</a>
   {% include icons/icons.html %}
-  {% comment %}
-    This is a bandaid fix to properly render breadcrumbs; as of now, there is some variable leakage between the sidebar component (which computes parents, grandparents) and the breadcrumbs component. We plan to remove this in a future release to deduplicate code.
-
-    For more context, see https://github.com/just-the-docs/just-the-docs/pull/1058#discussion_r1057014053
-  {% endcomment %}
-  {% capture 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 nav.html pages=site.html_pages key=nil %}
-    {% 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 %}
-          {% include nav.html pages=collection key=collection_key %}
-        {% endif %}
-      {% endfor %}
-    {% endif %}
-  {% endcapture %}
   <div id="main-content-wrap" class="main-content-wrap" id="top">
     {% include components/breadcrumbs.html %}
     <div id="main-content" class="main-content" role="main">
@@ -45,7 +19,7 @@ layout: table_wrappers
       {% endif %}
 
       {% if page.has_children == true and page.has_toc != false %}
-        {% include components/children_nav.html toc_list=toc_list %}
+        {% include components/children_nav.html %}
       {% endif %}
 
       {% include components/footer.html %}

data/_sass/base.scss

@@ -104,6 +104,6 @@ blockquote {
   // resets user-agent stylesheets for blockquotes
   margin-block-start: 0;
   margin-inline-start: 0;
-  padding-left: 15px;
+  padding-left: 1rem;
   border-left: 3px solid $border-color;
 }

data/_sass/buttons.scss

@@ -111,3 +111,13 @@
 .btn-green {
   @include btn-color($white, $green-100);
 }
+
+.btn-reset {
+  background: none;
+  border: none;
+  margin: 0;
+  text-align: inherit;
+  font: inherit;
+  border-radius: 0;
+  appearance: none;
+}

data/_sass/print.scss

@@ -21,7 +21,7 @@
   }
 
   .site-title {
-    font-size: $root-font-size !important;
+    font-size: 1rem !important;
     font-weight: 700 !important;
   }
 

data/_sass/search.scss

@@ -42,7 +42,7 @@
   width: 100%;
   height: 100%;
   padding: $sp-2 $gutter-spacing-sm $sp-2 #{$gutter-spacing-sm + $sp-5};
-  font-size: 16px;
+  font-size: 1rem;
   color: $body-text-color;
   background-color: $search-background-color;
   border-top: 0;
@@ -53,7 +53,7 @@
 
   @include mq(md) {
     padding: $sp-2 $gutter-spacing-sm $sp-2 #{$gutter-spacing + $sp-5};
-    font-size: 14px;
+    font-size: 0.875rem;
     background-color: $body-background-color;
     transition: padding-left linear #{$transition-duration * 0.5};
   }

data/_sass/support/_variables.scss

@@ -3,7 +3,7 @@
 $body-font-family: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI",
   roboto, "Helvetica Neue", arial, sans-serif !default;
 $mono-font-family: "SFMono-Regular", menlo, consolas, monospace !default;
-$root-font-size: 16px !default; // Base font-size for rems
+$root-font-size: 16px !default; // DEPRECATED: previously base font-size for rems
 $body-line-height: 1.4 !default;
 $content-line-height: 1.6 !default;
 $body-heading-line-height: 1.25 !default;
@@ -11,18 +11,18 @@ $body-heading-line-height: 1.25 !default;
 // Font size
 // `-sm` suffix is the size at the small (and above) media query
 
-$font-size-1: 9px !default;
-$font-size-1-sm: 10px !default;
-$font-size-2: 11px !default; // h4 - uppercased!, h6 not uppercased, text-small
-$font-size-3: 12px !default; // h5
-$font-size-4: 14px !default;
-$font-size-5: 16px !default; // h3
-$font-size-6: 18px !default; // h2
-$font-size-7: 24px !default;
-$font-size-8: 32px !default; // h1
-$font-size-9: 36px !default;
-$font-size-10: 42px !default;
-$font-size-10-sm: 48px !default;
+$font-size-1: 0.5625rem !default;
+$font-size-1-sm: 0.625rem !default;
+$font-size-2: 0.6875rem !default; // h4 - uppercased!, h6 not uppercased, text-small
+$font-size-3: 0.75rem !default; // h5
+$font-size-4: 0.875rem !default;
+$font-size-5: 1rem !default; // h3
+$font-size-6: 1.125rem !default; // h2
+$font-size-7: 1.5rem !default;
+$font-size-8: 2rem !default; // h1
+$font-size-9: 2.25rem !default;
+$font-size-10: 2.625rem !default;
+$font-size-10-sm: 3rem !default;
 
 // Colors
 
@@ -95,22 +95,22 @@ $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;
+$nav-width: 16.5rem !default;
+$nav-width-md: 15.5rem !default;
 $nav-list-item-height: $sp-6 !default;
 $nav-list-item-height-sm: $sp-8 !default;
 $nav-list-expander-right: true;
-$content-width: 800px !default;
-$header-height: 60px !default;
+$content-width: 50rem !default;
+$header-height: 3.75rem !default;
 $search-results-width: $content-width - $nav-width !default;
 $transition-duration: 400ms;
 
 // Media queries in pixels
 
 $media-queries: (
-  xs: 320px,
-  sm: 500px,
+  xs: 20rem,
+  sm: 31.25rem,
   md: $content-width,
   lg: $content-width + $nav-width,
-  xl: 1400px,
+  xl: 87.5rem,
 ) !default;

data/_sass/support/mixins/_layout.scss

@@ -12,7 +12,7 @@
   // If the key exists in the map
   @if $value {
     // Prints a media query based on the value
-    @media (min-width: rem($value)) {
+    @media (min-width: $value) {
       @content;
     }
   } @else {

data/_sass/support/support.scss

@@ -1,3 +1,2 @@
 @import "./variables";
-@import "./functions";
 @import "./mixins/mixins";

data/_sass/tables.scss

@@ -21,7 +21,7 @@ th,
 td {
   @include fs-3;
 
-  min-width: 120px;
+  min-width: 7.5rem;
   padding: $sp-2 $sp-3;
   background-color: $table-background-color;
   border-bottom: $border rgba($border-color, 0.5);

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

@@ -31,7 +31,7 @@ function initNav() {
     }
     if (target) {
       e.preventDefault();
-      target.parentNode.classList.toggle('active');
+      target.ariaPressed = target.parentNode.classList.toggle('active');
     }
   });
 
@@ -45,9 +45,11 @@ function initNav() {
     if (menuButton.classList.toggle('nav-open')) {
       siteNav.classList.add('nav-open');
       mainHeader.classList.add('nav-open');
+      menuButton.ariaPressed = true;
     } else {
       siteNav.classList.remove('nav-open');
       mainHeader.classList.remove('nav-open');
+      menuButton.ariaPressed = false;
     }
   });
 
@@ -491,8 +493,8 @@ jtd.onReady(function(){
   if (!window.isSecureContext) {
     console.log('Window does not have a secure context, therefore code clipboard copy functionality will not be available. For more details see https://web.dev/async-clipboard/#security-and-permissions');
     return;
-  } 
-  
+  }
+
   var codeBlocks = document.querySelectorAll('div.highlighter-rouge, div.listingblock > div.content, figure.highlight');
 
   // note: the SVG svg-copied and svg-copy is only loaded as a Jekyll include if site.enable_copy_code_button is true; see _includes/icons/icons.html

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: just-the-docs
 version: !ruby/object:Gem::Version
-  version: 0.5.1
+  version: 0.5.3
 platform: ruby
 authors:
 - Patrick Marsceill
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-04-25 00:00:00.000000000 Z
+date: 2023-06-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -112,6 +112,7 @@ files:
 - _includes/nav.html
 - _includes/nav_footer_custom.html
 - _includes/search_placeholder_custom.html
+- _includes/sorted_pages.html
 - _includes/title.html
 - _includes/toc_heading_custom.html
 - _includes/vendor/anchor_headings.html
@@ -139,7 +140,6 @@ files:
 - _sass/print.scss
 - _sass/search.scss
 - _sass/skiptomain.scss
-- _sass/support/_functions.scss
 - _sass/support/_variables.scss
 - _sass/support/mixins/_buttons.scss
 - _sass/support/mixins/_layout.scss
@@ -175,7 +175,7 @@ licenses:
 metadata:
   bug_tracker_uri: https://github.com/just-the-docs/just-the-docs/issues
   changelog_uri: https://github.com/just-the-docs/just-the-docs/blob/main/CHANGELOG.md
-  documentation_uri: https://just-the-docs.github.io/just-the-docs/
+  documentation_uri: https://just-the-docs.com/
   source_code_uri: https://github.com/just-the-docs/just-the-docs
 post_install_message:
 rdoc_options: []

data/_sass/support/_functions.scss

@@ -1,9 +0,0 @@
-@function rem($size, $unit: "") {
-  $rem-size: $size / $root-font-size;
-
-  @if $unit == false {
-    @return #{$rem-size};
-  } @else {
-    @return #{$rem-size}rem;
-  }
-}