Skip to content

Commit 34a98cd

Browse files
author
Tim Bannister
committed
Revise search to align better with Docsy
1 parent 2f018d4 commit 34a98cd

File tree

13 files changed

+228
-249
lines changed

13 files changed

+228
-249
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).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: 36 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,10 @@ body.td-404 main .error-details {
250250
}
251251
}
252252

253+
.search-bar form input.search-input.td-search-input {
254+
max-width: 100%;
255+
}
256+
253257
.flip-nav .search-item {
254258
.td-search-input, .search-bar {
255259
background-color: $medium-grey;
@@ -372,6 +376,19 @@ footer {
372376
}
373377
}
374378

379+
/* LEFT NAV */
380+
381+
#td-sidebar-menu {
382+
.search-bar > form {
383+
min-width: 8rem;
384+
385+
.td-search-input {
386+
min-width: 8rem;
387+
max-width: 100%; // override Docsy theme
388+
}
389+
}
390+
}
391+
375392
/* SIDE-DRAWER MENU */
376393

377394
.pi-pushmenu .sled {
@@ -728,7 +745,7 @@ body.cid-code-of-conduct main {
728745
}
729746

730747
.td-sidebar__inner {
731-
form.td-sidebar__search {
748+
div.td-sidebar__search {
732749

733750
.td-sidebar__toggle {
734751
&:hover {
@@ -738,6 +755,14 @@ body.cid-code-of-conduct main {
738755
color: $blue;
739756
margin: 1rem;
740757
}
758+
759+
.search-bar form > i:first-child {
760+
visibility: hidden;
761+
display: none;
762+
}
763+
.search-bar form > input {
764+
padding-left: 1.5em;
765+
}
741766
}
742767
}
743768

@@ -1101,16 +1126,11 @@ div.alert > em.javascript-required {
11011126
}
11021127

11031128

1104-
// Adjust Search-bar search-icon
11051129
.search-bar {
1106-
display: flex;
1107-
align-items: center;
11081130
background-color: #fff;
11091131
border: 1px solid #4c4c4c;
1110-
border-radius: 20px;
1132+
border-radius: 20px;
11111133
vertical-align: middle;
1112-
flex-grow: 1;
1113-
overflow-x: hidden;
11141134
width: auto;
11151135

11161136
&:focus-within {
@@ -1119,16 +1139,10 @@ div.alert > em.javascript-required {
11191139
}
11201140
}
11211141

1122-
.search-bar i.search-icon {
1123-
padding: .5em .5em .5em .75em;
1124-
opacity: .75;
1125-
}
1126-
1127-
.search-input {
1142+
input.search-input {
11281143
flex: 1;
11291144
border: none;
11301145
outline: none;
1131-
padding: .5em 0 .5em 0;
11321146
}
11331147

11341148
// PageFind Styles
@@ -1185,9 +1199,14 @@ div.alert > em.javascript-required {
11851199
font-size: 1.15rem;
11861200
}
11871201

1188-
body.td-search #search {
1189-
margin-top: 1rem;
1190-
margin-bottom: 3rem;
1202+
body.td-search {
1203+
section.td-search-query {
1204+
padding: 3rem;
1205+
}
1206+
#search {
1207+
margin-top: 1rem;
1208+
margin-bottom: 3rem;
1209+
}
11911210
}
11921211

11931212
/* CSS for 'figure' full-screen display */

hugo.toml

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

161-
# Searching
162-
k8s_search = true
163-
164161
# The following search parameters are specific to Docsy's implementation. Kubernetes implementes its own search-related partials and scripts.
165162

166163
# Google Custom Search Engine ID. Remove or comment out to disable search.
@@ -216,6 +213,8 @@ url = "https://v1-27.docs.kubernetes.io"
216213

217214
# User interface configuration
218215
[params.ui]
216+
# Searching (eg via Google / Bing). Customized from Docsy's usual search.
217+
search = true
219218
# Enable to show the side bar menu in its compact state.
220219
sidebar_menu_compact = false
221220
# Show expand/collapse icon for sidebar sections.

layouts/_default/search.html

Lines changed: 4 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -17,33 +17,16 @@
1717
</header>
1818
<div class="td-outer">
1919
<main role="main" class="td-main">
20-
<section class="row td-search-result">
20+
<section class="row td-search-query">
2121
<div class="col-12 col-md-4 offset-md-2">
22-
<form class="td-sidebar__search d-flex align-items-center">
23-
{{ partial "search-input.html" . }}
24-
</form>
22+
{{- partial "search-form.html" . }}
2523
</div>
24+
</section>
25+
<section class="row td-search-result">
2626
<div class="col-12 col-md-8 offset-md-2">
27-
{{ if .Site.Params.gcs_engine_id }}
28-
<script>
29-
(function() {
30-
var cx = '{{ . }}';
31-
var gcse = document.createElement('script');
32-
gcse.type = 'text/javascript';
33-
gcse.async = true;
34-
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
35-
var s = document.getElementsByTagName('script')[0];
36-
s.parentNode.insertBefore(gcse, s);
37-
})();
38-
</script>
39-
<gcse:searchresults-only></gcse:searchresults-only>
40-
{{ else if .Site.Params.k8s_search }}
41-
<script src="{{ "js/search.js" | relURL }}"></script>
42-
<script src="/pagefind/pagefind-ui.js"></script>
4327
<gcse:searchresults-only linktarget="_parent">
4428
<div id="search" style="display:none"></div>
4529
</gcse:searchresults-only>
46-
{{ end }}
4730
</div>
4831
</section>
4932
</main>

layouts/partials/blog-sidebar.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66

77
<div id="td-sidebar-menu" class="td-sidebar__inner{{ if $shouldDelayActive }} d-none{{ end }}">
88

9-
<form class="td-sidebar__search d-flex align-items-center">
10-
{{ partial "search-input.html" . }}
9+
<div class="td-sidebar__search d-flex align-items-center">
10+
{{- partial "search-form.html" . }}
1111
<button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-docs-nav" aria-expanded="false" aria-label="Toggle section navigation">
1212
</button>
13-
</form>
14-
13+
</div>
14+
1515
<nav class="collapse td-sidebar-nav pt-2 pl-4" id="td-section-nav">
1616
<!-- {{ if (gt (len .Site.Home.Translations) 0) }}
1717
<div class="nav-item dropdown d-block d-lg-none">

layouts/partials/hooks/body-end.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,10 @@
3232
}
3333
</script>
3434
{{- end -}}
35+
36+
{{- if eq .Layout "search" -}}
37+
{{- $searchJs := resources.Get "js/search.js" | minify | fingerprint -}}
38+
<script src="{{ $searchJs.RelPermalink }}" integrity="{{ $searchJs.Data.Integrity }}" crossorigin="anonymous"></script>
39+
{{- $googleSearchJs := resources.Get "js/search-google.js" -}}
40+
<script src="{{ $googleSearchJs.RelPermalink }}"></script>
41+
{{- end -}}

0 commit comments

Comments
 (0)