HTML search: adjustments to type-dependent CSS classnames and defaults (#12815)

Co-authored-by: Tim Hoffmann <2836374+timhoffm@users.noreply.github.com>
This commit is contained in:
James Addison 2024-09-18 02:40:20 +00:00 committed by GitHub
parent bce70daf21
commit 92f024e2bf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 35 additions and 24 deletions

View File

@ -702,17 +702,19 @@ ul.search {
} }
ul.search li { ul.search li {
padding: 5px 0 5px 10px; padding: 5px 0 5px 10px;
list-style-type: "\25A1"; /* Unicode: White Square */
} }
ul.search li.context-index {
/* note: these rules apply to search results from the built-in Sphinx HTML/JS search engine
and only take effect in dev builds. The released docs use the ReadTheDocs search engine and are not affected. */
ul.search li.kind-index {
list-style-type: "\1F4D1"; /* Unicode: Bookmark Tabs */ list-style-type: "\1F4D1"; /* Unicode: Bookmark Tabs */
} }
ul.search li.context-object { ul.search li.kind-object {
list-style-type: "\1F4E6"; /* Unicode: Package */ list-style-type: "\1F4E6"; /* Unicode: Package */
} }
ul.search li.context-title { ul.search li.kind-title {
list-style-type: "\1F4C4"; /* Unicode: Page Facing Up */ list-style-type: "\1F4C4"; /* Unicode: Page Facing Up */
} }
ul.search li.context-text { ul.search li.kind-text {
list-style-type: "\1F4C4"; /* Unicode: Page Facing Up */ list-style-type: "\1F4C4"; /* Unicode: Page Facing Up */
} }

View File

@ -238,16 +238,25 @@ Styling search result entries by category
.. versionadded:: 8.0 .. versionadded:: 8.0
.. note::
The CSS classes named below are generated by Sphinx's standalone search
code. If you are using a third-party search provider, such as
ReadTheDocs_, to provide search results, then the theming options available
may vary.
.. _ReadTheDocs: https://docs.readthedocs.io/
The search result items have classes indicating the context in which the The search result items have classes indicating the context in which the
search term was found. You can use the CSS selectors: search term was found. You can use the CSS selectors:
- ``ul.search li.context-index``: - ``ul.search li.kind-index``:
For results in an index, such as the glossary For results in an index, such as the glossary
- ``ul.search li.context-object``: - ``ul.search li.kind-object``:
For results in source code, like Python function definitions For results in source code, like Python function definitions
- ``ul.search li.context-title``: - ``ul.search li.kind-title``:
For results found in section headings For results found in section headings
- ``ul.search li.context-text``: - ``ul.search li.kind-text``:
For results found anywhere else in the documentation text For results found anywhere else in the documentation text
As a base for inheritance by other themes, the ``basic`` theme is As a base for inheritance by other themes, the ``basic`` theme is
@ -265,16 +274,16 @@ search result list:
padding: 5px 0 5px 10px; padding: 5px 0 5px 10px;
list-style-type: "\25A1"; /* Unicode: White Square */ list-style-type: "\25A1"; /* Unicode: White Square */
} }
ul.search li.context-index { ul.search li.kind-index {
list-style-type: "\1F4D1"; /* Unicode: Bookmark Tabs */ list-style-type: "\1F4D1"; /* Unicode: Bookmark Tabs */
} }
ul.search li.context-object { ul.search li.kind-object {
list-style-type: "\1F4E6"; /* Unicode: Package */ list-style-type: "\1F4E6"; /* Unicode: Package */
} }
ul.search li.context-title { ul.search li.kind-title {
list-style-type: "\1F4C4"; /* Unicode: Page Facing Up */ list-style-type: "\1F4C4"; /* Unicode: Page Facing Up */
} }
ul.search li.context-text { ul.search li.kind-text {
list-style-type: "\1F4C4"; /* Unicode: Page Facing Up */ list-style-type: "\1F4C4"; /* Unicode: Page Facing Up */
} }

View File

