implement client side site search

see https://gist.github.com/eddiewebb/735feb48f50f0ddd65ae5606a1cb41ae
This commit is contained in:
Christoph Cullmann 2019-04-11 22:37:27 +02:00
parent d1b0727790
commit cfaa9504a1
4 changed files with 147 additions and 0 deletions

View file

@ -0,0 +1,5 @@
{{- $.Scratch.Add "index" slice -}}
{{- range .Site.RegularPages -}}
{{- $.Scratch.Add "index" (dict "title" .Title "tags" .Params.tags "categories" .Params.categories "contents" .Plain "permalink" .Permalink) -}}
{{- end -}}
{{- $.Scratch.Get "index" | jsonify -}}

View file

@ -0,0 +1,25 @@
{{ define "content" }}
<script src="/jquery-3.4.0.js"></script>
<script src="/fuse.js"></script>
<script src="/jquery.mark.js"></script>
<script src="/search.js"></script>
<div class="my-auto" >
<form action="{{ "search" | absURL }}">
<input id="search-query" name="s"/>
</form>
<div id="search-results">
<h3>Matching pages</h3>
</div>
</div>
<!-- this template is sucked in by search.js and appended to the search-results div above. So editing here will adjust style -->
<script id="search-result-template" type="text/x-js-template">
<div id="summary-${key}">
<h4><a href="${link}">${title}</a></h4>
<p>${snippet}</p>
${ isset tags }<p>Tags: ${tags}</p>${ end }
${ isset categories }<p>Categories: ${categories}</p>${ end }
</div>
</script>
{{ end }}