migrate from lunr to pagefind for searching
This commit is contained in:
parent
b38e7a3d10
commit
b55fe8a7f0
|
@ -13,14 +13,7 @@ docs/
|
||||||
*.class
|
*.class
|
||||||
.certificates
|
.certificates
|
||||||
|
|
||||||
books/**/*.idx
|
static/_pagefind/
|
||||||
books/**/*.lof
|
|
||||||
books/**/*.log
|
|
||||||
books/**/*.toc
|
|
||||||
books/**/*.pdf
|
|
||||||
books/**/*.lot
|
|
||||||
books/**/*.aux
|
|
||||||
books/**/boek.tex
|
|
||||||
|
|
||||||
.yarn/*
|
.yarn/*
|
||||||
!.yarn/patches
|
!.yarn/patches
|
||||||
|
|
|
@ -11,12 +11,18 @@ Not finding what you're looking for? Try browsing the archives:
|
||||||
|
|
||||||
### By search
|
### By search
|
||||||
|
|
||||||
Use `*` to partially match terms.
|
Simply type to begin searching!
|
||||||
|
|
||||||
<form method="get" action="/search" class="search-form">
|
<script src="/_pagefind/pagefind-ui.js" type="text/javascript"></script>
|
||||||
<input id="zoekentxt" aria-label="Search terms" placeholder="e.g. 'philosophy'" name="q" type="text" style="width: 56%" />
|
<div id="search"></div>
|
||||||
<button type="submit" class="button" style="width: 36%">Search!</button>
|
<script>
|
||||||
</form>
|
window.addEventListener('DOMContentLoaded', (event) => {
|
||||||
|
new PagefindUI({ element: "#search", resetStyles: false });
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<noscript>
|
||||||
|
... Sorry, search functionality requires JavaScript to be enabled.
|
||||||
|
</noscript>
|
||||||
|
|
||||||
### By category
|
### By category
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
|
|
||||||
const { mastodon, goodreads, lunr, webmention, youtube } = require('jam-my-stack');
|
const { mastodon, goodreads, webmention, youtube } = require('jam-my-stack');
|
||||||
const fsp = require('fs').promises;
|
const fsp = require('fs').promises;
|
||||||
const wmconfig = require('./_conf.js');
|
const wmconfig = require('./_conf.js');
|
||||||
|
|
||||||
|
@ -24,12 +24,7 @@ const rootdir = `${__dirname}/../`;
|
||||||
const widget = await goodreads.createWidget("https://www.goodreads.com/review/grid_widget/5451893.Wouter's%20bookshelf:%20read?cover_size=medium&hide_link=&hide_title=&num_books=12&order=d&shelf=read&sort=date_added&widget_id=1496758344")
|
const widget = await goodreads.createWidget("https://www.goodreads.com/review/grid_widget/5451893.Wouter's%20bookshelf:%20read?cover_size=medium&hide_link=&hide_title=&num_books=12&order=d&shelf=read&sort=date_added&widget_id=1496758344")
|
||||||
await fsp.writeFile(`${rootdir}/static/js/goodreads.js`, widget.replace(/src=/g, "loading=\"lazy\" src="), 'utf-8')
|
await fsp.writeFile(`${rootdir}/static/js/goodreads.js`, widget.replace(/src=/g, "loading=\"lazy\" src="), 'utf-8')
|
||||||
|
|
||||||
// 3. build Lunr index
|
// 3. get webmentions
|
||||||
console.log("3. Building lunr search index...")
|
|
||||||
const index = await lunr.buildIndex([`${rootdir}/content/post`])
|
|
||||||
await fsp.writeFile(`${rootdir}/static/js/brainbaking-post.json`, JSON.stringify(index), 'utf-8')
|
|
||||||
|
|
||||||
// 4. get webmentions
|
|
||||||
console.log("4. Fetching webmentions...")
|
console.log("4. Fetching webmentions...")
|
||||||
const mentions = await webmention.getWebmentions("brainbaking.com", wmconfig)
|
const mentions = await webmention.getWebmentions("brainbaking.com", wmconfig)
|
||||||
const json = JSON.stringify(mentions, null, 4)
|
const json = JSON.stringify(mentions, null, 4)
|
||||||
|
@ -43,7 +38,7 @@ const rootdir = `${__dirname}/../`;
|
||||||
extension: "jpg"
|
extension: "jpg"
|
||||||
})
|
})
|
||||||
|
|
||||||
// 5. generate youtube thumbnails
|
// 4. generate youtube thumbnails
|
||||||
console.log("5. Generating YouTube thumbnails...")
|
console.log("5. Generating YouTube thumbnails...")
|
||||||
await youtube.thumbify({
|
await youtube.thumbify({
|
||||||
postDir: `${rootdir}/content/post`,
|
postDir: `${rootdir}/content/post`,
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"prenote": "node hooks/prenote.js",
|
"prenote": "node hooks/prenote.js",
|
||||||
"precommit": "node hooks/precommit.js",
|
"precommit": "node hooks/precommit.js",
|
||||||
|
"search": "echo 'executing pagefind (locally)...' && /Users/wgroeneveld/.cargo/bin/pagefind --source docs --bundle-dir ../static/_pagefind",
|
||||||
"postdeploy": "node hooks/postdeploy.js"
|
"postdeploy": "node hooks/postdeploy.js"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -50,43 +50,4 @@ document.addEventListener("DOMContentLoaded",function() {
|
||||||
})
|
})
|
||||||
})();
|
})();
|
||||||
|
|
||||||
(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/brainbaking-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 `<article>
|
|
||||||
<h3><a href="${p.link}">${p.title}</a></h3>
|
|
||||||
<p>${p.content}...</p>
|
|
||||||
</article>`;
|
|
||||||
}).join('');
|
|
||||||
} else {
|
|
||||||
$target.innerHTML = `<article>No relevant search results found.</article>`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
})()
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,13 +1,46 @@
|
||||||
|
|
||||||
.search-form
|
#search
|
||||||
padding-top: 1rem
|
input
|
||||||
padding-bottom: 1rem
|
width: 100%
|
||||||
|
button
|
||||||
|
background-color: white
|
||||||
|
border: 1px solid var(--accent)
|
||||||
|
color: var(--accent)
|
||||||
|
|
||||||
button[type=submit]
|
&:hover
|
||||||
background-color: white
|
color: white
|
||||||
border: 1px solid var(--accent)
|
background-color: var(--accent)
|
||||||
color: var(--accent)
|
|
||||||
|
|
||||||
&:hover
|
ol
|
||||||
color: white
|
border-bottom: 1px solid lightgray
|
||||||
background-color: var(--accent)
|
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%
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
<figure>
|
<figure>
|
||||||
<a href="{{ .Destination | safeURL }}" class="lbox">
|
{{ $url := .Destination }}
|
||||||
<img src="{{ .Destination | safeURL }}" loading="lazy"{{ with .Text }} alt="{{ . }}"{{ end }}{{ with .Title}} title="{{ . }}"{{ end }}>
|
{{ $url = replaceRE `^../(.*?)` (printf "%s%s" .Page.Permalink "../$1") $url }}
|
||||||
|
<a href="{{ $url | absURL }}" class="lbox">
|
||||||
|
<img src="{{ $url | absURL }}" loading="lazy"{{ with .Text }} alt="{{ . }}"{{ end }}{{ with .Title}} title="{{ . }}"{{ end }}>
|
||||||
</a>
|
</a>
|
||||||
{{ with .Title }}
|
{{ with .Title }}
|
||||||
<figcaption>{{ . }}</figcaption>
|
<figcaption>{{ . }}</figcaption>
|
||||||
|
|
|
@ -53,10 +53,8 @@
|
||||||
|
|
||||||
{{ $content := .Content }}
|
{{ $content := .Content }}
|
||||||
<!-- relative images/URLs do not work in some feed readers. Thanks, Peter. See render-image.html -->
|
<!-- relative images/URLs do not work in some feed readers. Thanks, Peter. See render-image.html -->
|
||||||
{{ $content = replaceRE `<img src="../(.*?)"` (printf "%s%s%s" "<img src=\"" .Permalink "../$1\"") $content }}
|
|
||||||
{{ $content = replaceRE `<img src="/(.*?)"` (printf "%s%s%s" "<img src=\"" $baseurl "$1\"") $content }}
|
|
||||||
{{ $content = replaceRE `a href="(#.*?)"` (printf "%s%s%s" "a href=\"" .Permalink "$1\"") $content }}
|
{{ $content = replaceRE `a href="(#.*?)"` (printf "%s%s%s" "a href=\"" .Permalink "$1\"") $content }}
|
||||||
{{ $content = replaceRE `a href="../(.*?)"` (printf "%s%s%s" "a href=\"" .Permalink "../$1\"") $content }}
|
{{ $content = replaceRE `a href="^../(.*?)"` (printf "%s%s%s" "a href=\"" .Permalink "../$1\"") $content }}
|
||||||
{{ $content = replaceRE `a href="/(.*?)"` (printf "%s%s%s" "a href=\"" $baseurl "$1\"") $content }}
|
{{ $content = replaceRE `a href="/(.*?)"` (printf "%s%s%s" "a href=\"" $baseurl "$1\"") $content }}
|
||||||
<description>
|
<description>
|
||||||
{{ `<![CDATA[ ` | safeHTML }}
|
{{ `<![CDATA[ ` | safeHTML }}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{{ partial "header" . }}
|
{{ partial "header" . }}
|
||||||
|
|
||||||
<main class="h-entry">
|
<main class="h-entry" data-pagefind-body>
|
||||||
{{ partial "bigimg" . }}
|
{{ partial "bigimg" . }}
|
||||||
|
|
||||||
<article class="single {{ .Section }}">
|
<article class="single {{ .Section }}">
|
||||||
|
|
Loading…
Reference in New Issue