add search bar to all browsing menus

This commit is contained in:
Akbar Rahman 2023-02-16 17:20:17 +00:00
parent 0ae70aa2b3
commit 98a6649a39
Signed by: alvierahman90
GPG Key ID: 20609519444A1269
5 changed files with 93 additions and 6 deletions

View File

@ -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

75
indexsearch.js Normal file
View File

@ -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;
}

View File

@ -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>"
html += INDEX_TEMPLATE_FOOT
entry['path'] = '/' + entry['path']
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:

View File

@ -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>

View File

@ -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>