@ -20,7 +20,7 @@ if (typeof Scorer === "undefined") {
// and returns the new score. // and returns the new score.
/* /*
score: result => { score: result => {
const [docname, title, anchor, descr, score, filename, context] = result const [docname, title, anchor, descr, score, filename, kind] = result
return score return score
}, },
*/ */
@ -48,7 +48,7 @@ if (typeof Scorer === "undefined") {
} }
// Global search result kind enum, used by themes to style search results. // Global search result kind enum, used by themes to style search results.
class SearchResultContext { class SearchResultKind {
static get index() { return "index"; } static get index() { return "index"; }
static get object() { return "object"; } static get object() { return "object"; }
static get text() { return "text"; } static get text() { return "text"; }
@ -72,13 +72,13 @@ const _displayItem = (item, searchTerms, highlightTerms) => {
const showSearchSummary = DOCUMENTATION_OPTIONS.SHOW_SEARCH_SUMMARY; const showSearchSummary = DOCUMENTATION_OPTIONS.SHOW_SEARCH_SUMMARY;
const contentRoot = document.documentElement.dataset.content_root; const contentRoot = document.documentElement.dataset.content_root;
const [docName, title, anchor, descr, score, _filename, context] = item; const [docName, title, anchor, descr, score, _filename, kind] = item;
let listItem = document.createElement("li"); let listItem = document.createElement("li");
// Add a class representing the item's type: // Add a class representing the item's type:
// can be used by a theme's CSS selector for styling // can be used by a theme's CSS selector for styling
// See SearchResultContext for the class names. // See SearchResultKind for the class names.
listItem.classList.add(`context-${context}`); listItem.classList.add(`kind-${kind}`);
let requestUrl; let requestUrl;
let linkUrl; let linkUrl;
if (docBuilder === "dirhtml") { if (docBuilder === "dirhtml") {
@ -152,7 +152,7 @@ const _displayNextItem = (
else _finishSearch(resultCount); else _finishSearch(resultCount);
}; };
// Helper function used by query() to order search results. // Helper function used by query() to order search results.
// Each input is an array of [docname, title, anchor, descr, score, filename, context]. // Each input is an array of [docname, title, anchor, descr, score, filename, kind].
// Order the results by score (in opposite order of appearance, since the // Order the results by score (in opposite order of appearance, since the
// `_displayNextItem` function uses pop() to retrieve items) and then alphabetically. // `_displayNextItem` function uses pop() to retrieve items) and then alphabetically.
const _orderResultsByScoreThenName = (a, b) => { const _orderResultsByScoreThenName = (a, b) => {
@ -333,7 +333,7 @@ const Search = {
const indexEntries = Search._index.indexentries; const indexEntries = Search._index.indexentries;
// Collect multiple result groups to be sorted separately and then ordered. // Collect multiple result groups to be sorted separately and then ordered.
// Each is an array of [docname, title, anchor, descr, score, filename, context]. // Each is an array of [docname, title, anchor, descr, score, filename, kind].
const normalResults = []; const normalResults = [];
const nonMainIndexResults = []; const nonMainIndexResults = [];
@ -352,7 +352,7 @@ const Search = {
null, null,
score + boost, score + boost,
filenames[file], filenames[file],
SearchResultContext.title, SearchResultKind.title,
]); ]);
} }
} }
@ -370,7 +370,7 @@ const Search = {
null, null,
score, score,
filenames[file], filenames[file],
SearchResultContext.index, SearchResultKind.index,
]; ];
if (isMain) { if (isMain) {
normalResults.push(result); normalResults.push(result);
@ -492,7 +492,7 @@ const Search = {
descr, descr,
score, score,
filenames[match[0]], filenames[match[0]],
SearchResultContext.object, SearchResultKind.object,
]); ]);
}; };
Object.keys(objects).forEach((prefix) => Object.keys(objects).forEach((prefix) =>
@ -603,7 +603,7 @@ const Search = {
null, null,
score, score,
filenames[file], filenames[file],
SearchResultContext.text, SearchResultKind.text,
]); ]);
} }
return results; return results;