FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add support for client-side search with Fuse.js. Implements #42.

Browse source 
Based on https://gist.github.com/eddiewebb/735feb48f50f0ddd65ae5606a1cb41ae
This commit is contained in:
Jesus P Rey (Chuso) 2021-02-04 21:52:20 +01:00
parent 946a8bd4d5
commit 9fc697e7b1
No known key found for this signature in database
GPG key ID: 0E663E0721D67C24
5 changed files with 245 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

5
layouts/_default/index.json Normal file
View file

@ -0,0 +1,5 @@
{{- $.Scratch.Add "index" slice -}}
{{- range .Site.RegularPages -}}
{{- $.Scratch.Add "index" (dict "title" .Title "hero" (partial "helpers/get-hero.html" .) "date" (.Date.Format "January 2, 2006") "summary" .Summary "tags" .Params.tags "categories" .Params.categories "contents" .Plain "permalink" .Permalink) -}}
{{- end -}}
{{- $.Scratch.Get "index" | jsonify -}}

69
layouts/_default/search.html Normal file
View file

@ -0,0 +1,69 @@
{{ define "header" }}
<link rel="stylesheet" href="{{ "/css/layouts/list.css" | relURL }}">
<link rel="stylesheet" href="{{ "/css/navigators/sidebar.css" | relURL}}">
{{ end }}
{{ define "navbar" }}
{{ partial "navigators/navbar-2.html" . }}
{{ end }}
{{ define "sidebar" }}
{{ $blogHome:="#" }}
{{ if site.IsMultiLingual }}
{{ $blogHome = (path.Join (cond ( eq .Language.Lang "en") "" .Language.Lang) "posts") }}
{{ end }}
<section class="sidebar-section" id="sidebar-section">
<div class="sidebar-holder">
<div class="sidebar" id="sidebar">
<input type="text" value="" placeholder="Search" data-search="" id="search-box" />
<div class="sidebar-tree">
<ul class="tree" id="tree">
<li id="list-heading"><a href="{{ "/posts" | relLangURL }}" data-filter="all">{{ i18n "posts" }}</a></li>
<div class="subtree">
{{ partial "navigators/sidebar.html" (dict "menus" site.Menus.sidebar "ctx" .) }}
</div>
</ul>
</div>
</div>
</div>
</section>
{{ end }}
{{ define "content" }}
<section class="content-section" id="content-section">
<div class="content container-fluid" id="content">
<div class="container-fluid post-card-holder" id="post-card-holder">
<div id="search-results">
<script id="search-result-template" type="text/x-js-template">
<div class="post-card">
<a href="${link}" class="post-card-link">
<div class="card" style="min-height: 352px;"><a href="${link}" class="post-card-link">
<div class="card-head">
<img class="card-img-top" src="${hero}">
</div>
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text post-summary">${summary}</p>
</div>
<div class="card-footer">
<span class="float-left">${date}</span>
<a href="${link}" class="float-right btn btn-outline-info btn-sm">Read</a>
</div>
</div>
</a>
</div>
</script>
</div>
</div>
</div>
</section>
{{ end }}
{{ define "scripts" }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.2.0/fuse.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js"></script>
<script src="{{ "js/search.js" | absURL }}"></script>
{{ end }}