Merge pull request #6 from jbowdre/preview

Implement site search

assets/js/search.js

@@ -0,0 +1,44 @@
+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>'
+      if (item.description)
+        resultList += '<p>' + item.description + '</p>'
+      else
+        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-query').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,5 @@
+<form id="search"
+  action='{{ with .GetPage "/search" }}{{ .Permalink }}{{ end }}' method="get">
+  <input type="input" id="search-query" name="query" placeholder="grep -i" aria-label="search text">
+  <button type="submit" aria-label="search button"><i class="fa-solid fa-magnifying-glass"></i></button>
+</form>

layouts/partials/search-index.html

@@ -0,0 +1,17 @@
+<script>
+  window.store = {
+    {{ range where .Site.Pages "Section" "posts" }}
+    "{{ .Permalink }}": {
+      "title": "{{ .Title }}",
+      "tags": [{{ range .Params.Tags }}"{{ . }}",{{ end }}],
+      "content": {{ .Content | plainify }},
+      "description": {{ .Description | 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" . }}
+<br>
+<ul id="results">
+  <li>
+    Enter a keyword above to search this site.
+  </li>
+</ul>
+{{ end }}

static/css/custom.css

@@ -216,4 +216,38 @@ code,
 kbd,
 samp {
   color: var(--code);
-}
+}
+
+/* search box styling */
+form {
+  display: flex;
+  flex-direction: row;
+  border-radius: 0.25rem;
+  outline: 0.25rem solid var(--bg);
+}
+
+input {
+  flex-grow: 2;
+  border: none;
+  background-color: var(--off-bg);
+  color: var(--off-fg);
+  height: 1.5rem;
+  border-radius: 0.25rem;
+  padding-left: 0.5rem;
+  font-family: var(--font-monospace);
+}
+
+input:focus {
+  outline: none;
+}
+
+form:focus-within {
+  outline: 1px solid var(--logo);
+}
+
+form button {
+  outline: none;
+  border: none;
+  background-color: var(--off-bg);
+  color: var(--link);
+}

torchlight.config.js

@@ -58,7 +58,9 @@ module.exports = {
     // appear, the file will be ignored.
     excludePatterns: [
       '/node_modules/',
-      '/vendor/'
+      '/vendor/',
+      '/series/',
+      '/tags/'
     ]
   }
 }