add search bar to all browsing menus

Makefile

@@ -7,6 +7,7 @@ install:
 	cp styles.css /opt/notes2web
 	cp fuse.js /opt/notes2web
 	cp search.js /opt/notes2web
+	cp indexsearch.js /opt/notes2web
 	cp toc_search.js /opt/notes2web
 	cp permalink.js /opt/notes2web
 

indexsearch.js

@@ -0,0 +1,75 @@
+const HEADERS = "headers"
+const PATH = "path"
+const TAGS = "tags"
+const TITLE = "title"
+
+const SEARCH_TIMEOUT_MS = 100
+var SEARCH_TIMEOUT_ID = -1
+
+const fuse = new Fuse(data, {
+  keys: [ 'title' ],
+  ignoreLocation: true,
+  threshhold: 0.4,
+  minMatchCharLength: 0,
+})
+
+const RESULTS_MAX = 15
+
+const searchBar = document.getElementById('search')
+const resultsDiv = document.getElementById('searchResults')
+
+var results = []
+
+function updateResultsWithTimeout() {
+  console.log("clearing timeout")
+  if (SEARCH_TIMEOUT_ID) SEARCH_TIMEOUT_ID = clearTimeout(SEARCH_TIMEOUT_ID)
+  SEARCH_TIMEOUT_ID = setTimeout(updateResults, SEARCH_TIMEOUT_MS)
+}
+
+function updateResults() {
+  console.log("updating results")
+  resultsDiv.innerHTML = ''
+  if (searchBar.value) results = fuse.search(searchBar.value, { limit: RESULTS_MAX }).map(r => r.item)
+  else results = data
+
+  results.forEach(r => {
+    wrapper = document.createElement('li')
+    wrapper.className = "article"
+
+    atag = document.createElement('a')
+    atag.href = r.path
+
+    ptag = document.createElement('p')
+    ptag.innerHTML = r.title + (r.isdirectory ? '/' : '')
+
+    atag.appendChild(ptag)
+    wrapper.appendChild(atag)
+    resultsDiv.appendChild(wrapper)
+  })
+}
+
+searchBar.addEventListener('keyup', e => {
+  console.log(e)
+  // if user pressed enter
+  if (e.keyCode === 13) {
+    if (e.shiftKey) {
+      window.open(results[0].path, '_blank')
+    } else {
+    window.location.href = results[0].path
+    }
+    return
+  }
+  updateResultsWithTimeout()
+})
+
+searchBar.addEventListener('change', updateResultsWithTimeout)
+
+const searchParams = new URL(window.location.href).searchParams;
+searchBar.value = searchParams.get('q');
+updateResults();
+
+console.log(results)
+
+if (searchParams.has('lucky')) {
+  window.location.href = results[0].path;
+}

notes2web.py

@@ -153,6 +153,7 @@ def get_args():
     parser.add_argument('-F', '--force', action="store_true", help="Generate new output html even if source file was modified before output html")
     parser.add_argument('--fuse', type=pathlib.Path, default=pathlib.Path('/opt/notes2web/fuse.js'))
     parser.add_argument('--searchjs', type=pathlib.Path, default=pathlib.Path('/opt/notes2web/search.js'))
+    parser.add_argument('--indexsearchjs', type=pathlib.Path, default=pathlib.Path('/opt/notes2web/indexsearch.js'))
     parser.add_argument('--permalinkjs', type=pathlib.Path, default=pathlib.Path('/opt/notes2web/permalink.js'))
     parser.add_argument('--tocsearchjs', type=pathlib.Path, default=pathlib.Path('/opt/notes2web/toc_search.js'))
     parser.add_argument('--toc-depth', type=int, default=6, dest='toc_depth')
@@ -317,14 +318,13 @@ def main(args):
         html = re.sub(r'\$extra_content\$', '', html)
 
         for entry in tag_dict[tag]:
-            html += f"<div class=\"article\"><a href=\"/{entry['path']}\">{entry['title']}</a></div>"
+            entry['path'] = '/' + entry['path']
-        html += INDEX_TEMPLATE_FOOT
+            html += f"<div class=\"article\"><a href=\"{entry['path']}\">{entry['title']}</a></div>"
+        html += re.sub('\$data\$', json.dumps(tag_dict[tag]), INDEX_TEMPLATE_FOOT)
 
         with open(tagdir.joinpath(f'{tag}.html'), 'w+') as fp:
             fp.write(html)
 
-
-
     dirs_to_index = [args.output_dir.name] + get_dirs_to_index(args.output_dir)
     print(f"{dirs_to_index=}")
     print(f"{dirs_with_index_article=}")
@@ -389,7 +389,7 @@ def main(args):
                         '</p></a>'
                     '</li>'
             )
-        html += INDEX_TEMPLATE_FOOT
+        html += re.sub(r'\$data\$', json.dumps(indexentries), INDEX_TEMPLATE_FOOT)
 
         with open(directory.joinpath('index.html'), 'w+') as fp:
             fp.write(html)
@@ -397,6 +397,7 @@ def main(args):
     shutil.copyfile(args.stylesheet, args.output_dir.joinpath('styles.css'))
     shutil.copyfile(args.fuse, args.output_dir.joinpath('fuse.js'))
     shutil.copyfile(args.searchjs, args.output_dir.joinpath('search.js'))
+    shutil.copyfile(args.indexsearchjs, args.output_dir.joinpath('indexsearch.js'))
     shutil.copyfile(args.tocsearchjs, args.output_dir.joinpath('toc_search.js'))
     shutil.copyfile(args.permalinkjs, args.output_dir.joinpath('permalink.js'))
     with open(args.output_dir.joinpath('index.html'), 'w+') as fp:

templates/indexfoot.html

@@ -1,4 +1,7 @@
 	</ul>
 	<p style="font-size: 0.7em;"> page generated by <a href="https://github.com/alvierahman90/notes2web">notes2web</a></p>
 	</div>
+	<script src="/fuse.js"> </script>
+	<script> const data = $data$ </script>
+	<script src="/indexsearch.js"> </script>
 </body>

templates/indexhead.html

@@ -10,5 +10,12 @@
 	<div id="content">
 	<h1>$title$</h1>
 	$extra_content$
-	<ul class="buttonlist">
+	<div id="searchWrapper">
+	<input id="search" placeholder="search" autocomplete="off" autofocus>
+	</div>
+	<p class="searchSmallText" style="margin-top: 0; text-align: center">
+		Press (<kbd>Shift</kbd>+)<kbd>Enter</kbd> to open first result (in new tab)
+	</p>
+
+	<ul id="searchResults" class="buttonlist">
 		<li class="article"><a href=".."><p>../</p></a></li>