Skip to content

Commit

Permalink
feat: switch to readthedocs search addon (#84)
Browse files Browse the repository at this point in the history
  • Loading branch information
thephez authored Oct 9, 2024
1 parent 4d21885 commit aae82a3
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 100 deletions.
81 changes: 0 additions & 81 deletions _static/css/pydata-overrides.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
59 changes: 42 additions & 17 deletions _static/js/pydata-search-close.js
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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");
Expand All @@ -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();
});
});

Expand Down
1 change: 0 additions & 1 deletion conf.py
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@
'sphinx.ext.autodoc',
'sphinx_copybutton',
'sphinx_design',
'sphinx_search.extension',
'sphinx.ext.intersphinx',
]

Expand Down
1 change: 0 additions & 1 deletion requirements.txt
Original file line number Diff line number Diff line change
@@ -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
pytz==2022.7
sphinx==7.2.6
sphinx-copybutton==0.5.2
Expand Down

0 comments on commit aae82a3

Please sign in to comment.