Skip to content

Commit 742923e

Browse files
Tim Bannistershurup
andcommitted
Revise search to align better with Docsy
Co-authored-by: Dmitry Shurupov <[email protected]>
1 parent 8a97a3c commit 742923e

File tree

14 files changed

+270
-258
lines changed

14 files changed

+270
-258
lines changed

assets/js/search-google.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/*
2+
Copyright 2018 Google LLC
3+
Licensed under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License.
5+
You may obtain a copy of the License at
6+
https://www.apache.org/licenses/LICENSE-2.0
7+
Unless required by applicable law or agreed to in writing, software
8+
distributed under the License is distributed on an "AS IS" BASIS,
9+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10+
See the License for the specific language governing permissions and
11+
limitations under the License.
12+
*/
13+
14+
(function ($) {
15+
"use strict";
16+
17+
var Search = {
18+
init: function () {
19+
$(document).ready(function () {
20+
// Fill the search input form with the current search keywords
21+
const searchKeywords = new URLSearchParams(location.search).get('q');
22+
if (searchKeywords !== null && searchKeywords !== '') {
23+
const searchInput = document.querySelector('.td-search-input');
24+
searchInput.focus();
25+
searchInput.value = searchKeywords;
26+
}
27+
28+
// Set a keydown event
29+
$(document).on("keypress", ".td-search-input", function (e) {
30+
if (e.keyCode !== 13) {
31+
return;
32+
}
33+
34+
var query = $(this).val();
35+
var searchPage = $(this).closest('form').data('search-page') + "?q=" + query;
36+
document.location = searchPage;
37+
38+
return false;
39+
});
40+
});
41+
},
42+
};
43+
44+
Search.init();
45+
})(jQuery);

assets/js/search.js

