Merge pull request #363 from cncf/pagefind

Swap in PageFind for Google Custom Search

netlify.toml

@@ -1,6 +1,2 @@
 [build]
-publish = "website/public"
-command = "npm run build:preview"
-
-[context.production]
-command = "npm run build:production"
+base = "website"

website/.gitignore

@@ -0,0 +1 @@
+pagefind

website/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

website/README.md

@@ -21,8 +21,4 @@ cd website
 npm install
 ```
 
-You can then serve the site from the `website` directory using:
-
-```sh
-npm run serve
-```
+Then run the site using `npm run serve`. To have the site run locally with a functioning local search, run `npm run serve:with-pagefind`.

website/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));

website/assets/scss/_search.scss

@@ -76,3 +76,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;
+}

website/config.toml

@@ -109,7 +109,7 @@ version = "0.0"
 url_latest_version = "https://tag-env-sustainability.cncf.io"
 
 # Google Custom Search Engine ID. Remove or comment out to disable search.
-gcs_engine_id = "06963a606b9934e7b"
+# gcs_engine_id = "06963a606b9934e7b"
 
 # Enable Algolia DocSearch
 algolia_docsearch = false

website/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 }}
 	{{ if (and (not .Params.hide_readingtime) (.Site.Params.ui.readingtime.enable)) }}

website/layouts/_default/search.html

@@ -1,20 +1,63 @@
 {{ define "main" }}
 <div>
-<h1 class="thin">{{ .Title }}</h2>
-{{ with .Site.Params.gcs_engine_id }}
-<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);
-})();
-</script>
-			<gcse:searchresults-only></gcse:searchresults-only>
-{{ end }}
-</div>
+	<h1 class="thin">{{ .Title }}</h1>
+
+	<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>
+	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>
+
+</div>
 {{ end }}

website/layouts/blog/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 }}
 	<div class="td-byline mb-5 text-muted">

website/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 }}
+  <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>

website/layouts/whitepapers/content.html

@@ -1,4 +1,4 @@
-<div class="td-content">
+<div data-pagefind-body class="td-content">
 	<h1>{{ .Title }}</h1>
 	<div class="td-byline mb-5">
 		{{ with .Params.pdf }}

website/netlify.toml

@@ -0,0 +1,20 @@
+[build]
+publish = "public"
+command = "make production-build"
+ignore = "exit 1"
+
+[build.environment]
+NODE_VERSION = "18.16.1"
+HUGO_VERSION = "0.115.2"
+
+[context.production.environment]
+HUGO_ENV = "production"
+
+[context.deploy-preview.environment]
+HUGO_ENV = "preview"
+
+[context.deploy-preview]
+command = "make preview-build"
+
+[context.branch-deploy]
+command = "make preview-build"

website/package.json

@@ -25,6 +25,7 @@
     "preserve": "npm run _prebuild",
     "serve:dev": "npm run _serve:dev",
     "serve": "npm run _serve:hugo",
+    "serve:with-pagefind": "hugo --baseURL=/ --theme=docsy && npm_config_yes=true npx pagefind --site 'public' --output-subdir '../static/pagefind' && npm run serve",
     "test": "npm run check:links"
   },
   "devDependencies": {