Full-text-search via Stork

default/index.yaml

@@ -117,6 +117,108 @@ js:
     </script>
     <script async="" id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
 
+  stork-search-base: |
+    <link rel="stylesheet" href="https://files.stork-search.net/releases/v1.5.0/basic.css" />
+    <!-- Stork-search styling base stylings -->
+    <style>
+      .stork-wrapper .stork-output {
+        margin-top: 0;
+        border-radius: 0;
+        position: sticky;
+        border-color: rgba(99,102,241,var(--tw-border-opacity));
+        --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
+      }
+
+      .stork-wrapper .stork-message {
+        padding: 0.5rem 1rem;
+        border-radius: 0;
+        border-color: rgba(99,102,241,var(--tw-border-opacity));
+      }
+
+      .stork-wrapper .stork-close-button {
+        top: 0;
+        margin: 0.8em 0.6em;
+      }
+
+      .stork-wrapper .stork-close-button svg {
+        top: unset;
+        margin-left: auto;
+        margin-right: auto;
+      }
+    </style>
+    <!-- Stork search scripts, styling added in more-head.tpl -->
+    <script src="https://files.stork-search.net/releases/v1.5.0/stork.js"></script>
+    <ema:metadata>
+      <with var="template">
+        <script data-emanote-base-url="${value:baseUrl}">
+          (function() {
+            const indexName = 'emanote-search'; // used to match input[data-stork] attribute value
+            const baseUrl = document.currentScript.getAttribute('data-emanote-base-url') || '/';
+            const indexUrl = baseUrl + 'stork.st';
+            if (document.readyState !== 'complete') {
+              window.addEventListener('load', function() {
+                stork.register(indexName, indexUrl);
+              });
+            } else {
+              stork.register(indexName, indexUrl, {forceOverwrite: true});
+            }
+          })();
+        </script>
+      </with>
+    </ema:metadata>
+  stork-search-book: |
+    <snippet var="js.stork-search-base"/>
+    <!-- Stork-search styling, specific to Emanote's book layout -->
+    <style>
+      @media (min-width: 768px) {
+        .stork-wrapper .stork-output {
+          top: 0;
+          left: calc(100% - 1px);
+          position: absolute;
+          width: calc(768px - 12rem);
+        }
+
+        .stork-wrapper {
+          margin-right: -1px;
+        }
+      }
+
+      @media (min-width: 1024px) {
+        .stork-wrapper .stork-output {
+          width: calc(1024px - 12rem);
+        }
+      }
+
+      @media (min-width: 1280px) {
+        .stork-wrapper .stork-output {
+          width: calc(1280px - 16rem);
+        }
+      }
+
+      @media (min-width: 1536px) {
+        .stork-wrapper .stork-output {
+          width: calc(1536px - 16rem);
+        }
+      }
+
+      nav#sidebar {
+        z-index: 100;
+      }
+    </style>
+  stork-search-note: |
+    <snippet var="js.stork-search-base"/>
+    <!-- Stork-search styling, specific to Emanote's Neuron-like layout -->
+    <style>
+      .stork-wrapper .stork-output {
+        position: absolute;
+      }
+    </style>
+  # This adds styling for the "default layout", and should
+  # be used if you rely on Emanote's default layout.
+  stork-search: |
+    <snippet var="js.stork-search-book"/>
+
 emanote:
   # Whether to automatically treat folder notes as a folgezettel parent of its contents
   folder-folgezettel: true

default/templates/base.tpl

@@ -46,4 +46,4 @@
   <body-main />
 </body>
 
-</html>
+</html>

default/templates/layouts/book.tpl

@@ -10,6 +10,7 @@
         <!-- Sidebar column -->
         <nav id="sidebar"
           class="flex-shrink hidden leading-relaxed md:block md:sticky md:top-0 md:h-full md:w-48 xl:w-64">
+          <apply template="hooks/search-box" />
           <div class="px-2 py-2 text-gray-800">
 
             <div id="indexing-links" class="flex flex-row float-right p-2 space-x-2 text-gray-500">
@@ -76,4 +77,4 @@
       <apply template="components/footer" />
     </div>
   </bind>
-</apply>
+</apply>

default/templates/layouts/note.tpl

@@ -6,12 +6,13 @@
 
 <apply template="base">
   <bind tag="head-main">
-    <link rel="stylesheet" href="${ema:emanoteStaticLayerUrl}/inverted-tree.css" />
+    <link rel="stylesheet" href="/${ema:emanoteStaticLayerUrl}/inverted-tree.css" />
   </bind>
   <bind tag="body-main">
     <div class="${containerClass}">
       <div class="mt-2 md:mt-4">
         <apply template="components/note-uptree" />
+        <apply template="hooks/search-box" />
         <div class="md:shadow-2xl md:mb-8">
           <div class="flex-1 w-full overflow-x-auto bg-white">
             <main class="px-4 py-4">
@@ -30,4 +31,4 @@
       </div>
     </div>
   </bind>
-</apply>
+</apply>

docs/templates/hooks/search-box.tpl

@@ -0,0 +1,4 @@
+<div class="stork-wrapper">
+	<input data-stork="emanote-search" class="px-4 py-2 block w-full rounded-none border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 focus:outline-none" placeholder="Search..." />
+	<div data-stork="emanote-search-output" class="stork-output"></div>
+</div>