search functionality lunr added

master
wgroeneveld 3 years ago
parent a799f3cb2e
commit d8725b6e22

2
.gitignore vendored

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

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

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

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

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

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

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

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

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

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

@ -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() {

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

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

@ -0,0 +1,2 @@
task goes here
bla
Loading…
Cancel
Save