Skip to content

Commit 314e744

Browse files
cjyabrahamcjyabraham
committed
Implement PageFind search
Signed-off-by: Chris Abraham <[email protected]>
1 parent 88f5f22 commit 314e744

File tree

6 files changed

+92
-45
lines changed

6 files changed

+92
-45
lines changed

‎assets/js/search.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/*
2+
Copyright 2018 Google LLC
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
https://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
(function($) {
18+
19+
'use strict';
20+
21+
var Search = {
22+
init: function() {
23+
$(document).ready(function() {
24+
$(document).on('keypress', '.td-search-input', function(e) {
25+
if (e.keyCode !== 13) {
26+
return
27+
}
28+
29+
var query = $(this).val();
30+
var searchPage = "{{ "search/" | relLangURL }}?q=" + query;
31+
console.log(searchPage);
32+
document.location = searchPage;
33+
34+
return false;
35+
});
36+
37+
});
38+
},
39+
};
40+
41+
Search.init();
42+
43+
44+
}(jQuery));

‎assets/scss/_search.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,3 +100,14 @@
100100
}
101101

102102
}
103+
104+
.pagefind-ui__result-link {
105+
color: $link-color !important;
106+
}
107+
.pagefind-ui__search-clear {
108+
padding-left: 20px !important;
109+
padding-right: 20px !important;
110+
}
111+
#search {
112+
margin-top: 40px;
113+
}

‎config.toml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,7 @@ github_repo = "https://github.com/cncf/glossary"
226226
github_branch = "main"
227227

228228
# Google Custom Search Engine ID. Remove or comment out to disable search.
229-
gcs_engine_id = "eda0239a7d3fd0d90"
229+
# gcs_engine_id = "eda0239a7d3fd0d90"
230230

231231
# Enable Algolia DocSearch
232232
algolia_docsearch = false

‎layouts/_default/content.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="td-content">
1+
<div data-pagefind-body class="td-content">
22
<h1>{{ .Title }}</h1>
33
{{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
44
<header class="article-meta">

‎layouts/_default/search.html

Lines changed: 35 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,42 @@
11
{{ define "main" }}
22
<div>
33
<h1 class="thin">{{ .Title }}</h1>
4-
{{ with .Site.Params.gcs_engine_id }}
4+
5+
<link href='{{ "/pagefind/pagefind-ui.css" }}' rel="stylesheet">
6+
7+
<style>
8+
:root {
9+
--pagefind-ui-scale: 1;
10+
--pagefind-ui-primary: #000;
11+
--pagefind-ui-text: #000;
12+
--pagefind-ui-background: #ffffff;
13+
--pagefind-ui-border: #eeeeee;
14+
--pagefind-ui-tag: #eeeeee;
15+
--pagefind-ui-border-width: 2px;
16+
--pagefind-ui-border-radius: 8px;
17+
--pagefind-ui-image-border-radius: 8px;
18+
--pagefind-ui-image-box-ratio: 3 / 2;
19+
--pagefind-ui-font: 'Clarity City', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, Roboto,
20+
Ubuntu, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
21+
}
22+
</style>
23+
<script src='{{ "/pagefind/pagefind-ui.js" }}' defer></script>
24+
25+
<div id="search"></div>
526
<script>
6-
( function () {
7-
var cx = '{{ . }}';
8-
var gcse = document.createElement( 'script' );
9-
gcse.type = 'text/javascript';
10-
gcse.async = true;
11-
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
12-
var s = document.getElementsByTagName( 'script' )[0];
13-
s.parentNode.insertBefore( gcse,s );
14-
} )();
27+
window.addEventListener("DOMContentLoaded", (event) => {
28+
pagefind = new PagefindUI({ element: "#search", showSubResults: true, showImages: false, resetStyles: false });
29+
30+
const urlParams = new URLSearchParams(window.location.search);
31+
const q = urlParams.get('q');
32+
if(q){
33+
setTimeout(function(){
34+
console.log('Searching:'+q);
35+
pagefind.triggerSearch(q);
36+
}, 1000);
37+
}
38+
});
1539
</script>
16-
<gcse:searchresults-only></gcse:searchresults-only>
17-
{{ end }}
40+
1841
</div>
1942
{{ end }}

‎layouts/partials/search-input.html

Lines changed: 0 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,4 @@
1-
{{ if or .Site.Params.gcs_engine_id .Site.Params.algolia_docsearch }}
21
<div class="add-search-icon">
32
<input type="search" class="form-control td-search-input" placeholder="{{ T "ui_search" }}" aria-label="{{ T "ui_search" }}" autocomplete="off">
43
<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>
54
</div>
6-
{{ else if .Site.Params.offlineSearch }}
7-
{{ $offlineSearchIndex := resources.Get "json/offline-search-index.json" | resources.ExecuteAsTemplate "offline-search-index.json" . }}
8-
{{ $offlineSearchLink := $offlineSearchIndex.RelPermalink -}}
9-
{{ if hugo.IsProduction -}}
10-
{{/* Use `md5` as finger print hash function to shorten file name to avoid `file name too long` error. */}}
11-
{{ $offlineSearchIndexFingerprint := $offlineSearchIndex | resources.Fingerprint "md5" }}
12-
{{ $offlineSearchLink = $offlineSearchIndexFingerprint.RelPermalink -}}
13-
{{ end -}}
14-
15-
<div class="add-search-icon">
16-
<input
17-
type="search"
18-
class="form-control td-search-input"
19-
placeholder="{{ T "ui_search" }}"
20-
aria-label="{{ T "ui_search" }}"
21-
autocomplete="off"
22-
{{/*
23-
The data attribute name of the json file URL must end with `src` since
24-
Hugo's absurlreplacer requires `src`, `href`, `action` or `srcset` suffix for the attribute name.
25-
If the absurlreplacer is not applied, the URL will start with `/`.
26-
It causes the json file loading error when when relativeURLs is enabled.
27-
https://github.com/google/docsy/issues/181
28-
*/}}
29-
data-offline-search-index-json-src="{{ $offlineSearchLink }}"
30-
data-offline-search-base-href="/"
31-
data-offline-search-max-results="{{ .Site.Params.offlineSearchMaxResults | default 10 }}"
32-
>
33-
<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>
34-
</div>
35-
{{ end }}

0 commit comments

Comments
 (0)