⬆ UPGRADE: Pydata Sphinx Theme v0.6.0

docs/conf.py

@@ -76,7 +76,8 @@
 
 html_sidebars = {
     "reference/blog/*": [
-        "sidebar-search-bs.html",
+        "sidebar-logo.html",
+        "search-field.html",
         "postcard.html",
         "recentposts.html",
         "tagcloud.html",
@@ -117,6 +118,7 @@
     # "single_page": True,
     # "extra_footer": "<a href='https://google.com'>Test</a>",  # DEPRECATED KEY
     # "extra_navbar": "<a href='https://google.com'>Test</a>",
+    # "show_navbar_depth": 2,
 }
 
 # -- ABlog config -------------------------------------------------

docs/configure.md

@@ -215,8 +215,7 @@ using the following configuration in `conf.py`:
 show_navbar_depth = <level>
 ```
 
-The default value is 1, which is used in this documentation.
-Value of 0 will collapse all the sections and sub-sections by default.
+The default value is `1`, which shows only top-level sections of the documentation (and is used in this documentation).
 
 ## Customize CSS
 

setup.py

@@ -32,7 +32,7 @@
         "docutils>=0.15",
         "sphinx>=2,<4",
         "click",
-        "pydata-sphinx-theme~=0.5.1",
+        "pydata-sphinx-theme~=0.6.0",
         "beautifulsoup4>=4.6.1,<5",
         'importlib-resources>=3.0,<3.5; python_version < "3.7"',
     ],

sphinx_book_theme/__init__.py

@@ -76,23 +76,30 @@ def update_all(app, env):
 
 
 def add_to_context(app, pagename, templatename, context, doctree):
+
     # TODO: remove this whenever the nav collapsing functionality is in the PST
     def sbt_generate_nav_html(
         level=1,
         include_item_names=False,
         with_home_page=False,
         prev_section_numbers=None,
+        show_depth=1,
     ):
         # Config stuff
         config = app.env.config
         if isinstance(with_home_page, str):
             with_home_page = with_home_page.lower() == "true"
 
-        # Grab the raw toctree object and structure it so we can manipulate it
-        toc_sphinx = context["toctree"](
-            maxdepth=-1, collapse=False, titles_only=True, includehidden=True
+        # Convert the pydata toctree html to beautifulsoup
+        toctree = context["generate_nav_html"](
+            startdepth=level - 1,
+            kind="sidebar",
+            maxdepth=4,
+            collapse=False,
+            includehidden=True,
+            titles_only=True,
         )
-        toctree = bs(toc_sphinx, "html.parser")
+        toctree = bs(toctree, "html.parser")
 
         # Add the master_doc page as the first item if specified
         if with_home_page:
@@ -110,7 +117,7 @@ def sbt_generate_nav_html(
             # Insert it into our toctree
             ul_home = bs(
                 f"""
-            <ul>
+            <ul class="nav bd-sidenav">
                 <li class="{li_class}">
                     <a href="{master_url}" class="reference internal">{master_title}</a>
                 </li>
@@ -119,65 +126,12 @@ def sbt_generate_nav_html(
             )
             toctree.insert(0, ul_home("ul")[0])
 
-        # pair "current" with "active" since that's what we use w/ bootstrap
-        for li in toctree("li", {"class": "current"}):
-            li["class"].append("active")
-
-        # Add an icon for external links
-        for a_ext in toctree("a", attrs={"class": ["external"]}):
-            a_ext.append(
-                toctree.new_tag("i", attrs={"class": ["fas", "fa-external-link-alt"]})
-            )
-
-        # get level specified in conf
-        navbar_level = int(context["theme_show_navbar_depth"])
-
-        # function to open/close list and add icon
-        def collapse_list(li, ul, level):
-            if ul:
-                li.attrs["class"] = li.attrs.get("class", []) + ["collapsible-parent"]
-                if level <= 0:
-                    ul.attrs["class"] = ul.attrs.get("class", []) + ["collapse-ul"]
-                    li.append(
-                        toctree.new_tag(
-                            "i", attrs={"class": ["fas", "fa-chevron-down"]}
-                        )
-                    )
-                else:
-                    # Icon won't show up unless captions are collapsed
-                    if not li.name == "p" and "caption" not in li["class"]:
-                        li.append(
-                            toctree.new_tag(
-                                "i", attrs={"class": ["fas", "fa-chevron-up"]}
-                            )
-                        )
-
-        # for top-level caption's collapse functionality
-        for para in toctree("p", attrs={"class": ["caption"]}):
-            ul = para.find_next_sibling()
-            collapse_list(para, ul, navbar_level)
-
-        # iterate through all the lists in the sideabar and open/close
-        def iterate_toc_li(li, level):
-            if hasattr(li, "name") and li.name == "li":
-                ul = li.find("ul")
-                collapse_list(li, ul, level)
-            if isinstance(li, list) or hasattr(li, "name"):
-                for entry in li:
-                    if isinstance(entry, str):
-                        continue
-                    if hasattr(entry, "name"):
-                        if entry.name == "li":
-                            iterate_toc_li(entry, level - 1)
-                        else:
-                            iterate_toc_li(entry, level)
-            return
-
-        iterate_toc_li(toctree, navbar_level)
-
-        # Add bootstrap classes for first `ul` items
-        for ul in toctree("ul", recursive=False):
-            ul.attrs["class"] = ul.attrs.get("class", []) + ["nav", "sidenav_l1"]
+        # Open the navbar to the proper depth
+        for ii in range(int(show_depth)):
+            for checkbox in toctree.select(
+                f"li.toctree-l{ii} > input.toctree-checkbox"
+            ):
+                checkbox.attrs["checked"] = None
 
         return toctree.prettify()
 

sphinx_book_theme/_templates/sbt-sidebar-nav.html

@@ -1,3 +1,5 @@
 <nav class="bd-links" id="bd-docs-nav" aria-label="Main navigation">
-    {{ sbt_generate_nav_html(include_item_names=True, with_home_page=theme_home_page_in_toc) }}
+    <div class="bd-toc-item active">
+        {{ sbt_generate_nav_html(include_item_names=True, with_home_page=theme_home_page_in_toc, show_depth=theme_show_navbar_depth) }}
+    </div>
 </nav>

sphinx_book_theme/_templates/sidebar-logo.html

@@ -0,0 +1,10 @@
+<div class="navbar-brand-box">
+    <a class="navbar-brand text-wrap" href="{{ pathto('index') }}">
+      {% if logo %}
+      <img src="{{ pathto('_static/' + logo, 1) }}" class="logo" alt="logo">
+      {% endif %}
+      {% if docstitle %}
+      <h1 class="site-logo" id="site-title">{{ docstitle }}</h1>
+      {% endif %}
+    </a>
+</div>

sphinx_book_theme/sidebar.html

@@ -1,15 +1,3 @@
-<div class="navbar-brand-box">
-<a class="navbar-brand text-wrap" href="{{ pathto('index') }}">
-  {% if logo %}
-  <img src="{{ pathto('_static/' + logo, 1) }}" class="logo" alt="logo">
-  {% endif %}
-  {% if docstitle %}
-  <h1 class="site-logo" id="site-title">{{ docstitle }}</h1>
-  {% endif %}
-</a>
-</div>
-
-
 {%- for sidebartemplate in sidebars %}
 {%- include sidebartemplate %}
 {%- endfor %}

sphinx_book_theme/theme.conf

@@ -2,8 +2,8 @@
 [theme]
 inherit = pydata_sphinx_theme
 pygments_style = tango
-sidebars = sidebar-search-bs.html, sbt-sidebar-nav.html, sbt-sidebar-footer.html
-stylesheet = sphinx-book-theme.ff71f0c119730445d1ea81d8ac423bad.css
+sidebars = sidebar-logo.html, search-field.html, sbt-sidebar-nav.html, sbt-sidebar-footer.html
+stylesheet = sphinx-book-theme.d1eca0c74be0ba334ed3837a61090a22.css
 
 [options]
 single_page = False

src/jinja/theme.conf

@@ -2,7 +2,7 @@
 [theme]
 inherit = pydata_sphinx_theme
 pygments_style = tango
-sidebars = sidebar-search-bs.html, sbt-sidebar-nav.html, sbt-sidebar-footer.html
+sidebars = sidebar-search-bs.html, sbt-sidebar-nav.html, sbt-sidebar-footer.html, sidebar-ethical-ads.html
 stylesheet = sphinx-book-theme.c73dba93dc14e2148248cba6cd058605.css
 
 [options]

src/jinja/theme.conf.j2

@@ -2,7 +2,7 @@
 [theme]
 inherit = pydata_sphinx_theme
 pygments_style = tango
-sidebars = sidebar-search-bs.html, sbt-sidebar-nav.html, sbt-sidebar-footer.html
+sidebars = sidebar-logo.html, search-field.html, sbt-sidebar-nav.html, sbt-sidebar-footer.html
 stylesheet = {{ "src/scss/sphinx-book-theme.scss" | compiled_name }}
 
 [options]

src/js/sphinx-book-theme.js

@@ -99,49 +99,6 @@ var initTocHide = () => {
   });
 }
 
-var collapsibleListener = () => {
-  // to keep the relevant sidebar open according to the url
-  let expandUl = ($ul) => {
-    if ($ul.hasClass("collapse-ul")) {
-      $ul.removeClass("collapse-ul")
-      $ul.next("i").removeClass("fa-chevron-down").addClass("fa-chevron-up")
-    }
-  }
-  $elem = $("li.active")
-  for (el of $elem) {
-    $ul = $(el).closest("ul")
-    expandUl($ul)
-    $ulChild = $(el).children("ul")
-    expandUl($ulChild)
-    $p = $ul.prev()
-    if ($p.is(".caption, .collapsible-parent")) {
-      $p.find("i").removeClass("fa-chevron-down").addClass("fa-chevron-up")
-    }
-  }
-  // click handler
-  $(".collapsible-parent>i, .caption.collapsible-parent").on("click", function(e) {
-    e.stopPropagation()
-    $i = $(this)
-    $collapsibleParent = $i.closest(".collapsible-parent")
-    if ($collapsibleParent.prop("tagName") == "P") {
-      $ul = $collapsibleParent.next("ul")
-    } else {
-      $ul = $collapsibleParent.find("ul:first")
-    }
-    $ul.toggle(0, function() {
-      if (!$i.is(".fas")) {
-        $i = $i.find("i")
-      }
-      if ($i.hasClass("fa-chevron-up")) {
-        $i.removeClass("fa-chevron-up")
-        $i.addClass("fa-chevron-down")
-      } else {
-        $i.removeClass("fa-chevron-down")
-        $i.addClass("fa-chevron-up")
-      }
-    })
-  })
-}
 
 var initThebeSBT = () => {
   var title  = $("div.section h1")[0]
@@ -155,4 +112,3 @@ sbRunWhenDOMLoaded(initTooltips)
 sbRunWhenDOMLoaded(initTriggerNavBar)
 sbRunWhenDOMLoaded(scrollToActive)
 sbRunWhenDOMLoaded(initTocHide)
-sbRunWhenDOMLoaded(collapsibleListener)