kubernetes
/
website
mirror of https://github.com/kubernetes/website.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Replace Bing with PageFind search for users in China

pull/46768/head
Chris Abraham 2024-06-10 14:27:06 +07:00 committed by Tim Bannister
parent 4c7accac1f
commit 9d2317aa15
11 changed files with 122 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/js/search.js
View File

@ -32,7 +32,8 @@ limitations under the License.
}
var query = $(this).val();
document.location = "{{ "search/" | absURL }}?q=" + query;
var searchPage = $(this).data('search-page') + "?q=" + query;
document.location = searchPage;
return false;
});

82
assets/scss/_custom.scss
View File

@ -1318,29 +1318,6 @@ div.alert > em.javascript-required {
background: #326de6;
}
// Adjust Bing search result page
#bing-results-container {
padding: 1em;
}
.bing-result {
margin-bottom: 1em;
}
.bing-result-url {
font-size: 14px;
}
.bing-result-snippet {
color: #666666;
font-size: 14px;
}
#bing-pagination-container {
padding: 1em;
margin-bottom: 1em;
a.bing-page-anchor {
padding: 0.5em;
margin: 0.25em;
}
}
// Adjust Search-bar search-icon
.search-bar {
@ -1372,6 +1349,65 @@ div.alert > em.javascript-required {
padding: .5em 0 .5em 0;
}
// PageFind Styles
#search .pagefind-ui form input {
background-color: #fff;
border: 1px solid #4c4c4c;
border-radius: 20px;
overflow-x: hidden;
width: auto;
padding: 6px 10px;
margin: 20px 10px 20px 0;
&:focus-within {
outline: 1.5px solid rgba(47, 135, 223, 0.7);
border: 1px solid rgba(47, 135, 223, 0.7);
}
}
#search .pagefind-ui ol.pagefind-ui__results {
padding-left: 0;
}
#search .pagefind-ui .pagefind-ui__result-nested {
padding-left: 2em;
}
#search .pagefind-ui.pagefind-ui__result-nested::before {
content: "\2937 ";
color: $blue;
}
#search .pagefind-ui ol > li {
list-style-type: none;
border-top: 1.5px solid rgba(47, 135, 223, 0.7);
padding: 10px;
}
#search .pagefind-ui button {
color: #fff;
background-color: $blue;
border-radius: 0.2em;
border: 0.1rem solid $medium-grey;
padding: 0.3em;
}
#search .pagefind-ui__result-tags {
font-size: 14px;
font-weight: 400;
}
#search a.pagefind-ui__result-link {
font-weight: 700;
font-size: 1.15rem;
}
body.td-search #search {
margin-top: 1rem;
margin-bottom: 3rem;
}
/* CSS for 'figure' full-screen display */
/* Define styles for full-screen overlay */

2
layouts/_default/baseof.html
View File

@ -32,7 +32,7 @@
{{ end }}
{{ end }}
<div class="td-outer">
<main role="main" class="td-main">
<main role="main" class="td-main" {{ if (or (ne .FirstSection "case-studies") (not .IsSection) ) }}data-pagefind-body{{ end }}>
{{ block "main" . }}{{ end }}
</main>
</div>

5
layouts/_default/search.html
View File

