From 9d2317aa156e65dcdedd5eb79585d2af5f0d8658 Mon Sep 17 00:00:00 2001 From: Chris Abraham Date: Mon, 10 Jun 2024 14:27:06 +0700 Subject: [PATCH 1/4] Replace Bing with PageFind search for users in China --- assets/js/search.js | 3 +- assets/scss/_custom.scss | 82 ++++++++++++++++++------- layouts/_default/baseof.html | 2 +- layouts/_default/search.html | 5 +- layouts/blog/baseof.html | 4 +- layouts/case-studies/single-baseof.html | 2 + layouts/docs/baseof.html | 2 +- layouts/docs/glossary.html | 2 +- layouts/partials/search-input.html | 9 +++ netlify.toml | 8 +-- static/js/search.js | 71 +++++++++++---------- 11 files changed, 122 insertions(+), 68 deletions(-) diff --git a/assets/js/search.js b/assets/js/search.js index 40e1797d5aeda..d786cef0f0ddb 100644 --- a/assets/js/search.js +++ b/assets/js/search.js @@ -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; }); diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss index aedf1c676410c..1578559f07c3f 100644 --- a/assets/scss/_custom.scss +++ b/assets/scss/_custom.scss @@ -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 */ diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index aeb9d0229f81a..03432dd727ddf 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -32,7 +32,7 @@

{{ block "hero-title" . }}{{ .Params.bigheader | default .Title }}{{ end }}< {{ end }} {{ end }}
-
+
{{ block "main" . }}{{ end }}
diff --git a/layouts/_default/search.html b/layouts/_default/search.html index d145486875446..b84fd73666b18 100644 --- a/layouts/_default/search.html +++ b/layouts/_default/search.html @@ -24,7 +24,6 @@
-

{{ .Title }}

{{ if .Site.Params.gcs_engine_id }} + -
{{ T "layouts_docs_search_fetching" }}
-
+ {{ end }}
diff --git a/layouts/blog/baseof.html b/layouts/blog/baseof.html index dd29c120160f7..de45d440e4cec 100644 --- a/layouts/blog/baseof.html +++ b/layouts/blog/baseof.html @@ -29,7 +29,9 @@
{{ partial "blog-sidebar.html" . }}
-
+
{{ block "deprecated" . }} {{ partial "deprecation-warning.html" . }} {{ end }} diff --git a/layouts/case-studies/single-baseof.html b/layouts/case-studies/single-baseof.html index 35d172626c19e..ec4745169ec0a 100644 --- a/layouts/case-studies/single-baseof.html +++ b/layouts/case-studies/single-baseof.html @@ -6,7 +6,9 @@ {{ partial "navbar.html" . }} {{ partial "deprecation-warning.html" . }} +
{{ block "main" . }}{{ end }} +
{{ partialCached "footer.html" . }} {{ partialCached "scripts.html" . }} diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html index b80664fc5b679..40c80fc21f0c7 100644 --- a/layouts/docs/baseof.html +++ b/layouts/docs/baseof.html @@ -22,7 +22,7 @@
-
+
{{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }} {{ block "deprecated" . }} {{ partial "deprecation-warning.html" . }} diff --git a/layouts/docs/glossary.html b/layouts/docs/glossary.html index 74772bb3e5ee6..d86f8c424d371 100644 --- a/layouts/docs/glossary.html +++ b/layouts/docs/glossary.html @@ -41,7 +41,7 @@

{{ .Title }}

  • -
    {{ .Title }}
    +
    {{ .Title }}
    {{ with .Params.aka }} {{ T "layouts_docs_glossary_aka" }}: {{ delimit . ", " }}
    diff --git a/layouts/partials/search-input.html b/layouts/partials/search-input.html index 822bf1e146d6e..dbee21d4617a7 100644 --- a/layouts/partials/search-input.html +++ b/layouts/partials/search-input.html @@ -22,11 +22,20 @@ >
    {{ else if .Site.Params.k8s_search }} + +{{ $lang := .Site.Language.Lang }} +{{ $searchFile := printf "content/%s/search.md" $lang }} +
    '; } - 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() } From baeadc1b4896230c0cc8f38714e5dd9b7305de67 Mon Sep 17 00:00:00 2001 From: Chris Abraham Date: Mon, 24 Jun 2024 09:47:28 +0700 Subject: [PATCH 2/4] Increase weight of title in pagefind results Signed-off-by: Chris Abraham --- layouts/partials/docs/content-page.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/partials/docs/content-page.html b/layouts/partials/docs/content-page.html index 02430aa9d3347..962896804a184 100644 --- a/layouts/partials/docs/content-page.html +++ b/layouts/partials/docs/content-page.html @@ -1,5 +1,5 @@ {{ if not .page.Params.notitle }} -

    {{ .page.Title }}

    +

    {{ .page.Title }}

    {{ $desc := .page.Description }} {{ with .page.Params.description }}
    {{ $desc | markdownify }}
    {{ end }} {{ end }} From 6daa0ced7bf7177573d9622559870def7a84d8b2 Mon Sep 17 00:00:00 2001 From: Chris Abraham Date: Mon, 24 Jun 2024 12:31:09 +0700 Subject: [PATCH 3/4] Override bad padding on search input Signed-off-by: Chris Abraham --- assets/scss/_custom.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss index 1578559f07c3f..7b35878a21b69 100644 --- a/assets/scss/_custom.scss +++ b/assets/scss/_custom.scss @@ -1357,7 +1357,7 @@ div.alert > em.javascript-required { border-radius: 20px; overflow-x: hidden; width: auto; - padding: 6px 10px; + padding: 6px 10px !important; margin: 20px 10px 20px 0; &:focus-within { From a4191d94ea52f8c4935c144f0d89d779b16f5812 Mon Sep 17 00:00:00 2001 From: Chris Abraham Date: Sat, 22 Jun 2024 16:02:29 +0700 Subject: [PATCH 4/4] Don't add new entries to search history here Signed-off-by: Chris Abraham --- static/js/search.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/js/search.js b/static/js/search.js index 59b92768547c5..52c2a715639ef 100644 --- a/static/js/search.js +++ b/static/js/search.js @@ -74,7 +74,7 @@ var newUrl = baseUrl + "?" + urlParams.toString(); // Update the browser history (optional) - window.history.pushState({}, null, newUrl); + history.replaceState(null, '', newUrl); } // China Verification.