Skip to content

Commit 80e323c

Browse files
aws-maensawsjoshir
aws-maens
authored and
awsjoshir
committed
Add Google Programmable Search Engine (PSE) support and Content table at landing page
1 parent 2d79d24 commit 80e323c

File tree

6 files changed

+313
-13
lines changed

6 files changed

+313
-13
lines changed

‎_templates/search-field-google.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<form class="bd-search d-flex align-items-center" action="{{ pathto('search-results') }}" method="get">
2+
<i class="fa-solid fa-magnifying-glass"></i>
3+
<input type="search"
4+
class="form-control"
5+
name="q"
6+
placeholder='Google Search'
7+
aria-label='Google Search'
8+
autocomplete="off"
9+
autocorrect="off"
10+
autocapitalize="off"
11+
spellcheck="off"/>
12+
<span class="search-button__kbd-shortcut"><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd>K</kbd></span>
13+
</form>

‎_templates/search-field-rtd.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<form class="bd-search d-flex align-items-center" action="{{ pathto('search') }}" method="get">
2+
<i class="fa-solid fa-magnifying-glass"></i>
3+
<input type="search"
4+
class="form-control"
5+
name="q"
6+
placeholder='Default Search'
7+
aria-label='Default Search'
8+
autocomplete="off"
9+
autocorrect="off"
10+
autocapitalize="off"
11+
spellcheck="false"/>
12+
<span class="search-button__kbd-shortcut"><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd>K</kbd></span>
13+
</form>

‎_templates/search-field.html‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<form id="search-form" class="bd-search d-flex align-items-center" action="{{ pathto('search') }}" method="get">
2+
<i class="fa-solid fa-magnifying-glass"></i>
3+
<input type="search"
4+
class="form-control"
5+
name="q"
6+
placeholder='Default Search'
7+
aria-label='Default Search'
8+
autocomplete="off"
9+
autocorrect="off"
10+
autocapitalize="off"
11+
spellcheck="false"/>
12+
<span class="search-button__kbd-shortcut"><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd>K</kbd></span>
13+
</form>
14+
15+
<div class="search-engine-toggle">
16+
<span class="toggle-label"><b>Search Engine:</b></span>
17+
<span class="toggle-option" id="default-option" style="font-weight: bold; color: #3cba54;">Default</span>
18+
<label class="switch">
19+
<input type="checkbox" id="search-type">
20+
<span class="slider round"></span>
21+
</label>
22+
<span class="toggle-option" id="google-option">Google</span>
23+
</div>
24+
25+
26+
<script>
27+
const form = document.getElementById('search-form');
28+
const searchType = document.getElementById('search-type');
29+
const searchInput = form.querySelector('input[type="search"]');
30+
const defaultOption = document.getElementById('default-option');
31+
const googleOption = document.getElementById('google-option');
32+
33+
// Load the saved state from localStorage
34+
const savedState = localStorage.getItem('searchType');
35+
if (savedState === 'google') {
36+
searchType.checked = true;
37+
form.action = "{{ pathto('search-results') }}";
38+
defaultOption.style.fontWeight = 'normal';
39+
defaultOption.style.color = 'initial';
40+
googleOption.style.fontWeight = 'bold';
41+
googleOption.style.color = '#2196F3';
42+
searchInput.placeholder = "Google Search";
43+
searchInput.setAttribute("aria-label", "Google Search");
44+
} else {
45+
// Default state (or if savedState is null)
46+
searchType.checked = false;
47+
form.action = "{{ pathto('search') }}";
48+
defaultOption.style.fontWeight = 'bold';
49+
defaultOption.style.color = '#3cba54';
50+
googleOption.style.fontWeight = 'normal';
51+
googleOption.style.color = 'initial';
52+
searchInput.placeholder = "Default Search";
53+
searchInput.setAttribute("aria-label", "Default Search");
54+
}
55+
56+
searchType.addEventListener('change', () => {
57+
if (searchType.checked) {
58+
const query = form.elements['q'].value;
59+
form.action = "{{ pathto('search-results') }}";
60+
61+
// Bold "Google" in blue, unbold "Default" in default color
62+
defaultOption.style.fontWeight = 'normal';
63+
defaultOption.style.color = 'initial';
64+
googleOption.style.fontWeight = 'bold';
65+
googleOption.style.color = '#2196F3';
66+
67+
searchInput.placeholder = "Google Search";
68+
searchInput.setAttribute("aria-label", "Google Search");
69+
localStorage.setItem('searchType', 'google');
70+
} else {
71+
form.action = "{{ pathto('search') }}";
72+
73+
// Bold "Default" in green, unbold "Google" in default color
74+
defaultOption.style.fontWeight = 'bold';
75+
defaultOption.style.color = '#3cba54';
76+
googleOption.style.fontWeight = 'normal';
77+
googleOption.style.color = 'initial';
78+
79+
searchInput.placeholder = "Default Search";
80+
searchInput.setAttribute("aria-label", "Default Search");
81+
localStorage.setItem('searchType', 'default');
82+
}
83+
});
84+
</script>
85+
86+
<style>
87+
.switch {
88+
position: relative;
89+
display: inline-block;
90+
width: 35px;
91+
height: 18px;
92+
}
93+
94+
.switch input {
95+
opacity: 0;
96+
width: 0;
97+
height: 0;
98+
}
99+
100+
.slider {
101+
position: absolute;
102+
cursor: pointer;
103+
top: 0;
104+
left: 0;
105+
right: 0;
106+
bottom: 0;
107+
background-color: #3cba54;
108+
-webkit-transition: .4s;
109+
transition: .4s;
110+
}
111+
112+
.slider:before {
113+
position: absolute;
114+
content: "";
115+
height: 14px;
116+
width: 14px;
117+
left: 2px;
118+
bottom: 2px;
119+
background-color: white;
120+
-webkit-transition: .4s;
121+
transition: .4s;
122+
}
123+
124+
input:checked + .slider {
125+
background-color: #2196F3;
126+
}
127+
128+
input:focus + .slider {
129+
box-shadow: 0 0 1px #2196F3;
130+
}
131+
132+
input:checked + .slider:before {
133+
-webkit-transform: translateX(19px);
134+
-ms-transform: translateX(19px);
135+
transform: translateX(19px);
136+
}
137+
138+
.slider.round {
139+
border-radius: 34px;
140+
}
141+
142+
.slider.round:before {
143+
border-radius: 50%;
144+
}
145+
146+
.search-engine-toggle {
147+
display: flex;
148+
align-items: center;
149+
font-size: 80%;
150+
}
151+
152+
.toggle-label {
153+
margin-right: 5px;
154+
}
155+
156+
.toggle-option {
157+
margin-right: 5px;
158+
}
159+
160+
#google-option {
161+
margin-left: 5px;
162+
}
163+
</style>

