From 93d47662b2ce5a6dc4867687386c912e8cd13720 Mon Sep 17 00:00:00 2001
From: Mitja Felicijan <m@mitjafelicijan.com>
Date: Thu, 29 Jun 2023 18:40:17 +0200
Subject: Added search option with lunr.js

---
 themes/simple/layouts/partials/head.html       |   2 +-
 themes/simple/layouts/partials/navigation.html |   8 ++
 themes/simple/layouts/partials/search.html     | 123 +++++++++++++++++++++++++
 3 files changed, 132 insertions(+), 1 deletion(-)
 create mode 100644 themes/simple/layouts/partials/search.html

(limited to 'themes/simple/layouts/partials')

diff --git a/themes/simple/layouts/partials/head.html b/themes/simple/layouts/partials/head.html
index 6d40525..fc481fc 100644
--- a/themes/simple/layouts/partials/head.html
+++ b/themes/simple/layouts/partials/head.html
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <link rel="alternate" type="application/rss+xml" href="/index.xml" title="{{ .Site.Author.name }}">
-<link rel="alternate" type="application/rss+xml" href="/notes.xml" title="{{ .Site.Author.name }} - Notes">
+<link rel="alternate" type="application/rss+xml" href="/notes/index.xml" title="{{ .Site.Author.name }} - Notes">
 
 <link rel="stylesheet" href="/general/index.css?v={{ $cachebuster }}">
 
diff --git a/themes/simple/layouts/partials/navigation.html b/themes/simple/layouts/partials/navigation.html
index da42679..b65fe35 100644
--- a/themes/simple/layouts/partials/navigation.html
+++ b/themes/simple/layouts/partials/navigation.html
@@ -7,6 +7,14 @@
     <nav itemscope itemtype="http://schema.org/SiteNavigationElement" class="flex items-center gap-1" role="toolbar">
       <meta itemprop="name" content="Main Menu">
 
+      <!-- Search button -->
+      <span class="search-button flex gap-1 items-center text-gray-500 bg-gray-100 hover:bg-gray-200 rounded px-2 py-1 text-xs cursor-pointer mr-2 hidden" onclick="showSearchModal()">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-4 h-4">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+        </svg>
+        <span class="search-button-text uppercase font-bold"></span>
+      </span>
+
       <a href="/notes.html" class="font-medium px-2 hover:bg-yellow-100">Notes</a>
       <a href="https://telegram.me/mitjafelicijan" target="_blank" rel="noopener nofollow" itemprop="url" class="font-medium px-2 hover:bg-yellow-100">Telegram</a>
       <a href="https://git.mitjafelicijan.com" target="_blank" rel="noopener nofollow" itemprop="url" class="font-medium px-2 hover:bg-yellow-100">Git</a>
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>
-- 
cgit v1.2.3