1 files changed, 86 insertions, 11 deletions

diff --git a/static/js/site.js b/static/js/site.js
index 4b64425..f764289 100755
--- a/static/js/site.js
+++ b/static/js/site.js
@@ -1,5 +1,7 @@
 "use strict";
 
+var indexScriptLoaded = false;
+
 function debounce(func, wait) {
   var timeout;
 
@@ -110,17 +112,12 @@ function makeTeaser(body, terms) {
 
 function formatSearchResultItem(item, terms) {
   return (
-    `<article class='box'>` +
-    `<h1 class='title'>` +
-    `<a class='link' class='link' href='${item.ref}'>${item.doc.title}</a>` +
-    `</h1>` +
-    `<div class='content mt-2'>` +
-    `${makeTeaser(item.doc.body, terms)}` +
-    `<a href='${item.ref}'>` +
-    `Read More <span class="icon is-small"><i class="fas fa-arrow-right fa-xs"></i></span>` +
-    `</a>` +
-    `</div>` +
-    `</article>`
+    `<a href='${item.ref}' class='group flex flex-col space-y-2 hover:bg-gray-100 p-2 rounded'>` +
+      `<h1 class='text-garage-orange font-semibold'>` + `${item.doc.title}` + `</h1>` +
+      `<div class='content mt-2'>` +
+        `${makeTeaser(item.doc.body, terms)}` +
+      `</div>` +
+    `</a>`
   );
 }
 
@@ -168,4 +165,82 @@ function search() {
       }
     }, 150)
   );
+}
+
+function openSearchModal() {
+  if (indexScriptLoaded === false) {
+    var indexScript = document.createElement('script');
+    indexScript.setAttribute('src', './search_index.en.js');
+    document.head.appendChild(indexScript);
+    indexScriptLoaded = true;
+  }
+  document.getElementById('search-modal').classList.remove('hidden');
+  document.getElementById('search').focus();
+  document.getElementById('search').select();
+}
+
+function closeSearchModal() {
+  document.getElementById('search-modal').classList.add('hidden');
+}
+
+function documentReadyCallback() {
+
+  if (localStorage.getItem("theme") === "dark") {
+    document.body.setAttribute("theme", "dark");
+    document.querySelectorAll("img, picture, video, pre").forEach(img => img.setAttribute("theme", "dark"));
+    document.querySelectorAll(".vimeo, .youtube, .chart").forEach(video => video.setAttribute("theme", "dark"));
+    document.getElementById("dark-mode").setAttribute("title", "Switch to light theme");
+  }
+
+  document.addEventListener('click', function(ev) {
+    if (ev.target.matches('#nav-search-btn') || ev.target.matches('#nav-search-btn-icon')) {
+      openSearchModal();
+    }
+    else if (ev.target.matches('#close-modal-btn')
+    || ev.target.matches('#close-modal-btn-icon')
+    || !ev.target.closest('#search-modal')) {
+      closeSearchModal();
+    }
+  });
+
+  document.addEventListener('keydown', function(event) {
+    if (event.altKey && event.key === 's') {
+      if (document.getElementById('search-modal').classList.contains('hidden')) {
+        openSearchModal();
+      } else {
+        closeSearchModal();
+      }
+    }
+  });
+
+  document.addEventListener('keyup', function(ev) {
+    if (ev.key === "Escape") {
+      closeSearchModal();
+    }
+  });
+
+  document.getElementById("search").addEventListener("keyup", () => {
+    search();
+  });
+
+  if (typeof mermaid !== "undefined") {
+    mermaid.initialize({ startOnLoad: true });
+  }
+
+  if (typeof renderMathInElement !== "undefined") {
+    renderMathInElement(document.body, {
+      delimiters: [
+        { left: '$$', right: '$$', display: true },
+        { left: '$', right: '$', display: false },
+        { left: '\\(', right: '\\)', display: false },
+        { left: '\\[', right: '\\]', display: true }
+      ]
+    });
+  }
+};
+
+if (document.readyState === 'loading') {  // Loading hasn't finished yet
+  document.addEventListener('DOMContentLoaded', documentReadyCallback);
+} else {  // `DOMContentLoaded` has already fired
+  documentReadyCallback();
 }
\ No newline at end of file