Skip to content

Commit fb48337

Browse files
author
Tim Bannister
committed
Revise search to align better with Docsy
1 parent 5cade11 commit fb48337

File tree

10 files changed

+186
-210
lines changed

10 files changed

+186
-210
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: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1101,7 +1101,7 @@ body.cid-code-of-conduct main {
11011101
}
11021102

11031103
.td-sidebar__inner {
1104-
form.td-sidebar__search {
1104+
div.td-sidebar__search {
11051105

11061106
.td-sidebar__toggle {
11071107
&:hover {
@@ -1111,6 +1111,14 @@ body.cid-code-of-conduct main {
11111111
color: $blue;
11121112
margin: 1rem;
11131113
}
1114+
1115+
.search-bar form > i:first-child {
1116+
visibility: hidden;
1117+
display: none;
1118+
}
1119+
.search-bar form > input {
1120+
padding-left: 1.5em;
1121+
}
11141122
}
11151123
}
11161124

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: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -24,26 +24,9 @@
2424
</form>
2525
</div>
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/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 -}}

layouts/partials/navbar.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@
2424
{{ partial "navbar-lang-selector.html" . }}
2525
</li>
2626
{{ end }}
27-
<li class="search-item nav-item mr-n4 mr-lg-0">
28-
{{ partial "search-input.html" . }}
27+
<li class="search-item nav-item mr-n4 mr-lg-0 d-none d-lg-block">
28+
{{ partial "search-input.html" . }}</div>
2929
</li>
3030
</ul>
3131
</div>

layouts/partials/search-input.html

Lines changed: 14 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,24 @@
1-
{{ if or .Site.Params.gcs_engine_id .Site.Params.algolia_docsearch }}
2-
<div class="search-bar">
3-
<i class="search-icon fas fa-search"></i>
4-
<input
5-
type="search"
6-
class="search-input td-search-input"
7-
placeholder="{{ T "ui_search_placeholder" }}"
8-
aria-label="{{ T "ui_search_placeholder" }}"
9-
autocomplete="off"
10-
>
11-
</div>
12-
{{ else if .Site.Params.offlineSearch }}
13-
<div class="search-bar" id="search-nav-container">
14-
<i class="search-icon fas fa-search"></i>
15-
<input
16-
type="search"
17-
class="search-input td-search-input"
18-
id="search-input"
19-
placeholder="{{ T "ui_search_placeholder" }}"
20-
aria-label="{{ T "ui_search_placeholder" }}"
21-
autocomplete="off"
22-
>
23-
</div>
24-
{{ else if .Site.Params.k8s_search }}
25-
26-
{{ $lang := .Site.Language.Lang }}
27-
{{ $searchFile := printf "content/%s/search.md" $lang }}
28-
1+
{{- $lang := .Site.Language.Lang -}}
2+
{{- $searchFile := printf "content/%s/search.md" $lang -}}
293
<div class="search-bar">
4+
<form action="/search"
5+
{{- if fileExists $searchFile -}}
6+
action="{{ "search/" | relLangURL }}"
7+
data-search-page="{{ "search/" | relLangURL }}"
8+
{{- else -}}
9+
action="{{ "search/" | relURL }}"
10+
data-search-page="{{ "search/" | relURL }}"
11+
{{- end -}}
12+
method="get">
3013
<i class="search-icon fas fa-search"></i>
3114
<input
3215
type="search"
3316
name="q"
34-
{{ if fileExists $searchFile }}
35-
data-search-page="{{ "search/" | relLangURL }}"
36-
{{ else }}
37-
data-search-page="{{ "search/" | relURL }}"
38-
{{ end }}
39-
class="search-input td-search-input"
17+
pattern=".+"
18+
class="search-input td-search-input"
4019
placeholder="{{ T "ui_search_placeholder" }}"
4120
aria-label="{{ T "ui_search_placeholder" }}"
4221
autocomplete="off"
4322
>
23+
</form>
4424
</div>
45-
{{ end }}

layouts/partials/sidebar-tree.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,18 @@
33
{{ $shouldDelayActive := ge (len .Site.Pages) $sidebarCacheLimit -}}
44
<div id="td-sidebar-menu" class="td-sidebar__inner{{ if $shouldDelayActive }} d-none{{ end }}">
55
{{ if not .Site.Params.ui.sidebar_search_disable -}}
6-
<form class="td-sidebar__search d-flex align-items-center">
6+
<div class="td-sidebar__search d-flex align-items-center">
77
{{ partial "search-input.html" . }}
88
<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">
99
</button>
10-
</form>
10+
</div>
1111
{{ else -}}
1212
<div id="content-mobile">
13-
<form class="td-sidebar__search d-flex align-items-center">
13+
<div class="td-sidebar__search d-flex align-items-center">
1414
{{ partial "search-input.html" . }}
1515
<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">
1616
</button>
17-
</form>
17+
</div>
1818
</div>
1919
<div id="content-desktop"></div>
2020
{{ end -}}

0 commit comments

Comments
 (0)