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/_default/index.json      |   5 +
 themes/simple/layouts/_default/index.xml       |  27 ++++++
 themes/simple/layouts/_default/list.html       |  13 +++
 themes/simple/layouts/_default/notes.html      |   5 +-
 themes/simple/layouts/_default/rss.xml         |  27 ------
 themes/simple/layouts/_default/single.html     |   3 +
 themes/simple/layouts/partials/head.html       |   2 +-
 themes/simple/layouts/partials/navigation.html |   8 ++
 themes/simple/layouts/partials/search.html     | 123 +++++++++++++++++++++++++
 themes/simple/layouts/section/notes.xml        |  27 ------
 themes/simple/layouts/section/section.json     |   5 +
 themes/simple/layouts/section/section.xml      |  27 ++++++
 12 files changed, 216 insertions(+), 56 deletions(-)
 create mode 100644 themes/simple/layouts/_default/index.json
 create mode 100644 themes/simple/layouts/_default/index.xml
 delete mode 100644 themes/simple/layouts/_default/rss.xml
 create mode 100644 themes/simple/layouts/partials/search.html
 delete mode 100644 themes/simple/layouts/section/notes.xml
 create mode 100644 themes/simple/layouts/section/section.json
 create mode 100644 themes/simple/layouts/section/section.xml

(limited to 'themes/simple/layouts')

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/index.xml b/themes/simple/layouts/_default/index.xml
new file mode 100644
index 0000000..1f29133
--- /dev/null
+++ b/themes/simple/layouts/_default/index.xml
@@ -0,0 +1,27 @@
+<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom">
+
+  <channel>
+
+    <title>{{ .Site.Author.name }}'s Blog</title>
+    <link>{{ .Permalink }}</link>
+    <description>{{ .Site.Params.description }}</description>
+    <language>en-us</language>
+
+    {{ range (where .Site.RegularPages "Section" "posts") }}
+    <item>
+
+      <title>{{ .Title }}</title>
+      <link>{{ .Permalink }}</link>
+      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
+      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
+      <guid>{{ .Permalink }}</guid>
+
+      <description>{{ "<![CDATA[" | safeHTML }} {{ .Summary }}]]></description>
+      <content:encoded>{{ "<![CDATA[" | safeHTML }} {{ .Content }}]]></content:encoded>
+
+    </item>
+    {{end}}
+
+  </channel>
+
+</rss>
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/rss.xml b/themes/simple/layouts/_default/rss.xml
deleted file mode 100644
index 1f29133..0000000
--- a/themes/simple/layouts/_default/rss.xml
+++ /dev/null
@@ -1,27 +0,0 @@
-<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom">
-
-  <channel>
-
-    <title>{{ .Site.Author.name }}'s Blog</title>
-    <link>{{ .Permalink }}</link>
-    <description>{{ .Site.Params.description }}</description>
-    <language>en-us</language>
-
-    {{ range (where .Site.RegularPages "Section" "posts") }}
-    <item>
-
-      <title>{{ .Title }}</title>
-      <link>{{ .Permalink }}</link>
-      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
-      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
-      <guid>{{ .Permalink }}</guid>
-
-      <description>{{ "<![CDATA[" | safeHTML }} {{ .Summary }}]]></description>
-      <content:encoded>{{ "<![CDATA[" | safeHTML }} {{ .Content }}]]></content:encoded>
-
-    </item>
-    {{end}}
-
-  </channel>
-
-</rss>
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/notes.xml b/themes/simple/layouts/section/notes.xml
deleted file mode 100644
index 889cf08..0000000
--- a/themes/simple/layouts/section/notes.xml
+++ /dev/null
@@ -1,27 +0,0 @@
-<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom">
-
-  <channel>
-
-    <title>{{ .Site.Author.name }}'s Notes</title>
-    <link>{{ .Permalink }}</link>
-    <description>{{ .Site.Params.description }}</description>
-    <language>en-us</language>
-
-    {{ range (where .Site.RegularPages "Section" "notes") }}
-    <item>
-
-      <title>{{ .Title }}</title>
-      <link>{{ .Permalink }}</link>
-      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
-      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
-      <guid>{{ .Permalink }}</guid>
-
-      <description>{{ "<![CDATA[" | safeHTML }} {{ .Summary }}]]></description>
-      <content:encoded>{{ "<![CDATA[" | safeHTML }} {{ .Content }}]]></content:encoded>
-
-    </item>
-    {{end}}
-
-  </channel>
-
-</rss>
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/section.xml b/themes/simple/layouts/section/section.xml
new file mode 100644
index 0000000..889cf08
--- /dev/null
+++ b/themes/simple/layouts/section/section.xml
@@ -0,0 +1,27 @@
+<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom">
+
+  <channel>
+
+    <title>{{ .Site.Author.name }}'s Notes</title>
+    <link>{{ .Permalink }}</link>
+    <description>{{ .Site.Params.description }}</description>
+    <language>en-us</language>
+
+    {{ range (where .Site.RegularPages "Section" "notes") }}
+    <item>
+
+      <title>{{ .Title }}</title>
+      <link>{{ .Permalink }}</link>
+      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
+      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
+      <guid>{{ .Permalink }}</guid>
+
+      <description>{{ "<![CDATA[" | safeHTML }} {{ .Summary }}]]></description>
+      <content:encoded>{{ "<![CDATA[" | safeHTML }} {{ .Content }}]]></content:encoded>
+
+    </item>
+    {{end}}
+
+  </channel>
+
+</rss>
-- 
cgit v1.2.3