migrate from lunr to pagefind for searching

.gitignore

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

content/zoeken.md

@@ -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>

hooks/precommit.js

@@ -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`,

package.json

@@ -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",

themes/desem-swift-theme/assets/js/redzuurdesem.js

@@ -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);

themes/desem-swift-theme/assets/sass/_search.sass

@@ -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%

themes/desem-swift-theme/assets/sass/main.sass

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

themes/desem-swift-theme/layouts/_default/single.html

@@ -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'>