104 lines
4.6 KiB
HTML
104 lines
4.6 KiB
HTML
{{ define "main" }}
|
|
{{ .Scratch.Set "IsSingle" true }}
|
|
<main class="content-page container pt-7 pb-5">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h1>Search</h1>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="d-flex justify-content-center">
|
|
<form id="search-form" method="get" action="/search/" method="POST" class="form-inline form-single">
|
|
<input type="text" name="q" id="search" class="form-control form-control-sm" placeholder="Search">
|
|
<div class="input-group">
|
|
<div class="input-group-append">
|
|
<button type="submit" id="search-button" class="btn btn-primary" style="margin-left: -5px;"> <span class="fa fa-search form-control-feedback"></span></button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="">
|
|
<div id="app-search" class="row d-flex justify-content-center justify-content-md-between align-content-between">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
{{ $p := slice }}
|
|
{{ range (where .Site.RegularPages "Section" "==" "post") }}
|
|
{{ $.Scratch.Set "image" .RelPermalink }}
|
|
{{ $.Scratch.Add "image" (index .Params.images 0) }}
|
|
{{ $post := dict "link" .RelPermalink "author" (index .Params.authors 0) "tags" .Params.tags "title" .Title "date" (.Params.date.Format "January 2, 2006") "image" ($.Scratch.Get "image") "content" (substr .Plain 0 200) "readingtime" .ReadingTime -}}
|
|
{{ $p = $p | append $post -}}
|
|
{{ end }}
|
|
</div>
|
|
<script src="{{ print "dist/" "lunr.b93de9e9609074d666f5123e866e25ed.min.js" | relURL }}"></script>
|
|
<script>
|
|
const posts = JSON.parse({{$p | jsonify}});
|
|
const query = new URLSearchParams(window.location.search);
|
|
console.log(query)
|
|
const searchString = query.get('q');
|
|
document.querySelector('#search').value = searchString;
|
|
const $target = document.querySelector('#app-search');
|
|
|
|
// Our index uses title as a reference
|
|
const postsByTitle = posts.reduce((acc, curr) => {
|
|
acc[curr.title] = curr;
|
|
return acc;
|
|
}, {});
|
|
|
|
fetch('/search-index.json').then(function(res) {
|
|
return res.json();
|
|
}).then(function(data) {
|
|
const index = lunr.Index.load(data);
|
|
const matches = index.search(searchString);
|
|
const matchPosts = [];
|
|
matches.forEach((m) => {
|
|
matchPosts.push(postsByTitle[m.ref]);
|
|
});
|
|
matchPosts[0].tags.forEach(p => {
|
|
console.log(p)
|
|
})
|
|
console.log(matchPosts[0].tags)
|
|
try {
|
|
$target.innerHTML = matchPosts.map(p => {
|
|
return `
|
|
<div class="d-flex flex-column card-regular card-regular-width my-2 my-md-5 mx-0 px-0 align-items-stretch">
|
|
<div class="card-regular-image-parent">
|
|
<div class="ma-0 pa-0 card-regular-image" style="background-image: url('${p.image}');"></div>
|
|
</div>
|
|
<div class="mx-3 my-3">
|
|
<h5 class="created text-muted text-uppercase font-weight-bold mb-0">${p.date}</h5>
|
|
<p class="text-muted">${p.readingtime} min read</p>
|
|
<h2><a class="card-title-gray" href="${p.link}">${p.title}</a></h2>
|
|
<p>${p.content}...</p>
|
|
<div>
|
|
<div class="d-flex justify-content-start align-items-stretch">
|
|
<div class="tags">
|
|
${
|
|
p.tags.map(function (tag) {
|
|
return "<a class='badge badge-dark mr-2' href='/tags/" + tag.toLowerCase() +"/'>" + "<i class='fas fa-tag mr-2'></i>" + tag + "</a>"
|
|
}).join('')
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
}).join('');
|
|
} catch (TypeError) {
|
|
$target.innerHTML = `<div>No search results found.</div>`;
|
|
console.error(TypeError)
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
</main>
|
|
{{ end }}
|