Lines changed: 103 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,108 @@
1-
/*
2-
Copyright 2018 Google LLC
3-
Licensed under the Apache License, Version 2.0 (the "License");
4-
you may not use this file except in compliance with the License.
5-
You may obtain a copy of the License at
6-
https://www.apache.org/licenses/LICENSE-2.0
7-
Unless required by applicable law or agreed to in writing, software
8-
distributed under the License is distributed on an "AS IS" BASIS,
9-
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
10-
See the License for the specific language governing permissions and
11-
limitations under the License.
12-
*/
13-
14-
(function ($) {
15-
"use strict";
16-
17-
var Search = {
18-
init: function () {
19-
$(document).ready(function () {
20-
// Fill the search input form with the current search keywords
21-
const searchKeywords = new URLSearchParams(location.search).get('q');
22-
if (searchKeywords !== null && searchKeywords !== '') {
23-
const searchInput = document.querySelector('.td-search-input');
24-
searchInput.focus();
25-
searchInput.value = searchKeywords;
26-
}
1+
document.querySelector('html').classList.add('search');
2+
3+
document.addEventListener('DOMContentLoaded', function() {
4+
let searchTerm = new URLSearchParams(window.location.search).get('q');
5+
let fetchingElem = document.getElementById('bing-results-container');
276

28-
// Set a keydown event
29-
$(document).on("keypress", ".td-search-input", function (e) {
30-
if (e.keyCode !== 13) {
31-
return;
32-
}
7+
if (!searchTerm) {
8+
if (fetchingElem) fetchingElem.style.display = 'none';
9+
}
10+
});
3311

34-
var query = $(this).val();
35-
var searchPage = $(this).data('search-page') + "?q=" + query;
36-
document.location = searchPage;
12+
window.renderGoogleSearchResults = () => {
13+
var cx = '013288817511911618469:elfqqbqldzg';
14+
var gcse = document.createElement('script');
15+
gcse.type = 'text/javascript';
16+
gcse.async = true;
17+
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx;
18+
var s = document.getElementsByTagName('script')[0];
19+
s.parentNode.insertBefore(gcse, s);
20+
}
21+
22+
window.renderPageFindSearchResults = () => {
23+
let urlParams = new URLSearchParams(window.location.search);
24+
let searchTerm = urlParams.get("q") || "";
25+
let sidebarSearch = document.querySelector('.td-sidebar__search');
26+
if (sidebarSearch) {
27+
sidebarSearch.remove();
28+
}
29+
document.getElementById('search').style.display = 'block';
30+
pagefind = new PagefindUI({ element: "#search", showImages: false });
31+
if (searchTerm) {
32+
pagefind.triggerSearch(searchTerm);
33+
}
3734

38-
return false;
35+
document.querySelector("#search input").addEventListener("input", function() {
36+
var inputValue = this.value;
37+
var queryStringVar = "q";
38+
updateQueryString(queryStringVar, inputValue);
3939
});
40-
});
41-
},
42-
};
40+
}
41+
42+
function updateQueryString(key, value) {
43+
var baseUrl = window.location.href.split("?")[0];
44+
var queryString = window.location.search.slice(1);
45+
var urlParams = new URLSearchParams(queryString);
46+
47+
if (urlParams.has(key)) {
48+
urlParams.set(key, value);
49+
} else {
50+
urlParams.append(key, value);
51+
}
52+
53+
var newUrl = baseUrl + "?" + urlParams.toString();
54+
// Update the browser history (optional)
55+
history.replaceState(null, '', newUrl);
56+
}
57+
58+
// China Verification.
59+
var path = "path=/;"
60+
d = new Date()
61+
d.setTime(d.getTime() + (7 * 24 * 60 * 60 * 1000))
62+
expires = "expires=" + d.toUTCString()
63+
64+
function getCookie(name) {
65+
var value = "; " + document.cookie;
66+
var parts = value.split("; " + name + "=");
67+
if (parts.length == 2) return parts.pop().split(";").shift();
68+
else return "";
69+
}
70+
71+
async function checkBlockedSite(url) {
72+
const controller = new AbortController();
73+
const timeout = setTimeout(() => {
74+
controller.abort();
75+
}, 5000); // Timeout set to 5000ms (5 seconds)
76+
77+
try {
78+
const response = await fetch(url, { method: 'HEAD', mode: 'no-cors', signal: controller.signal });
79+
// If we reach this point, the site is accessible (since mode: 'no-cors' doesn't allow us to check response.ok)
80+
clearTimeout(timeout);
81+
return false;
82+
} catch (error) {
83+
// If an error occurs, it's likely the site is blocked
84+
return true;
85+
}
86+
}
87+
88+
async function loadSearch() {
89+
if (getCookie("can_google") === "") {
90+
const isGoogleBlocked = await checkBlockedSite("https://www.google.com/favicon.ico");
91+
if ( isGoogleBlocked ) {
92+
// Google is blocked.
93+
document.cookie = "can_google=false;" + path + expires
94+
window.renderPageFindSearchResults()
95+
} else {
96+
// Google is not blocked.
97+
document.cookie = "can_google=true;" + path + expires
98+
window.renderGoogleSearchResults()
99+
}
100+
} else if (getCookie("can_google") == "false") {
101+
window.renderPageFindSearchResults()
102+
} else {
103+
window.renderGoogleSearchResults()
104+
}
105+
}
106+
107+
window.onload = loadSearch;
43108

44-
Search.init();
45-
})(jQuery);

assets/scss/_custom.scss

Lines changed: 65 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,23 @@ body.td-home main[role="main"] > section:first-of-type .content p:first-child {
115115
margin-bottom: 1.5em;
116116
}
117117

118+
// Style search on main (landing) page
119+
body.td-home section.k8s-search {
120+
margin-left: 0;
121+
margin-right: 0;
122+
padding: 3rem;
123+
padding-left: calc(max(2rem, (100vw - 44rem) / 2));
124+
padding-right: calc(max(2rem, (100vw - 44rem) / 2));
125+
126+
.search-bar {
127+
// center align, allocate space
128+
129+
form input.search-input.td-search-input {
130+
max-width: initial;
131+
}
132+
}
133+
}
134+
118135
#desktopShowVideoButton {
119136
border: none
120137
}
@@ -289,11 +306,41 @@ body.td-404 main .error-details {
289306
}
290307
}
291308

