migrate from lunr to pagefind for searching
This commit is contained in:
parent
0f9b3999b3
commit
d49975f9c6
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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`,
|
||||||
|
|
|
@ -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
|
@ -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);
|
||||||
|
|
|
@ -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 'footer'
|
||||||
@import 'comments'
|
@import 'comments'
|
||||||
@import 'syntax'
|
@import 'syntax'
|
||||||
|
@import 'search'
|
||||||
|
|
|
@ -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'>
|
||||||
|
|
Loading…
Reference in New Issue