Search feature

assets/sass/_search.scss

@@ -0,0 +1,29 @@
+.search {
+  padding-top: 10px;
+  text-align: center;
+
+  input {
+    width: 180px;
+    border: none;
+    background: none;
+    border-bottom: 1px solid lighten($theme-color, 70%);
+
+    &:hover, &:focus, &:active, &.active {
+      outline: none;
+      border-bottom: 1px solid $theme-color;
+    }
+  }
+}
+
+.search-results-container {
+  margin: 0 -15px;
+  padding: 25px;
+  position: absolute;
+  z-index: 1;
+  background-color: $theme-inverse-color;
+
+  .search-results {
+    overflow-y: auto;
+    height: 250px;
+  }
+}

assets/sass/main.scss

@@ -15,6 +15,7 @@ $theme-inverse-color: {{ default "#ffffff" .Site.Params.themeInverseColor }};
 @import "language";
 @import "header";
 @import "navigation";
+@import "search";
 @import "publish";
 @import "footer";
 @import "svg";

layouts/_default/baseof.html

@@ -26,6 +26,7 @@
         {{ partial "language" . }}
         {{ partial "header" . }}
         {{ partial "navigation" . }}
+        {{ partial "search" . }}
 
         <main>
           <div class="container">
@@ -46,5 +47,11 @@
     {{ if (findRE "<pre" .Content 1) }}
       <script src="/copy/copy.js"></script>
     {{ end }}
+
+    <script src="/search/elasticlunr.min.js"></script>
+    <script src="/search/search.js"></script>
+    <script>
+      loadSearch({{ with .Site.GetPage "/" }}{{ with .OutputFormats.Get "json" }}'{{ .Permalink }}'{{ end }}{{ end }});
+    </script>
   </body>
 </html>

layouts/index.json

@@ -0,0 +1,8 @@
+{{- $result := slice -}}
+
+{{- range (where .Site.RegularPages "Section" "!=" "") -}}
+    {{- $data := dict "title" .Title "content" .Plain "tags" .Params.Tags "link" .Permalink "id" .File.UniqueID -}}
+    {{- $result = $result | append $data -}}
+{{- end -}}
+
+{{ jsonify $result }}

layouts/partials/search.html

@@ -0,0 +1,11 @@
+<div class="container">
+  <div class="search">
+    <input type="text" id="searchInput" placeholder="Type here to search">
+  </div>
+
+  <div class="container search-results-container" hidden="true">
+    <div id="searchResults" class="search-results">
+    </div>
+  </div>
+</div>
+

static/search/search.js

@@ -0,0 +1,58 @@
+function loadSearch(url, inputId="searchInput") {
+  const index = elasticlunr(function () {
+    this.addField('title');
+    this.addField('tags');
+    this.addField('content');
+    this.setRef('id');
+  });
+
+  fetch(url).then((response) => response.json()).then((data) =>
+    data.forEach(doc => index.addDoc(doc))
+  );
+
+  const input = document.getElementById(inputId);
+  input.addEventListener('input', (e) => {
+    const term = e.target.value;
+    const searchResults = document.getElementById("searchResults");
+
+    if (term.length < 3) {
+      searchResults.innerHTML = "";
+      searchResults.parentElement.hidden = true;
+      return;
+    }
+
+    const results = index.search(e.target.value, {
+      fields: {
+        title: {boost: 1},
+        tags: {boost: 2},
+        content: {boost: 1},
+      }
+    });
+
+    const articles = [];
+    results.forEach((result) => {
+      const article = document.createElement("article");
+
+      const title = document.createElement("h2");
+      const link = document.createElement("a");
+      link.innerHTML = result.doc.title;
+      link.href = result.doc.link;
+      title.appendChild(link);
+      article.appendChild(title);
+
+      const content = document.createElement("p");
+      content.innerHTML = result.doc.content.substring(0, 200) + "...";
+      article.appendChild(content);
+
+      articles.push(article);
+    });
+
+    if (results.length > 0) {
+      searchResults.replaceChildren(...articles);
+      searchResults.parentElement.hidden = false;
+    } else {
+      searchResults.innerHTML = "";
+      searchResults.parentElement.hidden = true;
+    }
+  });
+}