292-
input[type="search"]{
309+
input[type="search"] {
293310
-moz-box-sizing: border-box;
294311
width: 100%;
295312
}
296313

314+
nav .search-bar {
315+
&:has(input:focus) {
316+
outline: 0.05rem solid $primary;
317+
}
318+
min-height: calc(max(2em, 2rem));
319+
> form {
320+
vertical-align: middle;
321+
322+
}
323+
}
324+
.search-bar {
325+
padding-left: 0.75em;
326+
327+
input.search-input:focus {
328+
outline: none;
329+
}
330+
}
331+
332+
// suppress search / magnifying glass icon on main page
333+
.k8s-search .search-bar i.fa {
334+
display: none;
335+
}
336+
337+
.search-bar form input.search-input.td-search-input {
338+
max-width: 90%;
339+
background: transparent;
340+
display: inline-block;
341+
padding: 1px;
342+
}
343+
297344
.flip-nav .search-item {
298345
.td-search-input, .search-bar {
299346
background-color: $medium-grey;
@@ -306,9 +353,9 @@ input[type="search"]{
306353
}
307354
}
308355

309-
@media only screen and (max-width: 1500px) {
356+
@media only screen and (max-width: 1400px) {
310357
header nav .search-item {
311-
display: none;
358+
display: none !important;
312359
}
313360
}
314361

@@ -1475,7 +1522,7 @@ body.cid-code-of-conduct main {
14751522
}
14761523

14771524
.td-sidebar__inner {
1478-
form.td-sidebar__search {
1525+
div.td-sidebar__search {
14791526

14801527
.td-sidebar__toggle {
14811528
&:hover {
@@ -1485,6 +1532,10 @@ body.cid-code-of-conduct main {
14851532
color: $primary;
14861533
margin: 1rem;
14871534
}
1535+
1536+
.search-bar form > input {
1537+
padding-left: 1.5em;
1538+
}
14881539
}
14891540
}
14901541

@@ -1848,16 +1899,11 @@ div.alert > em.javascript-required {
18481899
}
18491900

18501901

1851-
// Adjust Search-bar search-icon
18521902
.search-bar {
1853-
display: flex;
1854-
align-items: center;
18551903
background-color: #fff;
18561904
border: 1px solid #4c4c4c;
18571905
border-radius: 20px;
18581906
vertical-align: middle;
1859-
flex-grow: 1;
1860-
overflow-x: hidden;
18611907
width: auto;
18621908

18631909
&:focus-within {
@@ -1866,16 +1912,10 @@ div.alert > em.javascript-required {
18661912
}
18671913
}
18681914

1869-
.search-bar i.search-icon {
1870-
padding: .5em .5em .5em .75em;
1871-
opacity: .75;
1872-
}
1873-
1874-
.search-input {
1915+
input.search-input {
18751916
flex: 1;
18761917
border: none;
18771918
outline: none;
1878-
padding: .5em 0 .5em 0;
18791919
}
18801920

18811921
// PageFind Styles
@@ -1932,9 +1972,14 @@ div.alert > em.javascript-required {
19321972
font-size: 1.15rem;
19331973
}
19341974

1935-
body.td-search #search {
1936-
margin-top: 1rem;
1937-
margin-bottom: 3rem;
1975+
body.td-search {
1976+
section.td-search-query {
1977+
padding: 3rem;
1978+
}
1979+
#search {
1980+
margin-top: 1rem;
1981+
margin-bottom: 3rem;
1982+
}
19381983
}
19391984

19401985
/* CSS for 'figure' full-screen display */
@@ -2025,4 +2070,4 @@ section.k8s-birthday-override:has(div.k8s-birthday-override.revert-to-previous i
20252070
@extend .table;
20262071
}
20272072
}
2028-
}
2073+
}

hugo.toml

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -150,9 +150,6 @@ githubWebsiteRaw = "raw.githubusercontent.com/kubernetes/website"
150150
# GitHub repository link for editing a page and opening issues.
151151
github_repo = "https://github.com/kubernetes/website"
152152

153-
# Searching
154-
k8s_search = true
155-
156153
# The following search parameters are specific to Docsy's implementation. Kubernetes implementes its own search-related partials and scripts.
157154

158155
# Google Custom Search Engine ID. Remove or comment out to disable search.
@@ -208,6 +205,8 @@ url = "https://v1-28.docs.kubernetes.io"
208205

209206
# User interface configuration
210207
[params.ui]
208+
# Searching (eg via Google / Bing). Customized from Docsy's usual search.
209+
search = true
211210
# Enable to show the side bar menu in its compact state.
212211
sidebar_menu_compact = false
213212
# Show this many levels in compact mode
@@ -224,6 +223,8 @@ sidebar_search_disable = false
224223
navbar_logo = true
225224
# Set to true to disable the About link in the site footer
226225
footer_about_disable = false
226+
# Enable searching from the top nav bar
227+
top_nav_bar_search = true
227228

228229
# Adds a H2 section titled "Feedback" to the bottom of each doc. The responses are sent to Google Analytics as events.
229230
# This feature depends on [services.googleAnalytics] and will be disabled if "services.googleAnalytics.id" is not set.

layouts/_default/baseof.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,6 @@ <h1>{{ block "hero-title" . }}{{ .Params.bigheader | default .Title }}{{ end }}<
3838
</main>
3939
</div>
4040
{{ partialCached "footer.html" . }}
41-
{{ partialCached "scripts.html" . }}
41+
{{ partial "scripts.html" . }}
4242
</body>
4343
</html>

0 commit comments

Comments
 (0)