search functionality lunr added

.gitignore

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

build-lunr-index.js

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

content/boek/src/todo-reclame.md

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

content/guest-post/weekendbakery.md

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

content/over/_index.md

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

content/zoeken/_index.md

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

data/menu.yml

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

layouts/shortcodes/searchbox.html

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

package.json

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

resources/_gen/assets/sass/sass/main.sass_ca26857cefa9076967ab300682271513.json

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

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

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

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

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

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

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

todo.txt

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