just-the-docs/_includes/css/activation.scss.liquid

{%- comment -%}
  Include as: {%- include css/activation.scss.liquid -%}
  Depends on: page.
  Results in: page-dependent CSS rules for inclusion in a style element,
    which needs to be disabled when JS is enabled.
  Includes: components/site_nav.html.
  Overwrites: 
    activation_no_nav_link, nav_list_link, site_nav,
    nav_list, nav_list_end, nav_list_item, nav_category_list,
    nav_list_link_prefix, nav_splits, nav_split, nav_levels,
    nav_list_less, nav_list_count, nav_end_less, nav_end_count,
    nav_index, nav_slice_size,
    activation_collection_prefix, activation_other_collection_prefix.
  Should not be cached, because it depends on page.
{%- endcomment -%}

{%- 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 -%}

{%- capture nav_list_link -%}
<a href="{{ page.url | relative_url }}" class="nav-list-link">
{%- endcapture -%}

{%- capture site_nav -%}
{%- include_cached components/site_nav.html -%}
{%- endcapture -%}

{%- if site_nav contains nav_list_link -%}

  {%- capture nav_list -%}
  <ul class="nav-list
  {%- endcapture -%}

  {%- assign nav_list_end = "</ul>" -%}

  {%- capture nav_list_item -%}
  <li class="nav-list-item
  {%- endcapture -%}

  {%- capture nav_category_list -%}
  <ul class="nav-list nav-category-list">
  {%- endcapture -%}

  {%- assign nav_list_link_prefix =
        site_nav | split: nav_list_link | first | append: nav_list_link -%}

  {%- assign nav_splits =
        nav_list_link_prefix | split: nav_list_item | pop -%}

  {%- assign nav_levels = "" | split: "" | push: 1 -%}

  {%- comment -%}
    The pattern of occurrences of list and list-item tags in the site_nav string
    is included in the language defined by the following context-free grammar:
    
      site_nav = PAGES? EXTERNALS? COLLECTION*

      PAGES = nav_list (nav_list_item PAGES?)+ nav_list_end

      EXTERNALS = nav_list nav_list_item+ nav_list_end

      COLLECTION = nav_list (nav_list_item PAGES?)* nav_list_end
                 | nav_category_list 
                     nav_list_item nav_list (nav_list_item PAGES?)* nav_list_end
                   nav_list_end
    
    To determine the path in the site_nav to the nav_list_link for the current page,
    the prefix of nav_list_link in site_nav is split at each nav_list_item to give
    an array of nav_splits.
    
    In site_nav, occurrences of nav_list must be separated by at least one
    nav_list_item or nav_list_end. Moreover, when a nav_list_end is followed by a
    nav_list without an intervening nav_list_item, that nav_list must start either
    a list of external links or a collection. And when a nav_list is followed by a
    nav_list_end without an intervening nav_list_item, they form an empty collection.
    
    nav_levels is the path determined by the previously inspected nav_splits.
    How many times nav_list and nav_list_end occur in the current nav_split 
    determines how to update the path.
    
    A nav_split can contain any number of empty non-foldable collections.
    The path element produced by the outer nav_list of a foldable collection is
    irrelevant; it is set to zero and subsequently removed.
      
    The number of occurrences of a string in a nav_split is computed by removing
    them all, then dividing the resulting size difference by the length of the string.
    
    Case analysis on (nav_list_count, nav_list_end_count):
    
    - when (0, 0), the nav_split was between two nav_list_items at the same level;
    
    - when (0, N+1), all the nav_list_ends in the nav_split are in PAGES or in one
      COLLECTION;
      
    - when (M+1, 0), M must be 0 (because two nav_lists in the same nav_split must
      be separated by at least one nav_list_end);
      
    - when (M+1, N+1), the nav_split must contain either:
      - the end of PAGES followed by the start of EXTERNALS, or
      - the end of PAGES followed by the start of a COLLECTION, or
      - the end of EXTERNALS followed by the start of a COLLECTION, or
      - the end of one COLLECTION followed by the start of another, or
      - (in the first nav_split) one or more empty non-foldable COLLECTIONS
        followed by the start of a COLLECTION.
      In general, nav_levels[0] here needs to be incremented by nav_list_count.
      However, a nav_split that contains the end of an empty foldable collection
      followed by the just the start of a collection has two occurrences of nav_list,
      and the increment needs to be one less; similarly when the first nav_split
      starts with an empty non-foldable collection.
  {%- endcomment %}

  {%- for nav_split in nav_splits -%}

    {%- assign nav_list_less = nav_split | remove: nav_list -%}
    {%- assign nav_list_count =
          nav_split.size | minus: nav_list_less.size | 
          divided_by: nav_list.size -%}

    {%- assign nav_list_end_less = nav_split | remove: nav_list_end -%}
    {%- assign nav_list_end_count =
          nav_split.size | minus: nav_list_end_less.size | 
          divided_by: nav_list_end.size -%}

    {%- if nav_list_count == 0 and nav_list_end_count == 0 -%}

      {%- assign nav_index = nav_levels[-1] | plus: 1 -%}
      {%- assign nav_levels = nav_levels | pop | push: nav_index -%}

    {%- elsif nav_list_count == 0 and nav_list_end_count >= 1 -%}

      {%- assign nav_slice_size = nav_levels.size | minus: nav_list_end_count -%}
      {%- assign nav_levels = nav_levels | slice: 0, nav_slice_size -%}
      {%- assign nav_index = nav_levels[-1] | plus: 1 -%}
      {%- assign nav_levels = nav_levels | pop | push: nav_index -%}

    {%- elsif nav_list_count == 1 and nav_list_end_count == 0 -%}

      {%- if nav_split contains nav_category_list -%}
        {%- assign nav_levels = nav_levels | push: 0 -%}
      {%- else -%}
        {%- assign nav_levels = nav_levels | push: 1 -%}
      {%- endif -%}

    {%- elsif nav_list_count >= 1 and nav_list_end_count >= 1 -%}

      {%- assign nav_index = nav_levels[0] | plus: nav_list_count -%}
      {%- if nav_levels[-1] == 0 or forloop.first -%}
        {%- assign nav_index = nav_index | minus: 1 -%}
      {%- endif -%}
      {%- assign nav_levels = nav_levels | slice: 0, 0 | push: nav_index -%}
      {%- if nav_split contains nav_category_list -%}
        {%- assign nav_levels = nav_levels | push: 0 -%}
      {%- else -%}
        {%- assign nav_levels = nav_levels | push: 1 -%}
      {%- endif -%}

    {%- endif -%}

  {%- endfor -%}

  {%- assign nav_levels = nav_levels | where_exp: "item", "item >= 1" -%}

  {%- comment -%}
    The generated CSS depends on the position of the current page in each level in
    the navigation.

    nav_page_level is the depth of the navigation hierarchy (ignoring collections).
    In existing 3-level sites, nav_page_level <= 3.
    In multi-level sites, nav_page_level is unbounded.
  {%- endcomment -%}

  {%- assign nav_page_level = nav_levels.size | minus: 1 -%}
  {%- assign nav_page_parent_level = nav_page_level | minus: 1 -%}
  {%- assign nav_page_grandparent_level = nav_page_level | minus: 2 -%}

  {%- 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 > ul.nav-list:first-child
    {%- endcapture -%}

    {%- capture activation_other_collection_prefix -%}
    .site-nav > ul.nav-list:not(:first-child)
    {%- endcapture -%}

  {%- else -%}

    {%- capture activation_collection_prefix -%}
    .site-nav > ul:nth-of-type({{ nav_levels[0] }})
    {%- 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({{ nav_levels[0] }}))
    {%- endcapture -%}

  {%- endif -%}

  {%- 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 nav_page_level >= 2 -%}
    {%- for i in (1..nav_page_parent_level) -%}
    {{ activation_collection_prefix }} >
    {%- for j in (2..i) %} li > ul >
    {%- endfor %} li > a,
    {% endfor -%}
    {%- endif %}
    {{ activation_collection_prefix }} >
    {%- for i in (1..nav_page_parent_level) %} li > ul >
    {%- endfor %} li:not(:nth-child({{ nav_levels[nav_page_level] }})) > a,
    {{ activation_collection_prefix }} >
    {%- for i in (1..nav_page_level) %} li > ul >
    {%- endfor %} li a {
      background-image: none;
    }

  {%- 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;
    }

  {%- comment -%}
    The following rule styles the link to the current page.
  {%- endcomment %}

    {{ activation_collection_prefix }} > li:nth-child({{ nav_levels[1] }})
    {%- for i in (2..nav_page_level) %} > ul > li:nth-child({{ nav_levels[i] }})
    {%- endfor %} > 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({{ nav_levels[1] }}) > button svg
    {%- for i in (2..nav_page_level) %},
    {{ activation_collection_prefix }} > li:nth-child({{ nav_levels[1] }}) > 
    {%- for j in (2..i) %} ul > li:nth-child({{ nav_levels[j] }}) >
    {%- endfor %} button svg
    {%- endfor %} {
      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({{ nav_levels[1] }}) > ul.nav-list
    {%- for i in (2..nav_page_level) %},
    {{ activation_collection_prefix }} > li.nav-list-item:nth-child({{ nav_levels[1] }}) >
    {%- for j in (2..i) %} ul.nav-list > li.nav-list-item:nth-child({{ nav_levels[j] }}) >
    {%- endfor %} ul.nav-list
    {%- endfor %} {
      display: block;
    }

{%- else -%}

  {%- comment -%}
    not site_nav contains nav_list_link
  {%- endcomment -%}

    {{ activation_no_nav_link }}

{%- endif -%}