migrate from lunr to pagefind for searching
This commit is contained in:
parent
b38e7a3d10
commit
b55fe8a7f0
|
|
@ -13,14 +13,7 @@ docs/
|
|||
*.class
|
||||
.certificates
|
||||
|
||||
books/**/*.idx
|
||||
books/**/*.lof
|
||||
books/**/*.log
|
||||
books/**/*.toc
|
||||
books/**/*.pdf
|
||||
books/**/*.lot
|
||||
books/**/*.aux
|
||||
books/**/boek.tex
|
||||
static/_pagefind/
|
||||
|
||||
.yarn/*
|
||||
!.yarn/patches
|
||||
|
|
|
|||
|
|
@ -11,12 +11,18 @@ Not finding what you're looking for? Try browsing the archives:
|
|||
|
||||
### By search
|
||||
|
||||
Use `*` to partially match terms.
|
||||
Simply type to begin searching!
|
||||
|
||||
<form method="get" action="/search" class="search-form">
|
||||
<input id="zoekentxt" aria-label="Search terms" placeholder="e.g. 'philosophy'" name="q" type="text" style="width: 56%" />
|
||||
<button type="submit" class="button" style="width: 36%">Search!</button>
|
||||
</form>
|
||||
<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, search functionality requires JavaScript to be enabled.
|
||||
</noscript>
|
||||
|
||||
### 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 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")
|
||||
await fsp.writeFile(`${rootdir}/static/js/goodreads.js`, widget.replace(/src=/g, "loading=\"lazy\" src="), 'utf-8')
|
||||
|
||||
// 3. build Lunr index
|
||||
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
|
||||
// 3. get webmentions
|
||||
console.log("4. Fetching webmentions...")
|
||||
const mentions = await webmention.getWebmentions("brainbaking.com", wmconfig)
|
||||
const json = JSON.stringify(mentions, null, 4)
|
||||
|
|
@ -43,7 +38,7 @@ const rootdir = `${__dirname}/../`;
|
|||
extension: "jpg"
|
||||
})
|
||||
|
||||
// 5. generate youtube thumbnails
|
||||
// 4. generate youtube thumbnails
|
||||
console.log("5. Generating YouTube thumbnails...")
|
||||
await youtube.thumbify({
|
||||
postDir: `${rootdir}/content/post`,
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
"scripts": {
|
||||
"prenote": "node hooks/prenote.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"
|
||||
},
|
||||
"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,9 +1,8 @@
|
|||
|
||||
.search-form
|
||||
padding-top: 1rem
|
||||
padding-bottom: 1rem
|
||||
|
||||
button[type=submit]
|
||||
#search
|
||||
input
|
||||
width: 100%
|
||||
button
|
||||
background-color: white
|
||||
border: 1px solid var(--accent)
|
||||
color: var(--accent)
|
||||
|
|
@ -11,3 +10,37 @@
|
|||
&:hover
|
||||
color: white
|
||||
background-color: var(--accent)
|
||||
|
||||
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%
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<figure>
|
||||
<a href="{{ .Destination | safeURL }}" class="lbox">
|
||||
<img src="{{ .Destination | safeURL }}" loading="lazy"{{ with .Text }} alt="{{ . }}"{{ end }}{{ with .Title}} title="{{ . }}"{{ end }}>
|
||||
{{ $url := .Destination }}
|
||||
{{ $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>
|
||||
{{ with .Title }}
|
||||
<figcaption>{{ . }}</figcaption>
|
||||
|
|
|
|||
|
|
@ -53,10 +53,8 @@
|
|||
|
||||
{{ $content := .Content }}
|
||||
<!-- 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=\"" $baseurl "$1\"") $content }}
|
||||
<description>
|
||||
{{ `<![CDATA[ ` | safeHTML }}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{{ partial "header" . }}
|
||||
|
||||
<main class="h-entry">
|
||||
<main class="h-entry" data-pagefind-body>
|
||||
{{ partial "bigimg" . }}
|
||||
|
||||
<article class="single {{ .Section }}">
|
||||
|
|
|
|||
Loading…
Reference in New Issue