Skip to content

Commit 222a367

Browse files
svekarssvekars
authored
Implement options to select between Sphinx search and Google search (pytorch#3162)
- Implement options to select between Sphinx search and Google search through a radio button on the site - Fall back to sphinx search at docs-preview. Fixes pytorch#3143
1 parent 45d33e1 commit 222a367

File tree

3 files changed

+150
-33
lines changed

3 files changed

+150
-33
lines changed

‎_static/css/custom.css

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -93,22 +93,5 @@
9393
}
9494

9595
.pytorch-left-menu-search input[type=text] {
96-
background-image: none;
97-
}
98-
99-
.gsc-control-cse {
100-
padding-left: 0px !important;
101-
padding-bottom: 0px !important;
102-
}
103-
104-
.gsc-search-button .gsc-search-button-v2:focus {
105-
border: transparent !important;
106-
outline: none;
107-
box-shadow: none;
108-
}
109-
.gsc-search-button-v2:active {
110-
border: none !important;
111-
}
112-
.gsc-search-button-v2 {
113-
border: none !important;
96+
background-image: url("../images/search-icon.svg");
11497
}

‎_static/css/custom2.css

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,75 @@
3535
.pytorch-left-menu li.toctree-l1.current > a:before {
3636
content: "";
3737
}
38+
39+
/* search radio button*/
40+
41+
input[type="radio"] {
42+
accent-color: #ee4c2c;
43+
}
44+
45+
.gsst_b {
46+
display: none;
47+
}
48+
49+
#gsc-i-id1 {
50+
height: 1.5rem;
51+
text-indent: 12px !important;
52+
font-size: 1rem !important;
53+
font-family: "FreightSansi";
54+
background-image: url(../images/search-icon.svg) !important;
55+
background-repeat: no-repeat !important;
56+
background-size: 18px 18px !important;
57+
background-position: 5px 0px !important;
58+
padding-left: 20px !important;
59+
}
60+
61+
#gsc-i-id1::placeholder {
62+
font-family: 'FreightSans';
63+
font-size: 1rem;
64+
color: #262626;
65+
}
66+
67+
.gsc-control-cse {
68+
padding: 0 !important;
69+
border-radius: 0px !important;
70+
border: none !important;;
71+
overflow: hidden;
72+
}
73+
74+
#___gcse_0 {
75+
height: 44px !important;
76+
padding: 0 !important;
77+
}
78+
79+
table.gsc-search-box td.gsc-input {
80+
padding-right: 0 !important;
81+
}
82+
83+
table.gsc-search-box td {
84+
height: 44px;
85+
margin-bottom: 0 !important;
86+
padding-bottom: 0 !important;
87+
}
88+
89+
.gsc-search-button-v2 {
90+
display: none;
91+
}
92+
93+
.gs_id50 {
94+
width: 308px;
95+
}
96+
97+
.gsib_a {
98+
padding: 0px 8px 4px 9px !important;
99+
}
100+
101+
.gsc-input-box {
102+
border-radius: 0px !important;
103+
border: none !important;
104+
}
105+
106+
form.gsc-search-box {
107+
margin-bottom 0px;
108+
}
109+

‎_templates/layout.html

Lines changed: 77 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
{% extends "!layout.html" %}
22

3-
43
<!-- Overrides needed for the multilevel nav -->
54
{% block menu %}
65
{% if 'singlehtml' not in builder %}
@@ -30,24 +29,87 @@
3029
{%- endblock %}
3130

3231
{% block sidebartitle %}
33-
{% if theme_display_version %}
34-
{%- set nav_version = version %}
35-
{% if READTHEDOCS and current_version %}
36-
{%- set nav_version = current_version %}
37-
{% endif %}
38-
{% if nav_version %}
39-
<div class="version">
40-
{{ nav_version }}
41-
</div>
42-
{% endif %}
32+
33+
{% if theme_display_version %}
34+
{%- set nav_version = version %}
35+
{% if READTHEDOCS and current_version %}
36+
{%- set nav_version = current_version %}
4337
{% endif %}
44-
<div class="searchbox">
45-
<script async src="https://cse.google.com/cse.js?cx=e65585f8c3ea1440e"></script>
46-
<div class="gcse-search"></div>
38+
{% if nav_version %}
39+
<div class="version">
40+
{{ nav_version }}
41+
</div>
42+
{% endif %}
43+
{% endif %}
44+
45+
<!-- Search box -->
46+
<div id="searchBox">
47+
<div class="searchbox" id="googleSearchBox">
48+
<script async src="https://cse.google.com/cse.js?cx=e65585f8c3ea1440e"></script>
49+
<div class="gcse-search"></div>
4750
</div>
51+
<div id="sphinxSearchBox" style="display: none;">
52+
<div role="search">
53+
<form id="rtd-search-form" class="wy-form" action="{{ pathto('search') }}" method="get">
54+
<input type="text" name="q" placeholder="Search Docs" />
55+
<input type="hidden" name="check_keywords" value="yes" />
56+
<input type="hidden" name="area" value="default" />
57+
</form>
58+
</div>
59+
</div>
60+
</div>
61+
<form id="searchForm">
62+
<label style="margin-bottom: 1rem">
63+
<input type="radio" name="searchType" value="google" checked>
64+
Google Search
65+
</label>
66+
<label style="margin-bottom: 1rem">
67+
<input type="radio" name="searchType" value="sphinx">
68+
Classic Search
69+
</label>
70+
</form>
71+
72+
<script>
73+
document.addEventListener('DOMContentLoaded', function() {
74+
const searchForm = document.getElementById('searchForm');
75+
const googleSearchBox = document.getElementById('googleSearchBox');
76+
const sphinxSearchBox = document.getElementById('sphinxSearchBox');
77+
// Function to toggle search box visibility
78+
function toggleSearchBox(searchType) {
79+
googleSearchBox.style.display = searchType === 'google' ? 'block' : 'none';
80+
sphinxSearchBox.style.display = searchType === 'sphinx' ? 'block' : 'none';
81+
}
82+
// Determine the default search type
83+
let defaultSearchType = 'google';
84+
if (window.location.href.startsWith('https://docs-preview.pytorch.org/')) {
85+
defaultSearchType = 'sphinx';
86+
} else {
87+
defaultSearchType = localStorage.getItem('searchType') || 'google';
88+
}
89+
// Set the default search type
90+
document.querySelector(`input[name="searchType"][value="${defaultSearchType}"]`).checked = true;
91+
toggleSearchBox(defaultSearchType);
92+
// Event listener for changes in search type
93+
searchForm.addEventListener('change', function(event) {
94+
const selectedSearchType = event.target.value;
95+
localStorage.setItem('searchType', selectedSearchType);
96+
toggleSearchBox(selectedSearchType);
97+
});
98+
// Set placeholder text for Google search box
99+
window.onload = function() {
100+
var placeholderText = "Search Docs";
101+
var googleSearchboxText = document.querySelector("#gsc-i-id1");
102+
if (googleSearchboxText) {
103+
googleSearchboxText.placeholder = placeholderText;
104+
googleSearchboxText.style.fontFamily = 'FreightSans';
105+
googleSearchboxText.style.fontSize = "1.2rem";
106+
googleSearchboxText.style.color = '#262626';
107+
}
108+
};
109+
});
110+
</script>
48111
{% endblock %}
49112

50-
51113
{% block footer %}
52114
{{ super() }}
53115
<script>

0 commit comments

Comments
 (0)