Remove JQuery and update versions

.github/workflows/tests.yml

@@ -30,14 +30,14 @@ jobs:
         # Only test the latest major release of Sphinx because otherwise we need to
         # keep multiple versions of regression tests on file and this creates lots of
         # noise in the tests.
-        sphinx: [">=5,<6"]
+        sphinx: [">=6,<7"]
         include:
         - os: windows-latest
           python-version: 3.9
-          sphinx: ">=5,<6"
+          sphinx: ">=6,<7"
         - os: macos-latest
           python-version: 3.9
-          sphinx: ">=5,<6"
+          sphinx: ">=6,<7"
     runs-on: ${{ matrix.os }}
 
     steps:

README.md

@@ -7,7 +7,7 @@
 This is a lightweight Sphinx theme designed to mimic the look-and-feel of an
 interactive book. It has the following primary features:
 
-* **Bootstrap 4**
+* **Bootstrap 5**
   for visual elements and functionality.
 * **Flexible content layout** that is inspired by beautiful online books,
   such as [the Edward Tufte CSS guide](https://edwardtufte.github.io/tufte-css/)

docs/conf.py

@@ -44,6 +44,7 @@
 intersphinx_mapping = {
     "python": ("https://docs.python.org/3.8", None),
     "sphinx": ("https://www.sphinx-doc.org/en/master", None),
+    "pst": ("https://pydata-sphinx-theme.readthedocs.io/en/latest/", None),
 }
 nitpick_ignore = [
     ("py:class", "docutils.nodes.document"),
@@ -82,7 +83,7 @@
 
 html_sidebars = {
     "reference/blog/*": [
-        "sidebar-logo.html",
+        "navbar-logo.html",
         "search-field.html",
         "postcard.html",
         "recentposts.html",
@@ -120,7 +121,9 @@
     "use_repository_button": True,
     "use_download_button": True,
     "use_sidenotes": True,
-    "logo_only": True,
+    "logo": {
+        "text": html_title,
+    },
     "show_toc_level": 2,
     "announcement": (
         "⚠️The latest release refactored our HTML, "

docs/customize/index.md

@@ -39,9 +39,6 @@ The following options are available via `html_theme_options`
 * - `home_page_in_toc`
   - bool
   - Whether to put the home page in the Navigation Bar (at the top). See [](sidebar-primary:home-page).
-* - `logo_only`
-  - bool
-  - Only display the logo, not `html_title` if it exists.
 * - `show_navbar_depth`
   - int
   - Show children in the navigation bar down to the depth listed here. See [](sidebar:navbar-depth).

docs/customize/sidebar-primary.md

@@ -33,7 +33,7 @@ See the [Sphinx HTML sidebars documentation](https://www.sphinx-doc.org/en/maste
 
 By default, this theme comes with these three theme-specific sidebar elements enabled on all pages:
 
-- `sidebar-logo.html`: Displays the logo and site title.
+- `navbar-logo.html`: Displays the logo and site title.
 - `search-field.html`: A bootstrap-based search bar (from the [PyData Sphinx Theme](https://pydata-sphinx-theme.readthedocs.io/))
 - `sbt-sidebar-nav.html`: A bootstrap-based navigation menu for your book.
 
@@ -56,15 +56,10 @@ html_favicon = "path/to/favicon.ico"
 
 These will be placed in the top-left of your page.
 
-To **remove the site title** below the logo, add this line in `conf.py`:
+Alternatively you can use the `logo` field in `html_theme_options` to have more control over your logo.
+
+For more details, see the {external:doc}`PyData Sphinx Theme <user_guide/branding>`.
 
-```python
-html_theme_options = {
-  ...
-  "logo_only": True,
-  ...
-}
-```
 
 (sidebar-primary:home-page)=
 ## Add the home page to your table of contents

docs/index.md

@@ -33,7 +33,7 @@ A Sphinx theme with a clean design, support for interactive content, and a moder
 [Launch buttons for online interactivity](launch)
 : For pages that are built with computational material, connect your site to an online BinderHub for interactive content.
 
-[Bootstrap 4](https://getbootstrap.com/docs/4.0/getting-started/introduction/)
+[Bootstrap 5](https://getbootstrap.com/docs/5.0/getting-started/introduction/)
 : To style visual elements and add functionality.
 
 International

docs/reference/notebooks.md

@@ -22,7 +22,7 @@ This is a page to demonstrate the look and feel of Jupyter Notebook elements.
 ### Hiding inputs
 
 ```{code-cell} ipython3
-:tags: [remove_cell]
+:tags: [remove-cell]
 
 # Generate some code that we'll use later on in the page
 import numpy as np
@@ -33,7 +33,7 @@ wide = np.random.randn(100, 1000)
 ```
 
 ```{code-cell} ipython3
-:tags: [hide_input]
+:tags: [hide-input]
 
 # Hide input
 square = np.random.randn(100, 100)
@@ -49,7 +49,7 @@ ax.imshow(wide)
 ### Hiding outputs
 
 ```{code-cell} ipython3
-:tags: [hide_output]
+:tags: [hide-output]
 
 # Hide output
 square = np.random.randn(100, 100)
@@ -82,7 +82,7 @@ With a body!
 ### Hiding both inputs and outputs
 
 ```{code-cell} ipython3
-:tags: [hide_output, hide_input]
+:tags: [hide-output, hide-input]
 
 square = np.random.randn(100, 100)
 wide = np.random.randn(100, 1000)
@@ -97,7 +97,7 @@ ax.imshow(wide)
 ### Hiding the whole cell
 
 ```{code-cell} ipython3
-:tags: [hide_cell]
+:tags: [hide-cell]
 
 square = np.random.randn(100, 100)
 wide = np.random.randn(100, 1000)

pyproject.toml

@@ -22,9 +22,8 @@ readme = "README.md"
 
 requires-python = ">=3.7"
 dependencies = [
-  "sphinx>=4,<6",
-  "pydata-sphinx-theme~=0.12.0",
-  "pyyaml",
+  "sphinx>=4,<7",
+  "pydata-sphinx-theme",
 ]
 
 license = { file = "LICENSE" }
@@ -44,43 +43,38 @@ classifiers = [
 
 [project.optional-dependencies]
 code_style = [
-    "pre-commit>=2.7,<2.22"
+    "pre-commit"
 ]
 doc = [
-    "ablog~=0.10.13",
+    "ablog",
     "ipywidgets",
     "folium",
     "numpy",
     "matplotlib",
     "numpydoc",
-    "myst-nb~=0.16.0",
+    "myst-nb",
     "nbclient",
     "pandas",
     "plotly",
-    "sphinx>=4.0,<6",
     "sphinx-design",
     "sphinx-examples",
     "sphinx-copybutton",
-    "sphinx-tabs",
-    "sphinx-togglebutton>=0.2.1",
-    "sphinx-thebe>=0.1.1",
-    "sphinxcontrib-bibtex~=2.2",
+    "sphinx-tabs<=3.4.0", # sphinx-tabs 3.4.1 needs docutils >.17, which would conflict with our pin above
+    "docutils==0.17.1", # docutils 0.18, 0.19 need a patch fix https://sourceforge.net/p/docutils/patches/195/, un-pin when 0.20 is released
+    "sphinx-togglebutton",
+    "sphinx-thebe",
+    "sphinxcontrib-bibtex",
     "sphinxcontrib-youtube",
     "sphinxext-opengraph",
-    # 8.7.0 broke the `ipython3` lexer in Sphinx so we want to avoid it
-    # remove this when 8.7.1 is released (and see below for another instance)
-    "ipython!=8.7.0",
 ]
 test = [
     "beautifulsoup4>=4.6.1,<5",
     "coverage",
-    "myst-nb~=0.16.0",
-    "pytest~=7.1",
-    "pytest-cov>=3,<5",
-    "pytest-regressions>=2.0.1,<2.5.0",
+    "myst-nb",
+    "pytest",
+    "pytest-cov",
+    "pytest-regressions",
     "sphinx_thebe",
-    # 8.7.0 broke the `ipython3` lexer in Sphinx so we want to avoid it
-    "ipython!=8.7.0",
 ]
 
 [project.entry-points]

src/sphinx_book_theme/__init__.py

@@ -58,10 +58,11 @@ def add_metadata_to_page(app, pagename, templatename, context, doctree):
     # Translations
     translation = get_translation(MESSAGE_CATALOG_NAME)
     context["translate"] = translation
-    # this is set in the html_theme
-    context["theme_search_bar_text"] = translation(
-        context.get("theme_search_bar_text", "Search...")
-    )
+
+    # If search text hasn't been manually specified, use a shorter one here
+    theme_options = app.config.html_theme_options or {}
+    if "search_bar_text" not in theme_options:
+        context["theme_search_bar_text"] = translation("Search") + "..."
 
 
 @lru_cache(maxsize=None)

src/sphinx_book_theme/assets/scripts/index.js

@@ -49,19 +49,6 @@ var toggleFullScreen = () => {
   }
 };
 
-/**
- * Called when the "print to PDF" button is clicked.
- * This is a hack to prevent tooltips from showing up in the printed PDF.
- */
-var printPdf = (el) => {
-  // Detach the tooltip text from DOM to hide in PDF
-  // and then reattach it for HTML
-  let tooltipID = $(el).attr("aria-describedby");
-  let tooltipTextDiv = $("#" + tooltipID).detach();
-  window.print();
-  $("body").append(tooltipTextDiv);
-};
-
 /**
  * Manage scrolling behavior. This is primarily two things:
  *
@@ -97,9 +84,11 @@ var initTocHide = () => {
 
     // Hide the TOC if any margin content is displayed on the screen
     if (onScreenItems.length > 0) {
-      $("div.bd-sidebar-secondary").addClass("hide");
+      document.querySelector("div.bd-sidebar-secondary").classList.add("hide");
     } else {
-      $("div.bd-sidebar-secondary").removeClass("hide");
+      document
+        .querySelector("div.bd-sidebar-secondary")
+        .classList.remove("hide");
     }
   };
   let manageScrolledClassOnBody = (entries, observer) => {
@@ -152,10 +141,17 @@ var initTocHide = () => {
  * Activate Thebe with a custom button click.
  */
 var initThebeSBT = () => {
-  var title = $("div.section h1")[0];
-  if (!$(title).next().hasClass("thebe-launch-button")) {
-    $("<button class='thebe-launch-button'></button>").insertAfter($(title));
+  var title = document.querySelector("section h1");
+  var sibling = title.nextElementSibling;
+  // If the next element after the title isn't a thebe button, add one now.
+  // That way it is initiatlized when thebe is first-clicked and isn't re-added after.
+  if (!sibling.classList.contains("thebe-launch-button")) {
+    title.insertAdjacentHTML(
+      "afterend",
+      "<button class='thebe-launch-button'></button>",
+    );
   }
+  // This function is provided by sphinx-thebe
   initThebe();
 };
 
@@ -164,11 +160,11 @@ var initThebeSBT = () => {
  */
 
 function addNoPrint() {
-  $("div.bd-sidebar-primary").addClass("noprint");
-  $("div.bd-sidebar-secondary").addClass("noprint");
-  $("div.bd-header-article").addClass("noprint");
-  $("div.bd-header-announcement").addClass("noprint");
-  $("footer.bd-footer-article").addClass("noprint");
+  document.querySelector("div.bd-sidebar-primary").classList.add("noprint");
+  document.querySelector("div.bd-sidebar-secondary").classList.add("noprint");
+  document.querySelector("div.bd-header-article").classList.add("noprint");
+  document.querySelector("div.bd-header-announcement").classList.add("noprint");
+  document.querySelector("footer.bd-footer-article").classList.add("noprint");
 }
 
 /**
@@ -185,7 +181,6 @@ function setMode() {
  * Set up callback functions for UI click actions
  */
 window.initThebeSBT = initThebeSBT;
-window.printPdf = printPdf;
 window.toggleFullScreen = toggleFullScreen;
 
 /**

src/sphinx_book_theme/assets/styles/abstracts/_variables.scss

@@ -7,11 +7,6 @@ $breakpoint-lg: 992px;
 $breakpoint-md: 768px;
 $breakpoint-sm: 576px;
 
-// Z-index stacking (from Bootstrap)
-// ref: https://getbootstrap.com/docs/5.0/layout/z-index/
-$zindex-sticky: 1020;
-$zindex-offcanvas: 1100; // We increase this to be over the tooltips
-
 // A few semantic z-indices
 $zindex-bottom: 1;
 $zindex-middle: 2;

src/sphinx_book_theme/assets/styles/content/_margin.scss

@@ -160,6 +160,7 @@ aside.sidebar.margin {
 div.margin,
 figure.margin,
 aside.margin,
+.margin.docutils.container,
 .cell.tag_popout,
 .cell.tag_margin {
   z-index: $zindex-middle;

src/sphinx_book_theme/assets/styles/content/_notebooks.scss

@@ -4,3 +4,8 @@ div.cell.tag_scroll-output div.cell_output {
   max-height: 24em;
   overflow-y: auto;
 }
+
+div.cell.tag_scroll-input div.cell_input {
+  max-height: 24em;
+  overflow-y: auto;
+}

src/sphinx_book_theme/assets/styles/sections/_article-container.scss

@@ -9,4 +9,10 @@
     padding-right: 2rem;
     padding-left: 2rem;
   }
+  details.above-input,
+  details.below-input {
+    summary {
+      border-left: 3px solid var(--pst-color-primary);
+    }
+  }
 }

src/sphinx_book_theme/assets/styles/sections/_header-article.scss

@@ -137,13 +137,3 @@ div.header-article-main {
     }
   }
 }
-
-/**
- * Tooltips added by bootstrap
- * These are added to the bottom of the `<body>` block by JavaScript.
- * We should consider removing custom tooltips as this is pretty hacky...
- */
-// Ensure that tooltips are *below* the sidebar toggles on mobile
-div.tooltip {
-  z-index: 1049;
-}

src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss

@@ -9,10 +9,16 @@
 
   .navbar-brand {
     height: unset;
-    // Auto-center the image and title
+    // Auto-center the image and title and make items vertical
+    flex-direction: column;
     justify-content: center;
   }
 
+  .bd-search input {
+    // Slightly reduce padding because it's a bit too big on this theme
+    padding-left: 2rem;
+  }
+
   // Remove the header items that pop into the sidebar in the pydata theme
   .sidebar-header-items {
     display: none;