migrate from lunr to pagefind for searching

This commit is contained in:
Wouter Groeneveld 2022-07-25 12:42:05 +02:00
parent 0f9b3999b3
commit d49975f9c6
9 changed files with 57 additions and 54 deletions

1
.gitignore vendored
View File

@ -10,6 +10,7 @@ docs/
resources/ resources/
node_modules/ node_modules/
static/_pagefind
content/boek/src/boek.tex content/boek/src/boek.tex
content/boek/src/boek.pdf content/boek/src/boek.pdf

View File

@ -6,6 +6,15 @@ aliases:
Niet gevonden wat je zocht? Probeer hier je geluk. Niet gevonden wat je zocht? Probeer hier je geluk.
Gebruik het sterretje (`*`) om een deel van een woord te zoeken. Begin gewoon met typen om te zoeken!
{{< searchresults >}} <script src="/_pagefind/pagefind-ui.js" type="text/javascript"></script>
<div id="search"></div>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
new PagefindUI({ element: "#search", resetStyles: false });
});
</script>
<noscript>
... Sorry, zoekfunctionaliteit vereist JavaScript in je browser.
</noscript>

View File

@ -1,5 +1,5 @@
const { mastodon, goodreads, lunr, webmention, youtube } = require('jam-my-stack'); const { goodreads, webmention, youtube } = require('jam-my-stack');
const fsp = require('fs').promises; const fsp = require('fs').promises;
if(!process.env.WEBMENTION_TOKEN) { if(!process.env.WEBMENTION_TOKEN) {
@ -14,21 +14,13 @@ const wmconfig = {
const rootdir = `${__dirname}/../`; const rootdir = `${__dirname}/../`;
(async function() { (async function() {
// 1. build Lunr index // 1. get webmentions
console.log("1. Building lunr search index...")
const index = await lunr.buildIndex([
`${rootdir}/content/post`,
`${rootdir}/content/kort`,
`${rootdir}/content/leren`])
await fsp.writeFile(`${rootdir}/static/js/redzuurdesem-post.json`, JSON.stringify(index), 'utf-8')
// 2. get webmentions
console.log("2. Fetching webmentions...") console.log("2. Fetching webmentions...")
const mentions = await webmention.getWebmentions("redzuurdesem.be", wmconfig) const mentions = await webmention.getWebmentions("redzuurdesem.be", wmconfig)
const json = JSON.stringify(mentions, null, 4) const json = JSON.stringify(mentions, null, 4)
await fsp.writeFile(`${rootdir}/data/webmentions.json`, json, 'utf-8') await fsp.writeFile(`${rootdir}/data/webmentions.json`, json, 'utf-8')
// 3. build youtube thumbnails // 2. build youtube thumbnails
console.log("4. building youtube thumbnails...") console.log("4. building youtube thumbnails...")
await youtube.thumbify({ await youtube.thumbify({
postDir: `${rootdir}/content`, postDir: `${rootdir}/content`,

View File

@ -13,7 +13,8 @@
}, },
"scripts": { "scripts": {
"precommit": "node hooks/precommit.js", "precommit": "node hooks/precommit.js",
"postdeploy": "node hooks/postdeploy.js" "postdeploy": "node hooks/postdeploy.js",
"search": "echo 'executing pagefind (locally)...' && /Users/wgroeneveld/.cargo/bin/pagefind --source docs --bundle-dir ../static/_pagefind"
}, },
"repository": { "repository": {
"type": "git", "type": "git",

File diff suppressed because one or more lines are too long

View File

@ -158,44 +158,6 @@
})(); })();
// ****** // ******
(function() {
const $target = document.querySelector('#searchapp');
const $pages = document.querySelector('#resultaten .pages');
if(!($target && window.searchposts)) return;
const query = new URLSearchParams(window.location.search);
const searchString = query.get('q') || "";
document.querySelector('#zoekentxt').value = searchString;
// Our index uses title as a reference
const postsByTitle = window.searchposts.reduce((acc, curr) => {
acc[curr.title] = curr;
return acc;
}, {});
fetch('/js/redzuurdesem-post.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]);
});
$pages.innerHTML = `(${matches.length})`;
if (matchPosts.length > 0) {
$target.innerHTML = matchPosts.filter(p => p).map(p => {
return `<div>
<h3><a href="${p.link}">${p.title}</a></h3>
<p>${p.content}...</p>
</div>`;
}).join('');
} else {
$target.innerHTML = `<div>Geen relevante resultaten gevonden.</div>`;
}
});
})()
const fromFixedToScrollForSafari = () => { const fromFixedToScrollForSafari = () => {
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

View File

@ -0,0 +1,38 @@
#search
input
width: 100%
ol
border-bottom: 1px solid lightgray
padding-top: 1rem
.pagefind-ui__message
padding-top: 1rem
font-weight: bold
.pagefind-ui__result
list-style-type: none
display: flex
align-items: flex-start
gap: 40px
padding: 30px 0 40px
border-top: 1px solid lightgray
&-thumb
width: 30%
max-width: 120px
margin-top: 10px
aspect-ratio: 3 / 2
position: relative
img
display: block
position: absolute
left: 50%
transform: translateX(-50%)
font-size: 0
width: auto
height: auto
max-width: 100%
max-height: 100%

View File

@ -9,3 +9,4 @@
@import 'footer' @import 'footer'
@import 'comments' @import 'comments'
@import 'syntax' @import 'syntax'
@import 'search'

View File

@ -31,7 +31,7 @@
</div> </div>
</section> </section>
{{ end }} {{ end }}
<div class = 'post'> <div class = 'post' data-pagefind-body>
<div class='post_metadata'> <div class='post_metadata'>
<hr/> <hr/>
<h1 class='post_title p-name'> <h1 class='post_title p-name'>