@ -24,7 +24,6 @@
</form>
</div>
<div class="col-12 col-md-8 offset-md-2">
<h2 class="search-title ml-3">{{ .Title }}</h2>
{{ if .Site.Params.gcs_engine_id }}
<script>
(function() {
@ -40,9 +39,9 @@
<gcse:searchresults-only></gcse:searchresults-only>
{{ else if .Site.Params.k8s_search }}
<script src="{{ "js/search.js" | relURL }}"></script>
<script src="/pagefind/pagefind-ui.js"></script>
<gcse:searchresults-only linktarget="_parent">
<div id="bing-results-container">{{ T "layouts_docs_search_fetching" }}</div>
<div id="bing-pagination-container"></div>
<div id="search" style="display:none"></div>
</gcse:searchresults-only>
{{ end }}
</div>

4
layouts/blog/baseof.html
View File

@ -29,7 +29,9 @@
<div class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
{{ partial "blog-sidebar.html" . }}
</div>
<main class="col-12 col-md-9 col-xl-8 pl-md-5 pr-md-4" role="main">
<main class="col-12 col-md-9 col-xl-8 pl-md-5 pr-md-4" role="main"
{{ if .IsPage }}data-pagefind-body data-pagefind-meta="date:{{ $.Date.Format "2006-01-02" }}"{{ end }}
><!-- inside main element -->
{{ block "deprecated" . }}
{{ partial "deprecation-warning.html" . }}
{{ end }}

2
layouts/case-studies/single-baseof.html
View File

@ -6,7 +6,9 @@
<body>
{{ partial "navbar.html" . }}
{{ partial "deprecation-warning.html" . }}
<div data-pagefind-body>
{{ block "main" . }}{{ end }}
</div>
{{ partialCached "footer.html" . }}
{{ partialCached "scripts.html" . }}

2
layouts/docs/baseof.html
View File

@ -22,7 +22,7 @@
</div>
<div id="maindoc" class="split pl-md-5 row">
<!--main class="col-12 col-md-9 col-xl-8 pl-md-5" role="main"-->
<main role="main" class="col-xl-8">
<main role="main" class="col-xl-8" {{ if ne .Params.cid "docsHome" }}data-pagefind-body{{ end }}{{ if (and .IsPage .Params.description ) }} data-pagefind-meta="description:{{ .Params.description }}"{{ end }}>
{{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
{{ block "deprecated" . }}
{{ partial "deprecation-warning.html" . }}

2
layouts/docs/glossary.html
View File

@ -41,7 +41,7 @@
<li class="{{ $.Scratch.Get "tag_classes" }} hide" data-show-count="0">
<div id="{{ $term_identifier }}" class="term-anchor"></div>
<div>
<div class="term-name"><b>{{ .Title }}</b><a href="{{ printf "#%s" $term_identifier }}" class="permalink hide">LINK</a></div>
<div class="term-name" term="{{ .Title}}" data-pagefind-index-attrs="term"><b>{{ .Title }}</b><a href="{{ printf "#%s" $term_identifier }}" class="permalink hide">LINK</a></div>
{{ with .Params.aka }}
{{ T "layouts_docs_glossary_aka" }}: <i>{{ delimit . ", " }}</i>
<br>

9
layouts/partials/search-input.html
View File

@ -22,11 +22,20 @@
>
</div>
{{ else if .Site.Params.k8s_search }}
{{ $lang := .Site.Language.Lang }}
{{ $searchFile := printf "content/%s/search.md" $lang }}
<div class="search-bar">
<i class="search-icon fas fa-search"></i>
<input
type="search"
name="q"
{{ if fileExists $searchFile }}
data-search-page="{{ "search/" | relLangURL }}"
{{ else }}
data-search-page="{{ "search/" | relURL }}"
{{ end }}
class="search-input td-search-input"
placeholder="{{ T "ui_search_placeholder" }}"
aria-label="{{ T "ui_search_placeholder" }}"

8
netlify.toml
View File

@ -4,7 +4,7 @@
# DO NOT REMOVE THIS (contact @kubernetes/sig-docs-leads)
publish = "public"
functions = "functions"
command = "git submodule update --init --recursive --depth 1 && make non-production-build"
command = "git submodule update --init --recursive --depth 1 && make non-production-build && npx -y pagefind --site public"
[build.environment]
NODE_VERSION = "20.11.0"
@ -16,13 +16,13 @@ HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"
[context.deploy-preview]
command = "git submodule update --init --recursive --depth 1 && make deploy-preview"
command = "git submodule update --init --recursive --depth 1 && make deploy-preview && npx -y pagefind --site public"
[context.branch-deploy]
command = "git submodule update --init --recursive --depth 1 && make non-production-build"
command = "git submodule update --init --recursive --depth 1 && make non-production-build && npx -y pagefind --site public"
[context.main]
# This context is triggered by the `main` branch and allows search indexing
# DO NOT REMOVE THIS (contact @kubernetes/sig-docs-leads)
publish = "public"
command = "git submodule update --init --recursive --depth 1 && make production-build"
command = "git submodule update --init --recursive --depth 1 && make production-build && npx -y pagefind --site public"

71
static/js/search.js
View File

@ -3,12 +3,9 @@
document.addEventListener('DOMContentLoaded', function() {
let searchTerm = new URLSearchParams(window.location.search).get('q');
let fetchingElem = document.getElementById('bing-results-container');
let searchTitle = document.querySelector('.search-title');
if (!searchTerm) {
if (fetchingElem) fetchingElem.style.display = 'none';
if (searchTitle) searchTitle.style.display = 'none';
}
});
@ -44,36 +41,42 @@
+'</div>';
}
window.renderBingSearchResults = () => {
let urlParams = new URLSearchParams(window.location.search);
let searchTerm = urlParams.get("q") || "";
let page = urlParams.get("page") || 1;
let q = searchTerm;
let results = '';
let offset = (page - 1) * 10;
let ajaxConf = {};
if (!searchTerm) return;
ajaxConf.url = 'https://kubernetes-io-search.azurewebsites.net/api/bingsearchproxy';
ajaxConf.data = { q: q, offset: offset };
ajaxConf.type = "GET";
$.ajax(ajaxConf).done(function(res) {
if (res.status === 500) {
console.log('Server Error');
return;
window.renderPageFindSearchResults = () => {
let urlParams = new URLSearchParams(window.location.search);
let searchTerm = urlParams.get("q") || "";
let sidebarSearch = document.querySelector('.td-sidebar__search');
if (sidebarSearch) {
sidebarSearch.remove();
}
document.getElementById('search').style.display = 'block';
pagefind = new PagefindUI({ element: "#search", showImages: false });
if (searchTerm) {
pagefind.triggerSearch(searchTerm);
}
if (res.webPages == null) return; // If no result, 'webPages' is 'undefined'
var paginationAnchors = window.getPaginationAnchors(Math.ceil(res.webPages.totalEstimatedMatches / 10));
res.webPages.value.map(ob => { results += window.getResultMarkupString(ob); })
if($('#bing-results-container').length > 0) $('#bing-results-container').html(results);
if($('#bing-pagination-container').length > 0) $('#bing-pagination-container').html(paginationAnchors);
});
document.querySelector("#search input").addEventListener("input", function() {
var inputValue = this.value;
var queryStringVar = "q";
updateQueryString(queryStringVar, inputValue);
});
}
function updateQueryString(key, value) {
var baseUrl = window.location.href.split("?")[0];
var queryString = window.location.search.slice(1);
var urlParams = new URLSearchParams(queryString);
if (urlParams.has(key)) {
urlParams.set(key, value);
} else {
urlParams.append(key, value);
}
var newUrl = baseUrl + "?" + urlParams.toString();
// Update the browser history (optional)
window.history.pushState({}, null, newUrl);
}
// China Verification.
var path = "path=/;"
d = new Date()
@ -93,7 +96,7 @@
dataType: "jsonp",
success: function (response) {
if (response.country == 'CN') {
window.renderBingSearchResults()
window.renderPageFindSearchResults()
document.cookie = "is_china=true;" + path + expires
} else {
window.renderGoogleSearchResults()
@ -101,13 +104,15 @@
}
},
error: function () {
window.renderBingSearchResults()
window.renderPageFindSearchResults()
document.cookie = "is_china=true;" + path + expires;
},
timeout: 3000
});
} else if (getCookie("is_china") === "true") {
window.renderBingSearchResults()
} else if (getCookie("is_china") == "true") {
window.addEventListener('DOMContentLoaded', (event) => {
window.renderPageFindSearchResults()
});
} else {
window.renderGoogleSearchResults()
}