‎_templates/search-results.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{%- extends "page.html" %}
2+
{# Over-ride the body to be custom search structure we want #}
3+
{% block docs_body %}
4+
<div class="bd-search-container">
5+
<h1>{{ _("Search") }}</h1>
6+
<noscript>
7+
<div class="admonition error">
8+
<p class="admonition-title">{% trans %}Error{% endtrans %}</p>
9+
<p>{% trans %}Please activate JavaScript to enable the search
10+
functionality.{% endtrans %}</p>
11+
</div>
12+
</noscript>
13+
{% block search_form %}
14+
{% include "search-field-google.html" %}
15+
{% endblock %}
16+
17+
<h2>{{ _('Search Results') }}</h2>
18+
<script async src="https://cse.google.com/cse.js?cx=657ffaecc36684ee1">
19+
</script>
20+
<div class="gcse-searchresults-only"></div>
21+
22+
</div>
23+
<script>
24+
// Activate the search field on page load
25+
let searchInput = document.querySelector("form.bd-search input");
26+
if (searchInput) {
27+
searchInput.focus();
28+
searchInput.select();
29+
console.log("[PST]: Set focus on search field.");
30+
}
31+
</script>
32+
{% endblock docs_body %}
33+
{# Below sections just re-create the behavior of Sphinx default search #}
34+
{# Page metadata #}
35+
{%- block htmltitle -%}
36+
<title>{{ _("Search") }} - {{ title or docstitle }}</title>
37+
{%- endblock htmltitle -%}
38+
{# Manually include the search JS that Sphinx includes #}
39+
{% block scripts -%}
40+
{{ super() }}
41+
<script src="{{ pathto('_static/searchtools.js', 1) }}"></script>
42+
<script src="{{ pathto('_static/language_data.js', 1) }}"></script>
43+
<script src="{{ pathto('searchindex.js', 1) }}"></script>
44+
{%- endblock scripts %}

‎conf.py‎

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,10 +91,45 @@
9191
]
9292

9393

94+
#html_sidebars = {
95+
# 'general/announcements/index': ["recentposts.html"],
96+
#}
97+
98+
#html_sidebars = {
99+
# "**": ["google-search.html", "sbt-sidebar-nav.html"], # Add the search box to all pages
100+
# "general/announcements/index": ["recentposts.html"] # Keep existing config
101+
#}
102+
103+
104+
#html_sidebars = {
105+
# "**": [
106+
# "google-search.html", # Your Google Custom Search box
107+
# "sbt-sidebar-nav.html", # For navigation and TOC
108+
# "sidebar-logo.html", # If you have a logo
109+
# ]
110+
#}
111+
112+
94113
html_sidebars = {
95-
'general/announcements/index': ["recentposts.html"]
114+
"**": [
115+
"navbar-logo.html",
116+
"search-field.html",
117+
"sbt-sidebar-nav.html",
118+
],
119+
120+
"general/announcements/*": [
121+
"navbar-logo.html",
122+
"search-field.html",
123+
"ablog/postcard.html",
124+
"ablog/recentposts.html",
125+
"ablog/tagcloud.html",
126+
"ablog/categories.html",
127+
"ablog/archives.html",
128+
"sbt-sidebar-nav.html",
129+
]
96130
}
97131

132+
98133
# Add any paths that contain templates here, relative to this directory.
99134
templates_path = ['_templates', 'general/nki/_templates/']
100135

@@ -173,6 +208,13 @@
173208
"home_page_in_toc": False,
174209
"repository_branch" : branch_name,
175210
"announcement": top_banner_message,
211+
#"navbar_persistent": [],
212+
}
213+
214+
html_additional_pages = {
215+
"search-results": "search-results.html",
216+
"search-field-google":"search-field-google.html",
217+
"search-field-rtd":"search-field-rtd.html"
176218
}
177219

178220
html_context = {

0 commit comments

Comments
 (0)