initial work on search with lunr.js

assets/js/search.js

@@ -0,0 +1,41 @@
+function displayResults (results, store) {
+  const searchResults = document.getElementById('results');
+  if (results.length) {
+    let resultList = '';
+    for (const n in results) {
+      const item = store[results[n].ref];
+      resultList += '<li><a href="' + item.url + '">' + item.title + '</a></li>'
+      resultList += '<p>' + item.content.substring(0, 150) + '...</p>'
+    }
+    searchResults.innerHTML = resultList;
+  } else {
+    searchResults.innerHTML = 'No results found.';
+  }
+}
+const params = new URLSearchParams(window.location.search);
+const query = params.get('query');
+if (query) {
+  document.getElementById('search-input').setAttribute('value', query);
+  const idx = lunr(function () {
+    this.ref('id')
+    this.field('title', {
+      boost: 15
+    })
+    this.field('tags')
+    this.field('content', {
+      boost: 10
+    })
+    for (const key in window.store) {
+      this.add({
+        id: key,
+        title: window.store[key].title,
+        tags: window.store[key].tags,
+        content: window.store[key].content
+      })
+    }
+  })
+  const results = idx.search(query);
+  displayResults(results, window.store)
+}
+
+

content/search/_index.md

@@ -0,0 +1,3 @@
+---
+title: Search me!
+---

layouts/partials/about.html

@@ -14,3 +14,4 @@
     </li>
     {{ end }}
 </ul>
+{{ partial "search-form.html" . }}

layouts/partials/footer.html

@@ -3,6 +3,7 @@
 <p class="powered_by">{"powered_by": [{{- range $i, $link :=  .Site.Params.powerLinks }}{{ if $i }}, {{ end }}&quot;<a target="_blank" href="{{ $link.url }}">{{ $link.title }}</a>&quot;{{ end }}]}
 <br>&lt;<a target="_blank" href="https://github.com/jbowdre/runtimeterror">view source</a>&gt;</p>
 
+{{ partial "search-index.html" .}}
 {{ if (findRE "<pre" .Content 1) }}
   {{ $jsCopy := resources.Get "js/code-copy-button.js" | minify }}
   <script src="{{ $jsCopy.RelPermalink }}"></script>

layouts/partials/search-form.html

@@ -0,0 +1,7 @@
+<form id="search"
+  action='{{ with .GetPage "/search" }}{{.Permalink}}{{end}}' method="get">
+  <label hidden for="search-input">Search site</label>
+  <input type="text" id="search-input" name="query"
+  placeholder="Type here to search">
+  <input type="submit" value="search">
+</form>

layouts/partials/search-index.html

@@ -0,0 +1,16 @@
+<script>
+  window.store = {
+    {{ range where .Site.Pages "Section" "posts" }}
+    "{{ .Permalink }}": {
+      "title": "{{ .Title }}",
+      "tags": [{{ range .Params.Tags }}"{{ . }}",{{ end }}],
+      "content": {{ .Content | plainify }},
+      "url": "{{ .Permalink }}"
+    },
+    {{ end }}
+  }
+</script>
+{{ $jsLunr := resources.Get "js/lunr.js" | minify }}
+<script src="{{ $jsLunr.RelPermalink }}"></script>
+{{ $jsSearch := resources.Get "js/search.js" | minify }}
+<script src="{{ $jsSearch.RelPermalink }}"></script>

layouts/search/list.html

@@ -0,0 +1,9 @@
+{{ define "main" }}
+{{ partial "search-form.html" . }}
+
+<ul id="results">
+  <li>
+    Enter a keyword above to search this site.
+  </li>
+</ul>
+{{ end }}