Merge pull request #3008 from cncf/pagefind

Use PageFind for search

.gitignore

@@ -4,6 +4,7 @@ resources/
 node_modules/
 .hugo_build.lock
 .DS_Store
+pagefind
 
 # Local Netlify folder
 .netlify

Makefile

@@ -0,0 +1,28 @@
+serve:
+	hugo server \
+		--disableFastRender \
+		--buildDrafts \
+		--buildFuture \
+		--ignoreCache
+		--printI18nWarnings \
+		--printMemoryUsage \
+		--printPathWarnings \
+		--printUnusedTemplates \
+		--templateMetrics \
+		--templateMetricsHints \
+		--gc
+
+production-build:
+	git submodule update --init --recursive
+	hugo \
+		--minify
+	npx -y pagefind --site public
+
+preview-build:
+	git submodule update --init --recursive
+	hugo \
+		--baseURL $(DEPLOY_PRIME_URL) \
+		--buildDrafts \
+		--buildFuture \
+		--minify
+	npx -y pagefind --site public

README.md

@@ -50,6 +50,6 @@ git submodule update --init --recursive
 npm install
 ```
 
-You can then run the site using `npm run serve` (select "[Hugo]").
+You can then run the site using `npm run serve` (select "[Hugo]"). To have the site run locally with a functioning local search, run `npm run serve:with-pagefind`.
 
 [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://github.com/codespaces/new?repo=cncf/glossary)

assets/js/search.js

@@ -0,0 +1,43 @@
+/*
+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 = $(this).data('search-page') + "?q=" + query;
+                    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

content/de/search.md

@@ -0,0 +1,4 @@
+---
+title: Search Results
+layout: search
+---

content/hi/search.md

@@ -0,0 +1,4 @@
+---
+title: Search Results
+layout: search
+---

content/it/search.md

@@ -0,0 +1,4 @@
+---
+title: Search Results
+layout: search
+---

content/ja/search.md

@@ -0,0 +1,4 @@
+---
+title: Search Results
+layout: search
+---

content/ko/search.md

@@ -0,0 +1,4 @@
+---
+title: Search Results
+layout: search
+---

content/pt-br/search.md

@@ -0,0 +1,4 @@
+---
+title: Search Results
+layout: search
+---

content/tr/search.md

@@ -0,0 +1,4 @@
+---
+title: Search Results
+layout: search
+---

content/ur/search.md

@@ -0,0 +1,4 @@
+---
+title: Search Results
+layout: search
+---

content/zh-cn/search.md

@@ -0,0 +1,4 @@
+---
+title: Search Results
+layout: search
+---

content/zh-tw/search.md

@@ -0,0 +1,4 @@
+---
+title: Search Results
+layout: search
+---

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,63 @@
 {{ 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(){
+            pagefind.triggerSearch(q);
+			}, 1000);
+		}
+
+		$("#search input").on("input", function() {
+			var inputValue = $(this).val();
+			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);
+	}
 	</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">
+<input type="search" data-search-page="{{ "search/" | relLangURL }}" 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 }}

netlify.toml

@@ -1,3 +1,7 @@
+[build]
+publish = "public"
+command = "make production-build"
+
 [build.environment]
 NODE_VERSION = "18.16.1"
 HUGO_VERSION = "0.115.2"
@@ -6,4 +10,10 @@ HUGO_VERSION = "0.115.2"
 HUGO_ENV = "production"
 
 [context.deploy-preview.environment]
-HUGO_ENV = "preview"
+HUGO_ENV = "preview"
+
+[context.deploy-preview]
+command = "make preview-build"
+
+[context.branch-deploy]
+command = "make preview-build"

package.json

@@ -5,7 +5,8 @@
   "main": "none.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "serve": "netlify dev -c \"hugo serve --minify -DFE -w\""
+    "serve": "netlify dev -c \"hugo serve --minify -DFE -w\"",
+    "serve:with-pagefind": "hugo --baseURL=/ --theme=docsy && npm_config_yes=true npx pagefind --site 'public' --output-subdir '../static/pagefind' && npm run serve"
   },
   "repository": {
     "type": "git",