Skip to content

Commit 474d5db

Browse files
flying-sheepflying-sheep
authored
Fix search override (#208)
1 parent a9cd061 commit 474d5db

File tree

6 files changed

+62
-110
lines changed

6 files changed

+62
-110
lines changed

‎docs/conf.py

-8
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
from __future__ import annotations
44

5-
import os
65
import re
76
from typing import TYPE_CHECKING
87
from pathlib import PurePosixPath
@@ -25,7 +24,6 @@
2524
"sphinx.ext.autosummary",
2625
"scanpydoc",
2726
"sphinx.ext.linkcode", # needs to be after scanpydoc
28-
"sphinx_search.extension",
2927
]
3028

3129
intersphinx_mapping = dict(
@@ -77,12 +75,6 @@ def test_search(value: str, pattern: str) -> bool:
7775

7876
rtd_links_prefix = PurePosixPath("src")
7977

80-
# PR versions don’t have a own search index
81-
if re.fullmatch(r"\d+", os.environ.get("READTHEDOCS_VERSION", "")):
82-
rtd_sphinx_search_default_filter = (
83-
f"subprojects:{os.getenv('READTHEDOCS_PROJECT')}/latest"
84-
)
85-
8678

8779
def setup(app: Sphinx) -> None:
8880
"""Set up custom Sphinx extension."""

‎pyproject.toml

-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ test = [
3434
doc = [
3535
'scanpydoc[typehints,myst,theme]',
3636
'sphinx',
37-
'readthedocs-sphinx-search',
3837
]
3938
typehints = ['sphinx-autodoc-typehints>=1.15.2']
4039
theme = ['sphinx-book-theme>=1.1.0']

‎src/scanpydoc/theme/__init__.py

+1-3
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,6 @@
7070

7171
from __future__ import annotations
7272

73-
import os
7473
from typing import TYPE_CHECKING
7574
from pathlib import Path
7675

@@ -90,7 +89,6 @@ def setup(app: Sphinx) -> dict[str, bool]: # pragma: no cover
9089
app.add_html_theme("scanpydoc", str(HERE))
9190

9291
# if we’re on ReadTheDocs, hide the pydata-sphinx-theme search popup
93-
if os.environ.get("READTHEDOCS_VERSION", ""): # pragma: no cover
94-
app.add_js_file("scripts/rtd-sphinx-search.js", loading_method="defer")
92+
app.add_js_file("scripts/rtd-sphinx-search.js", loading_method="defer")
9593

9694
return dict(parallel_read_safe=True, parallel_write_safe=True)

‎src/scanpydoc/theme/layout.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@
1010
{% endif %}
1111
{%- endblock -%}
1212

13-
<!-- Styles that come last -->
13+
<!-- Styles that come last and meta tags -->
1414
{%- block extrahead -%}
1515
{{ super() }}
16+
<meta name="readthedocs-addons-api-version" content="1" />
1617
{% if theme_accent_color %}
1718
<!-- prettier-ignore-start -->
1819
<style>

‎src/scanpydoc/theme/static/scripts/rtd-sphinx-search.js

+40-30
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,47 @@
11
/**
2-
* This JS is only included when the RTD Sphinx search is active.
2+
* See https://docs.readthedocs.com/platform/stable/addons.html#integrate-with-search-as-you-type
33
*/
44

5-
// wire up the search key combination
6-
addEventListener(
7-
"keydown",
8-
({ key, metaKey, ctrlKey }) => {
9-
if (key === "k" && (metaKey || ctrlKey)) {
10-
if (isModalVisible()) {
11-
removeSearchModal()
12-
} else {
13-
showSearchModal()
5+
document.addEventListener("readthedocs-addons-data-ready", (event) => {
6+
const { addons } = event.detail.data()
7+
if (!addons.search?.enabled) {
8+
return
9+
}
10+
11+
// wire up the search key combination
12+
addEventListener(
13+
"keydown",
14+
({ key, metaKey, ctrlKey }) => {
15+
if (key === "k" && (metaKey || ctrlKey)) {
16+
const here = document.querySelector("readthedocs-search")?.show
17+
const event = new CustomEvent(
18+
`readthedocs-search-${here ? "hide" : "show"}`,
19+
)
20+
document.dispatchEvent(event)
1421
}
15-
}
16-
},
17-
{ passive: true },
18-
)
22+
},
23+
{ passive: true },
24+
)
1925

20-
// start attempting to override the search popup and to wire up the search button
21-
setTimeout(overrideSearch, 0)
26+
// start attempting to override the search popup and to wire up the search button
27+
setTimeout(overrideSearch, 0)
2228

23-
function overrideSearch() {
24-
/** @type {HTMLDivElement} */
25-
const theme_popup = document.querySelector(".search-button__wrapper")
26-
/** @type {HTMLButtonElement} */
27-
const search_button = document.querySelector("button[aria-label='Search']")
28-
if (!theme_popup || !search_button) {
29-
// try again later
30-
setTimeout(overrideSearch, 500)
31-
return
29+
function overrideSearch() {
30+
/** @type {HTMLDivElement} */
31+
const theme_popup = document.querySelector(".search-button__wrapper")
32+
/** @type {HTMLButtonElement} */
33+
const search_button = document.querySelector("button[aria-label='Search']")
34+
if (!theme_popup || !search_button) {
35+
// try again later
36+
setTimeout(overrideSearch, 500)
37+
return
38+
}
39+
// Hide the pydata theme’s search popup.
40+
theme_popup.style.display = "none"
41+
// wire up the search button
42+
search_button.addEventListener("click", () => {
43+
const event = new CustomEvent("readthedocs-search-show")
44+
document.dispatchEvent(event)
45+
})
3246
}
33-
// Hide the pydata theme’s search popup.
34-
theme_popup.style.display = "none"
35-
// wire up the search button
36-
search_button.addEventListener("click", () => showSearchModal())
37-
}
47+
})

‎src/scanpydoc/theme/static/styles/scanpy.css

+19-67
Original file line numberDiff line numberDiff line change
@@ -31,71 +31,23 @@ dl.citation > dt {
3131
outline: 2px solid var(--pst-color-link-hover);
3232
}
3333

34-
/* Make the readthedocs-sphinx-search popup adapt to the theme */
35-
/*backdrop*/
36-
html[data-theme] .search__backdrop {
37-
z-index: 1020;
38-
backdrop-filter: saturate(150%) blur(20px);
39-
}
40-
/*container*/
41-
html[data-theme] :is(.search__outer, .rtd__search__credits) {
42-
font-family: var(--pst-font-family-base);
43-
color: var(--pst-color-text-base);
44-
background-color: var(--pst-color-background);
45-
border-color: var(--pst-color-border);
46-
}
47-
html[data-theme] .search__outer {
48-
border-top-left-radius: var(--bs-border-radius);
49-
border-top-right-radius: var(--bs-border-radius);
50-
}
51-
html[data-theme] .rtd__search__credits {
52-
border-bottom-left-radius: var(--bs-border-radius);
53-
border-bottom-right-radius: var(--bs-border-radius);
54-
}
55-
html[data-theme] .rtd__search__credits a {
56-
color: var(--pst-color-link);
57-
}
58-
/*icons*/
59-
html[data-theme] .search__outer::before {
60-
/* this can’t be put on .search__outer__input, as <input/> supports no ::before */
61-
position: absolute;
62-
padding: 0.4em 0.3em;
63-
content: "\f002"; /* fa-magnifying-glass */
64-
font: var(--fa-font-solid);
65-
color: var(--pst-color-text-muted);
66-
}
67-
html[data-theme] .search__cross__img polygon {
68-
fill: currentcolor;
69-
}
70-
/*input*/
71-
html[data-theme] .search__outer__input {
72-
color: var(--pst-color-text-base);
73-
background-image: none; /* hide the default search icon */
74-
background-color: transparent;
75-
border-bottom-color: var(--pst-color-border);
76-
}
77-
html[data-theme] .search__outer .bar::before,
78-
html[data-theme] .search__outer .bar::after {
79-
background-color: var(--pst-color-accent);
80-
}
81-
/*results*/
82-
html[data-theme] :is(.search__result__subheading span, .search__result__single) {
83-
border-bottom-color: var(--pst-color-border);
84-
}
85-
html[data-theme] .search__result__single:last-of-type {
86-
border-bottom-width: 0;
87-
}
88-
html[data-theme] :is(.outer_div_page_results:hover, .search__result__box .active) {
89-
background-color: var(--pst-color-accent-bg);
90-
}
91-
html[data-theme]
92-
:is(.search__error__box, .search__result__subheading, .search__result__content) {
93-
color: var(--pst-color-text-base);
94-
}
95-
html[data-theme]
96-
.search__outer
97-
:is(.search__result__content, .search__result__title)
98-
span {
99-
border-bottom-color: var(--pst-color-border);
100-
background-color: var(--pst-color-target);
34+
/* Make the readthedocs search popup adapt to the theme.
35+
* Might break again soon: https://github.com/readthedocs/addons/issues/570
36+
*/
37+
:root {
38+
--readthedocs-search-backdrop-color: var(--pst-color-shadow);
39+
--readthedocs-search-color: var(--pst-color-text-base);
40+
--readthedocs-search-content-background-color: var(--pst-color-background);
41+
--readthedocs-search-content-border-color: var(--pst-color-border);
42+
--readthedocs-search-filters-border-color: var(--pst-color-border);
43+
--readthedocs-search-font-family: var(--pst-font-family-base);
44+
--readthedocs-search-font-size: var(--pst-font-size-base);
45+
--readthedocs-search-footer-background-color: var(--pst-color-on-background);
46+
--readthedocs-search-footer-code-background-color: var(--pst-color-surface);
47+
--readthedocs-search-footer-code-border-color: var(--pst-color-border);
48+
--readthedocs-search-input-background-color: var(--pst-color-surface);
49+
--readthedocs-search-result-section-border-color: var(--pst-color-border);
50+
--readthedocs-search-result-section-color: var(--pst-color-link);
51+
--readthedocs-search-result-section-highlight-color: var(--pst-color-accent);
52+
--readthedocs-search-result-section-subheading-color: var(--pst-color-text-muted);
10153
}

0 commit comments

Comments
 (0)