Added search option with lunr.js

11 files changed, 163 insertions, 3 deletions

diff --git a/themes/simple/layouts/_default/index.json b/themes/simple/layouts/_default/index.json
new file mode 100644
index 0000000..b8f3786
--- /dev/null
+++ b/themes/simple/layouts/_default/index.json
@@ -0,0 +1,5 @@
+{{- $.Scratch.Add "index" slice -}}
+{{- range .Site.RegularPages -}}
+{{- $.Scratch.Add "index" (dict "title" .Title "tags" .Params.tags "type" .Type "permalink" .RelPermalink "summary" .Summary) -}}
+{{- end -}}
+{{- $.Scratch.Get "index" | jsonify -}}
diff --git a/themes/simple/layouts/_default/rss.xml b/themes/simple/layouts/_default/index.xml
index 1f29133..1f29133 100644
--- a/themes/simple/layouts/_default/rss.xml
+++ b/themes/simple/layouts/_default/index.xml
diff --git a/themes/simple/layouts/_default/list.html b/themes/simple/layouts/_default/list.html
index 589d07b..232598d 100644
--- a/themes/simple/layouts/_default/list.html
+++ b/themes/simple/layouts/_default/list.html
@@ -1,6 +1,19 @@
 {{ define "main" }}
 <main role="main" class="container-blog mx-auto px-6 md:p-0">
 
+  <!-- Search modal and results -->
+  {{ partial "search.html" . }}
+
+  <!-- Notes CTA -->
+  <a class="flex items-center gap-2 w-full bg-yellow-200 hover:cursor-pointer rounded mb-8 p-4" href="/notes.html">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hidden lg:block w-6 h-6">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
+    </svg>
+    <p>For interesting <span span class="italic font-medium">notes</span> and
+    small <span class="italic font-medium">experiments</span> I usually partake
+    in, check the Notes page.</p>
+  </a>
+
   <h1 class="text-2xl font-bold mb-6">Blog posts</h1>
 
   <!-- List of all blog posts -->
diff --git a/themes/simple/layouts/_default/notes.html b/themes/simple/layouts/_default/notes.html
index 27ac958..02560b0 100644
--- a/themes/simple/layouts/_default/notes.html
+++ b/themes/simple/layouts/_default/notes.html
@@ -1,12 +1,15 @@
 {{ define "main" }}
 <main role="main" class="container-blog mx-auto px-6 md:p-0">
 
+  <!-- Search modal and results -->
+  {{ partial "search.html" . }}
+
   <section class="mb-6">
     <h1 class="text-2xl font-bold mb-2">Notes, notes and notes</h1>
     <p class="text-gray-600 italic">
       Notes about things I learn, things I do, things I want to remember,
       but never do. You can subscribe to this
-      <a href="/notes.xml" class="underline hover:bg-yellow-100">RSS feed</a>
+      <a href="/notes/index.xml" class="underline hover:bg-yellow-100">RSS feed</a>
       which contains only the notes without the blog posts.
     </p>
   </section>
diff --git a/themes/simple/layouts/_default/single.html b/themes/simple/layouts/_default/single.html
index 77354b7..cadfd7b 100644
--- a/themes/simple/layouts/_default/single.html
+++ b/themes/simple/layouts/_default/single.html
@@ -1,6 +1,9 @@
 {{ define "main" }}
 <main role="main" class="container-blog mx-auto px-6 md:p-0">
 
+  <!-- Search modal and results -->
+  {{ partial "search.html" . }}
+
   <!-- Single article -->
   <article itemtype="http://schema.org/Article" class="single mb-12">
     <header class="mb-6">
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>
diff --git a/themes/simple/layouts/section/section.json b/themes/simple/layouts/section/section.json
new file mode 100644
index 0000000..b8f3786
--- /dev/null
+++ b/themes/simple/layouts/section/section.json
@@ -0,0 +1,5 @@
+{{- $.Scratch.Add "index" slice -}}
+{{- range .Site.RegularPages -}}
+{{- $.Scratch.Add "index" (dict "title" .Title "tags" .Params.tags "type" .Type "permalink" .RelPermalink "summary" .Summary) -}}
+{{- end -}}
+{{- $.Scratch.Get "index" | jsonify -}}
diff --git a/themes/simple/layouts/section/notes.xml b/themes/simple/layouts/section/section.xml
index 889cf08..889cf08 100644
--- a/themes/simple/layouts/section/notes.xml
+++ b/themes/simple/layouts/section/section.xml
diff --git a/themes/simple/static/css/tailwind.css b/themes/simple/static/css/tailwind.css
index 51b922c..7d04496 100644
--- a/themes/simple/static/css/tailwind.css
+++ b/themes/simple/static/css/tailwind.css
@@ -6,7 +6,7 @@
 
 /* Container */
 .container-blog {
-        max-width: 700px;
+        max-width: 740px;
 }
 
 /* User text selection */