Added search option with lunr.js

1 files changed, 123 insertions, 0 deletions

diff --git a/themes/simple/layouts/partials/search.html b/themes/simple/layouts/partials/search.html
new file mode 100644
index 0000000..3e31753
--- /dev/null
+++ b/themes/simple/layouts/partials/search.html
@@ -0,0 +1,123 @@
+<section class="search-modal mb-10 hidden">
+  <input class="bg-gray-100 w-full px-3 py-2 rounded outline-none" type="search" placeholder="Search here...">
+  <section class="results bg-white border border-gray-200 shadow-md p-2 flex flex-col gap-2 rounded mt-4 hidden"></section>
+</section>
+
+<script src="https://unpkg.com/lunr/lunr.js"></script>
+<script>
+  (async function() {
+      const debounceDelay = 700;
+
+      // Fetch search index generated by Hugo.
+      const req = await fetch('/index.json');
+      window.searchDocuments = await req.json();
+
+      window.searchIndex = lunr(function() {
+          this.ref('permalink');
+          this.field('title', { boost: 20 });
+          this.field('tags', { boost: 10 });
+          this.field('summary', { boost: 1 });
+
+          window.searchDocuments.forEach(function(doc) {
+              this.add(doc);
+          }, this);
+
+          console.log('Search index processed...');
+      })
+
+      // Connect DOM and search the index.
+      let cachedSearchTerm = null;
+            const searchModal = document.querySelector('.search-modal');
+            const searchInput = document.querySelector('.search-modal input');
+            const searchResults = document.querySelector('.search-modal .results');
+
+      // Display search modal.
+      window.showSearchModal = function() {
+          searchModal.classList.remove('hidden');
+          searchInput.focus();
+      }
+
+      // Detect OS and sets proper search button text.
+      const searchButtonElement = document.querySelector('.search-button');
+      const searchButtonTextElement = document.querySelector('.search-button-text');
+      if (searchButtonElement) {
+          let searchButtonText = 'ctrl+k';
+          if (navigator.platform.toUpperCase().indexOf('MAC') >= 0) {
+              searchButtonText = 'cmd+k';
+          }
+          searchButtonTextElement.innerText = searchButtonText;
+          searchButtonElement.classList.remove('hidden');
+      }
+
+      // On keyboard shortcut shows search modal.
+      document.addEventListener('keydown', function(event) {
+          // Handles macOS CMD+k.
+          if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
+              event.preventDefault();
+              showSearchModal();
+          }
+
+          // Handles Windows/Linux Ctrl+k.
+          if (event.ctrlKey && event.key === 'k') {
+              event.preventDefault();
+              showSearchModal();
+          }
+      });
+
+      // Debounce magic.
+      function debounce(func, delay) {
+                      let timerId;
+                      return function (...args) {
+                                clearTimeout(timerId);
+                                timerId = setTimeout(() => {
+                                          func.apply(this, args);
+                                }, delay);
+                      };
+            }
+
+      // Do the actual search.
+      searchInput.addEventListener('keyup', debounce((evt)=> {
+          const query = evt.target.value.trim().toLowerCase();
+                      if (query.length && query != cachedSearchTerm) {
+                                const results = searchIndex.search(query);
+
+              if (results.length == 0) {
+                        searchResults.classList.add('hidden');
+              } else {
+                  searchResults.innerText = '';
+                        searchResults.classList.remove('hidden');
+                        cachedSearchTerm = query;
+
+                        results.forEach(resultItem => {
+                      const item = window.searchDocuments.find(doc => doc.permalink === resultItem.ref);
+
+                                  const link = document.createElement('a');
+                                  link.href = item.permalink;
+                                  link.classList.add('hover:bg-gray-100', 'cursor-pointer', 'py-2', 'px-3', 'rounded');
+
+                      const title = document.createElement('div');
+                                  title.classList.add('text-gray-800', 'font-medium');
+                                  title.innerHTML = item.title;
+                      link.appendChild(title);
+
+                      const meta = document.createElement('div');
+                      meta.classList.add('text-gray-500', 'flex', 'items-center', 'gap-2');
+
+                      const section = document.createElement('span');
+                      section.classList.add('uppercase', 'text-xs', 'font-medium', 'bg-gray-200', 'px-1', 'rounded')
+                                  section.innerText = item.type;
+                      meta.appendChild(section);
+
+                      const summary = document.createElement('span');
+                      const summaryText = item.summary.length > 80 ? `${item.summary.substring(0, 80)}...` : item.summary;
+                                  summary.innerHTML = summaryText;
+                      meta.appendChild(summary);
+
+                      link.appendChild(meta);
+                                  searchResults.appendChild(link);
+                              });
+                          }
+          }
+            }, debounceDelay));
+  })();
+</script>