search functionality lunr added

This commit is contained in:
wgroeneveld 2020-05-13 12:51:02 +02:00
parent a799f3cb2e
commit d8725b6e22
16 changed files with 159 additions and 15 deletions

2
.gitignore vendored
View File

@ -6,7 +6,7 @@ docs/
*.log
**/*.sublime-workspace
resources/_gen/
resources/
node_modules/
content/boek/src/boek.tex

51
build-lunr-index.js Normal file
View File

@ -0,0 +1,51 @@
const fs = require('fs').promises;
const {promisify} = require('util');
const frontMatterParser = require('parser-front-matter');
const parse = promisify(frontMatterParser.parse.bind(frontMatterParser));
async function loadPostsWithFrontMatter(postsDirectoryPath) {
const postNames = await fs.readdir(postsDirectoryPath);
const posts = await Promise.all(
postNames.map(async fileName => {
const fileContent = await fs.readFile(
`${postsDirectoryPath}/${fileName}`,
'utf8'
);
const {content, data} = await parse(fileContent);
return {
content: content.slice(0, 3000),
...data
};
})
);
return posts;
}
const lunrjs = require('lunr');
function makeIndex(posts) {
return lunrjs(function() {
this.ref('title');
this.field('title');
this.field('content');
this.field('tags');
posts.forEach(p => {
this.add(p);
});
});
}
async function run() {
const posts = await loadPostsWithFrontMatter(`${__dirname}/content/post`);
const leren = await loadPostsWithFrontMatter(`${__dirname}/content/leren`);
const index = makeIndex(posts.concat(leren));
console.log(JSON.stringify(index));
}
run()
.then(() => process.exit(0))
.catch(error => {
console.error(error.stack);
process.exit(1);
});

View File

@ -12,8 +12,8 @@ https://www.goodreads.com/book/show/53267590-red-zuurdesem doorgeven?
[X] Facebook posts auto-grab IDs op een of andere manier? https://developers.facebook.com/docs/graph-api/reference/v7.0/page/feed reeds included
[ ] fucking token die maar 2 maand houdbaar is - in kalender zetten? met api calls auto-refreshen op een of andere manier
[ ] search functionaliteit. zie config.toml, JSON output
[ ] image optimizes voor tablet/phones, index is nu 5MB/8MB resources (FB shit)
[X] search functionaliteit. zie config.toml, JSON output
[X] image optimizes voor tablet/phones, index is nu 5MB/8MB resources (FB shit)
[X] Korte policy pagina? Koekske banner? (cookies weg indien niet ingelogd)
[X] 'Over' pagina inhoud aanpassen

View File

@ -6,12 +6,12 @@ disablefb: true
### Een persoonlijke zoektocht
Het begon allemaal met een kabouter. Een kabouter in de vorm van een broodbakmachine, die voor mij 's nachts opstaat, wat blokken hout in de oven gooit om vervolgens zijn handen vuil te maken. Dagelijks brood met een druk op de knop. In 2010 wist ik niet beter. Het duurde nog twee jaar voordat ik interesse begon te tonen in het broodbakproces en uiteindelijk de kabouter met pensioen stuurde. Dankzij broodbak blogs zoals deze (en '[The Fresh Loaf](https://thefreshloaf.com)' natuurlijk) ontdekte ik de wondere wereld van '_zuurdesem_', een ontdekking die de rest van mijn leven zou veranderen.
[![mijn rogge starter](/images/guest-post/roggestarter.jpg)](/images/guest-post/roggestarter.jpg)
Het begon allemaal met een kabouter. Een kabouter in de vorm van een broodbakmachine, die voor mij 's nachts opstaat, wat blokken hout in de oven gooit om vervolgens zijn handen vuil te maken. Dagelijks brood met een druk op de knop. In 2010 wist ik niet beter. Het duurde nog twee jaar voordat ik interesse begon te tonen in het broodbakproces en uiteindelijk de kabouter met pensioen stuurde. Dankzij broodbak blogs zoals '[Weekend Bakery](https://www.weekendbakery.com/)' en '[The Fresh Loaf](https://thefreshloaf.com)' ontdekte ik de wondere wereld van '_zuurdesem_', een ontdekking die de rest van mijn leven zou veranderen.
Sindsdien begon de persoonlijke zoektocht naar de smaak en wetenschap van brood. Als software ingenieur stel ik vaak vervelende vragen, zoals 'waarom werkt dit eigenlijk zo?' Maurizio Leo, de softwareontwikkelaar achter de populaire blog '[The Perfect Loaf](https://theperfectloaf.com)', noemt dit ook wel het _debuggen_ van het broodbak-_algoritme_. Zo ver zou zelfs ik niet durven gaan. Brood bakken begon langzaam maar zeker te evolueren van een noodzaak naar een uit de hand gelopen obsessie.
[![mijn rogge starter](/images/guest-post/roggestarter.jpg)](/images/guest-post/roggestarter.jpg)
Op zoek naar dat ene stukje perfect brood, dat ik tijdens mijn kinderjaren had geproefd op vakantie in Spanje, zette ik mijn zoektocht voort. Ik schreef me in voor avondlessen en werd na drie jaar zweten voor de oven een gediplomeerde Belgische brood- en banketbakker. Ontevreden met de lessen over brood tijdens de opleiding zocht ik een stageplek, die ik vond bij De Superette in Gent, waar ze écht brood bakken - met zuurdesem natuurlijk.
Mijn tweede grote passie, naast brood bakken, is kennis delen. Die twee passies bleken perfect combineerbaar. Er werden workshops gevolgd en gegeven, een eigen website '[Red Zuurdesem](https://redzuurdesem.be)' opgezet, met nationale en internationale bakkers gesproken en lang nagedacht over gisten en melkzuurbacteriën.

View File

@ -1,5 +1,7 @@
---
title: Over
aliases:
- /about/
date: 2012-12-06T16:29:31+00:00
---

11
content/zoeken/_index.md Normal file
View File

@ -0,0 +1,11 @@
---
title: Zoeken
aliases:
- /search
---
# Zoeken
> Niet gevonden wat je zocht? Probeer je geluk hier:
{{< searchbox >}}

View File

@ -4,5 +4,7 @@
url: post/
- item: Leren bakken
url: leren/
- item: Zoeken
url: zoeken/
- item: Over
url: about/
url: over/

View File

@ -0,0 +1,27 @@
<form method="get" action="">
<input id="zoekentxt" placeholder="zuurdesembrood" name="q" type="text" style="width: 50%" />
<button type="submit" class="button">Zoeken</button>
<a href="/zoeken">Leegmaken</a>
</form>
<div id="resultaten">
<hr/>
<h1>
Zoekresultaten
<span class="pages"></span> &raquo;
</h1>
<div id="searchapp"></div>
</div>
<script src="https://unpkg.com/lunr/lunr.js"></script>
<!-- Generate a list of posts so we can display them -->
{{ $p := slice }}
{{ range .Site.RegularPages }}
{{ $post := dict "link" .RelPermalink "title" .Title "content" (substr .Plain 0 200) -}}
{{ $p = $p | append $post -}}
{{ end }}
<script>
window.searchposts = JSON.parse(
{{ $p | jsonify }}
);
</script>

View File

@ -10,10 +10,13 @@
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.9.6",
"@babel/preset-env": "^7.9.6"
"@babel/preset-env": "^7.9.6",
"lunr": "^2.3.6",
"parser-front-matter": "^1.6.4"
},
"scripts": {
"build": "/usr/local/bin/hugo"
"build": "/usr/local/bin/hugo",
"index": "node build-lunr-index.js > static/js/redzuurdesem-post.json"
},
"repository": {
"type": "git",

File diff suppressed because one or more lines are too long

View File

@ -1 +0,0 @@
{"Target":"css/styles.a824af1bdd031310f727c3e894c744b9fec7a5b5d06083cb4772632588eea8ea8c4c7030050086a2243a46b54dbb3e84236a766ce1776e05683a6e166e1fcf9f.css","MediaType":"text/css","Data":{"Integrity":"sha512-qCSvG90DExD3J8PolMdEuf7HpbXQYIPLR3JjJYjuqOqMTHAwBQCGoiQ6RrVNuz6EI2p2bOF3bgVoOm4Wbh/Pnw=="}}

File diff suppressed because one or more lines are too long

View File

@ -124,6 +124,45 @@
if(fbposts && window.fbtoken) {
window.fbAsyncInit = getRedZuurdesemFacebookFeed;
}
})();
(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>`;
}
});
})()
function fromFixedToScrollForSafari() {

View File

@ -35,7 +35,7 @@ blockquote
padding: 1rem
position: relative
quotes: '\201C''\201D''\2018''\2019'
margin: 0.75rem 0
margin: 1.2rem 0
display: flex
flex-flow: row wrap
background-repeat: no-repeat
@ -104,7 +104,7 @@ hr
padding: 0.5px
background: var(--theme)
opacity: 0.5
margin: 1rem 0
margin: 3rem 0
aside
h3

View File

@ -58,6 +58,16 @@ button
background-color: black
color: white
input
margin: 0.5em
padding-left: 2em
padding-right: 2em
padding-top: 1em
padding-bottom: 1em
font-size: 1em
font-family: var(--font)
border: 1px solid var(--title)
.index-title
height: 95vh !important

2
todo.txt Normal file
View File

@ -0,0 +1,2 @@
task goes here
bla