Implement PageFind search

Signed-off-by: Chris Abraham <cjyabraham@gmail.com>

assets/js/search.js

@@ -0,0 +1,44 @@
+/*
+Copyright 2018 Google LLC
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+(function($) {
+
+    'use strict';
+
+    var Search = {
+        init: function() {
+            $(document).ready(function() {
+               $(document).on('keypress', '.td-search-input', function(e) {
+                    if (e.keyCode !== 13) {
+                        return
+                    }
+
+                    var query = $(this).val();
+                    var searchPage = "{{ "search/" | relLangURL }}?q=" + query;
+                    console.log(searchPage);
+                    document.location = searchPage;
+
+                    return false;
+                });
+
+            });
+        },
+    };
+
+    Search.init();
+
+
+}(jQuery));

assets/scss/_search.scss

@@ -100,3 +100,14 @@
 	}
 
 }
+
+.pagefind-ui__result-link {
+	color: $link-color !important;
+}
+.pagefind-ui__search-clear {
+	padding-left: 20px !important;
+	padding-right: 20px !important;
+}
+#search {
+	margin-top: 40px;
+}

config.toml

@@ -226,7 +226,7 @@ github_repo = "https://github.com/cncf/glossary"
 github_branch = "main"
 
 # Google Custom Search Engine ID. Remove or comment out to disable search.
-gcs_engine_id = "eda0239a7d3fd0d90"
+# gcs_engine_id = "eda0239a7d3fd0d90"
 
 # Enable Algolia DocSearch
 algolia_docsearch = false

layouts/_default/content.html

@@ -1,4 +1,4 @@
-<div class="td-content">
+<div data-pagefind-body class="td-content">
 	<h1>{{ .Title }}</h1>
 	{{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
 	<header class="article-meta">

layouts/_default/search.html

@@ -1,19 +1,42 @@
 {{ define "main" }}
 <div>
 	<h1 class="thin">{{ .Title }}</h1>
-	{{ with .Site.Params.gcs_engine_id }}
+
+	<link href='{{ "/pagefind/pagefind-ui.css" }}' rel="stylesheet">
+
+	<style>
+		:root {
+			--pagefind-ui-scale: 1;
+			--pagefind-ui-primary: #000;
+			--pagefind-ui-text: #000;
+			--pagefind-ui-background: #ffffff;
+			--pagefind-ui-border: #eeeeee;
+			--pagefind-ui-tag: #eeeeee;
+			--pagefind-ui-border-width: 2px;
+			--pagefind-ui-border-radius: 8px;
+			--pagefind-ui-image-border-radius: 8px;
+			--pagefind-ui-image-box-ratio: 3 / 2;
+			--pagefind-ui-font: 'Clarity City', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, Roboto,
+	Ubuntu, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+		}
+	</style>
+	<script src='{{ "/pagefind/pagefind-ui.js" }}' defer></script>
+
+	<div id="search"></div>
 	<script>
-		( function () {
-			var cx = '{{ . }}';
-			var gcse = document.createElement( 'script' );
-			gcse.type = 'text/javascript';
-			gcse.async = true;
-			gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
-			var s = document.getElementsByTagName( 'script' )[0];
-			s.parentNode.insertBefore( gcse,s );
-		} )();
+	window.addEventListener("DOMContentLoaded", (event) => {
+		pagefind = new PagefindUI({ element: "#search", showSubResults: true, showImages: false, resetStyles: false });
+
+		const urlParams = new URLSearchParams(window.location.search);
+		const q = urlParams.get('q');
+		if(q){
+        setTimeout(function(){
+            console.log('Searching:'+q);
+            pagefind.triggerSearch(q);
+			}, 1000);
+		}
+	});
 	</script>
-	<gcse:searchresults-only></gcse:searchresults-only>
-	{{ end }}
+
 </div>
 {{ end }}

layouts/partials/search-input.html

@@ -1,35 +1,4 @@
-{{ if or .Site.Params.gcs_engine_id .Site.Params.algolia_docsearch }}
 <div class="add-search-icon">
 <input type="search" class="form-control td-search-input" placeholder="{{ T "ui_search" }}" aria-label="{{ T "ui_search" }}" autocomplete="off">
 <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0.88 0.63 32.17 30.24"><g opacity=".945"><path stroke="#000" stroke-width="4.392" d="M13.746 23.279c5.536 0 10.024-4.432 10.024-9.9 0-5.466-4.488-9.898-10.024-9.898-5.536 0-10.024 4.432-10.024 9.899 0 5.467 4.488 9.899 10.024 9.899zm6.56-5.069l10.652 10.52" fill="transparent" /></g></svg>
 </div>
-{{ else if .Site.Params.offlineSearch }}
-{{ $offlineSearchIndex := resources.Get "json/offline-search-index.json" | resources.ExecuteAsTemplate "offline-search-index.json" . }}
-{{ $offlineSearchLink := $offlineSearchIndex.RelPermalink -}}
-{{ if hugo.IsProduction -}}
-{{/* Use `md5` as finger print hash function to shorten file name to avoid `file name too long` error. */}}
-{{ $offlineSearchIndexFingerprint := $offlineSearchIndex | resources.Fingerprint "md5" }}
-{{ $offlineSearchLink = $offlineSearchIndexFingerprint.RelPermalink -}}
-{{ end -}}
-
-<div class="add-search-icon">
-<input
-  type="search"
-  class="form-control td-search-input"
-  placeholder="{{ T "ui_search" }}"
-  aria-label="{{ T "ui_search" }}"
-  autocomplete="off"
-  {{/*
-    The data attribute name of the json file URL must end with `src` since
-    Hugo's absurlreplacer requires `src`, `href`, `action` or `srcset` suffix for the attribute name.
-    If the absurlreplacer is not applied, the URL will start with `/`.
-    It causes the json file loading error when when relativeURLs is enabled.
-    https://github.com/google/docsy/issues/181
-  */}}
-  data-offline-search-index-json-src="{{ $offlineSearchLink }}"
-  data-offline-search-base-href="/"
-  data-offline-search-max-results="{{ .Site.Params.offlineSearchMaxResults | default 10 }}"
->
-<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0.88 0.63 32.17 30.24"><g opacity=".945"><path stroke="#000" stroke-width="4.392" d="M13.746 23.279c5.536 0 10.024-4.432 10.024-9.9 0-5.466-4.488-9.898-10.024-9.898-5.536 0-10.024 4.432-10.024 9.899 0 5.467 4.488 9.899 10.024 9.899zm6.56-5.069l10.652 10.52" fill="transparent" /></g></svg>
-</div>
-{{ end }}