migrate from lunr to pagefind for searching
parent
0f9b3999b3
commit
d49975f9c6
|
|
@ -10,6 +10,7 @@ docs/
|
|||
|
||||
resources/
|
||||
node_modules/
|
||||
static/_pagefind
|
||||
|
||||
content/boek/src/boek.tex
|
||||
content/boek/src/boek.pdf
|
||||
|
|
|
|||
|
|
@ -6,6 +6,15 @@ aliases:
|
|||
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
if(!process.env.WEBMENTION_TOKEN) {
|
||||
|
|
@ -14,21 +14,13 @@ const wmconfig = {
|
|||
const rootdir = `${__dirname}/../`;
|
||||
|
||||
(async function() {
|
||||
// 1. build Lunr index
|
||||
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
|
||||
// 1. get webmentions
|
||||
console.log("2. Fetching webmentions...")
|
||||
const mentions = await webmention.getWebmentions("redzuurdesem.be", wmconfig)
|
||||
const json = JSON.stringify(mentions, null, 4)
|
||||
await fsp.writeFile(`${rootdir}/data/webmentions.json`, json, 'utf-8')
|
||||
|
||||
// 3. build youtube thumbnails
|
||||
// 2. build youtube thumbnails
|
||||
console.log("4. building youtube thumbnails...")
|
||||
await youtube.thumbify({
|
||||
postDir: `${rootdir}/content`,
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@
|
|||
},
|
||||
"scripts": {
|
||||
"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": {
|
||||
"type": "git",
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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 isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
|
||||
|
|
|
|||
|
|
@ -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%
|
||||
|
|
@ -9,3 +9,4 @@
|
|||
@import 'footer'
|
||||
@import 'comments'
|
||||
@import 'syntax'
|
||||
@import 'search'
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
<div class = 'post'>
|
||||
<div class = 'post' data-pagefind-body>
|
||||
<div class='post_metadata'>
|
||||
<hr/>
|
||||
<h1 class='post_title p-name'>
|
||||
|
|
|
|||
Loading…
Reference in New Issue