Add search capabilities
This commit is contained in:
parent
e26fce78ff
commit
c3c169a557
6 changed files with 143 additions and 10 deletions
|
|
@ -16,5 +16,8 @@ copyright = ""
|
|||
category = "categories"
|
||||
tag = "tags"
|
||||
|
||||
[outputs]
|
||||
home = ["html", "rss", "json"]
|
||||
|
||||
[params]
|
||||
logo = "/images/logo.png"
|
||||
|
|
|
|||
4
content/search.md
Normal file
4
content/search.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: "Search Results"
|
||||
layout: "search"
|
||||
---
|
||||
71
themes/hugo-recettes/assets/js/search.js
Normal file
71
themes/hugo-recettes/assets/js/search.js
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
var searchFunction = function(event) {
|
||||
var searchQuery = $('#search-query').val();
|
||||
|
||||
if (searchQuery.length <= 3) {
|
||||
$('#search-results').html("<p>Aucun résultat trouvé</p>");
|
||||
return;
|
||||
}
|
||||
|
||||
var lunrResults = lunrIdx.search(searchQuery);
|
||||
if (lunrResults.length > 0) {
|
||||
populateLunrResults(searchQuery, lunrResults);
|
||||
}else{
|
||||
$('#search-results').html("<p>Aucun résultat trouvé</p>");
|
||||
}
|
||||
}
|
||||
|
||||
var templateDefinition = `
|
||||
<div id="summary-{{ key }}">
|
||||
<h4><a href="{{ link }}">{{ title }}</a> <small>{{ categories }}</small></h4>
|
||||
<p>{{ content }}</p>
|
||||
</div>
|
||||
`;
|
||||
var template = Handlebars.compile(templateDefinition);
|
||||
|
||||
var populateLunrResults = function(searchQuery, results) {
|
||||
var resultDiv = $('#search-results');
|
||||
resultDiv.html('');
|
||||
$.each(results,function(rIdx,result){
|
||||
var resultPage = jsonData.filter(function(page) {
|
||||
return page.permalink === result.ref;
|
||||
})[0];
|
||||
console.info(result);
|
||||
console.info(resultPage);
|
||||
|
||||
var output = template({
|
||||
key: rIdx,
|
||||
title: resultPage.title,
|
||||
content: resultPage.contents,
|
||||
categories: resultPage.categories,
|
||||
link: result.ref
|
||||
});
|
||||
resultDiv.append(output);
|
||||
|
||||
$("#summary-" + rIdx).mark(searchQuery.replace(/[+-]/g, ''));
|
||||
});
|
||||
}
|
||||
|
||||
var lunrIdx;
|
||||
var jsonData;
|
||||
$('#search-query').prop('disabled', true);
|
||||
$.getJSON( "../index.json", function( pages ) {
|
||||
jsonData = pages;
|
||||
|
||||
lunrIdx = lunr(function() {
|
||||
this.field("title", { boost: 10 });
|
||||
this.field("categories", { boost: 5 });
|
||||
this.field("contents");
|
||||
this.ref("permalink");
|
||||
|
||||
jsonData.forEach(function (page) {
|
||||
this.add(page)
|
||||
}, this)
|
||||
});
|
||||
|
||||
$('#search-query').prop('disabled', false);
|
||||
searchFunction();
|
||||
});
|
||||
|
||||
var formField = $('#search-query');
|
||||
formField.change(searchFunction);
|
||||
formField.keyup(searchFunction);
|
||||
21
themes/hugo-recettes/layouts/_default/index.json
Normal file
21
themes/hugo-recettes/layouts/_default/index.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{{- $allRecettes := newScratch -}}
|
||||
{{- $allRecettes.Add "index" slice -}}
|
||||
{{- range .Site.RegularPages -}}
|
||||
{{ $recette := (dict "title" .Title "permalink" .Permalink "categories" .CurrentSection.Title) }}
|
||||
|
||||
{{- $ingredients := newScratch -}}
|
||||
{{- $ingredients.Add "ingredients" slice -}}
|
||||
{{- range .Params.steps -}}
|
||||
{{- range .ingredients -}}
|
||||
{{- $ingredients.Add "ingredients" .name -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
|
||||
{{- $ingredientsArray := $ingredients.Get "ingredients" -}}
|
||||
{{- $ingredientsContent := delimit $ingredientsArray ", " -}}
|
||||
{{- $recette := merge $recette (dict "ingredients" $ingredientsArray) -}}
|
||||
{{- $recette := merge $recette (dict "contents" $ingredientsContent) -}}
|
||||
{{- $allRecettes.Add "index" $recette -}}
|
||||
{{- end -}}
|
||||
{{- $allRecettes.Get "index" | jsonify -}}
|
||||
31
themes/hugo-recettes/layouts/_default/search.html
Normal file
31
themes/hugo-recettes/layouts/_default/search.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
{{ partial "header.html" . }}
|
||||
|
||||
{{ $searchJS := resources.Get "js/search.js" }}
|
||||
{{ $searchJSMin := $searchJS | minify | resources.Fingerprint "sha512" }}
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
|
||||
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.3/handlebars.min.js"
|
||||
integrity="sha256-/PJBs6QWvXijOFIX04kZpLb6ZtSQckdOIavLWKKOgXU="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js"
|
||||
integrity="sha256-4HLtjeVgH0eIB3aZ9mLYF6E8oU5chNdjU6p6rrXpl9U="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://unpkg.com/lunr/lunr.js"></script>
|
||||
|
||||
<section class="resume-section p-3 p-lg-5 d-flex flex-column">
|
||||
<div class="my-auto" >
|
||||
<div class="form-group">
|
||||
<label for="search-query">Termes de recherche</label>
|
||||
<input class="form-control form-control-lg" placeholder="Poulet, Viande, Fondue, Soupe, ..." id="search-query" name="s"/>
|
||||
</div>
|
||||
<div class="mt-5" id="search-results">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<script src="{{ $searchJSMin.Permalink }}"></script>
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
|
|
@ -9,6 +9,9 @@
|
|||
{{ $cssBundle := slice $bootstrapCSS $customCSS | resources.Concat "css/bundle.css" }}
|
||||
{{ $cssBundleMin := $cssBundle | resources.Minify | resources.Fingerprint "sha512" }}
|
||||
|
||||
{{ $indexUrl := "index.html" | absURL }}
|
||||
{{ $searchUrl := "search" | absURL }}
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="//fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css">
|
||||
|
||||
|
|
@ -23,16 +26,16 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-5">
|
||||
<div class="container">
|
||||
<div class="navbar-nav">
|
||||
<a class="nav-link" href="/index.html">
|
||||
<h3>
|
||||
Recettes
|
||||
</h3>
|
||||
</a>
|
||||
</div>
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<a class="navbar-brand" href="/index.html"><h3>Recettes</h3></a>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="{{ $indexUrl }}">Accueil</a></li>
|
||||
</ul>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item "><a class="nav-link" href="{{ $searchUrl }}">Rechercher</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<div class="container pt-5">
|
||||
<article class="content">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue