Replace Bing with PageFind search for users in China

cjyabraham · Tim Bannister · commit 9d2317aa156e · 2024-07-03T15:36:58.000+01:00
diff --git 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
@@ -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
@@ -32,7 +32,7 @@ <h1>{{ block "hero-title" . }}{{ .Params.bigheader | default .Title }}{{ end }}<
     {{ 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>
diff --git a/layouts/_default/search.html b/layouts/_default/search.html
@@ -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 @@ <h2 class="search-title ml-3">{{ .Title }}</h2>
           <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>
diff --git a/layouts/blog/baseof.html b/layouts/blog/baseof.html
@@ -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 }}
diff --git a/layouts/case-studies/single-baseof.html b/layouts/case-studies/single-baseof.html
@@ -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" . }}
 
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
@@ -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" . }}
diff --git a/layouts/docs/glossary.html b/layouts/docs/glossary.html
@@ -41,7 +41,7 @@ <h1>{{ .Title }}</h1>
 	<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>
diff --git a/layouts/partials/search-input.html b/layouts/partials/search-input.html
@@ -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" }}"
diff --git a/netlify.toml b/netlify.toml
@@ -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"
diff --git a/static/js/search.js b/static/js/search.js
@@ -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,21 +96,23 @@
             dataType: "jsonp",
             success: function (response) {
                 if (response.country == 'CN') {
-                    window.renderBingSearchResults()
+                    window.renderPageFindSearchResults()
                     document.cookie = "is_china=true;" + path + expires
                 } else {
                     window.renderGoogleSearchResults()
                     document.cookie = "is_china=false;" + path + expires;
                 }
             },
             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()
     }

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,8 @@ limitations under the License.`
`32`	`32`	`}`
`33`	`33`
`34`	`34`	`var query = $(this).val();`
`35`		`- document.location = "{{ "search/" \| absURL }}?q=" + query;`
	`35`	`+ var searchPage = $(this).data('search-page') + "?q=" + query;`
	`36`	`+ document.location = searchPage;`
`36`	`37`
`37`	`38`	`return false;`
`38`	`39`	`});`