feat: switch to readthedocs search addon (#122)

* feat: switch to readthedocs search addon

The extension is no longer supported.

* chore: remove unused search extension

* chore: remove css for old search extension

Author: thephez

_static/css/pydata-overrides.css

@@ -121,84 +121,3 @@ sphinx search extension interface.
 .search-button__wrapper.show .search-button__search-container {
   width: 15%;
 }
-
-/* Handle actual styling of the RtD search extension's screen */
-.search__outer {
-  background-color: var(--pst-color-on-background);
-  border: var(--pst-color-border);
-  border-radius: 0.25em;
-}
-
-.search__outer__input {
-  background-color: var(--pst-color-on-background);
-  color: var(--pst-color-text-base);
-  font-size: var(--pst-font-size-icon);
-}
-
-.search__result__title {
-  color: var(--pst-color-primary);
-  border-bottom-color: var(--pst-color-primary)
-}
-
-.search__result__content,
-.search__result__subheading,
-.search__error__box {
-  color: var(--pst-color-text-base);
-}
-
-.search__result__subheading span {
-  border-bottom-color: var(--pst-color-text-base);
-}
-
-/* Dark theme config */
-html[data-theme="dark"] {
-
-  .search__outer .search__result__content span,
-  .search__outer .search__result__title span {
-    /* Dark mode background color */
-    /* background-color: var(--pst-color-muted-highlight); */
-    color: var(--pst-color-primary);
-    border-bottom-color: var(--pst-color-primary);
-  }
-
-  /* Set color for the line between search text and results */
-  .search__outer .bar:after,
-  .search__outer .bar:before {
-    background: var(--pst-color-primary);
-  }
-
-  .rtd__search__credits {
-    border: 1px solid var(--pst-color-border);
-    border-width: 1px 0 0 0;
-  }
-}
-
-.rtd__search__credits {
-  background-color: var(--pst-color-background);
-  color: var(--pst-color-text-muted);
-  /* So text is centered vertically */
-  height: 37px;
-}
-
-.rtd__search__credits a {
-  color: var(--pst-color-link);
-}
-
-.search__outer .search__result__content span,
-.search__outer .search__result__title span {
-  border-bottom-color: var(--pst-color-text-base);
-}
-
-/* Make sure "X" remains visible */
-.search__cross__img {
-  fill: var(--pst-color-text-base);
-}
-
-/* Prevent hover from actually changing the color by setting it to what it
-  already is */
-.outer_div_page_results:hover,
-.search__result__box .active {
-  background-color: var(--pst-color-on-background);
-}
-
-/* End of styling of the RtD search extension's screen */

_static/js/pydata-search-close.js

@@ -1,5 +1,4 @@
-// Script to allow use of readthedocs-sphinx-search extension with the pydata
-// theme
+// Script to allow use of readthedocs-sphinx-search extension with the pydata theme
 //
 // Based in part on:
 // https://github.com/pydata/pydata-sphinx-theme/blob/v0.13.3/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js#L167-L272
@@ -28,9 +27,8 @@ var findSearchInput = () => {
   }
 };
 
-/** Function to hide the search field */
-var hideSearchField = () => {
- 
+// Hide Pydata theme's search
+var hidePydataSearch = () => {
   let input = findSearchInput();
   let searchPopupWrapper = document.querySelector(".search-button__wrapper");
   let hiddenInput = searchPopupWrapper.querySelector("input");
@@ -44,38 +42,65 @@ var hideSearchField = () => {
   }
 };
 
-/** Add an event listener for hideSearchField() for Escape*/
+// Hide the ReadTheDocs search (addon version)
+function hideRtdSearch() {
+    // Grab the search element from the DOM
+    const searchElement = document.querySelector('readthedocs-search');        
+    searchElement.closeModal(); 
+}
+
+// Hide any open search screens
+function hideSearch() {
+  hidePydataSearch();
+  hideRtdSearch();
+}
+
+// Show the ReadTheDocs search (addon version)
+function showRtDSearch() {
+  const searchElement = document.querySelector('readthedocs-search');
+  searchElement.showModal();
+  
+  // If we're displaying ReadTheDocs search, make sure to hide the Pydata theme's search
+  hidePydataSearch();
+}
+
+// Add event listeners for key strokes
 var addEventListenerForSearchKeyboard = () => {
   window.addEventListener(
     "keydown",
     (event) => {
       // Allow Escape key to hide the search field
       if (event.code == "Escape") {
-        hideSearchField();
+        hidePydataSearch();
+      }
+
+      // Open the ReadTheDocs search modal when Ctrl+K is pressed
+      if (event.ctrlKey && event.key === 'k') {
+        event.preventDefault(); // Prevent default behavior of Ctrl+K
+        showRtDSearch()
       }
     },
     true
   );
 };
 
-/** Activate callbacks for search button popup */
+// Activate callbacks for search button popup
 var setupSearchButtons = () => {
   addEventListenerForSearchKeyboard();
+
+  // Add event listeners to elements with class "search-button__button"
+  const searchButtons = document.querySelectorAll('.search-button__button');
+  searchButtons.forEach(button => {
+    button.addEventListener('click', showRtDSearch);
+  });
 };
 
 // Custom code to manage closing the RtD search dialog properly
 $(document).ready(function(){
-  $(".search__cross").click(function(){
-    hideSearchField();
-  });
-  $(".search__outer__wrapper.search__backdrop").click(function(){
-    hideSearchField();
-  });
   $(".search-button__overlay").click(function(){
-    // Shouldn't be necessary since it's currently hidden by CSS, but just in
-    // case
+    // Shouldn't be necessary since it's currently hidden by CSS, but just in case
     console.log("Close by search-button__overlay");
-    hideSearchField();
+    hidePydataSearch();
   });
 });
 

conf.py

@@ -40,7 +40,6 @@
   'sphinx.ext.autodoc',
   'sphinx_copybutton',
   'sphinx_design',
-  'sphinx_search.extension',
   'sphinx.ext.intersphinx',
 ]
 

requirements.txt

@@ -1,7 +1,6 @@
 Babel==2.12.1
 myst-parser==2.0.0
 pydata-sphinx-theme==0.14.4
-readthedocs-sphinx-search==0.3.2
 sphinx==7.2.6
 sphinx-copybutton==0.5.2
 sphinx-hoverxref==1.3.0